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

app/assets/javascripts/desktop.js

@@ -16,4 +16,5 @@
 //= require orbitTimeline
 //= require orbitdesktop
 //= require jquery.gridster
+//= require jquery.isotope.min
 //= require desktop/books_pages

app/assets/stylesheets/desktop/desktop-component.css

@@ -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%; }

app/assets/stylesheets/desktop/desktop-component.scss

@@ -1,6 +1,6 @@
 @import "desktop-helper";
 
-.noSelect {
+.noSelect, .noSelect * {
 	@include no-select;
 }
 

app/assets/stylesheets/desktop/desktop-main.css

@@ -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;

app/assets/stylesheets/desktop/desktop-main.scss

@@ -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;

app/assets/stylesheets/desktop/desktop-select2.css

@@ -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; }
 

vendor/built_in_modules/personal_journal/app/assets/javascripts/personal_journal/desktop/journal_pages.js

@@ -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();

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb

@@ -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="overview" content-layout="simple">
-  <div class="scrollbar sb_h vp">
+          <ul class="s_form isotope">
-    <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>
             <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">
+<style>
-        <div class="s_form">
+  #side {
-          <ul>
+    height: auto;
-            <li class="s_grid_row">
+    min-height: 516px;
-            <%= f.text_area :abstract, size: "20x22", placeholder: t("personal_journal.abstract"), class: "s_grid_12 s_grid s_grid_h_10"%>
+    right: 0;
-            </li>
+    bottom: 12px;
-          </ul>
+  }
-        </div>
+  #rwidget {
-      </div>
+    height: 100%;
-    </div>
+  }
-    </div>
+  #container {
-<!--   </div>
+    padding: 0;
-</div>
+    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);