timeline and font update
This commit is contained in:
devin
parent
6533abf214
commit
08fd07b6aa
|
|
@ -29,7 +29,7 @@ var orbitTimeline = function(dom){
|
|||
}
|
||||
this.constructTimeScale = function(callbackFn){
|
||||
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){
|
||||
$.each(journals,function(x,journal){
|
||||
$.each(journal.papers,function(i,paper){
|
||||
|
|
@ -42,16 +42,16 @@ var orbitTimeline = function(dom){
|
|||
t.events.push(bubbleData);
|
||||
if(cur_year != 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){
|
||||
mon = 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"){
|
||||
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 bubble = $("<li class='bubble'><span>"+bt+"<span class='date'> - "+bubbleData.fulldate+"</span></span></li>");
|
||||
bubble.css("margin-left","25px");
|
||||
targetul.prepend(bubble);
|
||||
bubble.show();
|
||||
bubble.click(function(){
|
||||
|
|
|
|||
|
|
@ -1000,8 +1000,8 @@ var orbitDesktop = function(dom){
|
|||
|
||||
var bindSecondaryHandlers = function(){
|
||||
$("#journal_p div#paper_list a").click(function(){
|
||||
if($(this).hasClass("item_check_status")){
|
||||
$(this).toggleClass("checked");
|
||||
if($(this).hasClass("icon-check-empty")){
|
||||
$(this).switchClass("icon-check-empty","icon-check");
|
||||
}else if($(this).hasClass("icon-star")){
|
||||
$(this).removeClass("icon-star").addClass("icon-star-empty");
|
||||
}else if($(this).hasClass("icon-star-empty")){
|
||||
|
|
@ -1018,7 +1018,7 @@ var orbitDesktop = function(dom){
|
|||
li;
|
||||
$.each(journalData,function(i,journal){
|
||||
$.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);
|
||||
if(counter%5==0){
|
||||
$("#journal_p div#paper_list div.overview").append(column);
|
||||
|
|
@ -1038,7 +1038,7 @@ var orbitDesktop = function(dom){
|
|||
li;
|
||||
$.each(journalData,function(i,journal){
|
||||
$.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);
|
||||
if(counter%5==0){
|
||||
$("#journal_p div#paper_list div.overview").append(column);
|
||||
|
|
@ -1058,7 +1058,7 @@ var orbitDesktop = function(dom){
|
|||
li;
|
||||
$.each(journalData,function(i,journal){
|
||||
$.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);
|
||||
if(counter%5==0){
|
||||
$("#journal_p div#paper_list div.overview").append(column);
|
||||
|
|
@ -1077,7 +1077,7 @@ var orbitDesktop = function(dom){
|
|||
li;
|
||||
$.each(journalData,function(i,journal){
|
||||
$.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);
|
||||
$("#journal_p div#paper_list div.overview").append(column);
|
||||
column = $('<div class="g_col list_t"><ul></ul></div>');
|
||||
|
|
|
|||
|
|
@ -251,6 +251,15 @@ a:focus { outline: none; }
|
|||
.sdm_o a { display: block; }
|
||||
.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 */
|
||||
.s_menu { font-size: 15px; line-height: 36px; }
|
||||
.s_menu li { border-top: solid 1px #ddd; }
|
||||
|
|
@ -268,6 +277,8 @@ a:focus { outline: none; }
|
|||
.st_c { display: none; }
|
||||
.st_c:first-child { display: block; }
|
||||
|
||||
/* header drop menu */
|
||||
.sdm_mdr .sdm_o { top: 36px; }
|
||||
|
||||
/* tool bar */
|
||||
.toolbar {
|
||||
|
|
@ -668,15 +679,15 @@ a:focus { outline: none; }
|
|||
}
|
||||
.list_item_action a {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
line-height: 15px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
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 { 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; }
|
||||
|
||||
/* Journal Paper Add */
|
||||
|
|
@ -715,15 +726,17 @@ a:focus { outline: none; }
|
|||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
#orbit .holder .admbg {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
/*Tooltip popup */
|
||||
.desktop_toolpopup {
|
||||
position: absolute;
|
||||
z-index: 10px;
|
||||
display: none;
|
||||
border-width: 3px;
|
||||
border-radius: 5px;
|
||||
border-color: black;
|
||||
font-size: 15px;
|
||||
padding: 10px;
|
||||
cursor: default;
|
||||
background-color: #ccc;
|
||||
|
|
@ -732,11 +745,7 @@ a:focus { outline: none; }
|
|||
margin: 3px 0 3px 0;
|
||||
}
|
||||
.desktop_toolpopup h3 {
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.desktop_toolpopup h2 {
|
||||
font-weight: bolder;
|
||||
margin-top: 3px;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.t_scale{
|
||||
min-width:2000px;
|
||||
height:516px;
|
||||
bottom:0;
|
||||
height: 516px;
|
||||
}
|
||||
#scale_wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
#timline_marker{
|
||||
width:100px;
|
||||
|
|
@ -12,58 +13,35 @@
|
|||
border-width:5px;
|
||||
border-radius:5px;
|
||||
}
|
||||
.t_scale{
|
||||
border-style:solid;
|
||||
border-width:2px;
|
||||
border-radius:5px;
|
||||
}
|
||||
#t_container{
|
||||
height:366px;
|
||||
}
|
||||
.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 {
|
||||
}
|
||||
.scale_region span{
|
||||
display: block;
|
||||
.group {
|
||||
margin-right: 48px;
|
||||
}
|
||||
.month{
|
||||
|
||||
}
|
||||
.year{
|
||||
background-color: #c0bebe;
|
||||
width:30px;
|
||||
}
|
||||
.bubble{
|
||||
cursor: pointer;
|
||||
width:300px;
|
||||
height:30px;
|
||||
border-style:solid;
|
||||
border-width:5px;
|
||||
float: left;
|
||||
border-radius:5px;
|
||||
margin-top: 10px;
|
||||
margin-bottom:10px;
|
||||
font-size:15px;
|
||||
padding:5px;
|
||||
text-align:justify;
|
||||
display: none;
|
||||
}
|
||||
.month_heading{
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
font-family: 'Open sans', sans-serif;
|
||||
font-size: 21px;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.bubble_list ul{
|
||||
width:350px;
|
||||
float:left;
|
||||
}
|
||||
.bubble_list ul li span.date{
|
||||
font-weight:bolder;
|
||||
float:right;
|
||||
width: 300px;
|
||||
height: 440px;
|
||||
}
|
||||
|
|
@ -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-family: 'WebSymbolsRegular';
|
||||
src: url(<%= asset_path 'websymbols-regular-webfont.eot' %>);
|
||||
|
|
|
|||
|
|
@ -4,9 +4,30 @@
|
|||
<div class="dtitle w2 hh3 hp">
|
||||
<span class="thmtxth">TimeLine</span>
|
||||
</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 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="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
|
||||
<div class="viewport">
|
||||
|
|
|
|||
Loading…
Reference in New Issue