From dae0069796284da5b5da356617819b91eef35d5a Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 16 Jun 2021 20:42:06 -0400
Subject: [PATCH] ISTWCMS-4704: updating views to handle no filters
---
css/styles.css | 29 +++----
.../_patterns/04-components/view/_view.scss | 79 ++++++++++---------
.../view/views-view/views-view.twig | 1 +
3 files changed, 55 insertions(+), 54 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 2d69849a..86838770 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -8156,17 +8156,10 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
grid-column: 1/3;
grid-row: 2/3;
width: 100%; }
- @media (min-width: 63.1875rem) {
- .view-content {
- grid-column: 1/2; } }
.view-content--message {
- grid-column: 1/3;
grid-row: 2/3;
margin: 0; }
- @media (min-width: 63.1875rem) {
- .view-content--message {
- grid-column: 1/2; } }
.view-content--message .message,
.view-content--message .messages {
margin: 0; }
@@ -8186,7 +8179,7 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
padding-right: 0; } }
@media (min-width: 63.1875rem) {
.view.view-uw-view-contacts, .view.view-uw-view-profiles, .view.view-taxonomy-term, .view.view-uw-view-blogs, .view.view-uw-view-events, .view.view-uw-view-news-items {
- gap: 2rem;
+ gap: 1.5rem;
grid-template-columns: auto 18.75rem; }
.view.view-uw-view-contacts .view-header, .view.view-uw-view-profiles .view-header, .view.view-taxonomy-term .view-header, .view.view-uw-view-blogs .view-header, .view.view-uw-view-events .view-header, .view.view-uw-view-news-items .view-header {
display: none; } }
@@ -8199,29 +8192,33 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
padding-left: 0;
padding-right: 0; }
-.view-filters {
+@media (min-width: 63.1875rem) {
+ .with-filters .view-content {
+ grid-column: 1/2; } }
+
+.with-filters .view-filters {
grid-column: 1/3;
grid-row: 2/4;
height: 0;
overflow: hidden;
width: 0; }
- .view-filters form {
+ .with-filters .view-filters form {
width: 100%; }
- .view-filters form .button,
- .view-filters form .image-button {
+ .with-filters .view-filters form .button,
+ .with-filters .view-filters form .image-button {
margin: 0; }
@media (min-width: 63.1875rem) {
- .view-filters {
+ .with-filters .view-filters {
display: inherit;
grid-column: 2/3;
height: inherit;
margin: 0;
overflow: inherit;
width: 18.75rem; }
- .view-filters .uw-input,
- .view-filters .form-text {
+ .with-filters .view-filters .uw-input,
+ .with-filters .view-filters .form-text {
width: 100% !important; }
- .view-filters .views-exposed-form {
+ .with-filters .view-filters .views-exposed-form {
margin: 0 !important;
padding: 0 !important; } }
diff --git a/source/_patterns/04-components/view/_view.scss b/source/_patterns/04-components/view/_view.scss
index 820686ef..4b81f3eb 100644
--- a/source/_patterns/04-components/view/_view.scss
+++ b/source/_patterns/04-components/view/_view.scss
@@ -9,7 +9,8 @@ $sidebar-width: 18.75rem;
// set the layout for the Views container when being used with Blog, news, events
// to match flexbox in multi list usage.
-.view{
+.view {
+
// View content container.
&-header{
grid-column:1/3;
@@ -22,22 +23,14 @@ $sidebar-width: 18.75rem;
}
}
- &-content{
+ &-content {
@include uw-flex-grid();
grid-column:1/3;
grid-row:2/3;
width:100%;
- @include large{
- grid-column:1/2;
- //width: clamp(320px, 900px, calc(100vw - 333px));
- }
}
- &-content--message{
- grid-column:1/3;
- @include large{
- grid-column:1/2;
- }
+ &-content--message {
grid-row:2/3;
margin:0;
.message,
@@ -72,7 +65,7 @@ $sidebar-width: 18.75rem;
display:none;
}
//background:$test-color-2;
- gap: $grid-gap;
+ gap: 1.5rem;
grid-template-columns: auto $sidebar-width;
}
@include xl {
@@ -86,36 +79,46 @@ $sidebar-width: 18.75rem;
padding-right:0;
}
}
-.view-filters{
- // Universal filter form used on events, blog and news.
- grid-column:1/3;
- grid-row:2/4;
- height:0;
- overflow:hidden;
- width:0;
-
- form{
- width:100%;
- .button,
- .image-button{
- margin:0;
+.with-filters {
+ .view-content {
+ @include large{
+ grid-column:1/2;
+ //width: clamp(320px, 900px, calc(100vw - 333px));
}
}
- @include large {
- display:inherit;
- grid-column:2/3;
- height:inherit;
- margin: 0;
- overflow:inherit;
- width: $sidebar-width;
- .uw-input,
- .form-text{
- width:100% !important;
+
+ .view-filters {
+ // Universal filter form used on events, blog and news.
+ grid-column:1/3;
+ grid-row:2/4;
+ height:0;
+ overflow:hidden;
+ width:0;
+
+
+ form{
+ width:100%;
+ .button,
+ .image-button{
+ margin:0;
+ }
}
- .views-exposed-form{
- margin:0 !important;
- padding:0 !important;
+ @include large {
+ display:inherit;
+ grid-column:2/3;
+ height:inherit;
+ margin: 0;
+ overflow:inherit;
+ width: $sidebar-width;
+ .uw-input,
+ .form-text{
+ width:100% !important;
+ }
+ .views-exposed-form{
+ margin:0 !important;
+ padding:0 !important;
+ }
}
}
}
diff --git a/source/_patterns/04-components/view/views-view/views-view.twig b/source/_patterns/04-components/view/views-view/views-view.twig
index 145410ea..a144de85 100644
--- a/source/_patterns/04-components/view/views-view/views-view.twig
+++ b/source/_patterns/04-components/view/views-view/views-view.twig
@@ -5,6 +5,7 @@
'view-id-' ~ id,
'view-display-id-' ~ display_id,
dom_id ? 'js-view-dom-id-' ~ dom_id,
+ exposed ? 'with-filters',
]
%}
<div{{ attributes.addClass(classes) }}>
--
GitLab