PR#4974: Improve the design of the top app bars of Pagure - pagure

pagure

#4974 Improve the design of the top app bars of Pagure

Opened 3 years ago by appadeia. Modified 3 days ago

appadeia/pagure cblack/responsive into master

Improve the design of the top app bars of Pagure

Carson Black • 3 years ago

342f182

pagure/static/pagure.css

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%;`

pagure/templates/commit.html

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">`

pagure/templates/commits.html

file modified

+1 -4

		`@@ -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">`

pagure/templates/file.html

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>`

pagure/templates/master.html

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>  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>  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>  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>  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>`

pagure/templates/releases.html

file modified

+1 -4

		`@@ -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') %}`

pagure/templates/repo_branches.html

file modified

+1 -4

		`@@ -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>`

pagure/templates/repo_comparecommits.html

file modified

+1 -4

		`@@ -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>`

pagure/templates/repo_forks.html

file modified

+1 -4

		`@@ -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>`

pagure/templates/repo_info.html

file modified

+1 -4

		`@@ -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 -%}`

pagure/templates/repo_master.html

file modified

+20 -24

		`@@ -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 %}`

pagure/templates/repo_master_navbar.html

file modified

+110 -51

		`@@ -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 `
		`+ <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 `
		`+ <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 </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 </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 </span>`
		`+ <span class="d-md-inline">Roadmap </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 </span>`
		`+ <span class="d-md-inline">Boards </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 %}`

pagure/templates/repo_master_sidebar.html

file removed

-67

		`@@ -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> <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> 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> 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> 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> 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> Releases`
		`- </a>`
		`- </nav>`

pagure/themes/srcfpo/templates/repo_branches.html

file modified

+1 -4

		`@@ -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>`

pagure/themes/srcfpo/templates/repo_info.html

file modified

+1 -4

		`@@ -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 -%}`

appadeia commented 3 years ago

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:

Mobile:

After:
Desktop:

Mobile:

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

ngompa commented 3 years ago

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

rebased onto 342f182

3 years ago

appadeia commented 3 years ago

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

Done.

pingou commented 3 years ago

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

appadeia commented 3 years ago

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.

Edited 3 years ago by appadeia

ngompa commented 3 years ago

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

appadeia commented 3 years ago

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

Icons work best when they're extremely common and use well known metaphors. Icons for git stuff aren't extremely common and don't really use a metaphor to help you understand the content, which defeats their functional point.

abitrolly commented 2 years ago

I like the secondary navigation for Desktop. It makes navigation less overloaded than in GitHub.

toddjohnson commented a year ago

I would change the navigation style. In my opinion it is better to visit a platform where you can hire professional app designers. I'm sure they will find ways to make the app even more user-friendly and visually appealing, because great design is the key to success.

Edited a year ago by toddjohnson