Skip to content
Snippets Groups Projects
Verified Commit c282c287 authored by Isabella Skořepová's avatar Isabella Skořepová
Browse files

Heavily modify navigation 

+ 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
parent 4270c6c3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
sass/style.scss
+ 58
− 28
View file @ c282c287
......@@ -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;
......
static/theme/icon56.png 0 → 100644
+ 0
− 0
View file @ c282c287
static/theme/icon56.png

3.92 KiB

templates/partials/header.html.nunjucks
+ 47
− 23
View file @ c282c287
......@@ -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>
......
templates/partials/search.html.nunjucks
+ 17
− 16
View file @ c282c287
<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>
templates/partials/svgs.html.nunjucks
+ 1
− 1
View file @ c282c287
{% 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 %}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment