Merge branch 'feature/ISTWCMS-6028-m26lebla-clean-up-projects-listings-whitespace' into '1.0.x'

ISTWCMS-6028: Tighten the spacing in projects and in view interact rest of views grids

See merge request !81

src/patterns/01-core/props/_media.scss

 // Media Query Ranges
-$screen-xxs: 240px;
+$screen-xxs: 20rem;
 $screen-xs: 30rem;
 $screen-fb: 37.5rem;
 $screen-sm: 40.06rem;

src/patterns/04-components/view/_view.scss

@@ -13,16 +13,11 @@ $sidebar-width: 18.75rem;
     @include uw-contained-width;
     position: relative;
     width: 100%;
+    &.block-views,
     .block-views &,
     .block-layout-builder &{
       padding: 0;
     }
-    @media(min-width: $screen-xl) {
-      .block-views &,
-      .block-layout-builder & {
-        padding: 0;
-      }
-    }
   }
   &s-projects-container{
     margin-left: auto;
@@ -49,11 +44,27 @@ $sidebar-width: 18.75rem;
     @include uw-contained-width;
     display: flex;
     gap: var(--size-1);
+    grid-row-gap: 0;
+    height: var(--size-6);
     justify-content: flex-end;
+    // Moving the rss button up for the blog news and events
+    margin-top: -3rem;
     padding: 0;
     .button{
       margin: 0;
     }
+    .path-services & {
+      margin-top: 0;
+      @media(min-width: $screen-md) {
+        margin-top: -3rem;
+      }
+    }
+    .path-events &{
+      margin-top: 0;
+      @media(min-width: 375px) {
+        margin-top: -3rem;
+      }
+    }
   }
   &-header{
     grid-column: 1 / 3;
@@ -83,6 +94,8 @@ $sidebar-width: 18.75rem;
     align-self: flex-end;
     grid-column: 1 / 2;
     grid-row: 2 / 3;
+    margin-bottom: var(--grid-gap);
+    margin-top: var(--grid-gap);
     width: 100%;
   }
   // With Filters
@@ -90,20 +103,25 @@ $sidebar-width: 18.75rem;
     @media(min-width: $screen-lg) {
       display: grid;
       gap: var(--grid-gap);
+      grid-row-gap: 0;
       grid-template-columns: auto $sidebar-width;
     }
     .view-content {
       grid-column: 1 / 2;
-      margin-bottom: var(--size-6);
       width: 100%;
     }
     .view-filters {
-      .views-projects-container &{
-        margin-top: var(--size-9);
-      }
       h2{
         margin-top: 0;
       }
+      .views-projects-container &{
+        @media(min-width: $screen-lg) {
+          margin-top: var(--size-1);
+          h2{
+            margin-top: inherit;
+          }
+        }
+      }
       background: var(--uw-white);
       grid-column: 2 / 3;
       height: 0;
@@ -234,14 +252,12 @@ $sidebar-width: 18.75rem;
     @media(min-width: $screen-sm){
       display: grid;
       gap: var(--grid-gap);
+      grid-row-gap: 0;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(4, min-content);
     }
     .views-row{
       margin-bottom: var(--grid-gap);
-      @media(min-width: $screen-sm){
-        margin-bottom: 0;
-      }
     }
   }
 }
@@ -259,20 +275,8 @@ $sidebar-width: 18.75rem;
       }
     }
   }
-  // Moving the rss button up for the blog news and events
-  .block-page-title-block{
-    padding-right: 12rem;
-    @media(min-width: $screen-sm) {
-      padding-right: inherit;
-    }
-  }
-  .view-interact{
-    margin-top: -4rem;
-    @media(min-width: $screen-md) {
-      margin-top: 0;
-    }
-  }
 }
+
 .view-uw-view-news-items,
 .view-uw-view-blogs,
 .view-uw-view-events,
@@ -287,7 +291,6 @@ $sidebar-width: 18.75rem;
   }
 }
 
-
 .path-catalogs,
 .path-taxonomy,
 .path-services {
@@ -369,31 +372,20 @@ $sidebar-width: 18.75rem;
   }
   .view{
     &.with-filters{
-      margin: inherit;
+      margin: 0;
       .views-element-container {
         grid-column: 1 / 3;
       }
-      .view-interact{
-        margin-top: -3.25rem;
-        @media(min-width: $screen-sm) {
-          margin-top: -4rem;
-        }
-      }
       > .view-content {
-        margin: inherit;
+        margin: 0;
         > h2{
           grid-column: 1 / 3;
-          margin: inherit;
-          //padding: 0 var(--size-2);
-          //@media(min-width: 75rem) {
-          //  padding-left: 0;
-          //  padding-right: 0;
-          //}
+          margin: 0;
           width: 100%;
         }
       }
       .view-footer{
-        padding: var(--size-2);
+        padding: 0 0 var(--size-6) 0;
         text-align: center;
         @media(min-width: $screen-sm) {
           grid-column: 1 / 3;
@@ -405,16 +397,12 @@ $sidebar-width: 18.75rem;
       }
     }
     &.view-uw-view-projects{
-      .view-content{
-        //grid-template-rows: auto;
-        //margin: inherit;
-      }
       &.view-display-id-search{
         &_page{
           .view-content{
             margin-top: var(--size-1);
             @media(min-width: $screen-md) {
-              margin-top: var(--size-6);
+              margin-top: var(--size-4);
             }
           }
         }

src/patterns/04-components/view/view-content/_view-content.scss

@@ -9,16 +9,27 @@
       &--message {
         margin-top: var(--size-2);
       }
-      @media(min-width: $screen-md) {
+
+      @media(min-width: $screen-lg) {
         margin-top: var(--size-6);
         &--message {
           margin-top: var(--size-6);
         }
       }
     }
-    &.view-uw-view-contacts {
+
+    &.view-uw-view-projects {
       .view-content {
-        gap: 0;
+        margin-top: 0;
+        @media(min-width: $screen-lg) {
+          margin-top: var(--size-105);
+        }
+      }
+
+      &.view-uw-view-contacts {
+        .view-content {
+          gap: 0;
+        }
       }
     }
   }