From 533f7d657e95e97b9d8cb392b5c14c5dd5d8dc6a Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 19 Oct 2021 14:36:06 +0000
Subject: [PATCH] ISTWCMS-5035:css for wcms2 parady of catalogs search page
---
.../catalog-search/_catalog-search.scss | 16 +--
.../04-components/catalog/_catalog.scss | 103 ++++++++++++++++++
.../04-components/catalog/catalog.twig | 32 ++++++
.../_patterns/04-components/tabs/_tabs.scss | 2 -
4 files changed, 141 insertions(+), 12 deletions(-)
create mode 100644 source/_patterns/04-components/catalog/_catalog.scss
create mode 100644 source/_patterns/04-components/catalog/catalog.twig
diff --git a/source/_patterns/04-components/catalog-search/_catalog-search.scss b/source/_patterns/04-components/catalog-search/_catalog-search.scss
index b2ee8d6a..dc8082ce 100644
--- a/source/_patterns/04-components/catalog-search/_catalog-search.scss
+++ b/source/_patterns/04-components/catalog-search/_catalog-search.scss
@@ -1,12 +1,13 @@
.uw-catalog-search {
- margin:0;
-
+ margin:0 0 gesso-spacing(sm) 0;
.catalog-search-form {
display:grid;
grid-template-columns: auto 3rem;
- padding-left:0;
- padding-right:0;
+ padding:0;
position: relative;
+ .form-item{
+ margin:0;
+ }
.form-text {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
@@ -16,20 +17,15 @@
.button{
&[aria-label="search"]{
@include svg-background(search_2-white);
- background-color:gesso-grayscale(gray-5);
+ background-color:gesso-grayscale(gray-5);
background-position: 50% 50%;
background-repeat:no-repeat;
background-size:50%;
border:1px solid gesso-grayscale(gray-3);
-
border-bottom-left-radius: 0;
border-bottom-right-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 3px;
- height:2.47rem;
- @include large {
- height:2.46rem;
- }
margin:0;
max-width:inherit;
padding:0;
diff --git a/source/_patterns/04-components/catalog/_catalog.scss b/source/_patterns/04-components/catalog/_catalog.scss
new file mode 100644
index 00000000..6d27dd1f
--- /dev/null
+++ b/source/_patterns/04-components/catalog/_catalog.scss
@@ -0,0 +1,103 @@
+.path-catalogs{
+ // margin-top: 0.625rem;
+
+ .views-element-container {
+ min-height: 3rem;
+ position: relative;
+ }
+ .uw-catalog-search{
+ }
+ .view-content {
+ // reset the flex
+ display: inherit;
+ -webkit-flex-flow: inherit;
+ -ms-flex-flow: inherit;
+ flex-flow: inherit;
+ gap: inherit;
+ grid-column:inherit;
+ grid-row: inherit;
+ margin: 1rem 0;
+ .item-list{
+ ul{
+ margin: 0;
+ padding: 0;
+ li{
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+ p{
+ margin:0;
+ }
+ .views-field{
+ a {
+ margin-right: .2rem;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus{
+ text-decoration: none;
+ }
+ }
+ h2{
+ font-size: gesso-font-size(3);
+ span{
+ font-family:gesso-font-family(primary);
+ font-size: gesso-font-size(0);
+ @include medium{
+ font-size: gesso-font-size(1);
+ }
+ }
+
+ }
+ }
+ }
+ }
+ }
+ }
+}
+.view-uw-view-catalog-show-nodes,
+.view-uw-view-catalog-show-terms{
+ display: inherit;
+ gap: inherit;
+ grid-template-columns:inherit;
+ padding: inherit;
+ position: inherit;
+ .view-content {
+ .item-list{
+ ul {
+ margin: 0;
+ padding: 0;
+
+ li {
+ list-style-type: none;
+ margin-left: 0;
+ padding-left: 0;
+ p{
+ margin:0;
+ }
+ a {
+ margin-right: .2rem;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus{
+ text-decoration: none;
+ }
+ }
+ h2{
+ font-size: gesso-font-size(3);
+ span{
+ font-family:gesso-font-family(primary);
+ font-size: gesso-font-size(0);
+ @include medium{
+ font-size: gesso-font-size(1);
+ }
+ }
+
+ }
+ }
+ }
+ }
+ }
+
+}
diff --git a/source/_patterns/04-components/catalog/catalog.twig b/source/_patterns/04-components/catalog/catalog.twig
new file mode 100644
index 00000000..52ea50f5
--- /dev/null
+++ b/source/_patterns/04-components/catalog/catalog.twig
@@ -0,0 +1,32 @@
+ {% if pattern_lab %}
+ <div class="path-catalogs">
+ <div class="views-element-container contextual-region">
+ <div class="uw-catalog-search">
+ <form class="catalog-search-form" data-drupal-selector="catalog-search-form" action="/catalogs" method="post" id="catalog-search-form" accept-charset="UTF-8" data-drupal-form-fields="edit-search-input,edit-submit">
+ <div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-search-input form-item-search-input form-no-label">
+ <input data-drupal-selector="edit-search-input" type="text" id="edit-search-input" name="search_input" value="" size="60" maxlength="128" placeholder="Search within all catalogs" class="form-text required" required="required" aria-required="true">
+ </div>
+ <input aria-label="search" data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="" class="button js-form-submit form-submit">
+ <input autocomplete="off" data-drupal-selector="form-elgxztep7mki3psok-nfqf9pcqjiq7-pglh3jj9f4r8" type="hidden" name="form_build_id" value="form-ELGxZTep7MKi3PsOK_nfqf9PcQjiQ7-pGLH3Jj9F4r8">
+ <input data-drupal-selector="edit-catalog-search-form-form-token" type="hidden" name="form_token" value="RpAjcd-zHahGERC452drdMaI_k0hmmw05FvjEP1rrnM">
+ <input data-drupal-selector="edit-catalog-search-form" type="hidden" name="form_id" value="catalog_search_form">
+ </form>
+ </div>
+ <div class="contextual-region view view-uw-view-catalogs view-id-uw_view_catalogs view-display-id-catalogs_page js-view-dom-id-58ff44c140cc61ce86df67b484c8d7df5452597b951d9a1a2455d599b6a6d093">
+ <div data-contextual-id="entity.view.edit_form:view=uw_view_catalogs:location=page&name=uw_view_catalogs&display_id=catalogs_page&langcode=en" data-contextual-token="unOKTU88qEcBR258PDXRd2IMBDyzcGqUrUvP6nU6sL8" class="contextual"><button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open Books (2) configuration options</button><ul class="contextual-links" hidden=""><li class="entityviewedit-form"><a href="/admin/structure/views/view/uw_view_catalogs/edit/catalogs_page?destination=/catalogs">Edit view</a></li></ul></div>
+ <div class="view-content">
+ <div class="item-list">
+ <ul>
+ <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/books">Books</a> <span>(2)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"><p>this is the description section - need to test </p></span></div></li>
+ <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/colours">Colours</a> <span>(1)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"><p>this is a description</p></span></div></li>
+ <li><div class="views-field views-field-nid"><span class="field-content"><h2><a href="/catalogs/painters">Painters</a> <span>(1)</span></h2></span></div><div class="views-field views-field-description__value"><span class="field-content"></span></div></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ {% else %}
+ {{ catalog }}
+ {% endif %}
+
diff --git a/source/_patterns/04-components/tabs/_tabs.scss b/source/_patterns/04-components/tabs/_tabs.scss
index 5f9984e2..2680e470 100644
--- a/source/_patterns/04-components/tabs/_tabs.scss
+++ b/source/_patterns/04-components/tabs/_tabs.scss
@@ -54,14 +54,12 @@
// button
.uw-tablinks {
border-bottom: 0.4rem solid #fff;
- font-size: gesso-font-size(-1);
font-weight:inherit;
margin:0 0 0 0.15rem;
max-width: inherit;
padding: 1rem 2rem;
@include medium{
border-bottom: 0.4rem solid #fff;
-
font-weight:inherit;
margin:0 0 0 0.15rem;
max-width: inherit;
--
GitLab