Fixed menu icon on small screens

eb3d71bc · Isabella Skořepová · 4d25e164 · eb3d71bc · eb3d71bc
Verified Commit eb3d71bc authored 9 years ago by Isabella Skořepová
--- a/templates/partials/header.html.nunjucks
+++ b/templates/partials/header.html.nunjucks
@@ -38,31 +38,31 @@
 </head>
 {% set subnav1 = (file == "clanek/2008/podporuji-nas" or file == "clanek/2008/o-radioklubu" or file == "clanek/2008/krouzek-mladeze" or file == "clanek/2008/podporuji-nas" or file == "clanek/2016/pro-cleny-rk") %}
 <body class="{{ "show-subnav1" if subnav1 else "show-subnav2" }}">
+  {% import "partials/svgs" as svgs %}
  <div id="all">
    <!-- Top nav -->
    <nav class="light-blue supernav" role="navigation" style="z-index:2;position:absolute;">
      <div class="nav-wrapper container">
+        <a href="#" data-activates="nav-mobile" class="button-collapse" style="margin-top: .5rem;">
+          {{ svgs.menu("#fff",2,"rem") }}
+        </a>
        <div style="z-index: 2" class="brand-logo">
          <a id="logo-container" href="{{ config.baseurl }}/"  >
            <img class="hide-on-med-and-up" src="{{ config.baseurl }}/theme/logo56.png">
            <img class="hide-on-small-only" src="{{ config.baseurl }}/theme/logo64.png">
          </a>
        </div>
-        <div style="" class="hide-on-med-and-down toplinks">
+        <div style="" class="toplinks">
-            <div class="left {{ "light-blue lighten-1" if subnav1 else "" }}">
+            <div class="hide-on-med-and-down left {{ "light-blue lighten-1" if subnav1 else "" }}">
              <a href="{{ config.baseurl }}/clanek/2008/o-radioklubu">Informace</a>
            </div>
-            <div class="left {{ "" if subnav1 else "light-blue lighten-1" }}">
+            <div class="hide-on-med-and-down left {{ "" if subnav1 else "light-blue lighten-1" }}">
              <a href="{{ config.baseurl }}/tag/clanek">Články</a>
            </div>
-            <!-- TODO: rolovat -->
            <div class="search-icon left" style="padding-top: .5rem">
-              <svg style="width:2rem;height:2rem;" viewBox="0 0 24 24">
+              {{ svgs.search("#fff",2,"rem") }}
-                    <path fill="#fff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
-              </svg>
            </div>
        </div>
-        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
      </div>
    </nav>
    <!-- Side nav -->

--- a/templates/partials/svgs.html.nunjucks
+++ b/templates/partials/svgs.html.nunjucks
 {% macro symbol(color, size, unit, d) %}
-    <svg style="width:{{ size }}{{unit}};height:{{ size }}{{unit}}; display:inline-block" viewBox="0 0 24 24">
+    <svg style="margin-top:auto;margin-bottom:auto;display:block;width:{{ size }}{{unit}};height:{{ size }}{{unit}}; display:inline-block" viewBox="0 0 24 24">
      <path {% if color %}fill="{{ color }}"{% endif %} d="{{ d }}" />
    </svg>
 {% endmacro %}
@@ -28,3 +28,10 @@
  {{ symbol(color, size, unit, "m 12,16 0,4 -8,-8 8,-8 0,4 8,0 0,8 -8,0 z") }}
 {% endmacro %}
+{% macro menu(color, size=24, unit="px") %}
+  {{ symbol(color, size, unit, "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z") }}
+{% endmacro %}
+{% macro search(color, size=24, unit="px") %}
+  {{ symbol(color, size, unit, "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z") }}
+{% endmacro %}