Skip to content
Snippets Groups Projects
Commit 22b738ee authored by Kevin Paxman's avatar Kevin Paxman
Browse files

Merge branch 'feature/ISTWCMS-5900-ebremner-contact-blocks' into '1.0.x' 

ISTWCMS-5900: adding view lists

See merge request !53
parents 92412938 34c61b5a
No related branches found
No related tags found
1 merge request!53ISTWCMS-5900: adding view lists
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ 22b738ee
......@@ -65,5 +65,6 @@
@forward 'view/view-filter/view-filter';
@forward 'view/view-header/view-header';
@forward 'view/view-interact/view-interact';
@forward "view/view-lists/view-lists";
@forward 'view/views-view/views-view';
@forward 'view/views-view-unformatted/views-view-unformatted';
src/patterns/04-components/content-grid-list/_content-grid-list.scss
+ 3
− 0
View file @ 22b738ee
......@@ -23,6 +23,9 @@
width: 100% !important;
}
}
.contact &{
display: block;
}
}
&__style_controls {
@include uw-flex-term-item();
......
src/patterns/04-components/exp_col_block/_exp_col_block.scss
+ 253
− 231
View file @ 22b738ee
......@@ -8,60 +8,36 @@
// If the UW branding group
@if $faculty == org-default {
.uw-exp-col{
&__button{
&[data-type="expand-all"] {
background: var(--gray-2);
border-right: var(--size-xs) solid var(--gray-4);
color: var(--gray-6);
}
&[data-type="collapse-all"] {
background: var(--gray-2);
color: var(--gray-6);
}
&:hover,
&:focus {
outline: none;
&:not(.contact){
.uw-exp-col__button{
&[data-type="expand-all"] {
background: var(--gray-6);
color: var(--gray-2);
background: var(--gray-2);
border-right: var(--size-xs) solid var(--gray-4);
color: var(--gray-6);
}
&[data-type="collapse-all"] {
background: var(--gray-6);
color: var(--gray-2);
}
}
}
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
h2,
h3,
h4,
h5,
h6 {
background: var(--gray-2);
color: var(--gray-6);
}
&:hover,
&:focus {
@include svg-background(mobile-arrow-down-w);
background-color: var(--gray-6);
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
outline: none;
&[data-type="expand-all"] {
background: var(--gray-6);
color: var(--gray-2);
}
&[data-type="collapse-all"] {
background: var(--gray-6);
color: var(--gray-2);
}
}
}
&[open] {
> .details__summary {
@include svg-background(mobile-arrow-up);
.uw-details{
.details__summary {
@include svg-background(mobile-arrow-down);
background-color: var(--gray-2);
h2,
h3,
......@@ -70,8 +46,9 @@
h6 {
color: var(--gray-6);
}
&:hover,
&:focus {
@include svg-background(mobile-arrow-up-w);
@include svg-background(mobile-arrow-down-w);
background-color: var(--gray-6);
h2,
h3,
......@@ -81,16 +58,40 @@
color: var(--uw-white);
}
}
&:hover {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
}
&[open] {
> .details__summary {
@include svg-background(mobile-arrow-up);
background-color: var(--gray-2);
h2,
h3,
h4,
h5,
h6{
color: var(--uw-white);
h6 {
color: var(--gray-6);
}
&:focus {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
}
&:hover {
@include svg-background(mobile-arrow-up-w);
background-color: var(--gray-6);
h2,
h3,
h4,
h5,
h6{
color: var(--uw-white);
}
}
}
}
......@@ -101,128 +102,129 @@
// Else run the loop on the faculties.
@else {
.uw-exp-col{
&__button{
&[data-type="expand-all"] {
background: var(--#{$colour}-primary);
border-right: var(--size-xs) solid var(--uw-white);
color: var(--uw-white);
}
&[data-type="collapse-all"] {
background: var(--#{$colour}-primary);
color: var(--uw-white);
}
&:hover,
&:focus {
outline: none;
&:not(.contact){
.uw-exp-col__button{
&[data-type="expand-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
&[data-type="collapse-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
}
}
.uw-details{
.details__summary {
background-color: var(--#{$colour}-primary);
background-image: inherit;
h2,
h3,
h4,
h5,
h6 {
background: var(--#{$colour}-primary);
border-right: var(--size-xs) solid var(--uw-white);
color: var(--uw-white);
}
&::after {
@include svg-background-color(var(--uw-white), mobile-arrow-down);
&[data-type="collapse-all"] {
background: var(--#{$colour}-primary);
color: var(--uw-white);
}
&:hover,
&:focus {
background-color: var(--uw-white);
&::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
outline: none;
&[data-type="expand-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
h2,
h3,
h4,
h5,
h6 {
&[data-type="collapse-all"] {
background-color: var(--uw-white);
color: var(--#{$colour}-primary);
}
}
}
}
.uw-details[open] {
.details__summary {
background-image: inherit;
}
> .details__summary {
background-color: var(--#{$colour}-primary);
h2,
h3,
h4,
h5,
h6 {
color: var(--uw-white);
}
&::after {
@include svg-background-color(var(--uw-white), mobile-arrow-up);
}
}
&:focus {
.uw-details{
.details__summary {
background-color: var(--uw-white);
background-color: var(--#{$colour}-primary);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
color: var(--uw-white);
}
}
}
&:focus-within {
.details__summary {
background-color: var(--uw-white);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
@include svg-background-color(var(--uw-white), mobile-arrow-down);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
&:hover,
&:focus {
background-color: var(--uw-white);
&::after{
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
}
}
&:hover {
.uw-details[open] {
.details__summary {
background-color: var(--uw-white);
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
}
background-image: inherit;
}
> .details__summary {
background-color: var(--#{$colour}-primary);
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
color: var(--uw-white);
}
&::after {
@include svg-background-color(var(--uw-white), mobile-arrow-up);
}
}
&:focus {
.details__summary {
background-color: var(--uw-white);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-down);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
}
&:focus-within {
.details__summary {
background-color: var(--uw-white);
background-image: inherit;
&::after {
@include svg-background-color(var(--#{$colour}-primary) ,mobile-arrow-up);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
}
&:hover {
.details__summary {
background-color: var(--uw-white);
&::after {
@include svg-background-color(var(--#{$colour}-primary), mobile-arrow-up);
}
h2,
h3,
h4,
h5,
h6 {
color: var(--#{$colour}-primary);
}
}
}
}
......@@ -232,121 +234,141 @@
}
}
.uw-exp-col {
-webkit-font-smoothing: antialiased;
&__operations {
list-style-type: none;
margin: 0;
padding: var(--size-2) 0 0;
li {
display: inline-block;
&:not(.contact){
-webkit-font-smoothing: antialiased;
.uw-exp-col__operations {
list-style-type: none;
margin: 0;
padding: var(--size-2) 0 0;
li {
display: inline-block;
}
}
}
&___group-info,
&__heading-selector,
&__heading-text {
display: inline-block;
}
&__heading-selector {
.form-select {
.uw-exp-col__group-info,
.uw-exp-col__heading-selector,
.uw-exp-col__heading-text {
display: inline-block;
width: 82%;
}
}
&__group-info,
&__heading-text {
.ui-dialog & {
input[size="60"] {
.uw-exp-col__heading-selector {
.form-select {
display: inline-block;
width: 82%;
}
}
}
&__table {
td {
vertical-align: top;
.uw-exp-col__group-info,
.uw-exp-col__heading-text {
.ui-dialog & {
input[size="60"] {
display: inline-block;
}
}
}
}
&__controls {
border: var(--size-xs) solid var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: var(--size-2);
.no-js & {
display: none;
.uw-exp-col__table {
td {
vertical-align: top;
}
}
.no-js.js &,
.js & {
.uw-exp-col__controls {
border: var(--size-xs) solid var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: var(--size-2);
.no-js & {
display: none;
}
.no-js.js &,
.js & {
display: grid;
}
}
}
&__button {
font-size: var(--font-size-1);
font-weight: 400;
margin: 0;
max-width: inherit;
&--controls {
text-align: center;
.uw-exp-col__button {
font-size: var(--font-size-1);
font-weight: 400;
margin: 0;
max-width: inherit;
.uw-exp-col--controls {
text-align: center;
}
}
}
.uw-details {
border: inherit;
font-family: inherit !important;
margin-bottom: var(--size-2);
margin-top: inherit;
.details__summary {
background-image: inherit;
border: var(--size-xs) solid var(--gray-2);
padding: 0;
position: relative;
text-shadow: inherit;
transition: background-color 0.2s ease-in-out;
&::after {
content: '';
display: block;
height: var(--size-2);
position: absolute;
right: var(--size-2);
top: calc(50% - 0.5rem);
width: var(--size-2);
.uw-details {
border: inherit;
font-family: inherit !important;
margin-bottom: var(--size-2);
margin-top: inherit;
.details__summary {
background-image: inherit;
border: var(--size-xs) solid var(--gray-2);
padding: 0;
position: relative;
text-shadow: inherit;
transition: background-color 0.2s ease-in-out;
&::after {
content: '';
display: block;
height: var(--size-2);
position: absolute;
right: var(--size-2);
top: calc(50% - 0.5rem);
width: var(--size-2);
}
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-condensedbook);
// All headers currently set to same size
font-size: var(--font-size-1);
font-weight: var(--font-weight-400);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
margin: 0;
padding: var(--size-2) 2.75rem var(--size-2) var(--size-2);
text-transform: uppercase;
}
}
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-condensedbook);
// All headers currently set to same size
font-size: var(--font-size-1);
font-weight: var(--font-weight-400);
letter-spacing: var(--font-letterspacing-2);
line-height: var(--font-lineheight-4);
margin: 0;
padding: var(--size-2) 2.75rem var(--size-2) var(--size-2);
text-transform: uppercase;
}
.details__content {
background-color: var(--gray-1);
padding: var(--size-2);
.layout {
padding: 0;
}
.block {
margin-bottom: var(--size-2);
}
}
}
.details__content {
background-color: var(--gray-1);
padding: var(--size-2);
.layout {
padding: 0;
.uw-exp-col__group-info {
.form-type-entity-autocomplete {
display: inline-block;
width: 90%;
}
}
.block {
}
&.contact{
.uw-exp-col__controls{
border: var(--size-xs) solid var(--gray-2);
display: grid;
grid-template-columns: 50% 50%;
margin-bottom: var(--size-2);
gap: var(--size-05);
.no-js & {
display: none;
}
.no-js.js &,
.js & {
display: grid;
}
}
}
}
.uw-exp-col__group-info {
.form-type-entity-autocomplete {
display: inline-block;
width: 90%;
}
}
/* stylelint-disable selector-max-id, declaration-no-important */
#drupal-modal {
......
src/patterns/04-components/view/view-lists/_view-lists.scss 0 → 100644
+ 14
− 0
View file @ 22b738ee
.uw-profiles {
display: block;
.card__image {
display: inline-block;
padding-right: var(--size-2);
vertical-align: top;
}
.card__title a {
color: var(--school-4);
font-weight: 400;
}
}
src/patterns/04-components/view/view-lists/view-lists.twig 0 → 100644
+ 24
− 0
View file @ 22b738ee
<div class="{{ type }}{% if type == 'contact' %} uw-exp-col{% endif %}"{% if type == 'contact' %} id="{{ random() }}"{% endif %}>
{% if type == 'contact' and items|length > 1 %}
<div class="uw-exp-col__controls">
<button class="uw-exp-col__button uw-exp-col__button--controls" data-type="expand-all">Expand All</button>
<button class="uw-exp-col__button uw-exp-col__button--controls" data-type="collapse-all">Collapse All</button>
</div>
{% endif %}
{% embed '@components/content-grid-list/content-grid-list.twig' %}
{% block content %}
{% for item in items %}
{% if type == 'contact' %}
{% include '@components/contact/contact.twig' with {
'contact': item,
} %}
{% else %}
{% include '@components/card/card--teaser/_card--teaser.twig' with {
'teaser': item,
'type': 'teaser',
} %}
{% endif %}
{% endfor %}
{% endblock %}
{% endembed %}
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment