From 05f41f4276a84d50089aef5b2603d5694b80704f Mon Sep 17 00:00:00 2001 From: Alex Green Date: Sat, 21 Dec 2024 19:25:39 -0500 Subject: [PATCH 1/5] pagination --- ckan/lib/pagination.py | 4 ++-- ckan/public-midnight-blue/base/css/main-rtl.css | 7 +++++++ ckan/public-midnight-blue/base/css/main.css | 7 +++++++ ckan/public-midnight-blue/base/scss/_module.scss | 9 ++++++++- 4 files changed, 24 insertions(+), 3 deletions(-) diff --git a/ckan/lib/pagination.py b/ckan/lib/pagination.py index 1812a147d83..20e5adfbc39 100644 --- a/ckan/lib/pagination.py +++ b/ckan/lib/pagination.py @@ -640,8 +640,8 @@ def pager(self, *args: Any, **kwargs: Any) -> Markup: ) params = dict( format=str(wrapper), - symbol_previous=u"«", - symbol_next=u"»", + symbol_previous=tags.i(cls='fa-solid fa-chevron-left'), + symbol_next=tags.i(cls='fa-solid fa-chevron-right'), curpage_attr={u"class": u"page-item active"}, link_attr={"class": "page-link"}, ) diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css index 363b6018620..7f8565a5719 100644 --- a/ckan/public-midnight-blue/base/css/main-rtl.css +++ b/ckan/public-midnight-blue/base/css/main-rtl.css @@ -11980,6 +11980,13 @@ a.tag:hover { border-top: 1px solid inherit; padding-top: 0.5rem; } +.pagination-wrapper .page-item { + margin: 0 4px; +} +.pagination-wrapper .page-link { + border-radius: 0.375rem; + font-weight: 500; +} .module h1, .module .h1 { margin-top: 0; diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css index e556f0cd72c..776151f2a17 100644 --- a/ckan/public-midnight-blue/base/css/main.css +++ b/ckan/public-midnight-blue/base/css/main.css @@ -11980,6 +11980,13 @@ a.tag:hover { border-top: 1px solid inherit; padding-top: 0.5rem; } +.pagination-wrapper .page-item { + margin: 0 4px; +} +.pagination-wrapper .page-link { + border-radius: 0.375rem; + font-weight: 500; +} .module h1, .module .h1 { margin-top: 0; diff --git a/ckan/public-midnight-blue/base/scss/_module.scss b/ckan/public-midnight-blue/base/scss/_module.scss index bc9ea332e9e..e472518da3a 100644 --- a/ckan/public-midnight-blue/base/scss/_module.scss +++ b/ckan/public-midnight-blue/base/scss/_module.scss @@ -51,10 +51,17 @@ color: $layoutBoldColor; } -.pagination-wrapper{ +.pagination-wrapper { text-align: center; border-top: 1px solid $hr-color; padding-top: math.div($grid-gutter-width,3); + .page-item { + margin: 0 4px; + } + .page-link { + border-radius: $pagination-border-radius; + font-weight: 500; + } } .module h1 { From 633f47d302eaa59a6ffbc2e957c7a98fa912477d Mon Sep 17 00:00:00 2001 From: Alex Green Date: Sat, 21 Dec 2024 19:42:40 -0500 Subject: [PATCH 2/5] Popovers styling --- ckan/public-midnight-blue/base/css/main-rtl.css | 14 +++++++------- ckan/public-midnight-blue/base/css/main.css | 14 +++++++------- .../base/scss/_bootstrap-variables.scss | 12 ++++++------ 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css index 7f8565a5719..3608e553c5f 100644 --- a/ckan/public-midnight-blue/base/css/main-rtl.css +++ b/ckan/public-midnight-blue/base/css/main-rtl.css @@ -5808,20 +5808,20 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.875rem; + --bs-popover-font-size: 1rem; --bs-popover-bg: #fff; --bs-popover-border-width: 1px; --bs-popover-border-color: rgba(0, 0, 0, 0.2); - --bs-popover-border-radius: 0.3rem; - --bs-popover-inner-border-radius: calc(0.3rem - 1px); + --bs-popover-border-radius: 0.375rem; + --bs-popover-inner-border-radius: calc(0.375rem - 1px); --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --bs-popover-header-padding-x: 1rem; + --bs-popover-header-padding-x: 0.75rem; --bs-popover-header-padding-y: 0.5rem; --bs-popover-header-font-size: 1rem; --bs-popover-header-color: #081647; - --bs-popover-header-bg: #f0f0f0; - --bs-popover-body-padding-x: 1rem; - --bs-popover-body-padding-y: 1rem; + --bs-popover-header-bg: #f2f4f7; + --bs-popover-body-padding-x: 0.75rem; + --bs-popover-body-padding-y: 0.75rem; --bs-popover-body-color: #101828; --bs-popover-arrow-width: 1rem; --bs-popover-arrow-height: 0.5rem; diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css index 776151f2a17..580718824c8 100644 --- a/ckan/public-midnight-blue/base/css/main.css +++ b/ckan/public-midnight-blue/base/css/main.css @@ -5808,20 +5808,20 @@ textarea.form-control-lg { .popover { --bs-popover-zindex: 1070; --bs-popover-max-width: 276px; - --bs-popover-font-size: 0.875rem; + --bs-popover-font-size: 1rem; --bs-popover-bg: #fff; --bs-popover-border-width: 1px; --bs-popover-border-color: rgba(0, 0, 0, 0.2); - --bs-popover-border-radius: 0.3rem; - --bs-popover-inner-border-radius: calc(0.3rem - 1px); + --bs-popover-border-radius: 0.375rem; + --bs-popover-inner-border-radius: calc(0.375rem - 1px); --bs-popover-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); - --bs-popover-header-padding-x: 1rem; + --bs-popover-header-padding-x: 0.75rem; --bs-popover-header-padding-y: 0.5rem; --bs-popover-header-font-size: 1rem; --bs-popover-header-color: #081647; - --bs-popover-header-bg: #f0f0f0; - --bs-popover-body-padding-x: 1rem; - --bs-popover-body-padding-y: 1rem; + --bs-popover-header-bg: #f2f4f7; + --bs-popover-body-padding-x: 0.75rem; + --bs-popover-body-padding-y: 0.75rem; --bs-popover-body-color: #101828; --bs-popover-arrow-width: 1rem; --bs-popover-arrow-height: 0.5rem; diff --git a/ckan/public-midnight-blue/base/scss/_bootstrap-variables.scss b/ckan/public-midnight-blue/base/scss/_bootstrap-variables.scss index f5fe0171158..58ba5dcecc1 100644 --- a/ckan/public-midnight-blue/base/scss/_bootstrap-variables.scss +++ b/ckan/public-midnight-blue/base/scss/_bootstrap-variables.scss @@ -1190,23 +1190,23 @@ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default; // Popovers // scss-docs-start popover-variables -$popover-font-size: $font-size-sm !default; +$popover-font-size: $font-size-base !default; $popover-bg: $white !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; $popover-border-color: rgba($black, .2) !default; -$popover-border-radius: $border-radius-lg !default; +$popover-border-radius: $border-radius !default; $popover-inner-border-radius: subtract($popover-border-radius, $popover-border-width) !default; $popover-box-shadow: $box-shadow !default; -$popover-header-bg: shade-color($popover-bg, 6%) !default; +$popover-header-bg: $gray-100 !default; $popover-header-color: $headings-color !default; $popover-header-padding-y: .5rem !default; -$popover-header-padding-x: $spacer !default; +$popover-header-padding-x: $spacer * 0.75 !default; $popover-body-color: $body-color !default; -$popover-body-padding-y: $spacer !default; -$popover-body-padding-x: $spacer !default; +$popover-body-padding-y: $spacer * 0.75 !default; +$popover-body-padding-x: $spacer * 0.75 !default; $popover-arrow-width: 1rem !default; $popover-arrow-height: .5rem !default; From cc9286d538e44a36d0a1a30b952de0726957eb2b Mon Sep 17 00:00:00 2001 From: Alex Green Date: Sat, 21 Dec 2024 20:10:08 -0500 Subject: [PATCH 3/5] Nav-pills on dataset/organization/groups pages and minor header fix on tablet --- .../base/css/main-rtl.css | 48 +++++++++++++++++-- ckan/public-midnight-blue/base/css/main.css | 48 +++++++++++++++++-- .../base/scss/_masthead.scss | 2 +- ckan/public-midnight-blue/base/scss/_nav.scss | 41 ++++++++++++++++ .../base/scss/_toolbar.scss | 3 -- ckan/templates-midnight-blue/page.html | 2 +- 6 files changed, 131 insertions(+), 13 deletions(-) diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css index 3608e553c5f..e2a4227a1e7 100644 --- a/ckan/public-midnight-blue/base/css/main-rtl.css +++ b/ckan/public-midnight-blue/base/css/main-rtl.css @@ -12401,6 +12401,49 @@ a.tag:hover { left: 10px; } +.nav-pills { + background-color: #f9fafb; + display: grid; + padding: 4px; + gap: 4px; + border-radius: 0.5rem; + width: 100%; +} +@media (min-width: 768px) { + .nav-pills { + display: flex; + flex-direction: row; + } +} +.nav-pills li { + padding: 0.5rem 1rem; + gap: 0.5rem; + border-radius: 8px; +} +@media (min-width: 768px) { + .nav-pills li { + flex: 1 0 auto; + } +} +.nav-pills li a { + color: #6d83ab; + display: block; +} +.nav-pills li a:hover { + text-decoration: none; +} +.nav-pills li:hover { + background-color: #e4e7ec; +} +.nav-pills li.active { + background-color: #fff; + border-radius: 6px; + box-shadow: 0px 4px 16px -4px rgba(0, 23, 31, 0.08), 0px 1px 4px -2px rgba(0, 0, 0, 0.04); +} +.nav-pills li.active a { + color: #2f4b91; +} + .nav-stacked > li { float: none; } @@ -13730,9 +13773,6 @@ td.diff_header { .page-header { margin-top: 1.5rem; - border-bottom: 1px solid #ddd; - background-color: #f6f6f6; - border-radius: 0 3px 0 0; } .page-header.module-content { padding-top: 0.75rem; @@ -14249,7 +14289,7 @@ td.diff_header { flex-wrap: wrap; padding: 10px 0; } -@media (min-width: 768px) { +@media (min-width: 992px) { .masthead .main-navbar ul { gap: 24px; } diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css index 580718824c8..bb16ab34777 100644 --- a/ckan/public-midnight-blue/base/css/main.css +++ b/ckan/public-midnight-blue/base/css/main.css @@ -12401,6 +12401,49 @@ a.tag:hover { left: 10px; } +.nav-pills { + background-color: #f9fafb; + display: grid; + padding: 4px; + gap: 4px; + border-radius: 0.5rem; + width: 100%; +} +@media (min-width: 768px) { + .nav-pills { + display: flex; + flex-direction: row; + } +} +.nav-pills li { + padding: 0.5rem 1rem; + gap: 0.5rem; + border-radius: 8px; +} +@media (min-width: 768px) { + .nav-pills li { + flex: 1 0 auto; + } +} +.nav-pills li a { + color: #6d83ab; + display: block; +} +.nav-pills li a:hover { + text-decoration: none; +} +.nav-pills li:hover { + background-color: #e4e7ec; +} +.nav-pills li.active { + background-color: #fff; + border-radius: 6px; + box-shadow: 0px 4px 16px -4px rgba(0, 23, 31, 0.08), 0px 1px 4px -2px rgba(0, 0, 0, 0.04); +} +.nav-pills li.active a { + color: #2f4b91; +} + .nav-stacked > li { float: none; } @@ -13730,9 +13773,6 @@ td.diff_header { .page-header { margin-top: 1.5rem; - border-bottom: 1px solid #ddd; - background-color: #f6f6f6; - border-radius: 0 3px 0 0; } .page-header.module-content { padding-top: 0.75rem; @@ -14249,7 +14289,7 @@ td.diff_header { flex-wrap: wrap; padding: 10px 0; } -@media (min-width: 768px) { +@media (min-width: 992px) { .masthead .main-navbar ul { gap: 24px; } diff --git a/ckan/public-midnight-blue/base/scss/_masthead.scss b/ckan/public-midnight-blue/base/scss/_masthead.scss index b01d80970e2..9f8a01e2ecc 100644 --- a/ckan/public-midnight-blue/base/scss/_masthead.scss +++ b/ckan/public-midnight-blue/base/scss/_masthead.scss @@ -130,7 +130,7 @@ $notificationsBg: #C9403A; justify-content: center; flex-wrap: wrap; padding: 10px 0; - @include media-breakpoint-up(md){ + @include media-breakpoint-up(lg){ gap: 24px } li { diff --git a/ckan/public-midnight-blue/base/scss/_nav.scss b/ckan/public-midnight-blue/base/scss/_nav.scss index ccfa7e18d7b..310e287f639 100644 --- a/ckan/public-midnight-blue/base/scss/_nav.scss +++ b/ckan/public-midnight-blue/base/scss/_nav.scss @@ -127,6 +127,47 @@ } } +// Nav pills +.nav-pills { + background-color: $gray-50; + display: grid; + padding: 4px; + gap: 4px; + border-radius: .5rem; + width: 100%; + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + } + li { + padding: .5rem 1rem; + gap: .5rem; + border-radius: 8px; + @include media-breakpoint-up(md) { + flex: 1 0 auto; + } + a { + color: $brand-300; + display: block; + &:hover { + text-decoration: none; + } + } + &:hover { + background-color: $gray-200; + + } + &.active { + background-color: $white; + border-radius: 6px; + box-shadow: 0px 4px 16px -4px rgba(0, 23, 31, 0.08), 0px 1px 4px -2px rgba(0, 0, 0, 0.04); + a { + color: $brand-500; + } + } + } +} + // STACKED NAV // ----------- diff --git a/ckan/public-midnight-blue/base/scss/_toolbar.scss b/ckan/public-midnight-blue/base/scss/_toolbar.scss index eb8d3033187..7f1e0eb42d7 100644 --- a/ckan/public-midnight-blue/base/scss/_toolbar.scss +++ b/ckan/public-midnight-blue/base/scss/_toolbar.scss @@ -94,9 +94,6 @@ } margin-top: $grid-gutter-width; @include clearfix; - border-bottom: 1px solid $moduleHeadingBorderColor; - background-color: $moduleHeadingBackgroundColor; - @include border-radius(0 3px 0 0); .nav-tabs { float: left; margin-bottom: -1px; diff --git a/ckan/templates-midnight-blue/page.html b/ckan/templates-midnight-blue/page.html index 26e4877f888..254bc13efe3 100644 --- a/ckan/templates-midnight-blue/page.html +++ b/ckan/templates-midnight-blue/page.html @@ -93,7 +93,7 @@

My page content

{% block content_action %}{% endblock %} {% endif %} -
    +
      {% block content_primary_nav %}{% endblock %}
    From b7582e80f2886e11e434afd08de706933a2d544d Mon Sep 17 00:00:00 2001 From: Alex Green Date: Sat, 21 Dec 2024 21:28:19 -0500 Subject: [PATCH 4/5] nav pill refinements --- ckan/public-midnight-blue/base/css/main-rtl.css | 5 +++-- ckan/public-midnight-blue/base/css/main.css | 5 +++-- ckan/public-midnight-blue/base/scss/_nav.scss | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css index e2a4227a1e7..e23b8481ee2 100644 --- a/ckan/public-midnight-blue/base/css/main-rtl.css +++ b/ckan/public-midnight-blue/base/css/main-rtl.css @@ -12419,10 +12419,11 @@ a.tag:hover { padding: 0.5rem 1rem; gap: 0.5rem; border-radius: 8px; + flex: 1 0 auto; } -@media (min-width: 768px) { +@media (min-width: 992px) { .nav-pills li { - flex: 1 0 auto; + width: 0; } } .nav-pills li a { diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css index bb16ab34777..16ca7045c75 100644 --- a/ckan/public-midnight-blue/base/css/main.css +++ b/ckan/public-midnight-blue/base/css/main.css @@ -12419,10 +12419,11 @@ a.tag:hover { padding: 0.5rem 1rem; gap: 0.5rem; border-radius: 8px; + flex: 1 0 auto; } -@media (min-width: 768px) { +@media (min-width: 992px) { .nav-pills li { - flex: 1 0 auto; + width: 0; } } .nav-pills li a { diff --git a/ckan/public-midnight-blue/base/scss/_nav.scss b/ckan/public-midnight-blue/base/scss/_nav.scss index 310e287f639..187e3c90ab3 100644 --- a/ckan/public-midnight-blue/base/scss/_nav.scss +++ b/ckan/public-midnight-blue/base/scss/_nav.scss @@ -143,8 +143,9 @@ padding: .5rem 1rem; gap: .5rem; border-radius: 8px; - @include media-breakpoint-up(md) { - flex: 1 0 auto; + flex: 1 0 auto; + @include media-breakpoint-up(lg) { + width: 0; } a { color: $brand-300; From ce7ee456bfb2a8bd39f97fecdb8422ccb77c73df Mon Sep 17 00:00:00 2001 From: Alex Green Date: Tue, 14 Jan 2025 23:12:48 +0000 Subject: [PATCH 5/5] Remove width from nav pills on large screens and allow them to wrap --- ckan/public-midnight-blue/base/css/main-rtl.css | 5 ----- ckan/public-midnight-blue/base/css/main.css | 5 ----- ckan/public-midnight-blue/base/scss/_nav.scss | 3 --- 3 files changed, 13 deletions(-) diff --git a/ckan/public-midnight-blue/base/css/main-rtl.css b/ckan/public-midnight-blue/base/css/main-rtl.css index e23b8481ee2..bfb36be659f 100644 --- a/ckan/public-midnight-blue/base/css/main-rtl.css +++ b/ckan/public-midnight-blue/base/css/main-rtl.css @@ -12421,11 +12421,6 @@ a.tag:hover { border-radius: 8px; flex: 1 0 auto; } -@media (min-width: 992px) { - .nav-pills li { - width: 0; - } -} .nav-pills li a { color: #6d83ab; display: block; diff --git a/ckan/public-midnight-blue/base/css/main.css b/ckan/public-midnight-blue/base/css/main.css index 16ca7045c75..bf01a0feaba 100644 --- a/ckan/public-midnight-blue/base/css/main.css +++ b/ckan/public-midnight-blue/base/css/main.css @@ -12421,11 +12421,6 @@ a.tag:hover { border-radius: 8px; flex: 1 0 auto; } -@media (min-width: 992px) { - .nav-pills li { - width: 0; - } -} .nav-pills li a { color: #6d83ab; display: block; diff --git a/ckan/public-midnight-blue/base/scss/_nav.scss b/ckan/public-midnight-blue/base/scss/_nav.scss index 187e3c90ab3..99efc4261fe 100644 --- a/ckan/public-midnight-blue/base/scss/_nav.scss +++ b/ckan/public-midnight-blue/base/scss/_nav.scss @@ -144,9 +144,6 @@ gap: .5rem; border-radius: 8px; flex: 1 0 auto; - @include media-breakpoint-up(lg) { - width: 0; - } a { color: $brand-300; display: block;