symposion_app Changeset - 9f0bb9178fc3

Changeset - 9f0bb9178fc3

Parent rev.

Child rev.

[Not reviewed]

0 3 0

Joel Addison - 6 years ago 2017-12-10 07:26:38
joel@addison.net.au

Improved menu styling

Update menu to use same style as static site,
with slight adjustments for Bootstrap 3.

3 files changed with 171 insertions and 131 deletions:

pinaxcon/templates/site_base.html

pinaxcon/templates/sitetree_header.html

static/src/css/app.css

146

0 comments (0 inline, 0 general)

pinaxcon/templates/site_base.html

➞

Show inline comments

@@ ... / @@ -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">

pinaxcon/templates/sitetree_header.html

➞

Show inline comments

 {% 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>

static/src/css/app.css

➞

Show inline comments

@@ ... / @@ -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;
     background-color: #fefde5 !important;
+}
 .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;
+}
 /* Schedule, proposal and presenter display */
 /* Make sure twitter/link buttons get displayed */
 .room {
-	display: none;
+    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;
     display: block;
+}
 /* Schedule, proposal and presenter display */
 /* Make sure twitter/link buttons get displayed */
 .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 */
 .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-nav {
          padding-left: 20px;
+     }
 .navbar-lca .navbar-toggle .icon-bar {
     background-color: #888;
+}

0 comments (0 inline, 0 general)