#4974 Improve the design of the top app bars of Pagure
Opened 2 months ago by appadeia. Modified 4 days ago
appadeia/pagure cblack/responsive  into  master

file modified
+89
@@ -66,6 +66,95 @@ 

    background-color: #f0f0f0;

  }

  

+ .pagure-app-bar {

+   display: flex;

+   flex-direction: column;

+ }

+ 

+ .pagure-app-bar__nav {

+   display: flex;

+   flex-direction: row;

+ }

+ 

+ .pagure-app-bar--top {

+   width: 100%;

+ }

+ 

+ .pagure-app-bar__row {

+   width: 100%;

+   min-height: 30px;

+   display: flex;

+   position: relative;

+   flex-wrap: wrap;

+ }

+ 

+ .pagure-app-bar__section {

+   display: inline-flex;

+   flex: 1 1 auto;

+   align-items: center;

+   padding: 8px;

+ }

+ 

+ .pagure-app-bar__section--start {

+   justify-content: flex-start;

+   order: -1;

+ }

+ 

+ .pagure-app-bar__section--end {

+   justify-content: flex-end;

+   order: 1;

+ }

+ 

+ @media screen and (max-width: 799px) {

+   .pagure-navbar {

+     flex-wrap: initial;

+     overflow-x: scroll;

+   }

+ 

+   .pagure-app-bar__row {

+     min-height: 40px;

+   }

+ 

+   .pagure-app-bar:not(.pagure-app-bar--top) {

+     position: fixed;

+     bottom: 0;

+     left: 0;

+     right: 0;

+     z-index: 500;

+     flex-direction: column-reverse;

+     padding-top: 0 !important;

+   }

+ 

+   .pagure-app-bar:not(.pagure-app-bar--top) .nav-tabs .nav-link.active {

+     border-color: #fff #dee2e6 #dee2e6;

+     border-top-left-radius: 0;

+     border-top-right-radius: 0;

+     border-bottom-left-radius: .25rem;

+     border-bottom-right-radius: .25rem;

+     box-sizing: border-box;

+   }

+ 

+   .pagure-app-bar:not(.pagure-app-bar--top) .dropdown-toggle::after {

+     border-top: 0;

+     border-right: .3em solid transparent;

+     border-bottom: .3em solid;

+     border-left: .3em solid transparent;

+   }

+ 

+   .footer {

+     padding-bottom: 15vh !important;

+   }

+ 

+   .pagure-navbar .nav-link {

+     white-space: nowrap;

+   }

+ 

+   .pagure-app-bar__nav {

+     width: 100%;

+     justify-content: space-around;

+   }

+ }

+ 

  .code_table {

      background: #fff;

      min-width: 100%;

file modified
+1 -4
@@ -20,10 +20,7 @@ 

  {# we recognize non-executable file, executable file and symlink #}

  {% set expected_modes = [33188, 33261, 40960] %}

  <div class="row">

-   <div class="col">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

      <div class="d-flex">

        <div>

          <h4 class="font-weight-bold">

@@ -9,10 +9,7 @@ 

  

  {% block repo %}

    <div class="row">

-       <div class="col-2">

-           {% block overviewtabs %}{{ super() }}{% endblock %}

-       </div>

-       <div class="col-10">

+       <div class="col-12">

        <div class="row mb-1">

          {% if g.repo_obj and g.repo_obj.is_empty %}

          <div class="col-md-12">

file modified
+1 -4
@@ -18,10 +18,7 @@ 

  

  {% block repo %}

    <div class="row">

-     <div class="col-2">

-         {% block overviewtabs %}{{ super() }}{% endblock %}

-     </div>

-     <div class="col-10">

+     <div class="col-12">

    <div class="row mb-1">

      <div class="col-sm-6">

      <h3>

file modified
+88 -84
@@ -5,6 +5,7 @@ 

  <html lang='en'>

  <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

+     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

      <title>{% block title %}{% endblock %} - {{ theme.site_title }}</title>

      {{ theme.head_imports() }}

      <link type="text/css" rel="stylesheet" nonce="{{ g.nonce }}" href="{{
@@ -16,93 +17,97 @@ 

    <body id="{{ tag }}">

      {{theme.sitewide_message() if theme.sitewide_message is defined}}

      <!-- start masthead -->

-     <nav class="navbar {{theme.masthead_class}} navbar-expand">

-       <div class="container">

-         <a href="{{ url_for('ui_ns.index') }}" class="navbar-brand">

-         <img height=40px src="{{ url_for('theme.static', filename='pagure-logo.png') }}?version={{ g.version}}"

-              alt="pagure Logo" id="pagureLogo"/>

-         </a>

-         <ul class="navbar-nav ml-auto">

+     <nav class="{{theme.masthead_class}} pagure-app-bar pagure-app-bar--top">

+       <div class="container pagure-app-bar__row">

+         <div class="pagure-app-bar__section pagure-app-bar__section--start">

+           <a href="{{ url_for('ui_ns.index') }}" class="navbar-brand">

+           <img height=40px src="{{ url_for('theme.static', filename='pagure-logo.png') }}?version={{ g.version}}"

+                 alt="pagure Logo" id="pagureLogo"/>

+           </a>

+         </div>

+         <div class="pagure-app-bar__section pagure-app-bar__section--end">

+           <ul class="pagure-app-bar__nav navbar-nav">

  

-           {# These two lines allow a theme or a blueprint to inject custom

-            # buttons in the navigation bar.

-            #}

-           {{theme.masthead_navbar_items() if theme.masthead_navbar_items is defined}}

-           {% block masthead_navbar_items %}{% endblock %}

- 

-           {% if not nologin %}

-           {% if g.fas_user %}

-           <li class="nav-item ml-3">

-             <a class="nav-link font-weight-bold" href="{{ url_for('ui_ns.browse_projects') }}">

-             Browse

-             </a>

-           </li>

-           {% if (config.get('ENABLE_NEW_PROJECTS', True) and config.get('ENABLE_UI_NEW_PROJECTS', True))

-           or config.get('ENABLE_GROUP_MNGT', False)  %}

-           <li class="nav-item dropdown ml-3">

-             <a class="nav-link dropdown-toggle font-weight-bold"

-               data-toggle="dropdown"

-               href="#"

-               role="button" aria-haspopup="true"

-               aria-expanded="false">

-             Create

-             </a>

-             <div class="dropdown-menu dropdown-menu-right">

-               {% if config.get('ENABLE_NEW_PROJECTS', True) and config.get('ENABLE_UI_NEW_PROJECTS', True) %}

-               <a class="dropdown-item" href="{{ url_for('ui_ns.new_project') }}">

-               <span class="fa {{projecticon()}}"></span> &nbsp;New {{projectstring()}}

+             {# These two lines allow a theme or a blueprint to inject custom

+              # buttons in the navigation bar.

+              #}

+             {{theme.masthead_navbar_items() if theme.masthead_navbar_items is defined}}

+             {% block masthead_navbar_items %}{% endblock %}

+   

+             {% if not nologin %}

+             {% if g.fas_user %}

+             <li class="nav-item ml-3">

+               <a class="nav-link font-weight-bold" href="{{ url_for('ui_ns.browse_projects') }}">

+               Browse

                </a>

-               {% endif %}

-               {% if config.get('ENABLE_GROUP_MNGT', False)  %}

-               <a class="dropdown-item" href="{{ url_for('ui_ns.add_group') }}">

-               <span class="fa fa-users"></span> &nbsp;New Group

+             </li>

+             {% if (config.get('ENABLE_NEW_PROJECTS', True) and config.get('ENABLE_UI_NEW_PROJECTS', True))

+             or config.get('ENABLE_GROUP_MNGT', False)  %}

+             <li class="nav-item dropdown ml-3">

+               <a class="nav-link dropdown-toggle font-weight-bold"

+                 data-toggle="dropdown"

+                 href="#"

+                 role="button" aria-haspopup="true"

+                 aria-expanded="false">

+               Create

                </a>

-               {% endif %}

-             </div>

-           </li>

-           {% endif %}

-           <li class="nav-item dropdown ml-3">

-             <a class="nav-link dropdown-toggle" data-toggle="dropdown"

-               href="#" role="button" aria-haspopup="true" aria-expanded="false">

-             {{ g.fas_user.username | avatar(24) | safe }}

-             </a>

-             <div class="dropdown-menu dropdown-menu-right">

-               <div class="dropdown-header">

-                 <strong>{{ g.fas_user.username }}</strong>

+               <div class="dropdown-menu dropdown-menu-right">

+                 {% if config.get('ENABLE_NEW_PROJECTS', True) and config.get('ENABLE_UI_NEW_PROJECTS', True) %}

+                 <a class="dropdown-item" href="{{ url_for('ui_ns.new_project') }}">

+                 <span class="fa {{projecticon()}}"></span> &nbsp;New {{projectstring()}}

+                 </a>

+                 {% endif %}

+                 {% if config.get('ENABLE_GROUP_MNGT', False)  %}

+                 <a class="dropdown-item" href="{{ url_for('ui_ns.add_group') }}">

+                 <span class="fa fa-users"></span> &nbsp;New Group

+                 </a>

+                 {% endif %}

                </div>

-               <div class="dropdown-divider"></div>

-               <a class="dropdown-item" href="{{

-                 url_for('ui_ns.view_user', username=g.fas_user.username)

-                 }}">My Public Profile</a>

-               <a class="dropdown-item" href="{{

-                 url_for('ui_ns.user_settings')

-                 }}">My Settings</a>

-               <div class="dropdown-divider"></div>

-               <a class="dropdown-item" href="{{

-                 url_for('ui_ns.userprofile_starred', username=g.fas_user.username)

-                 }}">My Starred Projects</a>

-               {% if config.get('ENABLE_TICKETS', True) %}

-               <a class="dropdown-item" href="{{

-                 url_for('ui_ns.view_user_issues', username=g.fas_user.username)

-                 }}">My Issues</a>

-               {% endif %}

-               <a class="dropdown-item" href="{{

-                 url_for('ui_ns.view_user_requests', username=g.fas_user.username)

-                 }}">My Pull Requests</a>

-               <div class="dropdown-divider"></div>

-               <a class="dropdown-item" href="{{ url_for('auth_logout')

-                 }}?next={{ request.url }}">Log Out</a>

-             </div>

-           </li>

-           {% else %}

-           <li class="nav-item">

-             <a class="btn btn-primary" href="{{

-               url_for('auth_login') }}?next={{request.url

-               }}">Log In</a>

-           </li>

-           {% endif %}

-           {% endif %}

-         </ul>

+             </li>

+             {% endif %}

+             <li class="nav-item dropdown ml-3">

+               <a class="nav-link dropdown-toggle" data-toggle="dropdown"

+                 href="#" role="button" aria-haspopup="true" aria-expanded="false">

+               {{ g.fas_user.username | avatar(24) | safe }}

+               </a>

+               <div class="dropdown-menu dropdown-menu-right">

+                 <div class="dropdown-header">

+                   <strong>{{ g.fas_user.username }}</strong>

+                 </div>

+                 <div class="dropdown-divider"></div>

+                 <a class="dropdown-item" href="{{

+                   url_for('ui_ns.view_user', username=g.fas_user.username)

+                   }}">My Public Profile</a>

+                 <a class="dropdown-item" href="{{

+                   url_for('ui_ns.user_settings')

+                   }}">My Settings</a>

+                 <div class="dropdown-divider"></div>

+                 <a class="dropdown-item" href="{{

+                   url_for('ui_ns.userprofile_starred', username=g.fas_user.username)

+                   }}">My Starred Projects</a>

+                 {% if config.get('ENABLE_TICKETS', True) %}

+                 <a class="dropdown-item" href="{{

+                   url_for('ui_ns.view_user_issues', username=g.fas_user.username)

+                   }}">My Issues</a>

+                 {% endif %}

+                 <a class="dropdown-item" href="{{

+                   url_for('ui_ns.view_user_requests', username=g.fas_user.username)

+                   }}">My Pull Requests</a>

+                 <div class="dropdown-divider"></div>

+                 <a class="dropdown-item" href="{{ url_for('auth_logout')

+                   }}?next={{ request.url }}">Log Out</a>

+               </div>

+             </li>

+             {% else %}

+             <li class="nav-item">

+               <a class="btn btn-primary" href="{{

+                 url_for('auth_login') }}?next={{request.url

+                 }}">Log In</a>

+             </li>

+             {% endif %}

+             {% endif %}

+           </ul>

+         </div>

        </div>

      </nav>

      <!-- close masthead-->
@@ -181,6 +186,5 @@ 

        });

      </script>

      {% endblock %}

- 

  </body>

  </html>

@@ -6,10 +6,7 @@ 

  

  {% block repo %}

  <div class="row">

-   <div class="col-2">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

  <h3 class="font-weight-bold">

    Releases <span class="badge badge-secondary">{{tags|length}}</span>

  {% if config.get('UPLOAD_FOLDER_PATH') and config.get('UPLOAD_FOLDER_URL') %}

@@ -6,10 +6,7 @@ 

  

  {% block repo %}

  <div class="row">

-   <div class="col-2">

-     {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

      <h3 class="font-weight-bold">

        Branches <span class="badge badge-secondary">{{g.branches|length}}</span>

      </h3>

@@ -17,10 +17,7 @@ 

  

  {% block repo %}

  <div class="row">

-   <div class="col">

-     {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

      <h4 class="font-weight-bold mb-4">

        <div class="d-flex align-items-center">

          <div>

@@ -6,10 +6,7 @@ 

  

  {% block repo %}

  <div class="row">

-   <div class="col-2">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

      <h3 class="font-weight-bold">

      Forks <span class="badge badge-secondary">{{repo.forks|length}}</span>

      </h3>

@@ -24,10 +24,7 @@ 

  

  {% block repo %}

    <div class="row">

-     <div class="col-2">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-     </div>

-     <div class="col-10">

+     <div class="col-12">

        <div class="row text-center mb-4">

            <div class="col">

                {% if repo.is_fork -%}

@@ -27,10 +27,10 @@ 

  {% set tag = "home" %}

  

  {% block content %}

- <div class="bg-light border border-bottom pt-3">

-   <div class="container">

-     <div class="row mb-3">

-       <div class="col-6">

+ <div class="bg-light border border-bottom pt-3 pagure-app-bar">

+   <div class="container pagure-app-bar__row">

+     <div class="pagure-app-bar__section pagure-app-bar__section--start">

+       <div>

          <div class="row">

          <div class="col-auto pr-0">

              <h3>
@@ -39,8 +39,6 @@ 

              {% elif repo.mirrored_from -%}

              <i class="fa fa-cloud-download text-muted" title="Mirrored from {{

                  repo.mirrored_from }}"></i>

-             {%- else -%}

-             <i class="fa {{projecticon()}} text-muted"></i>

              {%- endif -%}

              </h3>

          </div>
@@ -84,7 +82,8 @@ 

          </div>

          </div>

        </div>

-       <div class="col-6 text-right">

+     </div>

+     <div class="pagure-app-bar__section pagure-app-bar__section--end">

          <div class="btn-group">

          {% if g.authenticated %}

            {% if g.issues_enabled
@@ -94,14 +93,14 @@ 

                  username=g.repo.user.user if g.repo.is_fork else none,

                  namespace=g.repo.namespace) }}"

                class="btn btn-outline-primary btn-sm">

-               <i class="fa fa-exclamation-circle fa-fw"></i> New issue</a>

+               New issue</a>

              {% endif %}

              {% if g.authenticated %}

              <div class="btn-group">

                <a class="btn btn-outline-primary btn-sm dropdown-toggle pointer"

                  data-toggle="dropdown"

                  aria-haspopup="true" aria-expanded="false" id="pr-button">

-                 <i class="fa fa-arrow-circle-down fa-fw"></i> Open PR

+                 Open PR

                </a>

                <div class="dropdown-menu dropdown-menu-right pointer" id="PR-dropdown">

                  {% if g.repo_forked %}
@@ -121,7 +120,7 @@ 

                  </span>

                  <div class="dropdown-divider"></div>

                  <a class="dropdown-item"

-                    href="{{ url_for('ui_ns.new_request_pull',

+                   href="{{ url_for('ui_ns.new_request_pull',

                              repo=repo.name,

                              username=username,

                              namespace=repo.namespace,
@@ -131,7 +130,7 @@ 

                  </a>

                  {% if not config.get('DISABLE_REMOTE_PR', True) %}

                  <a class="dropdown-item"

-                    href="{{ url_for(

+                   href="{{ url_for(

                              'ui_ns.new_remote_request_pull',

                              repo=repo.name,

                              username=username,
@@ -151,7 +150,7 @@ 

                  repo=repo.name,

                  namespace=repo.namespace) }}" class="btn btn-sm btn-outline-primary">

  

-               <i class="fa fa-code-fork fa-fw"></i> View Upstream

+               View Upstream

                </a>

                {% else %}

                <a href="{{ url_for(
@@ -160,7 +159,7 @@ 

                  username=g.fas_user.username,

                  namespace=repo.namespace) }}" class="btn btn-sm btn-outline-primary">

  

-               <i class="fa fa-code-fork fa-fw"></i> View fork

+               View fork

                </a>

                {% endif %}

              {% else %}
@@ -173,7 +172,7 @@ 

                {{ g.forkbuttonform.csrf_token }}

              </form>

                <button class="btn btn-sm btn-outline-primary fork_project_btn">

-               <i class="fa fa-code-fork fa-fw"></i> Fork</button>

+               Fork</button>

              {% endif %}

            </div>

          {% endif %}
@@ -181,7 +180,6 @@ 

          <a href="#"

              class="btn btn-sm dropdown-toggle btn-outline-primary"

              data-toggle="dropdown" id="watch-button">

-           <i class="fa fa-clone fa-fw"></i>

            <span>Clone</span>

          </a>

          <div class="dropdown-menu dropdown-menu-right">
@@ -200,11 +198,11 @@ 

                  </div>

                </div>

                {% if (config['DOC_APP_URL']

-                      and repo

-                      and repo.settings.get('project_documentation', True)

-                      )

-                      or

-                      (g.authenticated and g.repo_committer) %}

+                     and repo

+                     and repo.settings.get('project_documentation', True)

+                     )

+                     or

+                     (g.authenticated and g.repo_committer) %}

  

                  <div id="giturl-more" class="hidden">

                  {% if config['DOC_APP_URL']
@@ -251,11 +249,10 @@ 

  

        </div>

      </div>

+     </div>

    </div>

- </div>

- 

+   <div class="container pagure-app-bar__row">

      {% include 'repo_master_navbar.html' %}

- 

    </div>

  </div>

  
@@ -451,5 +448,4 @@ 

  {% endblock %}

  

  {% block overviewtabs %}

- {% include 'repo_master_sidebar.html' %}

  {% endblock %}

@@ -1,17 +1,117 @@ 

- <ul class="nav nav-tabs nav-small border-bottom-0">

+ <ul class="nav nav-tabs nav-small border-bottom-0 pagure-navbar">

+   <li class="nav-item mr-2 text-dark">

+     <a class=

+       "nav-link nowrap

+       {%if select == 'overview' %} active{% endif %}"

+       href="{{ url_for(

+         'ui_ns.view_repo',

+         repo=repo.name,

+         username=username,

+         namespace=repo.namespace) }}">

+       Overview

+     </a>

+   </li>

+   <li class="nav-item mr-2 text-dark">

+     <a class=

+     "nav-link nowrap

+     {%if g.repo_obj and g.repo_obj.is_empty %} disabled{% endif %}

+     {%if select == 'tree' %} active{% endif %}"

+     href="{{ url_for(

+     'ui_ns.view_tree',

+     repo=repo.name,

+     username=username,

+     namespace=repo.namespace,

+     identifier=branchname) }}">

+       Files

+     </a>

+   </li>

+   {% if g.issues_enabled %}

+   <li class="nav-item mr-2 text-dark">

+       <a {%

+         if select == 'issues' %}class="active nav-link" {%

+         else %}class="nav-link" {%

+         endif %}href="{{ url_for(

+             'ui_ns.view_issues',

+             repo=repo.name,

+             username=username,

+             namespace=repo.namespace) }}">

+           Issues&nbsp;

+           <span class="badge badge-secondary py-0 d-md-inline">

+             {{ repo.open_tickets if g.repo_committer else repo.open_tickets_public }}

+           </span>

+       </a>

+   </li>

+   {% endif %}

+ 

+   {% if repo and repo.settings.get('pull_requests', True) %}

    <li class="nav-item mr-2 text-dark">

      <a {%

-       if select in ['overview', 'commits', 'tree', 'tags', 'branches', 'forks'] %}class="nav-link active" {%

+       if select == 'requests' %}class="active nav-link" {%

        else %}class="nav-link" {%

        endif %}href="{{ url_for(

-           'ui_ns.view_repo',

+           'ui_ns.request_pulls',

            repo=repo.name,

            username=username,

            namespace=repo.namespace) }}">

-         <i class="fa fa-code fa-fw text-muted"></i>

-         <span class="d-none d-md-inline">Source</span>

+         Pull Requests&nbsp;

+         <span class="badge badge-secondary py-0 d-md-inline">

+           {{ repo.open_requests }}

+         </span>

+     </a>

+   </li>

+   {% endif %}

+   <li class="nav-item mr-2 text-dark">

+       <a class=

+       "nav-link nowrap

+       {%if g.repo_obj and g.repo_obj.is_empty %} disabled{% endif %}

+       {%if select == 'commits' %} active{% endif %}"

+       href="{{ url_for(

+       'ui_ns.view_commits',

+       repo=repo.name,

+       username=username,

+       namespace=repo.namespace,

+       branchname=branchname) }}">

+       Commits

      </a>

    </li>

+   <li class="nav-item mr-2 text-dark">

+     <a class=

+     "nav-link nowrap

+     {%if select == 'branches' %} active{% endif %}"

+     href="{{ url_for(

+     'ui_ns.view_branches',

+     repo=repo.name,

+     username=username,

+     namespace=repo.namespace,

+     branchname=branchname) }}">

+       Branches

+     </a>

+   </li>

+   <li class="nav-item mr-2 text-dark">

+     <a class=

+     "nav-link nowrap

+     {%if select == 'forks' %} active{% endif %}"

+     href="{{ url_for(

+     'ui_ns.view_forks',

+     repo=repo.name,

+     username=username,

+     namespace=repo.namespace) }}">

+       Forks

+     </a>

+   </li>

+   <li class="nav-item mr-2 text-dark">

+     <a class=

+     "nav-link nowrap

+     {%if select == 'tags' %} active{% endif %}"

+     href="{{ url_for(

+     'ui_ns.view_tags',

+     repo=repo.name,

+     username=username,

+     namespace=repo.namespace) }}">

+     Releases

+     </a>

+   </li>

+   </li>

      {% if config['DOC_APP_URL'] and repo and repo.settings.get('project_documentation', True) %}

      <li class="nav-item mr-2 text-dark" >

        <a  {%
@@ -22,46 +122,7 @@ 

              repo=repo.name,

              username=username,

              namespace=repo.namespace) }}">

-           <i class="fa fa-book fa-fw text-muted"></i>

-           <span class="d-none d-md-inline">Docs</span>

-       </a>

-     </li>

-     {% endif %}

- 

-     {% if g.issues_enabled %}

-     <li class="nav-item mr-2 text-dark">

-         <a {%

-           if select == 'issues' %}class="active nav-link" {%

-           else %}class="nav-link" {%

-           endif %}href="{{ url_for(

-               'ui_ns.view_issues',

-               repo=repo.name,

-               username=username,

-               namespace=repo.namespace) }}">

-             <i class="fa fa-fw text-muted fa-exclamation-circle"></i>

-             <span class="d-none d-md-inline">Issues&nbsp;</span>

-             <span class="badge badge-secondary py-0 d-none d-md-inline">

-               {{ repo.open_tickets if g.repo_committer else repo.open_tickets_public }}

-             </span>

-         </a>

-     </li>

-     {% endif %}

- 

-     {% if repo and repo.settings.get('pull_requests', True) %}

-     <li class="nav-item mr-2 text-dark">

-       <a {%

-         if select == 'requests' %}class="active nav-link" {%

-         else %}class="nav-link" {%

-         endif %}href="{{ url_for(

-             'ui_ns.request_pulls',

-             repo=repo.name,

-             username=username,

-             namespace=repo.namespace) }}">

-           <i class="fa fa-fw text-muted fa-arrow-circle-down"></i>

-           <span class="d-none d-md-inline">Pull Requests&nbsp;</span>

-           <span class="badge badge-secondary py-0 d-none d-md-inline">

-             {{ repo.open_requests }}

-           </span>

+           <span class="d-md-inline">Docs</span>

        </a>

      </li>

      {% endif %}
@@ -78,7 +139,7 @@ 

          namespace=repo.namespace) }}"

        class="btn btn-outline-dark btn-sm">

        <i class="fa fa-fw text-muted fa-map-signs"></i>

-       <span class="d-none d-md-inline">Roadmap&nbsp;</span>

+       <span class="d-md-inline">Roadmap&nbsp;</span>

      </a>

      </li>

      {% endif %}
@@ -87,7 +148,7 @@ 

      <li class="nav-item mr-2 text-dark">

      <div class="btn-group">

        <a href="#" class="btn btn-outline nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

-         <span class="d-none d-md-inline">Boards&nbsp;</span>

+         <span class="d-md-inline">Boards&nbsp;</span>

        </a>

        <div class="dropdown-menu dropdown-menu-right">

          {% for board in repo.active_boards %}
@@ -112,8 +173,7 @@ 

              repo=repo.name,

              username=username,

              namespace=repo.namespace) }}">

-           <i class="fa fa-line-chart fa-fw text-muted"></i>

-           <span class="d-none d-md-inline">Stats</span>

+           <span class="d-md-inline">Stats</span>

        </a>

      </li>

  
@@ -128,8 +188,7 @@ 

                repo=repo.name,

                username=username,

                namespace=repo.namespace) }}">

-             <i class="fa fa-cogs fa-fw text-muted"></i>

-             <span class="d-none d-md-inline">Settings</span>

+             <span class="d-md-inline">Settings</span>

          </a>

        </li>

      {% endif %}

@@ -1,67 +0,0 @@ 

- <nav class="nav nav-tabs nav-sidetabs flex-column">

-   <a class=

-       "nav-link nowrap

-       {%if select == 'overview' %} active{% endif %}"

-       href="{{ url_for(

-         'ui_ns.view_repo',

-         repo=repo.name,

-         username=username,

-         namespace=repo.namespace) }}">

-       <i class="fa fa-home text-muted fa-fw"></i>&nbsp;<span class="d-none d-md-inline">Overview</span>

-   </a>

-   <a class=

-     "nav-link nowrap

-     {%if g.repo_obj and g.repo_obj.is_empty %} disabled{% endif %}

-     {%if select == 'tree' %} active{% endif %}"

-     href="{{ url_for(

-     'ui_ns.view_tree',

-     repo=repo.name,

-     username=username,

-     namespace=repo.namespace,

-     identifier=branchname) }}">

-     <i class="fa fa-file-code-o text-muted fa-fw"></i>&nbsp;Files

-   </a>

-   <a class=

-     "nav-link nowrap

-     {%if g.repo_obj and g.repo_obj.is_empty %} disabled{% endif %}

-     {%if select == 'commits' %} active{% endif %}"

-     href="{{ url_for(

-     'ui_ns.view_commits',

-     repo=repo.name,

-     username=username,

-     namespace=repo.namespace,

-     branchname=branchname) }}">

-     <i class="fa fa-list-alt text-muted fa-fw" data-glyph="spreadsheet"></i>&nbsp;Commits

-   </a>

-   <a class=

-     "nav-link nowrap

-     {%if select == 'branches' %} active{% endif %}"

-     href="{{ url_for(

-     'ui_ns.view_branches',

-     repo=repo.name,

-     username=username,

-     namespace=repo.namespace,

-     branchname=branchname) }}">

-     <i class="fa fa-random text-muted fa-fw"></i>&nbsp;Branches

-   </a>

-   <a class=

-     "nav-link nowrap

-     {%if select == 'forks' %} active{% endif %}"

-     href="{{ url_for(

-     'ui_ns.view_forks',

-     repo=repo.name,

-     username=username,

-     namespace=repo.namespace) }}">

-     <i class="fa fa-code-fork text-muted fa-fw"></i>&nbsp;Forks

-   </a>

-   <a class=

-     "nav-link nowrap

-     {%if select == 'tags' %} active{% endif %}"

-     href="{{ url_for(

-     'ui_ns.view_tags',

-     repo=repo.name,

-     username=username,

-     namespace=repo.namespace) }}">

-     <i class="fa fa-tags text-muted fa-fw"></i>&nbsp;Releases

-   </a>

- </nav>

@@ -17,10 +17,7 @@ 

  

  {% block repo %}

  <div class="row">

-   <div class="col-2">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-   </div>

-   <div class="col-10">

+   <div class="col-12">

      <h3 class="font-weight-bold">

      Branches <span class="badge badge-secondary">{{g.branches|length}}</span>

      </h3>

@@ -56,10 +56,7 @@ 

  

  {% block repo %}

    <div class="row">

-     <div class="col-2">

-       {% block overviewtabs %}{{ super() }}{% endblock %}

-     </div>

-     <div class="col-10">

+     <div class="col-12">

        <div class="row text-center mb-4">

            <div class="col">

                {% if repo.is_fork -%}

This improves the styling of Pagure's top app bars by:

  • Flattening the secondary tabs found in repos into a single mobile-friendly hierarchy
  • Making them responsive
  • Moving the repo top app bar to the bottom on mobile for reachability
  • Shedding excess iconography

Before:
Desktop:
desktop before
Mobile:
mobile before

After:
Desktop:
desktop after
Mobile:
mobile after

Signed-off-by: Carson Black uhhadd@gmail.com

@appadeia Shouldn't the arrow in Open PR and Clone be flipped when it's on the bottom?

rebased onto 342f182

2 months ago

@appadeia Shouldn't the arrow in Open PR and Clone be flipped when it's on the bottom?

Done.

I like the mobile view, but I miss the icons in the new versions. Are they that bad?

I like the mobile view, but I miss the icons in the new versions. Are they that bad?

They're not really informative since icons are best at metaphors, but git concepts are highly abstract and hard to make a metaphor for.

Additionally, they cause the bottom bar to exceed common mobile screen sizes.

@appadeia can we keep the icons in the regular view, but in mobile/compressed views, drop the icons?