mam/mamweb
11
0
Fork 0
Code Issues Pull requests 8 Projects Wiki Activity Actions

Nástřel mobilní verze.

Browse source
This commit is contained in:
Honza "Stínovlas" Musílek 2015-09-13 18:10:26 +02:00
parent 59d15d148e
commit 3e2e865b48
4 changed files with 116 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

108
mamweb/static/css/mamweb.css
View file

@ -71,8 +71,8 @@ h2 {
#header img.logo { #header img.logo {
position: absolute; position: absolute;
top: 20px; top: 40px;
left: 45px; left: 55px;
} }
#header h1 { #header h1 {
font-size: 130%; font-size: 130%;
@ -90,18 +90,24 @@ h2 {
/* Menu */ /* Menu */
#menu { div.menu.mobile {
display: none;
}
div.menu.desktop {
display: block;
}
div.menu {
position: relative; position: relative;
top: -10px; top: -10px;
z-index: 10; z-index: 10;
background: url("../images/menu-bg.png") no-repeat left top; background: url("../images/menu-bg.png") no-repeat left top;
height: 60px; height: 60px;
} }
#menu ul { div.menu ul {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
#menu li { div.menu li {
display: inline-block; display: inline-block;
border-radius: 0px; border-radius: 0px;
@ -116,19 +122,19 @@ h2 {
border-bottom-left-radius: 8px; border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; border-bottom-right-radius: 8px;
} }
#menu a { div.menu a {
display: block; display: block;
padding: 8px 10px; padding: 8px 10px;
color: #006400; color: #006400;
height: 48px; height: 48px;
} }
#menu a:hover { div.menu a:hover {
background: url("../images/menu-bg-selected.png") no-repeat left -7px; background: url("../images/menu-bg-selected.png") no-repeat left -7px;
background-size: 100% 68px; background-size: 100% 68px;
text-decoration: none; text-decoration: none;
color: #003c00; color: #003c00;
} }
#menu li.selected a { div.menu li.selected a {
background: url("../images/menu-bg-selected.png") no-repeat left -7px; background: url("../images/menu-bg-selected.png") no-repeat left -7px;
background-size: 100% 68px; background-size: 100% 68px;
text-decoration: none; text-decoration: none;
@ -234,11 +240,11 @@ div.zadani_azad_termin {
background-size: 100% 100%; background-size: 100% 100%;
} }
#header img.logo { #header img.logo {
top: 15px; top: 27px;
left: 25px; left: 35px;
height: 170px; height: 140px;
} }
#menu li { div.menu li {
min-width: 120px; min-width: 120px;
font-size: 130%; font-size: 130%;
} }
@ -274,3 +280,81 @@ div.zadani_azad_termin {
float: left; float: left;
} }
} }
@media (max-width: 767px) {
#header {
width: 100%;
height: 196px;
height: 0px;
background-size: 100%;
padding-bottom: 25%;
}
#header img.logo {
top: 0px;
left: 0px;
height: 100%;
}
div.menu {
height: auto;
}
div.menu li {
display: block;
width: 100%;
height: 35px;
font-size: 130%;
}
#submenu {
background: none;
height: auto;
margin-left: 90px;
margin-top: 15px;
}
#submenu ul {
font-size: 110%;
}
#submenu li {
display: inline-block;
margin: 5px 8px;
border-radius: 30px;
background: #ffd546;
height: auto;
}
#submenu li a:hover, #submenu li.selected {
background: #ffd546;
}
div.menu.mobile {
display: block;
position: absolute;
top: -1px;
background: none;
}
div.menu.mobile > div.dropdown > button {
font-size: 20px;
}
div.menu.mobile > div.dropdown > ul {
margin: 0px;
padding: 0px;
border-radius: 0px;
}
div.menu.mobile > div.dropdown > ul > li {
margin: 0px;
padding: 0px;
display: block;
font-size: 20px;
background: none;
font-variant: normal;
height: auto;
}
div.menu.mobile > div.dropdown > ul > li > a {
margin: 0px;
padding: 5px 30px;
height: auto;
}
div.menu.mobile > div.dropdown > ul > li > a:hover {
background: #ffa500;
}
div.menu.desktop {
display: none;
}
}

BIN
mamweb/static/images/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 35 KiB

21
mamweb/templates/base.html
View file

@ -56,9 +56,24 @@
</div> </div>
</div> </div>
<div class='row'> <div class='row'>
<div class='col-md-12' style=''> <div class='col-md-12'>
<div id='menu'> {# ========= MOBILE MENU ========== #}
<div class="menu mobile">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu
<span class="glyphicon glyphicon-th-list"></span></button>
<ul class="dropdown-menu">
<li class=""><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
<li class=""><a href="/soustredeni/">Soustředění</a>
<li class=""><a href="/zadani/aktualni/">Zadání</a>
<li class=""><a href="/clanky/uvod/">Články</a>
<li class=""><a href="/archiv/cisla/">Archiv</a>
<li class=""><a href="/co-je-MaM/kontakt/">Kontakt</a>
</ul>
</div>
</div>
{# ============= MENU ============== #} {# ============= MENU ============== #}
<div class="menu desktop">
<ul> <ul>
<li class="{% block menu_uvod %}{% endblock %}"><a href="/co-je-MaM/uvod/">Co je M&amp;M</a> <li class="{% block menu_uvod %}{% endblock %}"><a href="/co-je-MaM/uvod/">Co je M&amp;M</a>
{# ukazka jak pouzit tag url <li class="{% block menu_soustredeni %}{% endblock %}"><a href="{% url 'seminar_seznam_soustredeni' %}">Soustředění</a> #} {# ukazka jak pouzit tag url <li class="{% block menu_soustredeni %}{% endblock %}"><a href="{% url 'seminar_seznam_soustredeni' %}">Soustředění</a> #}
@ -68,8 +83,8 @@
<li class="{% block menu_archiv %}{% endblock %}"><a href="/archiv/cisla/">Archiv</a> <li class="{% block menu_archiv %}{% endblock %}"><a href="/archiv/cisla/">Archiv</a>
<li class="{% block menu_odevzdat %}{% endblock %}"><a href="/co-je-MaM/kontakt/">Kontakt</a> <li class="{% block menu_odevzdat %}{% endblock %}"><a href="/co-je-MaM/kontakt/">Kontakt</a>
</ul> </ul>
{# ======== KONEC MENU =============#}
</div> </div>
{# ======== KONEC MENU =============#}
</div> </div>
</div> </div>
<div class='row'> <div class='row'>

3
seminar/templates/seminar/titulnistrana.html
View file

@ -2,7 +2,8 @@
{% block content %} {% block content %}
<br />
<br />
{# Uvitaci text #} {# Uvitaci text #}
<h2> <h2>
{% block nadpis1a %}{% block nadpis1b %} {% block nadpis1a %}{% block nadpis1b %}