kosmetické úpravy mobilního menu

5 years ago · 3edb849345
2 changed files with 74 additions and 25 deletions
--- a/mamweb/static/css/mamweb.css
+++ b/mamweb/static/css/mamweb.css
@ -76,8 +76,8 @@ h6 {

 .mam-org-only {
  background: #fff0d7;
-  padding: 10px; 
-  margin: 10px -10px; 
+  padding: 10px;
+  margin: 10px -10px;
  border: orange 2px dashed;
 }

@ -220,7 +220,7 @@ ul.menu {
 	width: 100%;
 	padding: 0px;
 	margin-top: -2px; /* posune celé menu nahoru (pak potřeba zvětšit mezeru mezi menu a submenu) */
-	
+
 	font-variant: small-caps;
 }

@ -233,7 +233,7 @@ ul.menu li {
 	display: inline-block;
 	width: 16.666667%;
 	text-align: center;
-	
+
 	font-size: 140%;
 	font-weight: 400;
 }
@ -247,10 +247,10 @@ ul.menu li>a:active {
 }

 ul.submenu {
-	
+
 	background-color: #e84e10;
 	margin-top: 10px; /* mezera mezi hlavním menu a submenu */
-	margin-bottom: 10px; 
+	margin-bottom: 10px;
 	padding-top: 10px;
 	padding-bottom: 5px;
 	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.4));
@ -291,7 +291,7 @@ div.zadani_azad_termin {
 }

 /**********
- * Footer 
+ * Footer
 **********/

 /* nefunguje pro mobily */
@ -318,7 +318,7 @@ p.license-mobile {


 /**********************
- * Zmenšování displeje 
+ * Zmenšování displeje
 ***********************/


@ -345,7 +345,7 @@ p.license-mobile {
 	#footer {
 		width: 100%;
 	}
-  
+
  div.novinky{
    max-width: 100%;
    margin-left: auto;
@ -396,7 +396,7 @@ ul.submenu {
 		background-image: none;
 	}

-	#header.cojemam, 
+	#header.cojemam,
 	#header.soustredeni,
 	#header.zadani,
 	#header.clanky,
@ -412,7 +412,7 @@ ul.submenu {

 	#header img.logo {
 		display: none;
-	}	
+	}

 	#header img.logo-mobile {
 		display: block;
@ -420,23 +420,74 @@ ul.submenu {
 		left: 0px;
 		width: 100%;
 		filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
+		margin-bottom: 3px;
 	}

+/* mobilní menu */
 	ul.menu {
 		display: none;
 	}

 	ul.menu_mobile {
 		display: block;
+		z-index: 10;
+		position: sticky;
+		font-variant: small-caps;
+		font-size: 150%;
+		list-style-type: none;
+		padding-top: 3px;
+		padding-bottom: 3px;
+	}
+
+	ul.menu_mobile a:active,
+	ul.menu_mobile a:hover,
+	ul.menu_mobile a:focus {
+		text-decoration: none;
+		color: black;
+	}
+
+	ul.menu_mobile ul {
+		list-style-type: square;
+		font-size: 90%;
+		color: black;
+	}
+
+	ul.menu_mobile ul li>a {
+		color: black;
 	}

 	ul.menu_mobile br {
 		display: none;
 	}
-	
+
 	nav.nav-button {
 		display: block;
 		position: sticky;
+  	position: -webkit-sticky;
+  	top: 0;
+		z-index: 10;
+	}
+
+	#navbar-content {
+		background-color: #e84e10;
+	}
+
+	button.navbar-button {
+		color: #6f2509;
+		background-color: #e84e10;
+		font-variant: small-caps;
+		font-size: 160%;
+		border-radius: 0px;
+		border-width: 0px;
+		width: 100%;
+	}
+
+	li.dropdown div.submenu_mobile{
+		display: none;
+	}
+
+	li.dropdown.open div.submenu_mobile{
+		display: block;
 	}

 	p.license-mobile {
@ -448,7 +499,6 @@ ul.submenu {
 		text-align: justify;
 	}

-  
  div.novinky {
    max-width: 100%;
    float: none;
@ -459,7 +509,7 @@ ul.submenu {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
-    
+
  }
 }

@ -472,7 +522,7 @@ div.seznam_orgu {

 div.org_pole {
 	display: inline-block;
-	width: 49%;
+	width: 30%;
 	min-width: 300px;
 	text-align: center;
 }
@ -662,8 +712,8 @@ div.seznam_orgu h3 {
 /* plus a minus tlacitka */
 .mam-org-only-galerie {
  background: #fff0d7;
-  padding: 10px; 
-  margin: 10px 10px 10px -20px; 
+  padding: 10px;
+  margin: 10px 10px 10px -20px;
  border: orange 2px dashed;
  float: left;
 }
--- a/mamweb/templates/base.html
+++ b/mamweb/templates/base.html
@ -37,7 +37,7 @@
  </head>
  <body class='{% if user.is_staff %}org-logged-in{% endif %}'>

-   <div class="container"> 
+   <div class="container">

  {% if user.is_staff %}
    <div class="login-bar" >
@ -52,7 +52,7 @@
    </div>
  {% endif %}

-   
+
 	  <div class='row'>
 		<div class='col-md-12'>
          <a href='/'>
@ -67,15 +67,15 @@
      <div class='row'>
 	    <div class='col-md-12'>

-          {# ========= MENU ========== #}
+{# ========= MENU ========== #}

 	  {% sitetree_menu from "main_menu" include "trunk" template "menu.html" %}

-          {# ========= MENU MOBILE ========== #}
+{# ========= MENU MOBILE ========== #}

 <!--Navbar-->
 <nav class="nav-button">
-  
+
  <!-- Collapse button -->
  <button class="navbar-button" type="button" data-toggle="collapse" data-target="#navbar-content"
    aria-controls="navbar-content" aria-expanded="false">Menu</button>
@ -92,9 +92,9 @@

 </nav>
 <!--/.Navbar-->
-          

-          {# ========= MENU  END ========== #}
+{# ========= END MENU ========== #}
+

 	<div class='row content'>
 	<div class='col-md-12'>
@ -127,4 +127,3 @@
    {% render_block "js" %}
  </body>
 </html>
-