From 342f1824e14a5ca8193c5602134524611344dfb5 Mon Sep 17 00:00:00 2001 From: Carson Black Date: Sep 08 2020 01:27:18 +0000 Subject: Improve the design of the top app bars of Pagure 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 Signed-off-by: Carson Black --- diff --git a/pagure/static/pagure.css b/pagure/static/pagure.css index d57520b..cb0a8b8 100644 --- a/pagure/static/pagure.css +++ b/pagure/static/pagure.css @@ -66,6 +66,95 @@ pre { 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%; diff --git a/pagure/templates/commit.html b/pagure/templates/commit.html index 73408ec..0a445cc 100644 --- a/pagure/templates/commit.html +++ b/pagure/templates/commit.html @@ -20,10 +20,7 @@ {# we recognize non-executable file, executable file and symlink #} {% set expected_modes = [33188, 33261, 40960] %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

diff --git a/pagure/templates/commits.html b/pagure/templates/commits.html index 807159b..1f4e2d8 100644 --- a/pagure/templates/commits.html +++ b/pagure/templates/commits.html @@ -9,10 +9,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+
{% if g.repo_obj and g.repo_obj.is_empty %}
diff --git a/pagure/templates/file.html b/pagure/templates/file.html index adcfc42..7cc557c 100644 --- a/pagure/templates/file.html +++ b/pagure/templates/file.html @@ -18,10 +18,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

diff --git a/pagure/templates/master.html b/pagure/templates/master.html index 8a50cd8..7d8bb1c 100644 --- a/pagure/templates/master.html +++ b/pagure/templates/master.html @@ -5,6 +5,7 @@ + {% block title %}{% endblock %} - {{ theme.site_title }} {{ theme.head_imports() }} {{theme.sitewide_message() if theme.sitewide_message is defined}} -

@@ -181,6 +186,5 @@ }); {% endblock %} - diff --git a/pagure/templates/releases.html b/pagure/templates/releases.html index 1ca3182..0280124 100644 --- a/pagure/templates/releases.html +++ b/pagure/templates/releases.html @@ -6,10 +6,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

Releases {{tags|length}} {% if config.get('UPLOAD_FOLDER_PATH') and config.get('UPLOAD_FOLDER_URL') %} diff --git a/pagure/templates/repo_branches.html b/pagure/templates/repo_branches.html index d2f2afa..7d24d1c 100644 --- a/pagure/templates/repo_branches.html +++ b/pagure/templates/repo_branches.html @@ -6,10 +6,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

Branches {{g.branches|length}}

diff --git a/pagure/templates/repo_comparecommits.html b/pagure/templates/repo_comparecommits.html index 7826ea1..57b4a5b 100644 --- a/pagure/templates/repo_comparecommits.html +++ b/pagure/templates/repo_comparecommits.html @@ -17,10 +17,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

diff --git a/pagure/templates/repo_forks.html b/pagure/templates/repo_forks.html index 5700d16..2a0b9f9 100644 --- a/pagure/templates/repo_forks.html +++ b/pagure/templates/repo_forks.html @@ -6,10 +6,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+

Forks {{repo.forks|length}}

diff --git a/pagure/templates/repo_info.html b/pagure/templates/repo_info.html index a5f74d3..bd93b28 100644 --- a/pagure/templates/repo_info.html +++ b/pagure/templates/repo_info.html @@ -24,10 +24,7 @@ {% block repo %}
-
- {% block overviewtabs %}{{ super() }}{% endblock %} -
-
+
{% if repo.is_fork -%} diff --git a/pagure/templates/repo_master.html b/pagure/templates/repo_master.html index 9d96f92..2d5a409 100644 --- a/pagure/templates/repo_master.html +++ b/pagure/templates/repo_master.html @@ -27,10 +27,10 @@ {% set tag = "home" %} {% block content %} -
-
-
-
+
+
+
+

@@ -39,8 +39,6 @@ {% elif repo.mirrored_from -%} - {%- else -%} - {%- endif -%}

@@ -84,7 +82,8 @@
-
+
+
{% 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"> - New issue + New issue {% endif %} {% if g.authenticated %}
{% endif %} @@ -181,7 +180,6 @@ - Clone
@@ -200,11 +198,11 @@
{% 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) %}
+
-
- +
{% include 'repo_master_navbar.html' %} -
@@ -451,5 +448,4 @@ $('.pr_comment_form').submit(function() { {% endblock %} {% block overviewtabs %} -{% include 'repo_master_sidebar.html' %} {% endblock %} diff --git a/pagure/templates/repo_master_navbar.html b/pagure/templates/repo_master_navbar.html index a99878b..1b65d72 100644 --- a/pagure/templates/repo_master_navbar.html +++ b/pagure/templates/repo_master_navbar.html @@ -1,17 +1,117 @@ -