From c282c287a13e63b7ea1cea95ff4844e68af7e87b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Sko=C5=99epa?= <jakub@skorepa.info>
Date: Sat, 27 Feb 2016 19:19:37 +0100
Subject: [PATCH] Heavily modify navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
+ Fix search randomly appearing on resize.
+ Align header with content
+ article max-width now 1024px
+ Informace -> O nás
+ Better look on screens with width < 330px
---
sass/style.scss | 86 ++++++++++++++++--------
static/theme/icon56.png | Bin 0 -> 4012 bytes
templates/partials/header.html.nunjucks | 70 ++++++++++++-------
templates/partials/search.html.nunjucks | 33 ++++-----
templates/partials/svgs.html.nunjucks | 2 +-
5 files changed, 123 insertions(+), 68 deletions(-)
create mode 100644 static/theme/icon56.png
diff --git a/sass/style.scss b/sass/style.scss
index ca547d5..54cdd7e 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -14,6 +14,11 @@ $link-color: color("light-blue", "darken-1");
@import "materialize.scss";
+/* overall page look */
+#content, .container.nav-wrapper {
+ width: 86%;
+}
+
/* Article list style */
.block.article {
overflow: hidden;
@@ -49,20 +54,9 @@ footer.page-footer {
overflow-y: hidden;
min-height: 100vh;
}
-#content {
- width: 86%;
- /*margin-left: 7%;
- margin-right: 7%;
- @media #{$medium-and-down} {
- margin-left: 5%;
- margin-right: 5%;
- width: 90%;
- }*/
-}
#content, #search {
margin-bottom: 90px;
margin-top: 104px;
-
}
html, body {
min-height: 100vh;
@@ -111,34 +105,70 @@ html, body {
}
/* top navigation */
+nav {
+ line-height: 64px;
+}
+@media #{$medium-and-down} {
+ nav {
+ line-height: 56px;
+ }
+}
+
nav.subnav {
- margin-top: 24px;
+ margin-top: -16px;
transition: 0.3s;
height: 40px;
+ position: absolute;
}
.show-subnav1 nav.subnav1, .show-subnav2 nav.subnav2 {
transition: 0.3s;
margin-top: 64px;
+ z-index: 4;
}
-
-
nav.subnav li {
height: 40px;
line-height: 40px;
}
-nav input[type="search"] {
- margin: 0;
+
+
+.toplinks > a, .menu-icon {
+ display: block;
+ padding: 0 15px;
}
-.brand-logo {
- height:64px;
+.toplinks > a:hover, .menu-icon:hover {
+ background-color: rgba(0, 0, 0, 0.1);
}
.toplinks {
- z-index: 3; position: absolute; right: 0;
- div {
- padding: 0 15px;
+ z-index: 3;
+ position: absolute;
+ right: 0;
+}
+
+.search-icon svg, .menu-icon svg {
+ height: 64px;
+ width: 30px;
+}
+.search-icon, .menu-icon {
+ height: 64px;
+}
+@media #{$small-and-down} {
+ .search-icon svg, .menu-icon svg {
+ height: 56px;
+ }
+ .search-icon, .menu-icon {
+ height: 56px;
+ }
+}
+
+.hide-on-small-and-up {
+ display: none;
+}
+@media only screen and (max-width: 330px) {
+ .hide-on-ultra-small {
+ display: none;
}
- div.input-field {
- padding: 0;
+ .hide-on-small-and-up {
+ display: block;
}
}
@@ -165,11 +195,11 @@ h2#title {
margin-bottom: 1rem;
}
-.article {
- max-width: 800px;
- article {
- text-align: justify;
- }
+.type-article .container {
+ max-width: 1024px;
+}
+.article article {
+ text-align: justify;
}
th {
padding: 5px 5px 0px 5px;
diff --git a/static/theme/icon56.png b/static/theme/icon56.png
new file mode 100644
index 0000000000000000000000000000000000000000..17681d3aec3600e1773eeed727462336c40f8d4d
GIT binary patch
literal 4012
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
R^D?MQ>*?y}vd$@?2>`Y=SkeFh
literal 0
HcmV?d00001
diff --git a/templates/partials/header.html.nunjucks b/templates/partials/header.html.nunjucks
index e7b0460..4bafb5c 100644
--- a/templates/partials/header.html.nunjucks
+++ b/templates/partials/header.html.nunjucks
@@ -38,34 +38,58 @@
{{ metadata.headerextra | safe }}
</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" }}">
+<body {{ "class=type-article" if type=="article" }}>
{% import "partials/svgs" as svgs %}
<div id="all">
<!-- Top nav -->
- <nav class="light-blue supernav" role="navigation" style="z-index:2;position:absolute;">
+ <nav class="light-blue supernav" role="navigation" style="z-index:5;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 data-activates="nav-mobile" class="menu-icon hide-on-large-only" style="float:left">
+ {{ svgs.menu("#fff",false) }}
</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-and-up" src="{{ config.baseurl }}/theme/icon56.png">
+ <img class="hide-on-med-and-up hide-on-ultra-small" src="{{ config.baseurl }}/theme/logo56.png">
<img class="hide-on-small-only" src="{{ config.baseurl }}/theme/logo64.png">
</a>
</div>
- <div style="" class="toplinks">
- <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="hide-on-med-and-down left {{ "" if subnav1 else "light-blue lighten-1" }}">
- <a href="{{ config.baseurl }}/tag/clanek">Články</a>
- </div>
- <div class="search-icon left" style="padding-top: .5rem">
- {{ svgs.search("#fff",2,"rem") }}
- </div>
+ <div class="toplinks">
+ <a class="hide-on-med-and-down left" id="o-nas">
+ O nás
+ </a>
+ <a class="hide-on-med-and-down left" id="clanky">
+ Články
+ </a>
+ <a class="search-icon left">
+ {{ svgs.search("#fff",false) }}
+ </a>
</div>
</div>
</nav>
+ <script>
+ $("#o-nas").click(function() {
+ var body = $("body");
+ body.removeClass("show-subnav2");
+ if(body.hasClass("show-subnav1"))
+ body.removeClass("show-subnav1");
+ else
+ body.addClass("show-subnav1")
+ });
+ $("#clanky").click(function() {
+ var body = $("body");
+ body.removeClass("show-subnav1");
+ if(body.hasClass("show-subnav2"))
+ body.removeClass("show-subnav2");
+ else
+ body.addClass("show-subnav2")
+ });
+ $("body").click(function(e) {
+ if(!($(e.target).parents("a").length || $(e.target).is("a"))) {
+ $("body").removeClass("show-subnav2").removeClass("show-subnav1");
+ }
+ });
+ </script>
<!-- Side nav -->
<ul id="nav-mobile" class="side-nav collapsible">
<li class="no-padding">
@@ -78,11 +102,11 @@
</ul></div>
</li>
<li class="no-padding">
- <a class="collapsible-header {{ "active" if not subnav1 }} waves-effect waves-teal">Články</a>
+ <a class="collapsible-header {{ "active" if not subnav1 }} waves-effect waves-teal">O nás</a>
<div class="collapsible-body"><ul>
- <li><a href="{{ config.baseurl }}/tag/zavody">Akce a závody</a></li>
+ <li><a href="{{ config.baseurl }}/tag/clanek">Všechny články</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zavody">Závody</a></li>
<li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄŤĂnajĂcĂm</a></li>
- <li><a href="{{ config.baseurl }}/tag/ham-konstrukce">HAM konstrukce</a></li>
<li><a href="{{ config.baseurl }}/tag/bastleni">BastlenĂ</a></li>
<li><a href="{{ config.baseurl }}/tag/programovani">ProgramovánĂ</a></li>
</ul></div>
@@ -90,7 +114,7 @@
</ul>
<!-- Bottom nav -->
- <nav class="light-blue lighten-1 subnav subnav1 hide-on-med-and-down" role="navigation" style="z-index:1;position:absolute;">
+ <nav class="light-blue lighten-1 subnav subnav1 hide-on-med-and-down" role="navigation">
<div class="nav-wrapper container">
<ul class="right">
<li {{ "class='lighten-2 light-blue'" | safe if (file == "clanek/2008/o-radioklubu") }}><a href="{{ config.baseurl }}/clanek/2008/o-radioklubu">O Radioklubu</a></li>
@@ -101,12 +125,12 @@
</div>
</nav>
<!-- Bottom nav 2 -->
- <nav class="light-blue lighten-1 subnav subnav2 hide-on-med-and-down hidden" role="navigation" style="z-index:1;position:absolute;">
+ <nav class="light-blue lighten-1 subnav subnav2 hide-on-med-and-down hidden" role="navigation">
<div class="nav-wrapper container">
<ul class="right">
- <li><a href="{{ config.baseurl }}/tag/zavody">Akce a závody</a></li>
- <li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄŤĂnajĂcĂm radioamatĂ©rĹŻm</a></li>
- <li><a href="{{ config.baseurl }}/tag/ham-konstrukce">HAM konstrukce</a></li>
+ <li><a href="{{ config.baseurl }}/tag/clanek">Všechny články</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zavody">Závody</a></li>
+ <li><a href="{{ config.baseurl }}/tag/zacinajicim">ZaÄŤĂnajĂcĂm</a></li>
<li><a href="{{ config.baseurl }}/tag/bastleni">BastlenĂ</a></li>
<li><a href="{{ config.baseurl }}/tag/programovani">ProgramovánĂ</a></li>
</ul>
diff --git a/templates/partials/search.html.nunjucks b/templates/partials/search.html.nunjucks
index 4f7e1c1..4a931d6 100644
--- a/templates/partials/search.html.nunjucks
+++ b/templates/partials/search.html.nunjucks
@@ -1,4 +1,4 @@
-<div class="hidden" id="search">
+<div class="hidden" id="search" style="display:none">
<div><div><div><div style="background-color: white">
<div id="searchbox" style="padding: 0 10px;">
<form>
@@ -57,7 +57,6 @@
(function() {
var searchHeight = $('#search').height();
var adjustHeight = function() {
- console.log("adjH");
var newh = $('#search').height();
if(newh != searchHeight) {
searchHeight = newh;
@@ -67,10 +66,13 @@
}
}
}
- $("#search").bind('DOMSubtreeModified', adjustHeight);
+ // Resize page on searching
+ $("#search > div").bind('DOMSubtreeModified', adjustHeight);
+ // Search showing
$(".search-icon").on("click", function() {
- var doer = function() {
+ $("#search").show();
+ setTimeout(function() {
$("#search").removeClass("hidden");
$("body").append('');
$("#search-overlay").show().addClass("shown");
@@ -78,18 +80,17 @@
setTimeout(function() {
$("#searchbox input").focus();
}, 320);
- };
- if(window.requestAnimationFrame)
- window.requestAnimationFrame(doer);
- else
- doer();
+ },0);
+ });
+ // Search hiding on search overlay click
+ $("#search-overlay").click(function() {
+ $("#search-overlay").removeClass("shown");
+ $("#search").addClass("hidden");
+ setTimeout(function() {
+ adjustHeight();
+ $("#search").hide();
+ },320);
});
})();
- $("#search-overlay").click(function() {
- $("#search-overlay").removeClass("shown");
- $("#search").addClass("hidden");
- setTimeout(function() {
- adjustHeight();
- },320);
- });
+
</script>
diff --git a/templates/partials/svgs.html.nunjucks b/templates/partials/svgs.html.nunjucks
index 25ad0b1..d03b66b 100644
--- a/templates/partials/svgs.html.nunjucks
+++ b/templates/partials/svgs.html.nunjucks
@@ -1,5 +1,5 @@
{% macro symbol(color, size, unit, d) %}
- <svg style="margin-top:auto;margin-bottom:auto;display:block;width:{{ size }}{{unit}};height:{{ size }}{{unit}}; display:inline-block" viewBox="0 0 24 24">
+ <svg style="margin-top:auto;margin-bottom:auto;display:block;{% if size %}width:{{ size }}{{unit}};height:{{ size }}{{unit}};{% endif %}display:inline-block" viewBox="0 0 24 24">
<path {% if color %}fill="{{ color }}"{% endif %} d="{{ d }}" />
</svg>
{% endmacro %}
--
GitLab