Commit e0638f17 authored by Daniel J. Ramirez's avatar Daniel J. Ramirez

Added responsive navbar

parent 8fa4c614
......@@ -90,6 +90,9 @@ a {
max-width: 100%;
width: 100%;
}
main {
margin-top: 16px;
}
#search_input_container {
margin-left: 16px;
margin-right: 16px;
......@@ -275,23 +278,6 @@ fieldset {
border: none;
padding: 0px;
}
nav {
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 24px;
}
nav a {
color: #868686;
}
nav a:hover {
color: #5068dd;
}
nav #eelo_links > * {
margin-right: 32px;
}
footer {
position: absolute;
bottom: 0;
......@@ -357,6 +343,83 @@ footer {
display: inline-block;
margin-right: 8px;
}
nav {
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 24px;
}
nav a {
color: #868686;
}
nav a:hover {
color: #5068dd;
}
nav #eelo_links > * {
margin-right: 32px;
}
#nav_toggle_btn {
display: none;
}
@media screen and (max-width: 600px) {
nav {
position: fixed;
right: 0;
top: 0;
flex-direction: column;
height: 100%;
background-color: white;
z-index: 1000;
width: 280px;
min-width: 280px;
max-width: 280px;
align-items: unset;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
padding: 0;
}
nav > :first-child {
margin-top: 8px;
}
nav > :last-child {
margin-bottom: 8px;
}
nav a {
display: block;
padding: 8px 16px;
}
#nav_toggle_btn {
display: block;
position: absolute;
top: 24px;
right: 8px;
z-index: 1001;
}
#nav_toggle:checked ~ #nav_toggle_btn > .menu-open {
display: none;
}
#nav_toggle:checked ~ #nav_toggle_btn > .menu-close {
display: initial;
}
#nav_toggle:checked ~ nav {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
transform: translateX(0);
}
#nav_toggle:checked ~ #nav_toggle_btn {
position: fixed;
}
#nav_toggle:not(:checked) ~ #nav_toggle_btn > .menu-open {
display: initial;
}
#nav_toggle:not(:checked) ~ #nav_toggle_btn > .menu-close {
display: none;
}
#nav_toggle:not(:checked) ~ nav {
transform: translateX(100%);
}
}
#search_form #search_input_container {
position: relative;
display: flex;
......@@ -376,6 +439,7 @@ footer {
width: 100%;
min-width: 0;
padding-left: 16px;
background-color: transparent;
}
#search_form #search_input_container #q:focus {
outline: none;
......@@ -490,6 +554,9 @@ footer {
#search_form #time_and_lang {
display: flex;
}
#search_input_container {
margin-right: 40px;
}
.tt-dropdown-menu {
padding-left: 16px;
}
......
This diff is collapsed.
......@@ -48,29 +48,6 @@ fieldset {
nav {
&:extend(.container-padding);
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 24px;
a {
color: #868686;
&:hover {
color: @color_accent;
}
}
#eelo_links > * { margin-right: 32px; }
}
footer {
position: absolute;
bottom: 0;
......
......@@ -3,6 +3,7 @@
@import "widgets.less";
@import "base.less";
@import "navbar.less";
@import "search.less";
@import "results.less";
......
......@@ -79,6 +79,10 @@
}
}
main {
margin-top: @spacing_large;
}
#search_input_container {
margin-left: @spacing_container;
margin-right: @spacing_container;
......
nav {
&:extend(.container-padding);
height: 48px;
display: flex;
align-items: center;
justify-content: space-between;
text-transform: capitalize;
margin-bottom: 24px;
a {
color: #868686;
&:hover {
color: @color_accent;
}
}
#eelo_links > * { margin-right: 32px; }
}
#nav_toggle_btn {
display: none;
}
.mobile-mq({
nav {
position: fixed;
right: 0;
top: 0;
flex-direction: column;
height: 100%;
background-color: white;
z-index: 1000;
width: 280px;
min-width: 280px;
max-width: 280px;
align-items: unset;
// padding: @spacing_medium;
box-shadow: 0 0 0 rgba(0, 0, 0, .2);
transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
padding: 0;
}
nav > :first-child { margin-top: @spacing_large / 2; }
nav > :last-child { margin-bottom: @spacing_large / 2; }
nav a {
display: block;
padding: @spacing_large / 2 @spacing_large;
}
#nav_toggle_btn {
display: block;
position: absolute;
top: @spacing_medium + @spacing_large;
right: @spacing_medium;
z-index: 1001;
}
#nav_toggle:checked {
& ~ #nav_toggle_btn > .menu-open { display: none; }
& ~ #nav_toggle_btn > .menu-close { display: initial; }
& ~ nav {
box-shadow: 0 0 30px rgba(0, 0, 0, .2);
transform: translateX(0);
}
& ~ #nav_toggle_btn {
position: fixed;
}
}
#nav_toggle:not(:checked) {
& ~ #nav_toggle_btn > .menu-open { display: initial; }
& ~ #nav_toggle_btn > .menu-close { display: none; }
& ~ nav { transform: translateX(100%); }
}
});
\ No newline at end of file
......@@ -32,6 +32,7 @@
width: 100%;
min-width: 0;
padding-left: @spacing_large;
background-color: transparent;
}
#q:focus { outline: none; }
......@@ -160,6 +161,9 @@
#search_params, #categories { flex-wrap: nowrap; }
#time_and_lang { display: flex; }
}
#search_input_container {
margin-right: @spacing_medium * 2 + 24px;
}
.tt-dropdown-menu {
padding-left: @spacing_large;
}
......
......@@ -20,6 +20,10 @@
</form><!-- / #search_form_full -->
{%- endmacro %}
{% macro navbar_menu() -%}
<label for="nav_toggle" id="nav_toggle_btn">{{icon("menu", "menu-open")}}{{icon("close", "menu-close")}}</label>
{%- endmacro %}
<!-- Draw favicon -->
{% macro draw_favicon(favicon) -%}
......
{% from 'eelo/macros.html' import navbar_menu %}
<input type="checkbox" name="nav_toggle" id="nav_toggle" class="hidden">
<nav>
<span id="eelo_links">
<a href="#">{{_('smartphones')}}</a>
......@@ -9,3 +11,6 @@
<a href="{{ url_for('preferences') }}">{{ _('preferences') }}</a>
</span>
</nav>
<div id="nav_cover"></div>
{{ navbar_menu() }}
Markdown is supported
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