isotope experiment for form
1. This is only for DEMO, please don't merge this commit into any branch 2. This demo is only inside the Journal Paper > Add/Edit page 3. Please check the Diff from the original HTML 4. Please update the 'desktop-main.scss', 'desktop-main.css', 'desktop-component.scss', 'desktop-component.css' for update and mistake
This commit is contained in:
devin chen
parent
9fff3b9405
commit
980e63d830
|
|
@ -16,4 +16,5 @@
|
|||
//= require orbitTimeline
|
||||
//= require orbitdesktop
|
||||
//= require jquery.gridster
|
||||
//= require jquery.isotope.min
|
||||
//= require desktop/books_pages
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
.noSelect {
|
||||
.noSelect, .noSelect * {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -220,7 +220,7 @@
|
|||
.s_form .s_table td {
|
||||
vertical-align: middle; }
|
||||
.s_form .s_table thead th {
|
||||
border-bottom: solid 1px #eeeeee; }
|
||||
border-bottom: solid 1px #eee; }
|
||||
|
||||
/* simple select */
|
||||
.s_select_g {
|
||||
|
|
@ -311,7 +311,7 @@
|
|||
width: 16px;
|
||||
height: 20px;
|
||||
background-color: #000;
|
||||
border: solid 2px white;
|
||||
border: solid 2px #fff;
|
||||
cursor: pointer;
|
||||
-webkit-transition: left 0.3s ease;
|
||||
-moz-transition: left 0.3s ease;
|
||||
|
|
@ -366,7 +366,7 @@
|
|||
width: 100%; }
|
||||
.tinycanvas .overview > .column {
|
||||
float: left;
|
||||
border-right: solid 1px #eeeeee;
|
||||
border-right: solid 1px #eee;
|
||||
padding: 0 12px 0 0;
|
||||
margin: 0 12px 0 0;
|
||||
height: 100%; }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "desktop-helper";
|
||||
|
||||
.noSelect {
|
||||
.noSelect, .noSelect * {
|
||||
@include no-select;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -797,7 +797,7 @@ a.admtxt.admbg2:hover {
|
|||
/*Tooltip popup */
|
||||
.desktop_toolpopup {
|
||||
position: absolute;
|
||||
z-index: 10px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -813,7 +813,7 @@ a.admtxt.admbg2:hover {
|
|||
/*Tooltip popup */
|
||||
.desktop_toolpopup {
|
||||
position: absolute;
|
||||
z-index: 10px;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
padding: 12px;
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ disabled look for disabled choices in the results dropdown
|
|||
.select2-container.select2-container-disabled .select2-choice {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default; }
|
||||
|
||||
.select2-container.select2-container-disabled .select2-choice div {
|
||||
|
|
@ -326,7 +326,7 @@ disabled look for disabled choices in the results dropdown
|
|||
background: white url("select2/spinner.gif") no-repeat 100% !important; }
|
||||
|
||||
.select2-default {
|
||||
color: #999999 !important; }
|
||||
color: #999 !important; }
|
||||
|
||||
.select2-container-multi .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 18px;
|
||||
|
|
@ -374,12 +374,12 @@ disabled look for disabled choices in the results dropdown
|
|||
.select2-container-multi.select2-container-disabled .select2-choices {
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
cursor: default; }
|
||||
|
||||
.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
|
||||
padding: 3px 5px 3px 5px;
|
||||
border: 1px solid #dddddd;
|
||||
border: 1px solid #ddd;
|
||||
background-image: none;
|
||||
background-color: #f4f4f4; }
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,25 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
|
|||
|
||||
// console.log("hi");
|
||||
var bindHandlers = function(){
|
||||
// isotope experiment
|
||||
$('#holder').css('height', $('#container').height() - 72);
|
||||
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
|
||||
$(window).resize(function(){
|
||||
$('#holder').css('height', $('#container').height() - 72);
|
||||
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
|
||||
$('.isotope').isotope('reLayout');
|
||||
});
|
||||
|
||||
$('.isotope').isotope({
|
||||
layoutMode: 'masonryHorizontal',
|
||||
masonryHorizontal: {
|
||||
rowHeight: 44
|
||||
}
|
||||
});
|
||||
|
||||
$('.s_grid_h_full').parent().css('height','100%');
|
||||
$('.tinycanvas').tinyscrollbar_update('relative');
|
||||
$('.isotope').isotope('reLayout');
|
||||
|
||||
}
|
||||
bindHandlers();
|
||||
|
|
|
|||
|
|
@ -23,19 +23,8 @@
|
|||
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="paper_add" class="tinycanvas vp">
|
||||
<div class="scrollbar sb_h vp">
|
||||
<div class="track">
|
||||
<div class="thumb thmc2">
|
||||
<div class="end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="viewport"> -->
|
||||
<div class="overview" content-layout="column" base-width="420">
|
||||
<div column="true">
|
||||
<div class="s_form">
|
||||
<ul>
|
||||
<div class="overview" content-layout="simple">
|
||||
<ul class="s_form isotope">
|
||||
<li class="s_grid_row">
|
||||
<%= f.fields_for :paper_title_translations do |f| %>
|
||||
<%= f.text_area locale,
|
||||
|
|
@ -94,12 +83,6 @@
|
|||
<label class="s_grid_1 s_grid" for="">共</label>
|
||||
<%= f.text_field :total_pages, size: "20", class: "s_grid_2 s_grid"%>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div column="true">
|
||||
<div class="s_form">
|
||||
<ul>
|
||||
<li class="s_grid_row">
|
||||
<%= f.text_area :author_tokens,
|
||||
class: "s_grid_12 s_grid",
|
||||
|
|
@ -173,12 +156,6 @@
|
|||
<li class="s_grid_row">
|
||||
<%= label_tag("", t("personal_journal.url"), class: "s_grid_4 s_grid") %><%= f.text_field :url, size: "20", class: "s_grid_8 s_grid"%>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div column="true">
|
||||
<div class="s_form">
|
||||
<ul>
|
||||
<li class="s_grid_row">
|
||||
<table class="s_table">
|
||||
<thead>
|
||||
|
|
@ -208,33 +185,85 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div column="true">
|
||||
<div class="s_form">
|
||||
<ul>
|
||||
<li class="s_grid_row">
|
||||
<%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10"%>
|
||||
<%= f.text_area :note, size: "20x22", placeholder: t("personal_journal.note"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
|
||||
</li>
|
||||
<li class="s_grid_row">
|
||||
<%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10 s_grid_h_full"%>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div column="true">
|
||||
<div class="s_form">
|
||||
<ul>
|
||||
<li class="s_grid_row">
|
||||
<%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10"%>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div>
|
||||
</div>
|
||||
-->
|
||||
<style>
|
||||
#side {
|
||||
height: auto;
|
||||
min-height: 516px;
|
||||
right: 0;
|
||||
bottom: 12px;
|
||||
}
|
||||
#rwidget {
|
||||
height: 100%;
|
||||
}
|
||||
#container {
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: 0;
|
||||
bottom: 12px;
|
||||
left: 156px;
|
||||
min-height: 588px;
|
||||
}
|
||||
#panel_l, #panel_r {
|
||||
height: 100%;
|
||||
}
|
||||
.isotope {
|
||||
height: 100%;
|
||||
}
|
||||
.isotope .s_grid_row {
|
||||
width: 420px;
|
||||
margin: 0 24px 12px 0;
|
||||
}
|
||||
.s_grid_row .s_grid_h_full {
|
||||
height: 100%;
|
||||
}
|
||||
.isotope,
|
||||
.isotope .isotope-item {
|
||||
/* change duration value to whatever you like */
|
||||
-webkit-transition-duration: 0.8s;
|
||||
-moz-transition-duration: 0.8s;
|
||||
-ms-transition-duration: 0.8s;
|
||||
-o-transition-duration: 0.8s;
|
||||
transition-duration: 0.8s;
|
||||
}
|
||||
|
||||
.isotope {
|
||||
-webkit-transition-property: height, width;
|
||||
-moz-transition-property: height, width;
|
||||
-ms-transition-property: height, width;
|
||||
-o-transition-property: height, width;
|
||||
transition-property: height, width;
|
||||
}
|
||||
|
||||
.isotope .isotope-item {
|
||||
-webkit-transition-property: -webkit-transform, opacity;
|
||||
-moz-transition-property: -moz-transform, opacity;
|
||||
-ms-transition-property: -ms-transform, opacity;
|
||||
-o-transition-property: -o-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
|
||||
/**** disabling Isotope CSS3 transitions ****/
|
||||
|
||||
.isotope.no-transition,
|
||||
.isotope.no-transition .isotope-item,
|
||||
.isotope .isotope-item.no-transition {
|
||||
-webkit-transition-duration: 0s;
|
||||
-moz-transition-duration: 0s;
|
||||
-ms-transition-duration: 0s;
|
||||
-o-transition-duration: 0s;
|
||||
transition-duration: 0s;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
var get_html = function(old_id,new_id){
|
||||
return ("<%= escape_javascript(add_attribute 'form_file', f, :writing_journal_files) %>").replace(old_id, new_id);
|
||||
|
|
|
|||
Loading…
Reference in New Issue