#257 issue #256 - fixing hubs template so vertical nav doesn't obscure header
Merged 7 years ago by sayanchowdhury. Opened 7 years ago by duffy.
duffy/fedora-hubs develop  into  develop

file modified
+3 -6
@@ -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 @@ 

  

  .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 */

file modified
+137 -134
@@ -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>

this should fix it... made the navbar more responsive.

Just a stylistic comment. I believe 2 char spaces was used for html and js while 4 char spaces for python. Just want to be consistent. I'll check the functionality later tonight.

Works for me. Can you rebase the commits and fix the indentation?

@skrzepto any ideas on how to configure an IDE to use different spacing depending on file type? I use geany

rebased

7 years ago

ok i fixed it. please dont make me have to do that again :)

rebased

7 years ago

Pull-Request has been merged by sayanchowdhury

7 years ago