responsive top menu

64json · 64json · commit bacbf0f6425f · 2016-06-13T00:22:38.000+09:00
diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -109,6 +109,10 @@ nav {
     padding: 0 16px;
 }
 
+nav > * {
+    height: 28px;
+}
+
 nav h3 {
     display: inline;
 }
@@ -122,8 +126,10 @@ nav h3 {
 }
 
 .top-menu-buttons {
-    float: right;
-    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 16px;
 }
 
 #shared {
@@ -139,8 +145,12 @@ nav h3 {
     text-align: right;
 }
 
-.sidemenu {
+.sidemenu,
+.workspace {
     top: 30px;
+}
+
+.sidemenu {
     right: 85%;
     visibility: hidden;
     overflow: scroll;
@@ -213,7 +223,6 @@ nav h3 {
 
 .workspace {
     position: absolute;
-    top: 30px;
     bottom: 0;
     left: 15%;
     right: 0;
@@ -625,3 +634,19 @@ input[type=number]::-webkit-outer-spin-button {
     border-left: none;
     border-bottom: none;
 }
+
+@media (max-width: 1024px) {
+    .sidemenu,
+    .workspace {
+        top: 60px;
+    }
+
+    nav {
+        height: 60px;
+    }
+
+    .top-menu-buttons {
+        top: 30px;
+        left: 0;
+    }
+}
diff --git a/index.html b/index.html
@@ -23,8 +23,6 @@
 <nav>
     <button id="navigation">
         <h3>
-            Algorithm Visualizer
-            <i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
             <span id="category"></span>
             <i class="fa fa-angle-right nav-arrow" aria-hidden="true"></i>
             <span id="algorithm"></span>
diff --git a/public/algorithm_visualizer.css b/public/algorithm_visualizer.css
@@ -229,6 +229,10 @@ nav {
     padding: 0 16px;
 }
 
+nav > * {
+    height: 28px;
+}
+
 nav h3 {
     display: inline;
 }
@@ -242,8 +246,10 @@ nav h3 {
 }
 
 .top-menu-buttons {
-    float: right;
-    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0 16px;
 }
 
 #shared {
@@ -259,8 +265,12 @@ nav h3 {
     text-align: right;
 }
 
-.sidemenu {
+.sidemenu,
+.workspace {
     top: 30px;
+}
+
+.sidemenu {
     right: 85%;
     visibility: hidden;
     overflow: scroll;
@@ -333,7 +343,6 @@ nav h3 {
 
 .workspace {
     position: absolute;
-    top: 30px;
     bottom: 0;
     left: 15%;
     right: 0;
@@ -769,3 +778,19 @@ input[type=number]::-webkit-outer-spin-button {
     border-left: none;
     border-bottom: none;
 }
+
+@media (max-width: 1024px) {
+    .sidemenu,
+    .workspace {
+        top: 60px;
+    }
+
+    nav {
+        height: 60px;
+    }
+
+    .top-menu-buttons {
+        top: 30px;
+        left: 0;
+    }
+}
diff --git a/public/algorithm_visualizer.min.css b/public/algorithm_visualizer.min.css
