From bfaed4deb42a2e4411829b4398c725ce7a236014 Mon Sep 17 00:00:00 2001 From: devin Date: Thu, 5 Jul 2012 16:23:13 +0800 Subject: [PATCH] timeline change --- app/assets/images/timeline/pp.png | Bin 0 -> 2797 bytes app/assets/javascripts/orbitTimeline.js | 52 +++++++--- app/assets/javascripts/orbitdesktopAPI.js | 4 +- app/assets/stylesheets/desktopmain.css | 7 +- app/assets/stylesheets/orbitTimeline.css.erb | 104 ++++++++++++++++++- app/views/desktop/orbit.html.erb | 14 ++- 6 files changed, 158 insertions(+), 23 deletions(-) create mode 100644 app/assets/images/timeline/pp.png diff --git a/app/assets/images/timeline/pp.png b/app/assets/images/timeline/pp.png new file mode 100644 index 0000000000000000000000000000000000000000..029c483b454d986dc70c43dbbc0a92983bcef670 GIT binary patch literal 2797 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 literal 0 HcmV?d00001 diff --git a/app/assets/javascripts/orbitTimeline.js b/app/assets/javascripts/orbitTimeline.js index cc85edb2..7a11583f 100644 --- a/app/assets/javascripts/orbitTimeline.js +++ b/app/assets/javascripts/orbitTimeline.js @@ -26,7 +26,7 @@ var orbitTimeline = function(dom){ totalul = $("#scale_wrapper ul").length $(".t_scale").width((totalul*350) + totalyearwidth); } - + t.bubble_fx(); $('.tinycanvas').tinyscrollbar({ axis: 'x', onMove: function(x){ @@ -38,9 +38,10 @@ var orbitTimeline = function(dom){ for(eve in t.events){ t.makeBubble(t.events[eve]); totalul = $("#scale_wrapper ul").length - $(".t_scale").width((totalul*350) + totalyearwidth); + $(".t_scale").width((totalul*360) + totalyearwidth + 314); } $('.tinycanvas').tinyscrollbar_update(x); + t.bubble_fx(); }); } } @@ -63,16 +64,16 @@ var orbitTimeline = function(dom){ t.events.push(bubbleData); if(cur_year != year){ year = cur_year; - scale.append($("
"+(year+1)+"
")); + scale.append($("
"+(year+1)+"
")); } if(cur_mon != mon){ mon = cur_mon; var yr = scale.find("div[data-content="+year+"]"); - yr.append($("
"+t.monthList[parseInt(formname)]+"
")) + yr.append($("
"+t.monthList[parseInt(formname)]+"
")) } }); }); - scale.append($("
"+year+"
")); + scale.append($("
"+year+"
")); t.fromdate = [year,formname-1]; if(typeof callbackFn == "function"){ callbackFn.call(this,scale); @@ -101,10 +102,10 @@ var orbitTimeline = function(dom){ bubble.show(); bubble.click(function(){ o.toolPopup({ - parent: $(this), - html : "

"+bubbleData.jtitle+"

Co-Authors:

"+bubbleData.coauthors+"

Abstract:

"+bubbleData.abstract+"
", - height: "auto", - width:"300px" + parent: $(this).parent(), + html : "

"+bubbleData.jtitle+"

Co-Authors

"+bubbleData.coauthors+"

Abstract

"+bubbleData.abstract+"
", + height: "392px", + width:"310px" }); })//.mouseout(function(){t.oapi.toolPopup("destroy");}) } @@ -127,19 +128,19 @@ var orbitTimeline = function(dom){ if(cur_year != year){ year = cur_year; if(scale.find("div[data-content="+year+"]").length == 0){ - scale.append($("
"+(year+1)+"
")); + scale.append($("
"+(year+1)+"
")); } } if(cur_mon != mon){ mon = cur_mon; var yr = scale.find("div[data-content="+year+"]"); - yr.append($("
"+t.monthList[parseInt(formname)]+"
")) + yr.append($("
"+t.monthList[parseInt(formname)]+"
")) } }); }); if(papersArray.length != 0){ if(scale.find("div[data-content="+(year-1)+"]").length == 0) - scale.append($("
"+year+"
")); + scale.append($("
"+year+"
")); t.ajaxload = true; t.fromdate = [year,formname-1]; } @@ -149,4 +150,31 @@ var orbitTimeline = function(dom){ }) } + this.bubble_fx = function(){ + $('.bubble').on({ + mouseover: function(){ + $(this) + .addClass('hover') + .append(''); + }, + mouseout: function(){ + $(this) + .removeClass('hover') + .find('.icon-chevron-right').remove(); + }, + click: function(){ + $(this) + .parents('#timeline') + .find('.bubble, .date') + .removeClass('thmc1 thmtxt'); + $(this) + .addClass('thmc1 thmtxt'); + $(this) + .find('.date') + .addClass('thmtxt'); + $(this) + .append('
'); + } + }); + } } \ No newline at end of file diff --git a/app/assets/javascripts/orbitdesktopAPI.js b/app/assets/javascripts/orbitdesktopAPI.js index a89e0230..ba38b62e 100644 --- a/app/assets/javascripts/orbitdesktopAPI.js +++ b/app/assets/javascripts/orbitdesktopAPI.js @@ -172,8 +172,8 @@ var orbitDesktopAPI = function(){ settings.height = (!settings.height ? "50px" : settings.height); settings.width = (!settings.width ? "150px" : settings.width); settings.html = (!settings.html ? "" : settings.html); - var leftpos = settings.parent.width(); - var toolpopup = $("
"+settings.html+"
"); + var leftpos = settings.parent.outerWidth(); + var toolpopup = $("
"+settings.html+"
"); settings.parent.css("position","relative"); settings.parent.prepend(toolpopup); toolpopup.click(function(event){ diff --git a/app/assets/stylesheets/desktopmain.css b/app/assets/stylesheets/desktopmain.css index f997db40..cf355384 100644 --- a/app/assets/stylesheets/desktopmain.css +++ b/app/assets/stylesheets/desktopmain.css @@ -69,9 +69,10 @@ a:focus { outline: none; } min-width: 800px; } #side { - width: 156px; + width: 60px; height: 516px; position: absolute; + margin-right: 96px; top: 120px; left: 0; z-index: 10; @@ -737,9 +738,9 @@ a:focus { outline: none; } position: absolute; z-index: 10px; display: none; - padding: 10px; + padding: 12px; cursor: default; - background-color: #ccc; + background-color: #fff; } .desktop_toolpopup span { margin: 3px 0 3px 0; diff --git a/app/assets/stylesheets/orbitTimeline.css.erb b/app/assets/stylesheets/orbitTimeline.css.erb index 6a0042a1..220d5796 100644 --- a/app/assets/stylesheets/orbitTimeline.css.erb +++ b/app/assets/stylesheets/orbitTimeline.css.erb @@ -1,11 +1,43 @@ +#orbit .viewport { + background: -1px 4px url(<%= asset_path "timeline/ruler.png" %>) repeat-x; +} +.time_nav a, .time_nav_c a { + display: block; +} +.time_nav { + position: absolute; + left: -60px; + top: 0; +} +.time_nav a { + line-height: 60px; + text-align: center; + font-size: 18px; +} +.time_nav .active { + background-color: #333; + color: #fff; +} +.time_nav_c { + position: absolute; + left: -60px; + bottom: 0; + background-color: #efefef; +} +.time_nav_c a { + width: 30px; + height: 36px; + float: left; + line-height: 36px; + text-align: center; +} .t_scale { height: 516px; - background: 0 0 url(<%= asset_path "timeline/ruler.png" %>) repeat-x; } #scale_wrapper { overflow: hidden; - padding: 36px 0 0 12px; - background: 0 60px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x; + padding: 24px 0 0 12px; + background: 0 48px url(<%= asset_path "timeline/date_connector.png" %>) repeat-x; } #timline_marker { width:100px; @@ -24,18 +56,26 @@ .group { margin-right: 48px; } -.month {} +.month { + +} .year { font-size: 30px; margin-right: 24px; border-right: solid 12px #efefef; + border-left: solid 12px #efefef; +} +.region_year { + position: relative; } .month_heading { color: #333; font-family: 'Open sans', sans-serif; font-size: 21px; - background-color: #efefef; display: inline-block; + margin-top: -10px; + padding-top: 22px; + background: #efefef 9px 0 url(<%= asset_path "timeline/pp.png" %>) no-repeat; } .bubble_list ul { @@ -52,4 +92,58 @@ font-size: 12px; font-family: Arial, sans-serif; margin-bottom: 12px; + position: relative; +} +.date { + display: block; + padding: 8px 0 0 0; + color: #999; +} +.bubble_arrow { + width: 0; + height: 0; + border-top: 14px solid transparent; + border-bottom: 14px solid transparent; + border-right: 14px solid #fff; + position: absolute; + right: -1px; + top: 50%; + margin-top: -14px; + z-index: 99; +} +.bubble .icon-chevron-right { + position: absolute; + top: 0; + right: 0; + width: 15px; + height: 74px; + line-height: 74px; + font-size: 15px; +} +.desktop_toolpopup { + z-index: 9; + border: solid 1px #ccc; + font-family: Arial, sans-serif; + color: #666; + font-size: 12px; +} +.desktop_toolpopup h2 { + font-size: 18px; + padding: 0 0 20px 0; + margin: 0 0 20px 0; + border-bottom: solid 1px #d7d7d7; + color: #333; +} +.desktop_toolpopup h3 { + font-size: 15px; + padding: 0 0 20px 0; + margin: 20px 0 0 0; + color: #333; +} +.desktop_toolpopup .bubble_content { + overflow: hidden; + height: 368px; +} +.desktop_toolpopup .context { + line-height: 1.5em; } \ No newline at end of file diff --git a/app/views/desktop/orbit.html.erb b/app/views/desktop/orbit.html.erb index b4c714d4..c73d7526 100644 --- a/app/views/desktop/orbit.html.erb +++ b/app/views/desktop/orbit.html.erb @@ -27,13 +27,25 @@
+
+ +
+
-