Switch to Flexbox for main navigation
This commit is contained in:
David Larlet
parent
cb185a4500
commit
445abf0fff
5 changed files with 61 additions and 92 deletions
49
umap/static/umap/nav.css
Normal file
49
umap/static/umap/nav.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
.umap-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.umap-nav a {
|
||||
color: #3A4259;
|
||||
padding: .4rem;
|
||||
}
|
||||
.umap-nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.umap-nav h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.umap-nav h1 a {
|
||||
background-image: url("./img/logo.svg");
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60px auto;
|
||||
line-height: 70px;
|
||||
padding-left: 80px;
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.umap-nav ul {
|
||||
text-align: center;
|
||||
}
|
||||
.umap-nav ul li {
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.umap-nav .button,
|
||||
.umap-nav .button:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 500px) {
|
||||
.umap-nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 750px) {
|
||||
.umap-nav {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
|
@ -121,7 +121,8 @@ ul {
|
|||
clear: both;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 40px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.col {
|
||||
float: left;
|
||||
|
|
@ -260,71 +261,6 @@ input:-moz-placeholder, :-moz-placeholder {
|
|||
header {
|
||||
margin: 14px 0;
|
||||
}
|
||||
header nav {
|
||||
min-height: 70px;
|
||||
font-size: 0;
|
||||
padding-top: 0;
|
||||
max-width: 1200px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
nav section, nav h1, nav ul, nav li, nav a {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
line-height: 70px;
|
||||
padding: 0 14px;
|
||||
margin: 0 7px 0 0;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav .menu a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav h1 a {
|
||||
background-image: url("./img/logo.svg");
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 60px auto;
|
||||
font-family: 'fira_sansbold';
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
height: 70px;
|
||||
padding-left: 80px;
|
||||
text-align: left;
|
||||
color: #3A4259;
|
||||
}
|
||||
|
||||
nav a.logout {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
nav li.has-button {
|
||||
padding-top: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav li.has-button .button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
nav .branding ul, nav .branding li,
|
||||
nav .branding a, nav .branding h1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
height: 140px;
|
||||
|
|
@ -604,12 +540,6 @@ body.content #storage-ui-container {
|
|||
.thide {
|
||||
display: none;
|
||||
}
|
||||
nav .branding h1 {
|
||||
text-align: center;
|
||||
}
|
||||
nav .branding h1 a {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 639px) {
|
||||
.mwide {
|
||||
|
|
@ -628,7 +558,4 @@ body.content #storage-ui-container {
|
|||
.mhide {
|
||||
display: none;
|
||||
}
|
||||
header nav ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<!-- Included CSS Files (Compressed) -->
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}storage/contrib/css/storage.ui.default.css">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}umap/umap.css">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}umap/nav.css">
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}umap/theme.css">
|
||||
{% endcompress css %}
|
||||
<!-- IE Fix for HTML5 Tags -->
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<header class="wrapper">
|
||||
{% include 'umap/navigation.html' %}
|
||||
<header class="wrapper row">
|
||||
{% include 'umap/navigation.html' with title=SITE_NAME %}
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
{% load i18n %}
|
||||
<nav>
|
||||
<section class="col quarter branding twide">
|
||||
<ul>
|
||||
<li class="name"><h1><a href="/">{{ SITE_NAME }}</a></h1></li>
|
||||
</ul>
|
||||
<nav class="umap-nav">
|
||||
<section>
|
||||
<h1><a href="/">{{ title }}</a></h1>
|
||||
</section>
|
||||
|
||||
<section class="col half menu ttwo-third mwide">
|
||||
<section>
|
||||
<ul>
|
||||
{% if user.is_authenticated %}
|
||||
<li><a href="{% url 'user_maps' user.username %}">{% trans "My maps" %} ({{ user }})</a></li>
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
<li><a href="{% url 'login' %}" class="login">{% trans "Log in" %} / {% trans "Sign in" %}</a></li>
|
||||
{% endif %}
|
||||
<li><a href="{% url 'about' %}">{% trans "About" %}</a></li>
|
||||
<li class="mhide"><a href="{{ UMAP_FEEDBACK_LINK }}">{% trans "Feedback" %}</a></li>
|
||||
<li><a href="{{ UMAP_FEEDBACK_LINK }}">{% trans "Feedback" %}</a></li>
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.has_usable_password %}
|
||||
<li><a href="{% url 'password_change' %}" >{% trans "Change password" %}</a></li>
|
||||
|
|
@ -24,13 +22,7 @@
|
|||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="right thide">
|
||||
<ul>
|
||||
<li class="has-button wide">
|
||||
<a href="{% url 'map_new' %}" class="button">
|
||||
{% trans "Create a map" %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<section>
|
||||
<a href="{% url 'map_new' %}" class="button">{% trans "Create a map" %}</a>
|
||||
</section>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue