isotope embedded inside desktop kernel

This commit is contained in:
Harry Bomrah 2013-08-28 16:30:08 +08:00
parent 4a68b1edb6
commit 8b1702f358
13 changed files with 197 additions and 69 deletions

View File

@ -17,4 +17,5 @@
//= require desktop/jquery.gridster
//= require desktop/books_pages
//= require select2
//= require jquery.isotope.min.js
//= require orbit_js_1.0.1-front-end

View File

@ -330,13 +330,9 @@ var orbitDesktop = function(dom){
});
$(window).resize(function(){
// var ww = $(window).width();
// $("img#thmbackground").attr({"width":ww});
// if( $('.tinycanvas').length > 0 ){
$('.tinycanvas').tinyscrollbar_update('relative');
// }
if($(o.contentHolder).find("div.app_frame").length > 0){
$(o.contentHolder).find("div.app_frame").each(function(){
if($("body").find("div.app_frame").length > 0){
$("body").find("div.app_frame").each(function(){
var app_holder_height = $(this).height() - 60;
var app_holder_width = $(this).width();
$(this).find("div.app_holder").height(app_holder_height);
@ -361,14 +357,6 @@ var orbitDesktop = function(dom){
var extractLast = function( term ) {
return split( term ).pop();
}
// $("body").on("keydown","*[autocomplete]", function( event ) {
// var autocompleteList = $(this).attr("autocomplete-list");
// console.log($(this));
// });
//
};
this.layout_data = function(h){
@ -460,13 +448,51 @@ var orbitDesktop = function(dom){
$("div[container=true] div.overview").html(f.markup);
var settings = {main : ".tinycanvas"};
var tsettings = {};
var ist = function(){
$('#holder').css('height', $('#container').height() - 72);
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
var dom = $("*[isotope=true]").isotope({
layoutMode: 'fitColumns',
onLayout: function($elems, instance){
$elems.width(base_width);
setTimeout(function(){
dom.isotope('reLayout',function(){
$("div[container=true] div.overview").width(dom.width());
o.tinyscrollbar.tinyscrollbar_update("relative");
})
},500);
}
});
$(window).resize(function(){
if($("*[isotope=true]").length > 0){
$('#holder').css('height', $('#container').height() - 72);
$('.tinycanvas').css('height', $('#panel_r').height() - 36);
$(".isotope").isotope('reLayout',function(){
$("div[container=true] div.overview").width($(".isotope").width());
o.tinyscrollbar.tinyscrollbar_update("relative");
});
}
});
$('.s_grid_h_full').parent().css('height','100%');
return dom;
}
if($("*[isotope=true]").length > 0){
var dom = ist();
f.width = dom.width();
}
if(f.width){
settings.fill = f.width;
}
if(pagination_variable){
var page_no = 1;
tsettings.onMove = function(x){
if(x < 50){
tsettings.onMove = function(e){
if(e < 50){
if(!pagination_link)
pagination_link = o.lastlink;
if(o.paging){
@ -477,6 +503,8 @@ var orbitDesktop = function(dom){
}
}
}
// call other functions here
o.tinyscrollbar_ext(settings,tsettings);
o.simple_drop_down();
@ -484,6 +512,7 @@ var orbitDesktop = function(dom){
o.use_select2();
o.check_simple_layout();
}
this.paging = true;
this.pagination = function(link,variable,page_no){
var retvalue = null;
@ -492,7 +521,20 @@ var orbitDesktop = function(dom){
type : "get",
success : function(html){
var f = o.layout_data.generate_layout_html(html);
// console.log(f.total)
if($("*[isotope=true]").length > 0){
var $ul = $(f.markup),
elems = $ul.children("li[item=true]");
if(elems.length > 1)
o.paging = true;
else
o.paging = false;
$(".isotope").append(elems).isotope("appended",elems,function(){
$(".isotope").isotope("reLayout",function(){
$("div[container=true] div.overview").width($(".isotope").width()+50);
o.tinyscrollbar.tinyscrollbar_update("relative");
})
});
}else{
if(f.total > 0){
$("div[container=true] .overview").append(f.markup);
if(f.width){
@ -505,6 +547,7 @@ var orbitDesktop = function(dom){
o.paging = false;
}
}
}
});
}

File diff suppressed because one or more lines are too long

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

View File

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

View File

@ -223,7 +223,8 @@ a.admtxt.admbg2:hover {
width: 100%; }
.pw {
width: 540px; }
/*width: 540px;*/
}
.h1 {
height: 120px; }
@ -375,7 +376,8 @@ a.admtxt.admbg2:hover {
background-color: #fff;
margin-left: 252px;
position: relative;
width: auto; }
width: calc(100% - 272px);
}
/* Desktop Notification */
#orbitnote {
@ -798,7 +800,7 @@ a.admtxt.admbg2:hover {
/*Tooltip popup */
.desktop_toolpopup {
position: absolute;
z-index: 10px;
z-index: 10;
display: none;
padding: 12px;
cursor: default;

View File

@ -824,7 +824,7 @@ a:focus { outline: none; }
/*Tooltip popup */
.desktop_toolpopup {
position: absolute;
z-index: 10px;
z-index: 10;
display: none;
padding: 12px;
cursor: default;

View File

@ -1,10 +1,10 @@
@media only screen and (min-width: 1240px){
#panel_r.pw { width: 800px; }
/*#panel_r.pw { width: 800px; }*/
}
@media only screen and (min-width: 1900px){
#panel_r.pw { width: 1400px; }
/*#panel_r.pw { width: 1400px; }*/
}

View File

@ -14,4 +14,5 @@
*= require desktop/desktop-media
*= require desktop/desktop-select2
*= require desktop/desktop-timeline
*= require desktop/isotope.css
*/

View File

@ -0,0 +1,72 @@
#side {
height: auto;
min-height: 516px;
right: 0;
bottom: 12px;
}
#rwidget {
height: 100%;
}
#container {
padding: 0;
position: absolute;
top: 0;
right: 0;
bottom: 12px;
left: 0;
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%;
}
.list_t_item {
float: left;
display: inline;
}
.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;
}

View File

@ -9,6 +9,22 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
end
end
def get_height view
case view
when "journal_title"
height = "50px"
when "keywords"
height = "100px"
when "abstract"
height = "200px"
when "file"
height = "200px"
else
height = "50px"
end
height
end
def marker
content_tag :div,
:class => "list_item_action" do

View File

@ -30,10 +30,8 @@
</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" base-width="420">
<ul class="s_form" isotope="true">
<% @site_valid_locales.each_with_index do |locale, i| %>
<% style = locale != I18n.locale.to_s ? 'style=display:none;' : "" %>
<% data = "data-language=" + locale %>
@ -94,12 +92,7 @@
<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 +166,7 @@
<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,23 +196,13 @@
</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>
</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"%>
<%= 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>

View File

@ -77,8 +77,10 @@
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
</div>
</div>
<div class="overview" page-name="journal_p_list" content-layout="datalist" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
<div class="overview" page-name="journal_p_list" content-layout="simple" base-width="300" per-column="<%= @per_column.to_s %>" pagination-var="view=<%= @view_by %>&page" >
<ul isotope="true">
<% @writing_journals.each do |w| %>
<%= publication_record w, @view_by%>
<% end %>
</ul>
</div>