developers
/
Orbit
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2013-08-23 10:23:40 +08:00
parent 9fff3b9405
commit 980e63d830
9 changed files with 113 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/desktop.js
View File

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

12
app/assets/javascripts/jquery.isotope.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
app/assets/stylesheets/desktop/desktop-component.css
View File

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

2
app/assets/stylesheets/desktop/desktop-component.scss
View File

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

2
app/assets/stylesheets/desktop/desktop-main.css
View File

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

2
app/assets/stylesheets/desktop/desktop-main.scss
View File

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

8
app/assets/stylesheets/desktop/desktop-select2.css
View File

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

20
vendor/built_in_modules/personal_journal/app/assets/javascripts/personal_journal/desktop/journal_pages.js vendored
View File

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

121
vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/_form.html.erb vendored
View File

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