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

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="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);