Download as
Browse Code »

Commit 56e449df50089d972a6af3c59f10c78d2ca0902a

Authored by Ricardo Rauch
1 parent ff0dc87e
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

fixing account box dropdown

Showing 2 changed files with 37 additions and 11 deletions   Show diff stats
app/assets/javascripts/application.js
  Diff comments   View file @56e449d
@@ -19,8 +19,20 @@ $(function(){ @@ -19,8 +19,20 @@ $(function(){
19 19
20 $('select#branch').selectmenu({style:'popup', width:200}); 20 $('select#branch').selectmenu({style:'popup', width:200});
21 $('select#tag').selectmenu({style:'popup', width:200}); 21 $('select#tag').selectmenu({style:'popup', width:200});
  22 +
  23 + $(".account-box").mouseenter(showMenu);
  24 + $(".account-box").mouseleave(resetMenu);
  25 +
22 }); 26 });
23 27
24 function updatePage(data){ 28 function updatePage(data){
25 $.ajax({type: "GET", url: location.href, data: data, dataType: "script"}); 29 $.ajax({type: "GET", url: location.href, data: data, dataType: "script"});
26 } 30 }
  31 +
  32 +function showMenu() {
  33 + $(this).toggleClass('hover');
  34 +}
  35 +
  36 +function resetMenu() {
  37 + $(this).removeClass("hover");
  38 +}
27 \ No newline at end of file 39 \ No newline at end of file
app/assets/stylesheets/style.scss
  Diff comments   View file @56e449d
@@ -144,7 +144,8 @@ table tr:hover, .listed_items tr.odd:hover{background-color:#FFFFCF} @@ -144,7 +144,8 @@ table tr:hover, .listed_items tr.odd:hover{background-color:#FFFFCF}
144 background-image: -o-linear-gradient(#f7f7f7 7.6%, #d5d5d5); 144 background-image: -o-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
145 } 145 }
146 146
147 -.button{ 147 +a.button, input.button{
  148 + font-weight: bold;
148 padding: 10px 20px; 149 padding: 10px 20px;
149 text-align: center; 150 text-align: center;
150 display: inline-block; 151 display: inline-block;
@@ -159,6 +160,8 @@ table tr:hover, .listed_items tr.odd:hover{background-color:#FFFFCF} @@ -159,6 +160,8 @@ table tr:hover, .listed_items tr.odd:hover{background-color:#FFFFCF}
159 background-image: -o-linear-gradient(#dbf5f6 79.4%, #c5eef0); 160 background-image: -o-linear-gradient(#dbf5f6 79.4%, #c5eef0);
160 } 161 }
161 162
  163 +input.button{margin-bottom: 1.5em}
  164 +
162 .button:hover {color: rgba(0,0,0,.8)} 165 .button:hover {color: rgba(0,0,0,.8)}
163 166
164 .button.green {margin-right: 0; } 167 .button.green {margin-right: 0; }
@@ -308,7 +311,7 @@ body.collapsed #container{margin: auto; width: 980px; border: 1px solid rgba(0,0 @@ -308,7 +311,7 @@ body.collapsed #container{margin: auto; width: 980px; border: 1px solid rgba(0,0
308 311
309 312
310 /* Header */ 313 /* Header */
311 -header{background: #474D57 url('bg-header.png') repeat-x bottom; z-index: 10000; height: 44px; padding: 10px 2% 6px 2%} 314 +header{background: #474D57 url('bg-header.png') repeat-x bottom; z-index: 10000; height: 44px; padding: 10px 2% 6px 2%; position: relative}
312 header a{color: white; text-shadow: 0 -1px 0 black} 315 header a{color: white; text-shadow: 0 -1px 0 black}
313 header a:hover{color: #f1f1f1} 316 header a:hover{color: #f1f1f1}
314 header h1{ 317 header h1{
@@ -370,7 +373,7 @@ header nav a.admin{ @@ -370,7 +373,7 @@ header nav a.admin{
370 } 373 }
371 374
372 375
373 -header .search{ display: inline-block; float: right; margin-right: 10px} 376 +header .search{ display: inline-block; float: right; margin-right: 46px}
374 377
375 header nav a span{width: 20px; height: 20px; display: inline-block; background: red; position: absolute; left: 8px; top: 6px;} 378 header nav a span{width: 20px; height: 20px; display: inline-block; background: red; position: absolute; left: 8px; top: 6px;}
376 379
@@ -426,10 +429,11 @@ header{margin-bottom: 0; clear: both; } @@ -426,10 +429,11 @@ header{margin-bottom: 0; clear: both; }
426 .page-title a.grey-button{float: right;} 429 .page-title a.grey-button{float: right;}
427 .right{float: right;} 430 .right{float: right;}
428 431
  432 +
429 /* Account box */ 433 /* Account box */
430 -header .account-box{position: relative;z-index: 10000; top: -3px; width: 38px; height: 38px; font-size: 11px; float: right; display: block; cursor: pointer; }  
431 -header .account-box img{ border-radius: 4px; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black}  
432 -header .account-box:after{ 434 +header .account-box{position: absolute; right: 0; top: 8px; z-index: 10000; width: 128px; height: 138px; font-size: 11px; float: right; display: block; cursor: pointer;}
  435 +header .account-box img{ border-radius: 4px; right: 20px; position: absolute; width: 38px; height: 38px; display: block; box-shadow: 0 1px 2px black}
  436 +header .account-box img:after{
433 content: " "; 437 content: " ";
434 display: block; 438 display: block;
435 position: absolute; 439 position: absolute;
@@ -449,11 +453,21 @@ float: right; @@ -449,11 +453,21 @@ float: right;
449 background-origin: border-box; 453 background-origin: border-box;
450 } 454 }
451 455
452 -.account-box:hover > .account-links, .account-box:hover > .arrow-up{display: block;}  
453 -header .account-links{background: white; display: none; border-radius: 5px; width: 100px; margin-top: 0; float: right; box-shadow: 0 1px 1px rgba(0,0,0,.2); }  
454 -header .account-links a{color: #666; padding: 6px 10px; display: block; text-shadow: none; border-bottom: 1px solid #eee}  
455 -header .account-links a:hover{background-color: #f1f1f1; text-shadow: none; color: #333} 456 +.account-box.hover{}
  457 +.account-box.hover .account-links, .account-box.hover .arrow-up{display: block;}
456 458
  459 +/* Inspired by http://maxvoltar.com/temp/nowplaying/ */
  460 +header .account-links{background: white; display: none; z-index: 100000; border-radius: 5px; width: 100px; position: absolute; right: 20px; top: 46px; margin-top: 0; float: right; box-shadow: 0 1px 1px rgba(0,0,0,.2); }
  461 +header .account-links a{color: #666; padding: 6px 10px; display: block; text-shadow: none; border-bottom: 1px solid #eee}
  462 +header .account-links a:hover{
  463 + background: #3aacec;
  464 + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#39acec), to(#279ada), color-stop(.05, #4cbefe));
  465 + background: -moz-linear-gradient(top, #39acec, #4cbefe 5%, #279ada);
  466 + background: linear-gradient(top, #39acec, #4cbefe 5%, #279ada);
  467 + color: #fff;
  468 + text-shadow: #1488c8 0 -1px 0;
  469 +}
  470 +.account-box.hover .arrow-up{top: 41px; right: 6px; position: absolute}
457 header .account-links a:first-child{ 471 header .account-links a:first-child{
458 -webkit-border-top-left-radius: 5px; 472 -webkit-border-top-left-radius: 5px;
459 -webkit-border-top-right-radius: 5px; 473 -webkit-border-top-right-radius: 5px;
@@ -548,7 +562,7 @@ body.project-page h2.icon .project-name i.arrow{float: right; @@ -548,7 +562,7 @@ body.project-page h2.icon .project-name i.arrow{float: right;
548 body.project-page h2.icon span{ background-position: -78px -68px; } 562 body.project-page h2.icon span{ background-position: -78px -68px; }
549 body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; } 563 body.project-page .project-container{ position: relative; float: left; width: 100%; height: 100%; }
550 body.project-page .page-title{margin-bottom: 0} 564 body.project-page .page-title{margin-bottom: 0}
551 -body.project-page .project-sidebar {width: 220px; left: 0; top: 0; height: 100%; bottom: 0; position: absolute; background-color: #f7f7f7; border-left: 1px solid #ccc; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; } 565 +body.project-page .project-sidebar {width: 220px; left: 0; top: 0; height: 100%; bottom: 0; position: absolute; background-color: #f7f7f7; float: left; display: inline-block; background: #f7f7f7; padding: 20px 0 20px 2%; margin: 0; }
552 body.project-page .project-sidebar input.text.git-url{ font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding: 8px 14px 8px 30px; margin-bottom: 20px; background: white url('images.png') no-repeat 8px -40px;} 566 body.project-page .project-sidebar input.text.git-url{ font-size: 12px; border-radius: 5px; color: #666; box-shadow: 0 1px 2px rgba(0,0,0,.2) inset; padding: 8px 14px 8px 30px; margin-bottom: 20px; background: white url('images.png') no-repeat 8px -40px;}
553 body.project-page .project-sidebar aside{width: 219px} 567 body.project-page .project-sidebar aside{width: 219px}
554 body.project-page .project-sidebar aside a{display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee} 568 body.project-page .project-sidebar aside a{display: block; position: relative; background: white; padding: 15px 10px; border-bottom: 1px solid #eee}