Redesign the overflow menu

3 files changed, 71 insertions, 13 deletions

diff --git a/public/stylesheets/print.css b/public/stylesheets/print.css
index 0e09533..ceed0d7 100644
--- a/public/stylesheets/print.css
+++ b/public/stylesheets/print.css
@@ -45,8 +45,8 @@
   display: none;
 }
 
-.mdl-menu__container {
-  display: none !important;
+.menu {
+  display: none;
 }
 
 #schedule {
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index fd2bfb8..c1c8e69 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -245,7 +245,7 @@ body.no-input #week-selector {
     box-shadow: none;
   }
 
-  body.no-input #search button {
+  body.no-input #search .input-wrapper button {
     display: none;
   }
 
@@ -323,6 +323,11 @@ body.no-input #week-selector {
     color: #757575;
   }
 
+  body.no-input #search .menu {
+    top: 44px;
+    right: -2px;
+  }
+
   body.no-input .tooltip {
     display: block;
     position: absolute;
@@ -381,3 +386,55 @@ body.week-selector-not-visible #week-selector {
 .print {
   display: none;
 }
+
+.menu {
+  position: absolute;
+  right: 8px;
+  top: 70px;
+  background-color: white;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  border-radius: 2px;
+}
+
+.menu::before {
+  content: '';
+  position: absolute;
+  top: -5px;
+  right: 15px;
+  z-index: -1;
+  transform: rotate(45deg);
+  width: 15px;
+  height: 15px;
+  background: white;
+}
+
+.menu button.selected {
+  background-color: #cecece;
+}
+
+.menu .item {
+  padding: 16px;
+  border: none;
+  border-bottom: 1px solid rgba(0,0,0,.12);
+  color: rgba(0,0,0,.87);
+  display: block;
+  background-color: initial;
+  font: inherit;
+  text-align: left;
+  width: 100%;
+}
+
+.menu button.item:hover, .menu button.item:focus {
+  background-color: #eee;
+  outline: none;
+}
+
+.menu .item:last-child {
+  border-bottom: none;
+}
+
+.menu .item .material-icons {
+  float: right;
+  color: rgba(0, 0, 0, 0.66);
+  margin-top: -2px
+}
diff --git a/views/index.jade b/views/index.jade
index 0608505..eaa224e 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -20,22 +20,23 @@ block content
         span Voer hier een <strong>docentafkorting</strong>, <strong>klas</strong>, <strong>leerlingnummer</strong> of <strong>lokaalnummer</strong> in.
       button#overflow-button(type='button')
         i.material-icons &#xE5D4;
-        
-      ul.mdl-menu.mdl-menu--bottom-right.mdl-js-menu.mdl-js-ripple-effect(for='overflow-button')
-        a(href='http://www.meetingpointmco.nl/Roosters-AL/doc/basisroosters/default.htm')
-          li.mdl-menu__item Basis rooster gebruiken
-        a(href='http://www.meetingpointmco.nl/Roosters-AL/doc/')
-          li.mdl-menu__item Oud rooster gebruiken
-        a(href='javascript:window.print()').print-page
-          li.mdl-menu__item.mdl-menu__item--full-bleed-divider#print-page Pagina printen
-        li.mdl-menu__item(disabled) Gemaakt door Noah Loomans
+
+      .menu
+        .item
+          button.mdl-button.selected Dagrooster
+          button.mdl-button Basisrooster
+        button.item
+          span Naar legacy rooster
+          i.material-icons launch
+        button.item(onclick='window.print()') Pagina printen
+        button.item Over
     .autocomplete-wrapper
       ul.autocomplete
   #week-selector
     #search-space-filler
     .week-wrapper
       button(type='button').material-icons &#xE5C4;
-      span.current 
+      span.current
         span.no-print Loading...
         span.print
       button(type='button').material-icons &#xE5C8;