Improved menu styling
Update menu to use same style as static site, with slight adjustments for Bootstrap 3.
This commit is contained in:
Joel Addison
parent
00ea909d05
commit
9f0bb9178f
3 changed files with 175 additions and 135 deletions
|
|
@ -49,23 +49,10 @@
|
|||
</head>
|
||||
<body class="{% block body_class %}{% endblock %}">
|
||||
<div class="container">
|
||||
<header class="banner clearfix hidden-print">
|
||||
<table class="table table-responsive">
|
||||
<tr>
|
||||
<td>
|
||||
<div class="container-fluid" id="logo">
|
||||
<div class="row" >
|
||||
<div ><a href="#"><img src="https://linux.conf.au/media/img/LCA18_nodate.svg" height=80 /></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="vertical-align: middle;">
|
||||
{% sitetree_menu from "main" include "trunk" template "sitetree_header.html" %}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</header>
|
||||
|
||||
<header class="clearfix hidden-print">
|
||||
{% sitetree_menu from "main" include "trunk" template "sitetree_header.html" %}
|
||||
</header>
|
||||
|
||||
{% if messages %}
|
||||
<ul class="messagelist hidden-print">
|
||||
|
|
|
|||
|
|
@ -1,33 +1,37 @@
|
|||
{% load sitetree %}
|
||||
<nav class="navbar nav-top navbar-static-top" role="navigation">
|
||||
<nav class="navbar navbar-lca" role="navigation">
|
||||
<div class="container-fluid">
|
||||
{% for item in sitetree_items %}
|
||||
{% if forloop.counter == 1 %}
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand logo" href="{% sitetree_url for item %}">
|
||||
<img src="https://linux.conf.au/media/img/LCA18_nodate.svg" height="80" alt="linux.conf.au 2018" />
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if forloop.counter == 2 %}
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
{% endif %}
|
||||
<li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
|
||||
<a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>
|
||||
{{ item.title_resolved }}
|
||||
{% if item.has_children %}<b class="caret"></b>{% endif %}
|
||||
</a>
|
||||
{% if item.has_children %}
|
||||
{% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
|
||||
{% endif %}
|
||||
</li>
|
||||
<li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
|
||||
<a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>
|
||||
<span>
|
||||
{{ item.title_resolved }} {% if item.has_children %}<b class="caret"></b>{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% if item.has_children %}
|
||||
{% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -179,103 +179,40 @@ div.system-message p.system-message-title {
|
|||
}
|
||||
|
||||
/**
|
||||
* The CSS shown here will not be introduced in the Quickstart guide, but shows
|
||||
* how you can use CSS to style your Element's container.
|
||||
* Stripe integration
|
||||
*/
|
||||
.StripeElement {
|
||||
background-color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 3px solid transparent;
|
||||
box-shadow: 1px 3px 5px 1px #e6ebf1;
|
||||
-webkit-transition: box-shadow 150ms ease;
|
||||
transition: box-shadow 150ms ease;
|
||||
background-color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 3px solid transparent;
|
||||
box-shadow: 1px 3px 5px 1px #e6ebf1;
|
||||
-webkit-transition: box-shadow 150ms ease;
|
||||
transition: box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.StripeElement--focus {
|
||||
box-shadow: 1px 3px 5px 1px #cfd7df;
|
||||
box-shadow: 1px 3px 5px 1px #cfd7df;
|
||||
}
|
||||
|
||||
.StripeElement--invalid {
|
||||
border-color: #fa755a;
|
||||
border-color: #fa755a;
|
||||
}
|
||||
|
||||
.StripeElement--webkit-autofill {
|
||||
background-color: #fefde5 !important;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar-nav > li > a, .navbar-brand {
|
||||
padding-top:5px !important; padding-bottom:0 !important;
|
||||
height: 40px;
|
||||
|
||||
}
|
||||
.navbar {
|
||||
min-height: 40px !important;
|
||||
background-color: #ffffff;
|
||||
border: #ffffff;
|
||||
color: #000000;
|
||||
width: fit-content;
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
/* Standard nav menu styling */
|
||||
.navbar-nav li a {
|
||||
color: #575757 !important;
|
||||
padding: 0px;
|
||||
line-height: 32px;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-nav > li { width: 130px; text-align: center; }
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0;
|
||||
left: 130px;
|
||||
}
|
||||
|
||||
.dropdown-menu > li {
|
||||
min-width: unset;
|
||||
text-align: left;
|
||||
padding: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.banner table, .banner thead, .banner tbody, .banner th, .banner td, .banner tr {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.room {
|
||||
display: none;
|
||||
}
|
||||
.speaker {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 4 different navbar styles to alternate through */
|
||||
.navbar-nav li:nth-child(4n+0) {background-color: #ECE81A;}
|
||||
|
||||
.navbar-nav li:nth-child(4n+1) { background-color: #DE7C00; }
|
||||
|
||||
.navbar-nav li:nth-child(4n+2) { background-color: #5BC2E7; }
|
||||
|
||||
.navbar-nav li:nth-child(4n+3) { background-color: #4E87A0; }
|
||||
|
||||
/* nav menu highligh */
|
||||
.navbar-nav li:hover { background-color: #005760; }
|
||||
.navbar-nav > li:hover > a { color: #e9e9e9 !important;}
|
||||
.navbar-nav > li > a:hover { background-color: transparent !important; }
|
||||
.navbar-nav .dropdown-menu li:hover > a { background-color: #005760 !important; color: #e9e9e9 !important; }
|
||||
|
||||
.navbar-nav .open > a, .navbar-nav .open > a:hover, .navbar-nav .open > a:focus {
|
||||
background-color: transparent !important;
|
||||
color: #e9e9e9 !important;
|
||||
border: none;
|
||||
background-color: #fefde5 !important;
|
||||
}
|
||||
|
||||
/* Schedule, proposal and presenter display */
|
||||
/* Make sure twitter/link buttons get displayed */
|
||||
|
||||
.room {
|
||||
display: none;
|
||||
}
|
||||
.speaker {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.presenters .btn-group {
|
||||
display: inline-flex;
|
||||
margin-left: 10px;
|
||||
|
|
@ -283,24 +220,9 @@ div.system-message p.system-message-title {
|
|||
.presenters .btn-svg { width: 20px; }
|
||||
|
||||
@media all and (max-width: 760px) {
|
||||
.navbar-nav { margin: 0px -15px; }
|
||||
.navbar-nav > li { width: 120px !important; }
|
||||
.dropdown-menu { left: 20px; top: 30px; }
|
||||
.room { display: block; }
|
||||
}
|
||||
|
||||
@media all and (min-width: 760px) {
|
||||
.navbar-nav > li {
|
||||
-webkit-transform: skew(-45deg);
|
||||
-moz-transform: skew(-45deg);
|
||||
transform: skew(-45deg);
|
||||
}
|
||||
.navbar-nav > li > * {
|
||||
-webkit-transform: skew(45deg);
|
||||
-moz-transform: skew(45deg);
|
||||
transform: skew(45deg);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 760px) {
|
||||
/* Force table to not be like tables anymore */
|
||||
table {
|
||||
|
|
@ -329,9 +251,136 @@ div.system-message p.system-message-title {
|
|||
width: 45%;
|
||||
padding-right: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
|
||||
.logo {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding-left: 0;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: 110px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.navbar-nav > li.dropdown {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
color: #005760 !important;
|
||||
font-family: 'Titillium Web', sans-serif;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
|
||||
padding-top: 8px; /* Bootstrap 3 override */
|
||||
padding-bottom: 8px; /* Bootstrap 3 override */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar-nav .nav-link {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding-top: 8px; /* Bootstrap 3 override */
|
||||
padding-bottom: 8px; /* Bootstrap 3 override */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar-nav {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-nav > li {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
width: 128px;
|
||||
-webkit-transform: skew(-45deg);
|
||||
-moz-transform: skew(-45deg);
|
||||
transform: skew(-45deg);
|
||||
|
||||
padding-top: 8px; /* Bootstrap 3 override */
|
||||
padding-bottom: 8px; /* Bootstrap 3 override */
|
||||
}
|
||||
|
||||
.navbar-nav > li > a > span {
|
||||
-webkit-transform: skew(45deg);
|
||||
-moz-transform: skew(45deg);
|
||||
transform: skew(45deg);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-toggle::after {
|
||||
-webkit-transform: skew(45deg);
|
||||
-moz-transform: skew(45deg);
|
||||
transform: skew(45deg);
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
left: -20px;
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 different navbar styles to alternate through */
|
||||
.navbar-nav > li:nth-child(4n+0) > a,
|
||||
.navbar-nav > li:nth-child(4n+0) .dropdown-menu {
|
||||
background-color: #ECE81A;
|
||||
}
|
||||
|
||||
.navbar-nav > li:nth-child(4n+1) > a,
|
||||
.navbar-nav > li:nth-child(4n+1) .dropdown-menu {
|
||||
background-color: #DE7C00;
|
||||
}
|
||||
|
||||
.navbar-nav > li:nth-child(4n+2) > a,
|
||||
.navbar-nav > li:nth-child(4n+2) .dropdown-menu {
|
||||
background-color: #5BC2E7;
|
||||
}
|
||||
|
||||
.navbar-nav > li:nth-child(4n+3) > a,
|
||||
.navbar-nav > li:nth-child(4n+3) .dropdown-menu {
|
||||
background-color: #4E87A0;
|
||||
color: #e9e9e9 !important;
|
||||
}
|
||||
|
||||
.navbar-nav > li:nth-child(4n+3) .dropdown-menu > a {
|
||||
color: #e9e9e9 !important;
|
||||
}
|
||||
|
||||
/* nav menu highlight */
|
||||
.navbar-nav > li:hover > a,
|
||||
.navbar-nav > li.open > a,
|
||||
.navbar-nav .dropdown-menu > a:hover,
|
||||
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus,
|
||||
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
|
||||
background-color: #005760;
|
||||
color: #e9e9e9 !important;
|
||||
}
|
||||
|
||||
.navbar-lca .navbar-toggle {
|
||||
border-color: #ddd;
|
||||
}
|
||||
|
||||
.navbar-lca .navbar-toggle .icon-bar {
|
||||
background-color: #888;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue