Merge pull request ckan#8593 from aleeexgreeen/midnight_blue-components

[Midnight blue] Components
PublicaMundi · Jan 24, 2025 · d3c4383 · d3c4383
2 parents f7ef764 + 589cd2b
commit d3c4383
Show file tree

Hide file tree

Showing 9 changed files with 165 additions and 36 deletions.
diff --git 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
@@ -5810,20 +5810,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;
@@ -11987,6 +11987,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;
@@ -12401,6 +12408,45 @@ 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;
+  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;
 }
@@ -13787,9 +13833,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;
@@ -14327,7 +14370,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
@@ -5810,20 +5810,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;
@@ -11987,6 +11987,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;
@@ -12401,6 +12408,45 @@ 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;
+  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;
 }
@@ -13787,9 +13833,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;
@@ -14327,7 +14370,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/_bootstrap-variables.scss b/ckan/public-midnight-blue/base/scss/_bootstrap-variables.scss
@@ -1196,23 +1196,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;

diff --git 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/_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 {

diff --git a/ckan/public-midnight-blue/base/scss/_nav.scss b/ckan/public-midnight-blue/base/scss/_nav.scss
@@ -127,6 +127,45 @@
     }
 }
 
+// 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;
+        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
@@ -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
@@ -93,7 +93,7 @@ <h1>My page content</h1>
                   <article class="module">
                     {% block page_header %}
                       <header class="module-content page-header">
-                        <ul class="nav nav-tabs">
+                        <ul class="nav nav-pills">
                           {% block content_primary_nav %}{% endblock %}
                         </ul>
                       </header>