isotope embedded inside desktop kernel
This commit is contained in:
parent
4a68b1edb6
commit
8b1702f358
|
@ -17,4 +17,5 @@
|
||||||
//= require desktop/jquery.gridster
|
//= require desktop/jquery.gridster
|
||||||
//= require desktop/books_pages
|
//= require desktop/books_pages
|
||||||
//= require select2
|
//= require select2
|
||||||
|
//= require jquery.isotope.min.js
|
||||||
//= require orbit_js_1.0.1-front-end
|
//= require orbit_js_1.0.1-front-end
|
||||||
|
|
|
@ -330,13 +330,9 @@ var orbitDesktop = function(dom){
|
||||||
});
|
});
|
||||||
|
|
||||||
$(window).resize(function(){
|
$(window).resize(function(){
|
||||||
// var ww = $(window).width();
|
$('.tinycanvas').tinyscrollbar_update('relative');
|
||||||
// $("img#thmbackground").attr({"width":ww});
|
if($("body").find("div.app_frame").length > 0){
|
||||||
// if( $('.tinycanvas').length > 0 ){
|
$("body").find("div.app_frame").each(function(){
|
||||||
$('.tinycanvas').tinyscrollbar_update('relative');
|
|
||||||
// }
|
|
||||||
if($(o.contentHolder).find("div.app_frame").length > 0){
|
|
||||||
$(o.contentHolder).find("div.app_frame").each(function(){
|
|
||||||
var app_holder_height = $(this).height() - 60;
|
var app_holder_height = $(this).height() - 60;
|
||||||
var app_holder_width = $(this).width();
|
var app_holder_width = $(this).width();
|
||||||
$(this).find("div.app_holder").height(app_holder_height);
|
$(this).find("div.app_holder").height(app_holder_height);
|
||||||
|
@ -361,14 +357,6 @@ var orbitDesktop = function(dom){
|
||||||
var extractLast = function( term ) {
|
var extractLast = function( term ) {
|
||||||
return split( term ).pop();
|
return split( term ).pop();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// $("body").on("keydown","*[autocomplete]", function( event ) {
|
|
||||||
// var autocompleteList = $(this).attr("autocomplete-list");
|
|
||||||
// console.log($(this));
|
|
||||||
|
|
||||||
// });
|
|
||||||
//
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.layout_data = function(h){
|
this.layout_data = function(h){
|
||||||
|
@ -460,13 +448,51 @@ var orbitDesktop = function(dom){
|
||||||
$("div[container=true] div.overview").html(f.markup);
|
$("div[container=true] div.overview").html(f.markup);
|
||||||
var settings = {main : ".tinycanvas"};
|
var settings = {main : ".tinycanvas"};
|
||||||
var tsettings = {};
|
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){
|
if(f.width){
|
||||||
settings.fill = f.width;
|
settings.fill = f.width;
|
||||||
}
|
}
|
||||||
if(pagination_variable){
|
if(pagination_variable){
|
||||||
var page_no = 1;
|
var page_no = 1;
|
||||||
tsettings.onMove = function(x){
|
tsettings.onMove = function(e){
|
||||||
if(x < 50){
|
if(e < 50){
|
||||||
if(!pagination_link)
|
if(!pagination_link)
|
||||||
pagination_link = o.lastlink;
|
pagination_link = o.lastlink;
|
||||||
if(o.paging){
|
if(o.paging){
|
||||||
|
@ -477,6 +503,8 @@ var orbitDesktop = function(dom){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// call other functions here
|
// call other functions here
|
||||||
o.tinyscrollbar_ext(settings,tsettings);
|
o.tinyscrollbar_ext(settings,tsettings);
|
||||||
o.simple_drop_down();
|
o.simple_drop_down();
|
||||||
|
@ -484,6 +512,7 @@ var orbitDesktop = function(dom){
|
||||||
o.use_select2();
|
o.use_select2();
|
||||||
o.check_simple_layout();
|
o.check_simple_layout();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.paging = true;
|
this.paging = true;
|
||||||
this.pagination = function(link,variable,page_no){
|
this.pagination = function(link,variable,page_no){
|
||||||
var retvalue = null;
|
var retvalue = null;
|
||||||
|
@ -492,17 +521,31 @@ var orbitDesktop = function(dom){
|
||||||
type : "get",
|
type : "get",
|
||||||
success : function(html){
|
success : function(html){
|
||||||
var f = o.layout_data.generate_layout_html(html);
|
var f = o.layout_data.generate_layout_html(html);
|
||||||
// console.log(f.total)
|
if($("*[isotope=true]").length > 0){
|
||||||
if(f.total > 0){
|
var $ul = $(f.markup),
|
||||||
$("div[container=true] .overview").append(f.markup);
|
elems = $ul.children("li[item=true]");
|
||||||
if(f.width){
|
if(elems.length > 1)
|
||||||
var w = $("div[container=true] .overview").width();
|
o.paging = true;
|
||||||
$("div[container=true] .overview").width(w+f.width);
|
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){
|
||||||
|
var w = $("div[container=true] .overview").width();
|
||||||
|
$("div[container=true] .overview").width(w+f.width);
|
||||||
|
}
|
||||||
|
o.tinyscrollbar.tinyscrollbar_update("relative");
|
||||||
|
o.paging = true;
|
||||||
|
} else {
|
||||||
|
o.paging = false;
|
||||||
}
|
}
|
||||||
o.tinyscrollbar.tinyscrollbar_update("relative");
|
|
||||||
o.paging = true;
|
|
||||||
} else {
|
|
||||||
o.paging = false;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,4 @@
|
||||||
.noSelect {
|
.noSelect, .noSelect * {
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-khtml-user-select: none;
|
-khtml-user-select: none;
|
||||||
|
@ -220,7 +220,7 @@
|
||||||
.s_form .s_table td {
|
.s_form .s_table td {
|
||||||
vertical-align: middle; }
|
vertical-align: middle; }
|
||||||
.s_form .s_table thead th {
|
.s_form .s_table thead th {
|
||||||
border-bottom: solid 1px #eeeeee; }
|
border-bottom: solid 1px #eee; }
|
||||||
|
|
||||||
/* simple select */
|
/* simple select */
|
||||||
.s_select_g {
|
.s_select_g {
|
||||||
|
@ -311,7 +311,7 @@
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
border: solid 2px white;
|
border: solid 2px #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
-webkit-transition: left 0.3s ease;
|
-webkit-transition: left 0.3s ease;
|
||||||
-moz-transition: left 0.3s ease;
|
-moz-transition: left 0.3s ease;
|
||||||
|
@ -366,7 +366,7 @@
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
.tinycanvas .overview > .column {
|
.tinycanvas .overview > .column {
|
||||||
float: left;
|
float: left;
|
||||||
border-right: solid 1px #eeeeee;
|
border-right: solid 1px #eee;
|
||||||
padding: 0 12px 0 0;
|
padding: 0 12px 0 0;
|
||||||
margin: 0 12px 0 0;
|
margin: 0 12px 0 0;
|
||||||
height: 100%; }
|
height: 100%; }
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
@import "desktop-helper";
|
@import "desktop-helper";
|
||||||
|
|
||||||
.noSelect {
|
.noSelect, .noSelect * {
|
||||||
@include no-select;
|
@include no-select;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -223,7 +223,8 @@ a.admtxt.admbg2:hover {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
|
||||||
.pw {
|
.pw {
|
||||||
width: 540px; }
|
/*width: 540px;*/
|
||||||
|
}
|
||||||
|
|
||||||
.h1 {
|
.h1 {
|
||||||
height: 120px; }
|
height: 120px; }
|
||||||
|
@ -375,7 +376,8 @@ a.admtxt.admbg2:hover {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
margin-left: 252px;
|
margin-left: 252px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: auto; }
|
width: calc(100% - 272px);
|
||||||
|
}
|
||||||
|
|
||||||
/* Desktop Notification */
|
/* Desktop Notification */
|
||||||
#orbitnote {
|
#orbitnote {
|
||||||
|
@ -798,7 +800,7 @@ a.admtxt.admbg2:hover {
|
||||||
/*Tooltip popup */
|
/*Tooltip popup */
|
||||||
.desktop_toolpopup {
|
.desktop_toolpopup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10px;
|
z-index: 10;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
|
@ -824,7 +824,7 @@ a:focus { outline: none; }
|
||||||
/*Tooltip popup */
|
/*Tooltip popup */
|
||||||
.desktop_toolpopup {
|
.desktop_toolpopup {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10px;
|
z-index: 10;
|
||||||
display: none;
|
display: none;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
@media only screen and (min-width: 1240px){
|
@media only screen and (min-width: 1240px){
|
||||||
|
|
||||||
#panel_r.pw { width: 800px; }
|
/*#panel_r.pw { width: 800px; }*/
|
||||||
|
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 1900px){
|
@media only screen and (min-width: 1900px){
|
||||||
|
|
||||||
#panel_r.pw { width: 1400px; }
|
/*#panel_r.pw { width: 1400px; }*/
|
||||||
|
|
||||||
}
|
}
|
|
@ -14,4 +14,5 @@
|
||||||
*= require desktop/desktop-media
|
*= require desktop/desktop-media
|
||||||
*= require desktop/desktop-select2
|
*= require desktop/desktop-select2
|
||||||
*= require desktop/desktop-timeline
|
*= require desktop/desktop-timeline
|
||||||
|
*= require desktop/isotope.css
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -9,6 +9,22 @@ module Panel::PersonalJournal::Desktop::JournalPagesHelper
|
||||||
end
|
end
|
||||||
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
|
def marker
|
||||||
content_tag :div,
|
content_tag :div,
|
||||||
:class => "list_item_action" do
|
:class => "list_item_action" do
|
||||||
|
|
|
@ -30,10 +30,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="viewport"> -->
|
<div class="viewport"> -->
|
||||||
<div class="overview" content-layout="column" base-width="420">
|
<div class="overview" content-layout="simple" base-width="420">
|
||||||
<div column="true">
|
<ul class="s_form" isotope="true">
|
||||||
<div class="s_form">
|
|
||||||
<ul>
|
|
||||||
<% @site_valid_locales.each_with_index do |locale, i| %>
|
<% @site_valid_locales.each_with_index do |locale, i| %>
|
||||||
<% style = locale != I18n.locale.to_s ? 'style=display:none;' : "" %>
|
<% style = locale != I18n.locale.to_s ? 'style=display:none;' : "" %>
|
||||||
<% data = "data-language=" + locale %>
|
<% data = "data-language=" + locale %>
|
||||||
|
@ -94,12 +92,7 @@
|
||||||
<label class="s_grid_1 s_grid" for="">共</label>
|
<label class="s_grid_1 s_grid" for="">共</label>
|
||||||
<%= f.text_field :total_pages, size: "20", class: "s_grid_2 s_grid"%>
|
<%= f.text_field :total_pages, size: "20", class: "s_grid_2 s_grid"%>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div column="true">
|
|
||||||
<div class="s_form">
|
|
||||||
<ul>
|
|
||||||
<li class="s_grid_row">
|
<li class="s_grid_row">
|
||||||
<%= f.text_area :author_tokens,
|
<%= f.text_area :author_tokens,
|
||||||
class: "s_grid_12 s_grid",
|
class: "s_grid_12 s_grid",
|
||||||
|
@ -173,12 +166,7 @@
|
||||||
<li class="s_grid_row">
|
<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"%>
|
<%= 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>
|
</li>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div column="true">
|
|
||||||
<div class="s_form">
|
|
||||||
<ul>
|
|
||||||
<li class="s_grid_row">
|
<li class="s_grid_row">
|
||||||
<table class="s_table">
|
<table class="s_table">
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -208,23 +196,13 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div column="true">
|
|
||||||
<div class="s_form">
|
|
||||||
<ul>
|
|
||||||
<li class="s_grid_row">
|
<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>
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div column="true">
|
|
||||||
<div class="s_form">
|
|
||||||
<ul>
|
|
||||||
<li class="s_grid_row">
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,8 +77,10 @@
|
||||||
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
|
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
|
||||||
</div>
|
</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| %>
|
<% @writing_journals.each do |w| %>
|
||||||
<%= publication_record w, @view_by%>
|
<%= publication_record w, @view_by%>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
Loading…
Reference in New Issue