diff options
| -rw-r--r-- | chimere/static/chimere/css/styles.css | 77 | ||||
| -rw-r--r-- | chimere/templates/chimere/blocks/actions.html | 82 |
2 files changed, 107 insertions, 52 deletions
diff --git a/chimere/static/chimere/css/styles.css b/chimere/static/chimere/css/styles.css index 1a1bcf9..ce9e762 100644 --- a/chimere/static/chimere/css/styles.css +++ b/chimere/static/chimere/css/styles.css @@ -97,6 +97,7 @@ caption{ color:#444; } +.nav.navbar-nav > li > a, .action a, .pager li a, .nav-pills > li.active > a, .pager li a:hover, .nav-pills > li.active > a:hover, @@ -390,11 +391,11 @@ a[disabled] { font-family: 'Yanone Kaffeesatz Light', sans-serif; height: 35px; z-index: 10; - position: absolute; - width: 100%; padding:0; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3); + text-transform: uppercase; + padding: 3px; } #topbar img{ @@ -402,22 +403,24 @@ a[disabled] { vertical-align: top; } -#top-menu-first{ - position: absolute; - width: 300px; - font-size: 1.4em; - padding: 0.15em 0.4em; - text-transform: uppercase; +#topbar .nav.navbar-nav > li > a { + padding-top: 0; + padding-bottom: 0; } -#top-menu{ - text-transform: uppercase; - padding: 3px; - padding-left: 300px; + +#topbar #top-menu-first.action{ + padding-right: 5px; } -#top-menu .action{ +#topbar .action{ font-size: 1.4em; + padding-left: 5px; + padding-right: 90px; +} + +#topbar .container-fluid{ + padding: 0; } #content{ @@ -1317,6 +1320,7 @@ table.inline-table td input[type=file]{ border: 0px solid transparent; display: block; margin: 0; + width: 500px; } #search-result, @@ -3915,12 +3919,12 @@ li.main_category li.subcategory > span > label{ #switch-menu{ display: none; - position: fixed; + position: absolute; text-align: center; text-transform: uppercase; font-size: 1.6em; padding: 0; - top: 78px; + top: 18px; z-index: 200; right: 0; left: 0; @@ -3991,6 +3995,15 @@ li.main_category li.subcategory > span > label{ } } +@media (max-width: 1552px) { + #topbar .action{ + padding-right: 20px; + } + #search-box{ + width: 350px; + } +} + @media (min-width: 1200px) { #simple_button-lnk .lbl{ display:inline; @@ -4014,6 +4027,18 @@ li.main_category li.subcategory > span > label{ #top-menu { padding-left: 15px; } + #topbar .nav > li.action#top-menu-first { + display: none; + } + #topbar .nav > li.action { + display: inline-block; + padding-right: 15px; + padding-left: 20px; + } + + #search-box{ + width: 250px; + } } @media screen and (max-width: 750px) { @@ -4023,8 +4048,17 @@ li.main_category li.subcategory > span > label{ .modal-dialog.modal-xl { width: auto; } - #topbar{ - position: fixed; + #topbar .navbar-nav { + margin: 7.5px -4px; + } + #extra-pages{ + background-color: #fff; + margin: 0; + left: 0; + right: 0; + top: 48px; + z-index: 1000; + position: absolute; } .map-footer, #footer-panel, #panel, #hide-panel, #maps-lnk{ display: none; @@ -4090,13 +4124,12 @@ li.main_category li.subcategory > span > label{ div#panel{ width: 100%; bottom: auto; - margin-top: 78px; position: relative; } div#sidebar{ height: auto; top: 0; - padding: 0; + padding: 12px 0; } div#panel{ background-size: auto 80px; @@ -4114,6 +4147,7 @@ li.main_category li.subcategory > span > label{ } #search-box{ padding-bottom: 0; + width: 100%; } .sidebar-handler, #frm_categories{ @@ -4182,13 +4216,14 @@ li.main_category li.subcategory > span > label{ right: 1.5em; left: auto; } - .search-box-col{ + .nav li.search-box-col{ display: block; position: absolute; width: 100%; - top: 35px; + top: 50px; background-color: #fff; padding: 8px; + margin-left: 15px; } #topbar{ box-shadow: none; diff --git a/chimere/templates/chimere/blocks/actions.html b/chimere/templates/chimere/blocks/actions.html index 2ce5c29..597e43a 100644 --- a/chimere/templates/chimere/blocks/actions.html +++ b/chimere/templates/chimere/blocks/actions.html @@ -1,49 +1,69 @@ {% load i18n chimere_tags bootstrap %} - <div id="topbar"> - <div id="top-menu-first"> - <a href="{% url 'index' area.urn %}"> - {% if area.logo %} - <img src="{{area.logo.url}}"> - {% else %} - {{area.name}} - {% endif %} +<nav class="navbar navbar-default" id="topbar"> + <div class="container-fluid"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" + data-toggle="collapse" + data-target="#extra-pages" + aria-expanded="false"> + <span class="sr-only">{% trans "Toggle" %}</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <ul class="nav navbar-nav"> + <li class='action' id="top-menu-first"> + <a href="{% url 'index' area.urn %}"> + {% if area.logo %} + <img src="{{area.logo.url}}"> + {% else %} + {{area.name}} + {% endif %} + </a> + </li> + <li class="action"> + <a href="{% url 'index' area_name %}"> + {% trans "Map" %} + </a> + </li> + {% if area.show_directory %} + <li class="action"> + <a href="{% url 'chimere:category-directory' area_name %}"> + {% trans "Directory" %} </a> - </div> - <div id="top-menu" class="row"> - <div class="col-xs-3 col-sm-2 action"> - <a href="{% url 'index' area_name %}"> - {% trans "Map" %} - </a> - </div> - {% if area.show_directory %} - <div class="col-xs-3 col-sm-2 action"> - <a href="{% url 'chimere:category-directory' area_name %}"> - {% trans "Directory" %} - </a> - </div> - {% endif %} - <div class="search-box-col col-sm-{%if not extra_pages %}6{% elif extra_pages|length < 3 %}4{% else %}6{% endif %}"> - <div id='search-box'></div> - </div> + </li> + {% endif %} + <li class="search-box-col"> + <div id='search-box'></div> + </li> + </ul> + </div> + + <div class="collapse navbar-collapse" id="extra-pages"> + <ul class="nav navbar-nav"> {% for page in extra_pages %} - <div class="col-xs-{% if page.image %}1{% else%}3{% endif %} col-sm-{% if page.image %}1{% else%}2{% endif %} action" - id="btn-{{page.mnemonic}}"> + <li class="action" id="btn-{{page.mnemonic}}"> {% if page.url %} <a href='{{page.url}}' target="_blank"> {% else %} <a href='#' onclick="$('#{{page.mnemonic}}').modal('show');return false;"> - {% endif %} + {% endif %} {% if page.image %} <img src="{{page.image.url}}"> {% else %} {{page.title}} {% endif %} - </a> - </div> + </a>{# </a> #} + </li> {% endfor %} - </div> + + </ul> + + </div> + </div> +</nav> {% for page in extra_pages %}{% if not page.url %} {% bootstrap_modal page.mnemonic page.title page.content|safe %} {% endif %}{% endfor %} |