Re-arrange header (all links are on left side now)

WasabiFan · WasabiFan · commit 437b6cb8706b · 2014-12-31T10:42:10.000-10:00
diff --git a/_includes/header.html b/_includes/header.html
@@ -10,6 +10,9 @@
         <li class="left button">
             <a href="{{ site.github.url }}/docs" title="Documentation on how to use ev3dev">Docs</a>
         </li>
+        <li class="left button">
+            <a href="{{ site.github.url }}/news" title="News about ev3dev">News</a>
+        </li>
         <li class="left button dropdown-button">
             <a>
                 Community
@@ -19,16 +22,19 @@
             </a>
             <ul class="button-dropdown">
                 <li>
-                    <a href="{{ site.github.url }}/projects" title="List of projects that use ev3dev">Projects Gallery</a>
+                    <a href="https://github.com/ev3dev/ev3dev/issues" title="Found a bug? Report it here.">Issues</a>
                 </li>
                 <li>
-                    <a href="{{ site.github.url }}/contributing" title="How to contribute to ev3dev">Contributing</a>
+                    <a href="{{ site.github.url }}/projects" title="List of projects that use ev3dev">Projects Gallery</a>
                 </li>
                 <li>
-                    <a href="{{ site.github.url }}/news" title="News about ev3dev">News</a>
+                    <a href="{{ site.github.url }}/contributing" title="How to contribute to ev3dev">Contributing</a>
                 </li>
             </ul>
         </li>
+        <li class="left button">
+            <a href="https://github.com/ev3dev/ev3dev/releases" title="SD card image files">Download</a>
+        </li>
         <!-- items below float right, so appear in reverse order -->
         <li class="right header-box" id="search-li">
             <input type="text" id="search-input" onfocus="searchFocus()" onkeyup="searchTextChanged()" placeholder="Quick Nav" onkeypress="this.onkeyup();" onpaste="this.onkeyup();" oninput="this.onkeyup();" />
@@ -55,12 +61,6 @@ <h2>In other pages</h2>
                 </div>
             </div>
         </li>
-        <li class="right button">
-            <a href="https://github.com/ev3dev/ev3dev/issues" title="Found a bug? Report it here.">Issues</a>
-        </li>
-        <li class="right button">
-            <a href="https://github.com/ev3dev/ev3dev/releases" title="SD card image files">Download</a>
-        </li>
     </nav>
 </div>
 
diff --git a/javascripts/menu.js b/javascripts/menu.js
@@ -5,7 +5,7 @@
         if ($('#header').height() <= 50) {
 
             $('#header').removeClass('mobile-hidden');
-            $('#header').animate({ height: 446 }, 400, function () {
+            $('#header').animate({ height: 416 }, 400, function () {
                 $('#header').height('auto');
             });
         }
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -970,16 +970,16 @@ dt {
 }
 
     .button .button-dropdown {
-        top: -20px;
+        margin-top: -20px;
         opacity: 0;
+        position: absolute;
 
         transition: all 100ms ease-in-out;
-        transition-property: opacity, top, visibility;
+        transition-property: opacity, margin-top, visibility;
         transition-delay: 1ms;
 
         padding: 5px 35px 5px 10px;
         width: 100px;
-        position: relative;
         color: #efefef;
         background: #191919;
         -moz-border-radius: 2px;
@@ -996,7 +996,7 @@ dt {
     }
 
     .button.dropdown-button > a {
-        width: 120px;
+        width: 88px;
         visibility: visible !important;
     }
 
@@ -1009,13 +1009,13 @@ dt {
         cursor: pointer;
     }
 
-    .button.dropdown-button:hover {        
+    .button.dropdown-button:hover {
         visibility: visible;
     }
 
     .button:hover .button-dropdown {
         opacity: 1;
-        top: 0;
+        margin-top: 0;
     }
 
 .nav-dropdown-arrow {
@@ -1386,7 +1386,7 @@ section #title p {
         transition: none;
 
         opacity: 1;
-
+        margin-top: 0;
         background-color: transparent;
         padding: 0;
         width: 100%;

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`if ($('#header').height() <= 50) {`
`6`	`6`
`7`	`7`	`$('#header').removeClass('mobile-hidden');`
`8`		`- $('#header').animate({ height: 446 }, 400, function () {`
	`8`	`+ $('#header').animate({ height: 416 }, 400, function () {`
`9`	`9`	`$('#header').height('auto');`
`10`	`10`	`});`
`11`	`11`	`}`