[feature][ui]: UI/UX according to #70

datopian · Apr 2, 2024 · 21222d4 · 21222d4
1 parent 7623026
commit 21222d4
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 12 deletions.
diff --git a/ckanext/ubdc/assets/css/style.css b/ckanext/ubdc/assets/css/style.css
@@ -7471,10 +7471,11 @@ a.tag:hover {
   position: relative;
   float: left;
   width: 100%;
-  padding: 15px;
+  padding: 7.5px;
   margin: 0 0 15px 15px;
   background-color: white;
   display: flex;
+  border: 1px solid #ccc;
   border-radius: 3px;
 }
 .media-item .stats, .module-item .stats {
@@ -7485,6 +7486,7 @@ a.tag:hover {
 }
 .media-item .media-image, .module-item .media-image {
   margin-bottom: 5px;
+  width: -webkit-fill-available;
 }
 .media-item .media-edit, .module-item .media-edit {
   opacity: 0;
@@ -7519,7 +7521,7 @@ a.tag:hover {
   left: 0;
   right: 0;
   bottom: 0;
-  border: 1px solid #ddd;
+  border: none;
   overflow: hidden;
   -webkit-transition: all 0.2s ease-in;
   -o-transition: all 0.2s ease-in;
@@ -9219,8 +9221,9 @@ td.diff_header {
   border-radius: 0 3px 0 0;
 }
 .page-header.module-content {
-  padding-top: 15px;
+  padding-top: 3px;
   padding-bottom: 0;
+  background-color: transparent;
 }
 .page-header:before, .page-header:after {
   display: table;
@@ -10429,6 +10432,14 @@ h4 small {
     width: 100%;
   }
 }
+.m-auto {
+  margin: auto;
+}
+
+.p-5 {
+  padding: 5px;
+}
+
 .account-masthead {
   min-height: 30px;
   color: #fff;
@@ -10759,8 +10770,8 @@ h4 small {
   display: block;
   margin: 20px 0 0;
   text-decoration: none;
-  color: #02152b;
-  text-transform: uppercase;
+  color: #000000;
+  text-transform: capitalize;
 }
 .site-footer__col-2 ul li a:hover {
   color: #F37021;

diff --git a/ckanext/ubdc/public/base/scss/_footer.scss b/ckanext/ubdc/public/base/scss/_footer.scss
@@ -40,8 +40,8 @@
         display: block;
         margin: 20px 0 0;
         text-decoration: none;
-        color: #02152b;
-        text-transform: uppercase;
+        color: $black;
+        text-transform: capitalize;
         &:hover {
           color: $brandPrimary;
         }

diff --git a/ckanext/ubdc/public/base/scss/_homepage.scss b/ckanext/ubdc/public/base/scss/_homepage.scss
@@ -390,3 +390,11 @@
     width: 100%;
   }
 }
+
+.m-auto {
+  margin: auto;
+}
+
+.p-5 {
+  padding: 5px
+}
diff --git a/ckanext/ubdc/public/base/scss/_media.scss b/ckanext/ubdc/public/base/scss/_media.scss
@@ -28,10 +28,11 @@
   position: relative;
   float: left;
   width: 100%;
-  padding: calc($grid-gutter-width/2);
+  padding: calc($grid-gutter-width/4);
   margin: 0 0 calc($grid-gutter-width/2) calc($grid-gutter-width/2);
   background-color: white;
   display: flex;
+  border: 1px solid #ccc;
   @include border-radius(3px);
   .stats {
     padding: 0px 10px;
@@ -41,6 +42,7 @@
   }
   .media-image {
     margin-bottom: 5px;
+    width: -webkit-fill-available;
   }
   .media-edit {
     opacity: 0;
@@ -73,7 +75,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border: 1px solid $moduleHeadingBorderColor;
+  border: none;
   overflow: hidden;
   @include transition(all 0.2s ease-in);
   @include border-radius(3px);

diff --git a/ckanext/ubdc/public/base/scss/_toolbar.scss b/ckanext/ubdc/public/base/scss/_toolbar.scss
@@ -88,8 +88,9 @@
 
 .page-header {
     &.module-content{
-        padding-top: calc($grid-gutter-width/2);
+        padding-top: calc($grid-gutter-width/10);
         padding-bottom: 0;
+        background-color: transparent;
     }
     margin-top: $grid-gutter-width;
     @include clearfix;

diff --git a/ckanext/ubdc/templates/group/snippets/group_item.html b/ckanext/ubdc/templates/group/snippets/group_item.html
@@ -17,9 +17,11 @@
     <li class="media-item">
       {% block item_inner %}
       {% block image %}
+      <div class="col-md-3 m-auto p-5">
         <img src="{{ group.image_display_url or h.url_for_static('/base/images/placeholder-group.png') }}" alt="{{ group.name }}" class="media-image img-fluid">
+      </div> 
       {% endblock %}
-      <div class="stats">
+      <div class="stats col-md-9">
         {% block title %}
           <h2 class="media-heading">{{ group.display_name }}</h2>
         {% endblock %}

diff --git a/ckanext/ubdc/templates/organization/snippets/organization_item.html b/ckanext/ubdc/templates/organization/snippets/organization_item.html
@@ -16,9 +16,11 @@
     <li class="media-item">
       {% block item_inner %}
       {% block image %}
+      <div class="col-md-3 m-auto p-5">
         <img src="{{ organization.image_display_url or h.url_for_static('/base/images/placeholder-organization.png') }}" alt="{{ organization.name }}" class="img-fluid media-image">
+      </div>
       {% endblock %}
-      <div class="stats">
+      <div class="stats col-md-9">
         {% block title %}
             <h2 class="media-heading">{{ organization.display_name }}</h2>
         {% endblock %}