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>
|
</head>
|
||||||
<body class="{% block body_class %}{% endblock %}">
|
<body class="{% block body_class %}{% endblock %}">
|
||||||
<div class="container">
|
<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 %}
|
{% if messages %}
|
||||||
<ul class="messagelist hidden-print">
|
<ul class="messagelist hidden-print">
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,37 @@
|
||||||
{% load sitetree %}
|
{% load sitetree %}
|
||||||
<nav class="navbar nav-top navbar-static-top" role="navigation">
|
<nav class="navbar navbar-lca" role="navigation">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
{% for item in sitetree_items %}
|
{% for item in sitetree_items %}
|
||||||
{% if forloop.counter == 1 %}
|
{% if forloop.counter == 1 %}
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
<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="sr-only">Toggle navigation</span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
<span class="icon-bar"></span>
|
<span class="icon-bar"></span>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
{% if forloop.counter == 2 %}
|
{% if forloop.counter == 2 %}
|
||||||
<div id="navbar" class="navbar-collapse collapse">
|
<div id="navbar" class="navbar-collapse collapse">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% 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 %}>
|
<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 }}
|
<span>
|
||||||
{% if item.has_children %}<b class="caret"></b>{% endif %}
|
{{ item.title_resolved }} {% if item.has_children %}<b class="caret"></b>{% endif %}
|
||||||
</a>
|
</span>
|
||||||
{% if item.has_children %}
|
</a>
|
||||||
{% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
|
{% if item.has_children %}
|
||||||
{% endif %}
|
{% sitetree_children of item for menu template "sitetree/menu_bootstrap3_dropdown.html" %}
|
||||||
</li>
|
{% endif %}
|
||||||
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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
|
* Stripe integration
|
||||||
* how you can use CSS to style your Element's container.
|
|
||||||
*/
|
*/
|
||||||
.StripeElement {
|
.StripeElement {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border: 3px solid transparent;
|
border: 3px solid transparent;
|
||||||
box-shadow: 1px 3px 5px 1px #e6ebf1;
|
box-shadow: 1px 3px 5px 1px #e6ebf1;
|
||||||
-webkit-transition: box-shadow 150ms ease;
|
-webkit-transition: box-shadow 150ms ease;
|
||||||
transition: box-shadow 150ms ease;
|
transition: box-shadow 150ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.StripeElement--focus {
|
.StripeElement--focus {
|
||||||
box-shadow: 1px 3px 5px 1px #cfd7df;
|
box-shadow: 1px 3px 5px 1px #cfd7df;
|
||||||
}
|
}
|
||||||
|
|
||||||
.StripeElement--invalid {
|
.StripeElement--invalid {
|
||||||
border-color: #fa755a;
|
border-color: #fa755a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.StripeElement--webkit-autofill {
|
.StripeElement--webkit-autofill {
|
||||||
background-color: #fefde5 !important;
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Schedule, proposal and presenter display */
|
/* Schedule, proposal and presenter display */
|
||||||
/* Make sure twitter/link buttons get displayed */
|
/* Make sure twitter/link buttons get displayed */
|
||||||
|
|
||||||
|
.room {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.speaker {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.presenters .btn-group {
|
.presenters .btn-group {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
@ -283,24 +220,9 @@ div.system-message p.system-message-title {
|
||||||
.presenters .btn-svg { width: 20px; }
|
.presenters .btn-svg { width: 20px; }
|
||||||
|
|
||||||
@media all and (max-width: 760px) {
|
@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; }
|
.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) {
|
@media only screen and (max-width: 760px) {
|
||||||
/* Force table to not be like tables anymore */
|
/* Force table to not be like tables anymore */
|
||||||
table {
|
table {
|
||||||
|
|
@ -329,9 +251,136 @@ div.system-message p.system-message-title {
|
||||||
width: 45%;
|
width: 45%;
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
white-space: nowrap;
|
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…
Add table
Reference in a new issue