From 039023bd0dbbd1bd5fdce50c11cef77f64b006fd Mon Sep 17 00:00:00 2001
From: Máirín Duffy <duffy@redhat.com>
Date: Sep 28 2016 19:04:33 +0000
Subject: issue #256 - fixing hubs template so vertical nav doesn't obscure header


---

diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css
index fe40b05..77714a6 100644
--- a/hubs/static/css/style.css
+++ b/hubs/static/css/style.css
@@ -80,8 +80,8 @@
     
     /* line up header with cards below */
     header .container {
-	padding-left: 1.75rem !important;
-	}
+      padding-left: 1.75rem !important;
+    }
 
     header img.avatar {
         width: 70px;
@@ -277,11 +277,8 @@ font-size: 32pt;
 
 .nav {
   background-color: #fcfcfc;
+  min-height: 180px; 
   padding: 1.5rem;
-  position: absolute;
-  z-index: 3;
-  min-height: 200px; 
-  float: left;
 }
 
 /* navbar fedora-bootstrap overrides to make it vertical */
diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index 3ab75a9..9de8638 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -3,24 +3,25 @@
 {% block title %}{{ hub.name }}{% endblock %}
 {% block content %}
 
-  <div class="col-md-2">
-    <nav class="navbar navbar-light p-t-2 p-b-0">
-      <button type="button" class="navbar-toggler hidden-sm-up"
-        data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+<div class="row p-t-0">
+  <header class="p-t-1">
+    <nav class="navbar navbar-light col-md-2">
+      <button type="button" class="navbar-toggler hidden-md-up"
+        type="button" data-toggle="collapse" data-target="#vertical-navbar">
         <span class="sr-only">Toggle navigation</span>
-        <span class="oi" data-glyph="menu"></span>
+        <i class="fa fa-bars"></i>
       </button>
 
       <!-- Collect the nav links, forms, and other content for toggling -->
       {% if g.auth.logged_in %}
-      <div class="collapse navbar-toggleable-xs" id="bs-example-navbar-collapse-1">
-        <ul class="nav navbar-nav">
+      <div id="vertical-navbar">
+        <ul class="nav navbar-nav p-r-1">
           <li class="p-x-1 nav-item {% if request.path.endswith('/' + g.auth.user.username + '/') %}active{% endif %}">
             <a class="nav-link" href="/{{g.auth.user.username}}">me</a></li>
           <li class="p-x-1 nav-item"><a class="nav-link" href="/{{g.auth.user.username}}/stream">My Stream</a></li>
           {% for hub in g.auth.user.bookmarks %}
-          <li class='p-x-1 nav-item idle-{{hub.activity_class}}{% if request.path.endswith('/' + hub.name + '/') %} active{% endif %}'>
-            <a class="nav-link" href="/{{hub.name}}">{{hub.name}}</a></li>
+            <li class='p-x-1 nav-item idle-{{hub.activity_class}}{% if request.path.endswith('/' + hub.name + '/') %} active{% endif %}'>
+              <a class="nav-link" href="/{{hub.name}}">{{hub.name}}</a></li>
           {% endfor %}
           <!-- At the end of the list, tack on a link to all groups -->
           <li class="p-x-1 nav-item"><a class="nav-link" href="/groups">all</a></li>
@@ -28,166 +29,168 @@
       </div><!-- /.navbar-collapse -->
       {% endif %}
     </nav>
-  </div>
-  <header class="p-t-2">
-    <div class="container">
-
-    <!-- Left side of header -->
-    <div class="col-md-8">
-        {% if hub.user_hub %}
-        <img src="{{ hub.avatar }}" class="avatar" />
-      <h2 class="user m-b-0">{{ hub.name }}</h2>
-      <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>
-        <div class="clearfix"></div>
-        {% else %}
-        <h2 class="team">{{ hub.name }}</h2>
-        <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>
-      {% endif %}
-    </div>
-
-      <!-- right side of header -->
-      <div class="col-md-4 header-right">
-      {% if g.auth.logged_in and hub.is_admin(g.auth.user) %}
-        {% if not edit %}
+  
+    <div class="col-md-10">
+      <div class="row">
+        
+        <!-- Left side of header -->
+        <div class="col-md-7">
+          {% if hub.user_hub %}
+          <img src="{{ hub.avatar }}" class="avatar" />
+          <h2 class="user m-b-0">{{ hub.name }}</h2>
+          <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>
+          <div class="clearfix"></div>
+          {% else %}
+          <h2 class="team">{{ hub.name }}</h2>
+          <h5 class="m-t-1 m-b-1">{{ hub.summary }}</h5>
+          {% endif %}
+        </div>
+        
+        <!-- right side of header -->
+        <div class="col-md-3 header-right">
+          {% if g.auth.logged_in and hub.is_admin(g.auth.user) %}
+          {% if not edit %}
           <div class="dropdown edit pull-xs-right showpointer">
             <span class="dropdown-toggle edit-this-page" type="button"
-                  id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
-                  aria-expanded="true">
+                id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true"
+                aria-expanded="true">
               <span><i class="fa fa-pencil" aria-hidden="true"></i></span> edit this page
             </span>
             <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
               <a class="dropdown-item" href="#">Customize Header</a>
               <div class="dropdown-divider"></div>
               <a class="dropdown-item"
-                  href="{{ url_for('hub_edit', name=hub.name) }}">
+                href="{{ url_for('hub_edit', name=hub.name) }}">
                 Configure Hub
               </a>
               {% if not hub.user_hub %}
               <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Manage Members</a>
-              <div class="dropdown-divider"></div>
-              <a class="dropdown-item" href="#">Archive Hub</a>
+                <a class="dropdown-item" href="#">Manage Members</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Archive Hub</a>
               {% endif %}
             </div>
           </div>
-        {% else %}
+          {% else %}
           <div id="save_edits_btn" class="pull-xs-right">
             <span><i class="fa fa-download" aria-hidden="true"></i></span>
             Save changes
           </div>
-        {% endif %}
-      {% endif %}
+          {% endif %}
+          {% endif %}
+        </div>
+        
       </div>
-    </div>
-
-  </header>
-
-
-{%- with messages = get_flashed_messages(with_categories=true) -%}
-  {%- if category, messages -%}
-  <div class="container">
-    <div class="row">
-      <div class="col-md-6 col-md-offset-3">
-        <ul id="flashes" class="list-group">
-          {%- for category, message in messages -%}
-            <div class="alert {%
-              if category == 'error' %}alert-warning{%
-              else %}alert-info{%
-              endif %} alert-dismissible" role="alert">
-              <button type="button" class="close" data-dismiss="alert"
+      
+      <div class="row p-t-2">
+        {%- with messages = get_flashed_messages(with_categories=true) -%}
+        {%- if category, messages -%}
+          <div class="col-md-6 col-md-offset-3">
+            <ul id="flashes" class="list-group">
+            {%- for category, message in messages -%}
+              <div class="alert {%
+                if category == 'error' %}alert-warning{%
+                else %}alert-info{%
+                endif %} alert-dismissible" role="alert">
+                <button type="button" class="close" data-dismiss="alert"
                   aria-label="Close">
-                <span aria-hidden="true">&times;</span>
-                <span class="sr-only">Close</span>
-              </button>
-              {{ message }}
-            </div>
-          {%- endfor -%}
-        </ul>
-      </div>
-    </div>
-  </div>
-  {%- endif -%}
-{%- endwith -%}
-
-<div class="container">
-
-  <div class="row">
-
-    <div class="col-md-{{ hub.left_width }}">
-      <!--
-        First, before the proper widgets.. a cobweb built-in widget.
-        https://pagure.io/fedora-hubs/issue/133
-      -->
-      {% if hub.archived or hub.last_refreshed | days_since > 31 %}
-      <ul class="media-list">
-        <li class="media">
-          <div class="media-left">
-          {% if hub.archived %}
-            <img class="media-object square-32"
-              src="{{ url_for('static', filename='img/archived.png') }}"/>
-          {% else %}
-            <img class="media-object square-32"
-              src="{{ url_for('static', filename='img/cobweb.png') }}"/>
-          {% endif %}
+                  <span aria-hidden="true">&times;</span>
+                  <span class="sr-only">Close</span>
+                </button>
+                {{ message }}
+              </div>
+            {%- endfor -%}
+            </ul>
           </div>
-          <div class="media-body">
-          {% if hub.archived %}
-            This hub has been archived and locked.
-          {% else %}
-            Cobweb alert!  This hub was last active {{
-                hub.last_refreshed | days_since }} days ago.
+        </div>
+        {%- endif -%}
+        {%- endwith -%}
+        
+
+        <div class="col-md-{{ hub.left_width }}">
+          <!--
+            First, before the proper widgets.. a cobweb built-in widget.
+            https://pagure.io/fedora-hubs/issue/133
+          -->
+          {% if hub.archived or hub.last_refreshed | days_since > 31 %}
+          <ul class="media-list">
+            <li class="media">
+              <div class="media-left">
+              {% if hub.archived %}
+                <img class="media-object square-32"
+                  src="{{ url_for('static', filename='img/archived.png') }}"/>
+              {% else %}
+                <img class="media-object square-32"
+                  src="{{ url_for('static', filename='img/cobweb.png') }}"/>
+              {% endif %}
+              </div>
+              <div class="media-body">
+                {% if hub.archived %}
+                This hub has been archived and locked.
+                {% else %}
+                Cobweb alert!  This hub was last active {{
+                  hub.last_refreshed | days_since }} days ago.
+                {% endif %}
+              </div>
+            </li>
+          </ul>
           {% endif %}
+
+          {% if edit %}
+          <div id='add-widget-left' class='widget row'>
+            <div class="card">
+              <div class="card-block">
+                <h4>
+                <a href="#" class="add_widget" data-position="left">
+                  <span><i class="fa fa-plus" aria-hidden="true"></i></span> Add a widget
+                </a>
+                </h4>
+              </div>
+            </div>
           </div>
-        </li>
-      </ul>
-      {% endif %}
+          {% endif %}
 
-      {% if edit %}
-      <div id='add-widget-left' class='widget row'>
-        <div class="card">
-          <div class="card-block">
-            <h4>
-              <a href="#" class="add_widget" data-position="left">
-                <span><i class="fa fa-plus" aria-hidden="true"></i></span> Add a widget
-              </a>
-            </h4>
+          <div id="left_widgets">
+          {% for widget in hub.left_widgets %}
+            <div id="widget-{{ widget.idx }}" class="widget row"></div>
+          {% endfor %}
           </div>
         </div>
-      </div>
-      {% endif %}
 
-      <div id="left_widgets">
-        {% for widget in hub.left_widgets %}
-        <div id="widget-{{ widget.idx }}" class="widget row"></div>
-        {% endfor %}
-      </div>
-    </div>
-
-    <div class="col-md-{{ hub.right_width }}">
-      {% if edit %}
-      <div id='add-widget-right' class='widget row'>
-        <div class="card">
-          <div class="card-block">
-            <h4>
-              <a href="#" class="add_widget" data-position="right">
+        <div class="col-md-{{ hub.right_width }}">
+          {% if edit %}
+          <div id='add-widget-right' class='widget row'>
+            <div class="card">
+              <div class="card-block">
+                <h4>
+                <a href="#" class="add_widget" data-position="right">
                 <span><i class="fa fa-plus" aria-hidden="true"></i></span> Add a widget
-              </a>
-            </h4>
+                </a>
+                </h4>
+              </div>
+            </div>
+          </div>
+          {% endif %}
+
+          <div id="right_widgets">
+            {% for widget in hub.right_widgets %}
+            <div id="widget-{{ widget.idx }}" class="widget row"></div>
+            {% endfor %}
           </div>
         </div>
-      </div>
-      {% endif %}
 
-      <div id="right_widgets">
-        {% for widget in hub.right_widgets %}
-        <div id="widget-{{ widget.idx }}" class="widget row"></div>
-        {% endfor %}
-      </div>
+      </div>      
+      
+    
     </div>
-
-  </div>
+  </header>
 </div>
 
+      
+
+
+
+
 <div id="edit_modal" class="modal fade" role="dialog">
   <div class="modal-dialog" id="edit_modal_content">
   </div>