Skip to content
Snippets Groups Projects
Commit 2c4f63a2 authored by Martin Mareš's avatar Martin Mareš
Browse files

Merge branch 'jirka/responsive-design' into 'devel' 

Responzivní design - základy

See merge request !135
parents 819a17dc 5ec4ccb0
Branches
No related tags found
1 merge request!135Responzivní design - základy
Show whitespace changes
Inline Side-by-side
mo/web/templates/base.html
+ 7
− 0
View file @ 2c4f63a2
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/favicon-32x32.png') }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='img/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/favicon-16x16.png') }}"> <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='img/favicon-16x16.png') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body> <body>
...@@ -19,6 +20,12 @@ ...@@ -19,6 +20,12 @@
</div> </div>
</header> </header>
<div id="nav-wrapper"> <div id="nav-wrapper">
<!-- A fake / hidden checkbox is used as click receiver -->
<input class="hamburger" type="checkbox" />
<span></span>
<span></span>
<span></span>
<nav id="main-menu" class="content"> <nav id="main-menu" class="content">
{% for item in get_menu() %} {% for item in get_menu() %}
<a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a> <a {% if item.classes %}class="{{ " ".join(item.classes) }}"{% endif %} href="{{ item.url }}">{{ item.name }}</a>
......
static/mo.css
+ 97
− 0
View file @ 2c4f63a2
...@@ -46,6 +46,7 @@ header h1 { margin: auto 20px 0px; color: #222; } ...@@ -46,6 +46,7 @@ header h1 { margin: auto 20px 0px; color: #222; }
border: 1px #222 solid; border: 1px #222 solid;
z-index: 10; z-index: 10;
} }
#nav-wrapper input.hamburger { display: none; }
footer { footer {
margin-top: auto; margin-top: auto;
...@@ -553,3 +554,99 @@ table.data input.form-control { ...@@ -553,3 +554,99 @@ table.data input.form-control {
.guide-inner { .guide-inner {
margin: 2ex 2ex; margin: 2ex 2ex;
} }
/* Vzhled pro mobily a úzké displeje */
@media only screen and (max-width: 600px) {
header img {
height: 40px;
}
header h1 {
font-size: 18px;
}
/* Hamburger responsive menu (original source: https://codepen.io/erikterwan/pen/EVzeRP) */
#nav-wrapper {
background-color: rgba(255, 255, 255, 0.8);
border: none;
z-index: 1;
padding-top: 10px;
user-select: none;
}
#nav-wrapper input.hamburger {
display: block;
margin-left: 10px;
width: 40px;
height: 32px;
position: absolute;
top: -2px;
left: -7px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/* Hamburger symbol */
#nav-wrapper span {
display: block;
width: 33px;
height: 4px;
margin-left: 10px;
margin-bottom: 5px;
position: relative;
background: #222;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#nav-wrapper span:first-child { transform-origin: 0% 0%; }
#nav-wrapper span:nth-last-child(2) { transform-origin: 0% 100%; }
/* Hamburger crossmark symbol */
#nav-wrapper input.hamburger:checked ~ span {
background-color: #fff;
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#nav-wrapper input.hamburger:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#nav-wrapper input.hamburger:checked ~ span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
nav#main-menu {
position: absolute;
max-width: 300px;
max-height: 100vh;
top: 0px;
padding-top: 35px;
flex-direction: column;
flex-wrap: nowrap;
background: #222;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform: translate(-120%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
overflow-y: scroll;
}
#nav-wrapper input.hamburger:checked ~ nav#main-menu { transform: none; }
nav#main-menu > .right { margin-left: 0px; }
nav#main-menu > form > input { width: 100%; }
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment