Commit dfa94fad authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

additional css and pattern work for views

parent ae7527a3
......@@ -2740,7 +2740,7 @@ form {
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
padding: 1rem; }
padding: 1rem 0; }
@media (min-width: 75rem) {
.uw-highlighted,
.block-page-title-block,
......@@ -2755,19 +2755,6 @@ form {
form {
padding-left: 0;
padding-right: 0; } }
@media (min-width: 75rem) {
.uw-highlighted,
.block-page-title-block,
.block-local-tasks-block,
.node-form,
.admin-list,
.js-media-library-view,
.messages,
.message,
.contextual-region.profile,
.uw-content-moderation__wrapper,
form {
padding: 1rem 0; } }
.uw-content-moderation__wrapper {
padding: 1rem; }
......@@ -4223,7 +4210,10 @@ button {
background-image: url("../source/images/icons/mobile-arrow-up-y.svg"); }
/* stylelint-disable-next-line selector-no-qualifying-type */
details.details {
.details,
.seven-details {
background-color: #fcfcfa;
border: 1px solid #bfbfbf;
border-bottom: 1px solid #000;
border-radius: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
......@@ -4231,15 +4221,20 @@ details.details {
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
/* stylelint-disable-next-line selector-no-qualifying-type */ }
details.details:hover {
.details:hover,
.seven-details:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
details.details:focus-within {
.details:focus-within,
.seven-details:focus-within {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
details.details:first-child {
.details:first-child,
.seven-details:first-child {
margin-top: 0; }
.js details.details:not([open]) > .details__content {
.js .details:not([open]) > .details__content, .js
.seven-details:not([open]) > .details__content {
display: none; }
.seven-details__summary,
.details__summary {
background-image: url("../source/images/icons/mobile-arrow-down.svg");
background-color: #eee;
......@@ -4256,14 +4251,18 @@ details.details {
padding: 1rem;
text-shadow: 0 1px 0 #fff;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
[dir='rtl'] .details__summary {
[dir='rtl'] .seven-details__summary, [dir='rtl']
.details__summary {
background-position: left 32px center;
padding-left: 56px;
padding-right: 32px; }
[open] > .details__summary {
[open] > .seven-details__summary, [open] >
.details__summary {
background-image: url("../source/images/icons/mobile-arrow-up.svg"); }
.seven-details__summary:first-child,
.details__summary:first-child {
margin-top: 0; }
.seven-details__summary::-webkit-details-marker,
.details__summary::-webkit-details-marker {
display: none; }
......@@ -4280,16 +4279,24 @@ details.details {
.details__content > :last-child {
margin-bottom: 0; }
.details__description {
.details__description,
.seven-details__description {
color: #000;
font-size: 1rem;
margin-bottom: 1rem; }
.details__description > :last-child {
.details__description > :last-child,
.seven-details__description > :last-child {
margin-bottom: 0; }
.node--type-uw-ct-contact .details {
max-width: 600px; }
.seven-details__wrapper {
padding: 1rem; }
.seven-details__wrapper .uw-input,
.seven-details__wrapper .form-text {
width: 100% !important; }
.sliding-popup-bottom,
.sliding-popup-top {
background: #fdd54f;
......@@ -5163,54 +5170,6 @@ fieldset,
.views-exposed-form .form-actions .button.js-form-submit.form-submit {
font-weight: inherit; }
.seven-details {
background-color: #fcfcfa;
border-bottom: 1px solid #000;
border-radius: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
margin-bottom: 1rem;
margin-top: 1rem;
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.seven-details:hover, .seven-details:focus-within {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
.seven-details:first-child {
margin-top: 0; }
.seven-details__summary {
background-image: url("../source/images/icons/mobile-arrow-down.svg");
background-color: #eee;
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 0.8125rem;
color: #000;
cursor: pointer;
display: block;
font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
font-size: 0.88889rem;
font-weight: 400;
line-height: 1.25;
padding: 1rem;
text-shadow: 0 1px 0 #fff; }
.seven-details__summary::-webkit-details-marker {
display: none; }
.seven-details__summary:hover,
.seven-details__summary:focus,
.seven-details[open] > .seven-details__summary {
background-color: #eee;
color: #000; }
.seven-details__summary:focus,
.seven-details[open] > .seven-details__summary {
background-image: url("../source/images/icons/mobile-arrow-up.svg");
color: #000; }
.seven-details__wrapper {
padding: 1rem; }
.seven-details__wrapper .uw-input,
.seven-details__wrapper .form-text {
width: 100% !important; }
.form-item {
margin: 0 0 1rem; }
......@@ -8314,34 +8273,60 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
text-align: center; }
.view {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
display: grid;
gap: 1rem;
grid-template-columns: 100%;
padding: 1rem;
padding: 0;
position: relative; }
@media (min-width: 75rem) {
.view {
padding-left: 0;
padding-right: 0; } }
.views-element-container {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
padding: 0;
position: relative; }
@media (min-width: 75rem) {
.views-element-container {
padding-left: 0;
padding-right: 0; } }
.block-views .view {
padding: 0; }
@media (min-width: 75rem) {
.view {
padding: 1rem 0;
padding-top: 0; }
.block-views .view {
padding: 0; } }
.block-views .view {
padding: 0; } }
.view.view-uw-view-contacts {
padding-left: 0;
padding-right: 0; }
.view-interact {
margin-left: auto;
margin-right: auto;
max-width: 75rem;
padding: 0 16px;
display: flex;
gap: 0.5rem;
justify-content: flex-end;
padding: 0; }
@media (min-width: 75rem) {
.view-interact {
padding-left: 0;
padding-right: 0; } }
.view-interact .button {
margin: 0; }
.view-header {
grid-column: 1/3;
grid-row: 1/2;
width: 100%; }
.view-content {
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 2rem;
grid-column: 1/2;
grid-row: 2/3;
width: 100%; }
.view-content--message {
grid-column: 1/2;
grid-row: 2/3;
margin: 0;
position: relative;
......@@ -8349,66 +8334,81 @@ html:not(.js) .uw-tabcontent[role="tabpanel"][hidden] {
.view-content--message .message,
.view-content--message .messages {
margin: 0; }
.view.with-filters {
display: grid; }
@media (min-width: 63.1875rem) {
.view.with-filters {
gap: 2rem;
grid-template-columns: auto 18.75rem; } }
.view.with-filters .view-content {
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 2rem;
grid-column: 1/2;
grid-row: 2/3;
width: 100%; }
.view.with-filters .view-filters {
background: #fff;
grid-column: 2/3;
height: 0;
overflow: hidden;
width: 0; }
.view.with-filters .view-filters h2 {
margin-top: 0; }
@media (min-width: 63.1875rem) {
.view.with-filters {
gap: 2rem;
grid-template-columns: auto 18.75rem; } }
.view.with-filters .view-header {
margin-bottom: 1rem; }
.view.with-filters .view-filters {
grid-column: 2/3;
overflow: hidden; }
@media (min-width: 63.1875rem) {
.view.with-filters .view-filters {
grid-row: 2/4; } }
.view.with-filters .view-filters:target {
grid-column: 1/3;
margin-top: -2.5rem;
min-height: 90vh;
overflow: inherit;
padding: 0;
width: 100%; }
.view.with-filters .view-filters:target ~ .view-content {
height: 0;
overflow: hidden;
width: 0; }
@media (min-width: 63.1875rem) {
.view.with-filters .view-filters {
grid-row: 2/4;
height: inherit;
overflow: hidden;
width: inherit; } }
.view.with-filters .view-filters:target {
grid-column: 1/2;
grid-row: 1/2;
height: 100%;
margin-top: -2.5rem;
overflow: inherit;
padding: 1rem;
width: 100%;
z-index: 9; }
.view.with-filters .view-filters:target ~ .view-content {
display: none; }
.view.with-filters .view-filters:target ~ .view-content--message {
display: none; }
@media (min-width: 63.1875rem) {
.view.with-filters .view-filters {
background: inherit; }
.view.with-filters .view-filters:target {
background: inherit;
grid-column: 2/3;
grid-row: inherit;
height: inherit;
margin: 0;
min-height: inherit;
margin-top: 0;
overflow: inherit;
padding: 0;
width: 18.75rem; }
.view.with-filters .view-filters:target ~ .view-content {
height: inherit;
overflow: inherit;
transition: inherit;
width: inherit; } }
.view.with-filters .view-content {
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 2rem;
grid-column: 1/2;
grid-row: 2/3;
width: 100%; }
@media (min-width: 63.1875rem) {
.view.with-filters .view-content {
grid-column: 1/2; } }
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 2rem;
grid-column: 1/2;
grid-row: 1/2; }
.view.with-filters .view-filters:target ~ .view-content--message {
display: block;
grid-column: 1/2;
grid-row: 1/2; } }
.uw-offcanvas--filters {
padding-right: 0;
text-align: right;
width: 100%; }
.uw-offcanvas--filter {
display: flex;
gap: 0.5rem;
justify-content: flex-end; }
@media (min-width: 63.1875rem) {
.view-filters__open {
display: none; } }
.view-filters__open {
order: 100; }
@media (min-width: 63.1875rem) {
.view-filters__open {
display: none; } }
.view-filters__close {
margin: inherit;
......
This source diff could not be displayed because it is too large. You can view the blob instead.
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......@@ -169,6 +186,22 @@
};
})(jQuery, Drupal);
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.filtersopen = {
attach: function (context, settings) {
$(document).ready(function () {
$('.view-filters details').each(function () {
$(this).attr("open", "");
});
});
}
};
})(jQuery, Drupal);
/**
* @file
*/
......@@ -357,23 +390,6 @@ else {
};
})(jQuery);
/**
* @file
* Ckeditor Modal.
*/
(function ($, Drupal) {
if ($.ui && $.ui.dialog) {
orig_allowInteraction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function (event) {
if ($(event.target).closest('.cke_dialog').length) {
return true;
}
return orig_allowInteraction.apply(this, arguments);
};
}
})(jQuery, Drupal);
/**
* @file
*/
......
......@@ -15,10 +15,7 @@
.uw-content-moderation__wrapper,
form {
@include uw-contained-width;
padding: rem(gesso-spacing(sm));
@include xl {
padding: rem(gesso-spacing(sm)) 0;
}
padding: rem(gesso-spacing(sm)) 0;
}
// Reset padding
.uw-content-moderation__wrapper{
......
......@@ -11,7 +11,10 @@ $details-font-family: gesso-font-family(primary);
// 'details' can appear as a modernizr class on the html tag, so this
// class is limited to only the details element
/* stylelint-disable-next-line selector-no-qualifying-type */
details.details {
.details,
.seven-details{
background-color: #fcfcfa;
border: 1px solid #bfbfbf;
border-bottom: 1px solid $card-accent-border-color;
border-radius: inherit;
box-shadow: gesso-box-shadow(1);
......@@ -27,13 +30,14 @@ details.details {
&:first-child{
margin-top: 0;
}
// Fallback for browsers that don’t support details.
/* stylelint-disable-next-line selector-no-qualifying-type */
.js &:not([open]) > .details__content {
display: none;
}
}
.seven-details__summary,
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: $details-background-color;
......@@ -52,7 +56,6 @@ details.details {
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
@if $support-for-rtl {
[dir='rtl'] & {
background-position: left $details-padding center;
......@@ -97,7 +100,8 @@ details.details {
}
}
.details__description {
.details__description,
.seven-details__description{
color: $details-text-color;
font-size: rem(gesso-font-size(0));
margin-bottom: rem(gesso-spacing(sm));
......@@ -111,3 +115,10 @@ details.details {
.details {max-width:600px;}
}
}
.seven-details__wrapper {
padding: 1rem;
.uw-input,
.form-text{
width:100% !important;
}
}
---
details_classes: 'seven-details'
details_summary: 'Details summary'
details_description: 'Details description'
details_content: |-
<p>Details content</p>
......@@ -26,57 +26,3 @@
}
}
.seven-details {
background-color: #fcfcfa;
border-bottom: 1px solid $card-accent-border-color;
border-radius: inherit;
box-shadow: gesso-box-shadow(1);
margin-bottom: 1rem;
margin-top: 1rem;
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
&:hover,
&:focus-within {
box-shadow: gesso-box-shadow(3);
}
&:first-child{
margin-top: 0;
}
}
.seven-details__summary {
@include svg-background(mobile-arrow-down);
background-color: $details-background-color;
background-position: right 1rem center; // LTR
background-repeat: no-repeat;
background-size: rem(13px);
color: gesso-brand(org-default,uw-black,'primary');
cursor: pointer;
display: block;
font-family:$summary-font-family;
font-size: rem(gesso-font-size(-1));
font-weight:400;
line-height: 1.25;
padding: 1rem;
text-shadow: 0 1px 0 #fff;
&::-webkit-details-marker {
display: none;
}
}
.seven-details__summary:hover,
.seven-details__summary:focus,
.seven-details[open] > .seven-details__summary {
background-color: #eee;
color: gesso-brand(org-default,uw-black,'primary');
}
.seven-details__summary:focus,
.seven-details[open] > .seven-details__summary {
@include svg-background(mobile-arrow-up);
color: gesso-brand(org-default,uw-black,'primary');
}
.seven-details__wrapper {
padding: 1rem;
.uw-input,
.form-text{
width:100% !important;
}
}
/**
* @file
*/
(function ($, Drupal) {
Drupal.behaviors.filtersopen = {
attach: function (context, settings) {
$(document).ready(function () {
$('.view-filters details').each(function () {
$(this).attr("open", "");
});
});
}
};
})(jQuery, Drupal);
......@@ -8,6 +8,7 @@
'modifier_classes': 'button--icon view-filters__close',
} %}
</div>
<h2>Filters:</h2>
{% block exposed %}
{{ exposed }}
{% endblock %}
......
......@@ -10,22 +10,20 @@ $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 {
@include uw-contained-width;
&s-element-container{
@include uw-contained-width;
padding:0;
position:relative;
}
display: grid;
gap:1rem;
grid-template-columns: 100%;
padding: rem(gesso-spacing(sm));
padding:0;
position: relative;