developers
/
orbit-basic
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

timeline and font update

This commit is contained in:
devin 2012-07-02 16:22:51 +08:00
parent 6533abf214
commit 08fd07b6aa
6 changed files with 69 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/orbitTimeline.js
View File

@ -29,7 +29,7 @@ var orbitTimeline = function(dom){
} }
this.constructTimeScale = function(callbackFn){ this.constructTimeScale = function(callbackFn){
var mon ="",year=""; var mon ="",year="";
var scale = $("<div id='scale_wrapper'></div>"); var scale = $("<div id='scale_wrapper' class='ph'></div>");
$.getJSON("desktop_orbit/getevents",{"event":"papers"},function(journals){ $.getJSON("desktop_orbit/getevents",{"event":"papers"},function(journals){
$.each(journals,function(x,journal){ $.each(journals,function(x,journal){
$.each(journal.papers,function(i,paper){ $.each(journal.papers,function(i,paper){
@ -42,16 +42,16 @@ var orbitTimeline = function(dom){
t.events.push(bubbleData); t.events.push(bubbleData);
if(cur_year != year){ if(cur_year != year){
year = cur_year; year = cur_year;
scale.append($("<div class='scale_region year'>"+(year+1)+"</div>")); scale.append($("<div class='group year w1 h1 thmtxt thmc1'>"+(year+1)+"</div>"));
} }
if(cur_mon != mon){ if(cur_mon != mon){
mon = cur_mon; mon = cur_mon;
console.log(parseInt(cur_mon)); console.log(parseInt(cur_mon));
scale.append($("<div class='scale_region month' data-content='"+cdt+"'><div class='month_heading'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>")) scale.append($("<div class='group month' data-content='"+cdt+"'><div class='month_heading hp vp'>"+t.monthList[parseInt(formname)]+"</div><div class='bubble_list'></div></div>"))
} }
}); });
}) })
scale.append($("<div class='scale_region year'>"+year+"</div>")); scale.append($("<div class='group year w1 h1 thmtxt thmc1'>"+year+"</div>"));
if(typeof callbackFn == "function"){ if(typeof callbackFn == "function"){
callbackFn.call(this,scale); callbackFn.call(this,scale);
} }
@ -75,7 +75,6 @@ var orbitTimeline = function(dom){
} }
var bt = (bubbleData.title.length > 70? bubbleData.title.substr(0,70) + "..." : bubbleData.title); var bt = (bubbleData.title.length > 70? bubbleData.title.substr(0,70) + "..." : bubbleData.title);
var bubble = $("<li class='bubble'><span>"+bt+"<span class='date'> - "+bubbleData.fulldate+"</span></span></li>"); var bubble = $("<li class='bubble'><span>"+bt+"<span class='date'> - "+bubbleData.fulldate+"</span></span></li>");
bubble.css("margin-left","25px");
targetul.prepend(bubble); targetul.prepend(bubble);
bubble.show(); bubble.show();
bubble.click(function(){ bubble.click(function(){

12
app/assets/javascripts/orbitdesktop.js
View File

@ -1000,8 +1000,8 @@ var orbitDesktop = function(dom){
var bindSecondaryHandlers = function(){ var bindSecondaryHandlers = function(){
$("#journal_p div#paper_list a").click(function(){ $("#journal_p div#paper_list a").click(function(){
if($(this).hasClass("item_check_status")){ if($(this).hasClass("icon-check-empty")){
$(this).toggleClass("checked"); $(this).switchClass("icon-check-empty","icon-check");
}else if($(this).hasClass("icon-star")){ }else if($(this).hasClass("icon-star")){
$(this).removeClass("icon-star").addClass("icon-star-empty"); $(this).removeClass("icon-star").addClass("icon-star-empty");
}else if($(this).hasClass("icon-star-empty")){ }else if($(this).hasClass("icon-star-empty")){
@ -1018,7 +1018,7 @@ var orbitDesktop = function(dom){
li; li;
$.each(journalData,function(i,journal){ $.each(journalData,function(i,journal){
$.each(journal.papers,function(j,paper){ $.each(journal.papers,function(j,paper){
li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="item_check_status"><span class="icon-ok"></span></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+journal.title+'</div><div class="list_t_des">'+paper.title+'</div></li>'); li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="icon-check-empty"></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+journal.title+'</div><div class="list_t_des">'+paper.title+'</div></li>');
column.find("ul").append(li); column.find("ul").append(li);
if(counter%5==0){ if(counter%5==0){
$("#journal_p div#paper_list div.overview").append(column); $("#journal_p div#paper_list div.overview").append(column);
@ -1038,7 +1038,7 @@ var orbitDesktop = function(dom){
li; li;
$.each(journalData,function(i,journal){ $.each(journalData,function(i,journal){
$.each(journal.papers,function(j,paper){ $.each(journal.papers,function(j,paper){
li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="item_check_status"><span class="icon-ok"></span></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div><div class="list_t_des">'+paper.keywords+'</div></li>'); li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="icon-check-empty"></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div><div class="list_t_des">'+paper.keywords+'</div></li>');
column.find("ul").append(li); column.find("ul").append(li);
if(counter%5==0){ if(counter%5==0){
$("#journal_p div#paper_list div.overview").append(column); $("#journal_p div#paper_list div.overview").append(column);
@ -1058,7 +1058,7 @@ var orbitDesktop = function(dom){
li; li;
$.each(journalData,function(i,journal){ $.each(journalData,function(i,journal){
$.each(journal.papers,function(j,paper){ $.each(journal.papers,function(j,paper){
li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="item_check_status"><span class="icon-ok"></span></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div></li>'); li = $('<li class="list_t_item"><div class="list_item_action"><a href="" class="icon-check-empty"></a></span></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div></li>');
column.find("ul").append(li); column.find("ul").append(li);
if(counter%5==0){ if(counter%5==0){
$("#journal_p div#paper_list div.overview").append(column); $("#journal_p div#paper_list div.overview").append(column);
@ -1077,7 +1077,7 @@ var orbitDesktop = function(dom){
li; li;
$.each(journalData,function(i,journal){ $.each(journalData,function(i,journal){
$.each(journal.papers,function(j,paper){ $.each(journal.papers,function(j,paper){
li = $('<li class="list_t_item" style="height:auto;"><div class="list_item_action"><a href="" class="item_check_status"><span class="icon-ok"></span></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div><div class="list_t_des">'+paper.abstract+paper.abstract+'</div></li>'); li = $('<li class="list_t_item" style="height:auto;"><div class="list_item_action"><a href="" class="icon-check-empty"></a><a href="" class="icon-star-empty"></a></div><div class="list_t_title">'+paper.title+'</div><div class="list_t_des">'+paper.abstract+paper.abstract+'</div></li>');
column.find("ul").append(li); column.find("ul").append(li);
$("#journal_p div#paper_list div.overview").append(column); $("#journal_p div#paper_list div.overview").append(column);
column = $('<div class="g_col list_t"><ul></ul></div>'); column = $('<div class="g_col list_t"><ul></ul></div>');

37
app/assets/stylesheets/desktopmain.css
View File

@ -251,6 +251,15 @@ a:focus { outline: none; }
.sdm_o a { display: block; } .sdm_o a { display: block; }
.sdm_o .admtxt { display: block; line-height: 36px; } .sdm_o .admtxt { display: block; line-height: 36px; }
/* with indicator */
.sdm_mdr .sdm_t {
padding-right: 12px;
}
.sdm_mdr .mdr {
position: absolute;
right: 0;
}
/* simple menu */ /* simple menu */
.s_menu { font-size: 15px; line-height: 36px; } .s_menu { font-size: 15px; line-height: 36px; }
.s_menu li { border-top: solid 1px #ddd; } .s_menu li { border-top: solid 1px #ddd; }
@ -268,6 +277,8 @@ a:focus { outline: none; }
.st_c { display: none; } .st_c { display: none; }
.st_c:first-child { display: block; } .st_c:first-child { display: block; }
/* header drop menu */
.sdm_mdr .sdm_o { top: 36px; }
/* tool bar */ /* tool bar */
.toolbar { .toolbar {
@ -668,15 +679,15 @@ a:focus { outline: none; }
} }
.list_item_action a { .list_item_action a {
display: block; display: block;
width: 15px; width: 20px;
height: 15px; height: 20px;
line-height: 15px; line-height: 20px;
margin: 1px 1px 6px 1px; margin: 1px 1px 6px 1px;
} }
.list_item_action .icon-ok { visibility: hidden; }
.list_item_action .item_check_status { outline: solid 1px #999; }
.list_item_action .icon-star-empty { color: #999; font-size: 20px; } .list_item_action .icon-star-empty { color: #999; font-size: 20px; }
.list_item_action .icon-star { color: #faa732; font-size: 20px; } .list_item_action .icon-star { color: #faa732; font-size: 20px; }
.list_item_action .icon-check-empty { color: #999; font-size: 20px; }
.list_item_action .icon-check { color: #333; font-size: 20px; }
.item_check_status:hover .icon-ok, .item_check_status.checked .icon-ok { visibility: visible; } .item_check_status:hover .icon-ok, .item_check_status.checked .icon-ok { visibility: visible; }
/* Journal Paper Add */ /* Journal Paper Add */
@ -715,15 +726,17 @@ a:focus { outline: none; }
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
/* Timeline */
#orbit .holder .admbg {
background-color: #efefef;
}
/*Tooltip popup */ /*Tooltip popup */
.desktop_toolpopup { .desktop_toolpopup {
position: absolute; position: absolute;
z-index: 10px; z-index: 10px;
display: none; display: none;
border-width: 3px;
border-radius: 5px;
border-color: black;
font-size: 15px;
padding: 10px; padding: 10px;
cursor: default; cursor: default;
background-color: #ccc; background-color: #ccc;
@ -732,11 +745,7 @@ a:focus { outline: none; }
margin: 3px 0 3px 0; margin: 3px 0 3px 0;
} }
.desktop_toolpopup h3 { .desktop_toolpopup h3 {
text-align: center;
font-weight: bolder;
margin-bottom: 5px;
} }
.desktop_toolpopup h2 { .desktop_toolpopup h2 {
font-weight: bolder;
margin-top: 3px;
} }

44
app/assets/stylesheets/orbitTimeline.css
View File

@ -1,7 +1,8 @@
.t_scale{ .t_scale{
min-width:2000px;
height: 516px; height: 516px;
bottom:0; }
#scale_wrapper {
overflow: hidden;
} }
#timline_marker{ #timline_marker{
width:100px; width:100px;
@ -12,58 +13,35 @@
border-width:5px; border-width:5px;
border-radius:5px; border-radius:5px;
} }
.t_scale{
border-style:solid;
border-width:2px;
border-radius:5px;
}
#t_container{ #t_container{
height:366px; height:366px;
} }
.scale_region { .scale_region {
height:516px;
border-style:solid;
border-width:0 2px 0 2px;
float: left;
margin-right:1px;
font-size:20px;
padding:5px;
} }
.scale_region span{ .group {
display: block; margin-right: 48px;
} }
.month{ .month{
} }
.year{ .year{
background-color: #c0bebe;
width:30px;
} }
.bubble{ .bubble{
cursor: pointer; cursor: pointer;
width:300px; width:300px;
height:30px;
border-style:solid;
border-width:5px;
float: left; float: left;
border-radius:5px;
margin-top: 10px;
margin-bottom:10px;
font-size:15px; font-size:15px;
padding:5px;
text-align:justify;
display: none; display: none;
} }
.month_heading{ .month_heading{
text-align: center; color: #333;
margin-bottom: 10px; font-family: 'Open sans', sans-serif;
font-size: 21px;
background-color: #efefef;
} }
.bubble_list ul{ .bubble_list ul{
width:350px;
float:left; float:left;
} width: 300px;
.bubble_list ul li span.date{ height: 440px;
font-weight:bolder;
float:right;
} }

2
app/assets/stylesheets/style.css.erb
View File

@ -1,4 +1,4 @@
@import url(http://fonts.googleapis.com/css?family=Cuprum); @import url(http://fonts.googleapis.com/css?family=Cuprum|Open+Sans:400,300);
@font-face{ @font-face{
font-family: 'WebSymbolsRegular'; font-family: 'WebSymbolsRegular';
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>); src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);

23
app/views/desktop/orbit.html.erb
View File

@ -4,9 +4,30 @@
<div class="dtitle w2 hh3 hp"> <div class="dtitle w2 hh3 hp">
<span class="thmtxth">TimeLine</span> <span class="thmtxth">TimeLine</span>
</div> </div>
<div class="w1 hh2 hp sdm sdm_mdr hfn">
<span class="tile thmc2"></span>
<div class="sdm_t hh2 thmtxt">following<span class="icon-chevron-down mdr"></span></div>
<div class="admbg sdm_o">
<ul>
<li><a class="w1 hp hh2 admtxt" href="">suggestion</a></li>
<li><a class="w1 hp hh2 admtxt" href="">popular</a></li>
</ul>
</div>
</div>
<div class="w1 hh2 hp sdm sdm_mdr hfn">
<span class="tile thmc2"></span>
<div class="sdm_t hh2 thmtxt">publication<span class="icon-chevron-down mdr"></span></div>
<div class="admbg sdm_o">
<ul>
<li><a class="w1 hp hh2 admtxt" href="">photos</a></li>
<li><a class="w1 hp hh2 admtxt" href="">papers</a></li>
<li><a class="w1 hp hh2 admtxt" href="">books</a></li>
</ul>
</div>
</div>
</div> </div>
<div id="holder"> <div id="holder">
<div id="panel_r" class="ph pw admbg hp" style="margin-left:0px; padding:0px;"> <div id="" class="ph admbg">
<div class="tinycanvas"> <div class="tinycanvas">
<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div> <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="viewport">