diff --git a/.circleci/config.yml b/.circleci/config.yml index 49fbb4e1..62692fde 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -4,10 +4,13 @@ version: 2 ## Defines images and working directory. defaults: &defaults docker: - - image: pookmish/drupal8ci:pcov + - image: pookmish/drupal8ci:latest - image: selenium/standalone-chrome:latest - - image: mariadb:10.3 + - image: circleci/mysql:5.7 environment: + MYSQL_DATABASE: drupal + MYSQL_USER: drupal + MYSQL_PASSWORD: drupal MYSQL_ALLOW_EMPTY_PASSWORD: 1 working_directory: /var/www/html diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index c170efa0..b48a7ff8 100755 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,29 +1,66 @@ -# READY FOR REVIEW/NOT READY +# NOT READY FOR REVIEW - (Edit the above to reflect status) # Summary - TL;DR - what's this PR for? -# Needed By (Date) -- When does this need to be merged by? +# Review By (Date) +- When does this need to be reviewed by? + +# Criticality +- How critical is this PR on a 1-10 scale? Also see [Severity Assessment](https://stanfordits.atlassian.net/browse/D8CORE-1705). +- E.g., it affects one site, or every site and product? # Urgency -- How critical is this PR? +- How urgent is this? (Normal, High) + +# Review Tasks + +## Setup tasks and/or behavior to test + +1. Check out this branch +2. Rebuild Cache and import config `drush cr ; drush ci` +3. Navigate to... +4. Verify... + +### Site Configuration Sync + +- Is there a config:export in this PR that changes the config sync directory? + +## Front End Validation +- [ ] Design is approved by @ user? +- [ ] HTML validation: Is the markup using the appropriate semantic tags and [passes validation](https://validator.w3.org/nu/)? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)? +- [ ] Cross-browser testing: Has been performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)? +- [ ] Automated accessibility: Scans performed? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)? +- [ ] Manual accessibility: Manually tested? Or, [QA request ticket created](https://github.com/SU-SWS/template_warehouse/blob/master/jira_templates/QA_request_template.txt)? + +## Backend / Functional Validation +### Code +- [ ] Are the naming conventions following our standards? +- [ ] Does the code have sufficient inline comments? +- [ ] Is there anything in this code that would be hidden or hard to discover through the UI? +- [ ] Are there any [code smells](https://blog.codinghorror.com/code-smells/)? +- [ ] Are tests provided? eg (unit, behat, or codeception) -# Steps to Test +### Code security +- [ ] Are all [forms properly sanitized](https://www.drupal.org/docs/8/security/drupal-8-sanitizing-output)? +- [ ] Any obvious [security flaws or new areas for attack](https://www.drupal.org/docs/8/security)? -1. Do this -1. Then this -2. Then this +## General +- [ ] Is there anything included in this PR that is not related to the problem it is trying to solve? +- [ ] Is the approach to the problem appropriate? # Affected Projects or Products - Does this PR impact any particular projects, products, or modules? # Associated Issues and/or People -- JIRA ticket +- JIRA ticket(s) - Other PRs - Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.) - Anyone who should be notified? (`@mention` them here) -# See Also -- [PR Checklist](https://gist.github.com/sherakama/0ba17601381e3adbe0cad566ad4d80a5) +# Resources +- [AMP Tool](https://stanford.levelaccess.net/index.php) +- [Accessibility Manual Test Script](https://docs.google.com/document/d/1ZXJ9RIUNXsS674ow9j3qJ2g1OAkCjmqMXl0Gs8XHEPQ/edit?usp=sharing) +- [HTML Validator](https://validator.w3.org/) +- [Browserstack](https://live.browserstack.com/dashboard) and link to [Browserstack Credentials](https://asconfluence.stanford.edu/confluence/display/SWS/External+Account+Credentials) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fd61fb1..73771cd2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Stanford News +8.x-2.13 +-------------------------------------------------------------------------------- +_Release Date: 2021-06-11_ + +- D8CORE-4090 D8CORE-2888 D8CORE-4126: Accessibility fixes to the news (#124) (732b7eb) +- D8CORE-3162: change the title of the news article in lists and cards (#123) (9b4f1cd) + 8.x-2.12 -------------------------------------------------------------------------------- _Release Date: 2021-05-07_ diff --git a/composer.json b/composer.json index e6ce25bf..a552e579 100644 --- a/composer.json +++ b/composer.json @@ -99,7 +99,7 @@ "drupal/views_infinite_scroll": "^1.6", "drupal/views_taxonomy_term_name_depth": "^7.0", "su-sws/drupal-patches": "^8.0", - "su-sws/jumpstart_ui": "^8.1.0", - "su-sws/stanford_text_editor": "^8.1.0" + "su-sws/jumpstart_ui": "^8.1", + "su-sws/stanford_text_editor": "^8.1" } } diff --git a/dist/css/news-list-item.css b/dist/css/news-list-item.css index 499fb6dc..cb27ea47 100644 --- a/dist/css/news-list-item.css +++ b/dist/css/news-list-item.css @@ -1 +1 @@ -.field--name-su-news-view-field .stanford-news--cards-any,.field--name-su-news-view-field .stanford-news--list-any{margin-right:auto;margin-left:auto;max-width:1100px}@media only screen and (min-width:0){.section-stanford-news-views-header h1{margin-top:8rem;margin-bottom:6.4rem}}@media only screen and (min-width:768px){.section-stanford-news-views-header h1{margin-top:9rem;margin-bottom:7.2rem}}@media only screen and (min-width:1500px){.section-stanford-news-views-header h1{margin-top:9.5rem;margin-bottom:7.6rem}}@media only screen and (min-width:0){.section-news-views-views .main-region{padding-left:3.2rem}}@media only screen and (min-width:768px){.section-news-views-views .main-region{padding-left:3.6rem}}@media only screen and (min-width:1500px){.section-news-views-views .main-region{padding-left:3.8rem}}@media only screen and (min-width:0){.menu--news-topics{margin-bottom:5.12rem}}@media only screen and (min-width:768px){.menu--news-topics{margin-bottom:5.76rem}}@media only screen and (min-width:1500px){.menu--news-topics{margin-bottom:6.08rem}}.su-news-list__item-date+.su-news-list__item .media{margin-top:-29px}@media (min-width:1200px){.views-infinite-scroll-content-wrapper div:first-child .su-news-list{padding-top:0}}.su-news-list{margin:0;padding:0;list-style:none;overflow:auto;border-bottom:1px solid #d2d3d4}@media only screen and (min-width:0){.su-news-list{padding-top:5.12rem;padding-bottom:5.12rem}}@media only screen and (min-width:768px){.su-news-list{padding-top:5.76rem;padding-bottom:5.76rem}}@media only screen and (min-width:1500px){.su-news-list{padding-top:6.08rem;padding-bottom:6.08rem}}.su-news-list .su-news-list__item__date{font-size:1.8rem;line-height:1.3}@media (max-width:767px){.su-news-list .su-news-list__item__date{font-size:1.6rem}}.su-news-list .media{float:right}@media only screen and (min-width:0){.su-news-list .media{margin-left:4rem}}@media only screen and (min-width:768px){.su-news-list .media{margin-left:4.5rem}}@media only screen and (min-width:1500px){.su-news-list .media{margin-left:4.75rem}}@media (max-width:1199px){.su-news-list .media{display:none}}.su-news-list a{color:#006cb8;text-decoration:underline;font-weight:600;color:#b1040e;text-decoration:none}.su-news-list a:active,.su-news-list a:focus,.su-news-list a:hover{color:#2e2d29}.su-news-list h2{display:inline}@media only screen and (min-width:0){.su-news-list h2{margin-bottom:2.31rem}}@media only screen and (min-width:768px){.su-news-list h2{margin-bottom:2.6rem}}@media only screen and (min-width:1500px){.su-news-list h2{margin-bottom:2.74rem}}@media only screen and (min-width:768px){.su-news-list .su-news-list__dek{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.su-news-list .su-news-list__dek{margin-bottom:3.2rem}}@media only screen and (min-width:768px){.su-news-list .su-news-list__dek{margin-bottom:3.6rem}}@media only screen and (min-width:1500px){.su-news-list .su-news-list__dek{margin-bottom:3.8rem}}@media only screen and (min-width:0){.views-infinite-scroll-content-wrapper{margin-bottom:6.4rem}}@media only screen and (min-width:768px){.views-infinite-scroll-content-wrapper{margin-bottom:7.2rem}}@media only screen and (min-width:1500px){.views-infinite-scroll-content-wrapper{margin-bottom:7.6rem}}@media only screen and (min-width:0){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:11.2rem}}@media only screen and (min-width:768px){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:12.6rem}}@media only screen and (min-width:1500px){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:13.3rem}}.js-pager__items{text-align:center}.js-pager__items .pager__item{display:inline-block}.js-pager__items .pager__item .button{background-color:#b1040e;color:#fff;padding:1.3rem 2.8rem 1.5rem;font-size:2.5rem}.js-pager__items .pager__item .button:focus,.js-pager__items .pager__item .button:hover{background-color:#2e2d29;color:#fff}.js-pager__items .pager__item .button:focus{-webkit-box-shadow:0 0 3px #53565a,0 0 7px #53565a;box-shadow:0 0 3px #53565a,0 0 7px #53565a}@media only screen and (min-width:768px){.js-pager__items .pager__item .button{padding:1.5rem 3rem 1.8rem;font-size:2.8rem}}@media only screen and (min-width:1500px){.js-pager__items .pager__item .button{font-size:3rem}}.stanford-news--list .js-pager__items .pager__item .button{font-size:2.8rem}.su-news-external .su-news-list__item a{text-decoration:none}@supports ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)){.su-news-external .su-news-list__item a:after{margin-right:.3em;margin-left:.4em;height:10px;width:10px;display:inline-block;content:"";-webkit-mask:url(../assets/svg/arrow-up-right.svg) no-repeat 0 0;mask:url(../assets/svg/arrow-up-right.svg) no-repeat 0 0;-webkit-mask-size:contain;mask-size:contain;background-color:#006cb8;-webkit-transition:-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out;transition:transform .2s ease-in-out,mask-image .2s ease-in-out;transition:transform .2s ease-in-out,mask-image .2s ease-in-out,-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out}.su-news-external .su-news-list__item a:focus:after,.su-news-external .su-news-list__item a:hover:after{background-color:#2e2d29;-webkit-transform:translate3d(.15em,-.15em,0);transform:translate3d(.15em,-.15em,0)}}.su-news-external .su-news-list__item a:after{background-color:#b1040e;height:1.8rem;width:1.8rem}.su-news-list__footer a{padding:1rem 2rem 1.15rem;background-color:#fff;-webkit-box-shadow:inset 0 0 0 2px #b1040e;box-shadow:inset 0 0 0 2px #b1040e;color:#b1040e;text-align:right}.su-news-list__footer a:focus,.su-news-list__footer a:hover{background-color:#fff;color:#2e2d29}.su-news-list__footer a:hover{-webkit-box-shadow:inset 0 0 0 2px #2e2d29;box-shadow:inset 0 0 0 2px #2e2d29}.su-news-list__footer a:focus{-webkit-box-shadow:inset 0 0 0 2px #2e2d29,0 0 3px #53565a,0 0 7px #53565a;box-shadow:inset 0 0 0 2px #2e2d29,0 0 3px #53565a,0 0 7px #53565a}@media only screen and (min-width:0){.stanford-news-terms--results-for{margin-bottom:4rem}}@media only screen and (min-width:768px){.stanford-news-terms--results-for{margin-bottom:4.5rem}}@media only screen and (min-width:1500px){.stanford-news-terms--results-for{margin-bottom:4.75rem}}.stanford-news-terms--results-for a,.stanford-news-terms--results-for span{font-size:1.8rem;line-height:1.3}@media (max-width:767px){.stanford-news-terms--results-for a,.stanford-news-terms--results-for span{font-size:1.6rem}}.mailchimp-magazine-block.flex-8-of-12{margin:0 auto}.mailchimp-magazine-block #mc_embed_signup_scroll{border:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.25);background-color:#f4f4f4;text-align:center}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:11.4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll p{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.9rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.9rem}}.mailchimp-magazine-block #mc_embed_signup_scroll h2{font-size:1.5625em;letter-spacing:-.012em;margin:0}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4.75rem}}.mailchimp-magazine-block #mc_embed_signup_scroll .mc_signup_submission_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mailchimp-magazine-block #mc_embed_signup_scroll .mc-field-group{float:none}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll .mc-field-group input{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.9rem}}.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:0}.js-pager__items .pager__item .button,.su-news-list__footer a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer;display:inline-block;border:0;font-size:2rem;font-weight:400;line-height:1;text-align:center;text-decoration:none;width:auto;-webkit-transition:background-color .25s ease-in-out,color .25s ease-in-out;transition:background-color .25s ease-in-out,color .25s ease-in-out}.js-pager__items .pager__item .button a,.su-news-list__footer a a{font-weight:400;text-decoration:none}.js-pager__items .pager__item .button:active,.js-pager__items .pager__item .button:focus,.js-pager__items .pager__item .button:hover,.su-news-list__footer a:active,.su-news-list__footer a:focus,.su-news-list__footer a:hover{text-decoration:underline}@media (max-width:1199px){.left-region.flex-lg-3-of-12{-webkit-box-flex:1;-ms-flex:auto;flex:auto;max-width:100%}}.news-topics{border:1px solid #d2d3d4}@media only screen and (min-width:0){.news-topics{padding:4rem}}@media only screen and (min-width:768px){.news-topics{padding:4.5rem}}@media only screen and (min-width:1500px){.news-topics{padding:4.75rem}}.news-topics .news-topics__collapsable-menu{font-size:1em;padding:0;background-color:transparent;color:#006cb8;cursor:pointer;display:inline-block;font-weight:600;text-align:left;text-decoration:none;width:100%}@media only screen and (min-width:1200px) and (min-width:0){.news-topics .news-topics__collapsable-menu{margin-bottom:3.2rem}}@media only screen and (min-width:1200px) and (min-width:768px){.news-topics .news-topics__collapsable-menu{margin-bottom:3.6rem}}@media only screen and (min-width:1200px) and (min-width:1500px){.news-topics .news-topics__collapsable-menu{margin-bottom:3.8rem}}@media only screen and (min-width:0){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.2rem}}@media only screen and (min-width:768px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.6rem}}@media only screen and (min-width:1500px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.8rem}}@media only screen and (min-width:1200px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:0}.news-topics .news-topics__collapsable-menu.show+.menu>li.menu-item:last-of-type{padding-bottom:0}}.news-topics .news-topics__collapsable-menu:focus,.news-topics .news-topics__collapsable-menu:hover{text-decoration:underline}.news-topics .news-topics__collapsable-menu .su-link--jump{float:right}@media (max-width:1199px){.news-topics .news-topics__collapsable-menu:before{font-size:1.8rem;line-height:1.3;padding-right:15px;color:#006cb8;content:"\f1de";font-family:Font Awesome\ 5 Free;font-weight:600}}@media (max-width:1199px) and (max-width:767px){.news-topics .news-topics__collapsable-menu:before{font-size:1.6rem}}.news-topics .menu{margin:0;padding:0}.news-topics .menu .menu-item{font-size:1.8rem;line-height:1.3}@media only screen and (min-width:0){.news-topics .menu .menu-item{padding-bottom:3.2rem}}@media only screen and (min-width:768px){.news-topics .menu .menu-item{padding-bottom:3.6rem}}@media only screen and (min-width:1500px){.news-topics .menu .menu-item{padding-bottom:3.8rem}}@media only screen and (min-width:0){.news-topics .menu .menu-item{padding-left:1.6rem}}@media only screen and (min-width:768px){.news-topics .menu .menu-item{padding-left:1.8rem}}@media only screen and (min-width:1500px){.news-topics .menu .menu-item{padding-left:1.9rem}}@media (max-width:767px){.news-topics .menu .menu-item{font-size:1.6rem}}.news-topics .menu .menu-item a{color:#2e2d29;text-decoration:none}.news-topics .menu .menu-item a:focus,.news-topics .menu .menu-item a:hover{text-decoration:underline}.news-topics .menu>li.menu-item:last-of-type{padding-bottom:0}.news-topics .menu .menu-item--active-trail:before{font-size:1.8rem;line-height:1.3;color:#006cb8;content:"\f00c";font-family:Font Awesome\ 5 Free;font-weight:600;left:35px;position:absolute}@media (max-width:767px){.news-topics .menu .menu-item--active-trail:before{font-size:1.6rem}}.news-topics .menu .menu-item--active-trail .is-active{color:#006cb8}@media (max-width:1199px){.news-topics .menu{display:none}.news-topics .news-topics__collapsable-menu.show+.menu{display:block}}@media only screen and (min-width:1200px){.news-topics .menu{display:block}.news-topics .news-topics__collapsable-menu.show+.menu{display:none}} \ No newline at end of file +.field--name-su-news-view-field .stanford-news--cards-any,.field--name-su-news-view-field .stanford-news--list-any{margin-right:auto;margin-left:auto;max-width:1100px}@media only screen and (min-width:0){.section-stanford-news-views-header h1{margin-top:8rem;margin-bottom:6.4rem}}@media only screen and (min-width:768px){.section-stanford-news-views-header h1{margin-top:9rem;margin-bottom:7.2rem}}@media only screen and (min-width:1500px){.section-stanford-news-views-header h1{margin-top:9.5rem;margin-bottom:7.6rem}}@media only screen and (min-width:0){.section-news-views-views .main-region{padding-left:3.2rem}}@media only screen and (min-width:768px){.section-news-views-views .main-region{padding-left:3.6rem}}@media only screen and (min-width:1500px){.section-news-views-views .main-region{padding-left:3.8rem}}@media only screen and (min-width:0){.menu--news-topics{margin-bottom:5.12rem}}@media only screen and (min-width:768px){.menu--news-topics{margin-bottom:5.76rem}}@media only screen and (min-width:1500px){.menu--news-topics{margin-bottom:6.08rem}}.su-news-list__item-date+.su-news-list__item .media{margin-top:-29px}@media (min-width:1200px){.views-infinite-scroll-content-wrapper div:first-child .su-news-list{padding-top:0}}.su-news-list{list-style:none;overflow:auto;padding-left:0}.su-news-list li:first-of-type>article{padding-top:0}.su-news-list .su-news-list__item-date{grid-area:date}.su-news-list .image{grid-area:article-image}.su-news-list .su-news-list__headline-dek{grid-area:headline}@media (max-width:1199px){.su-news-list .su-news-list__header{display:-ms-grid;display:grid;-ms-grid-columns:100%;grid-template-columns:100%;grid-template-areas:"date" "headline" "dek"}.su-news-list .su-news-list__item-date{-ms-grid-row:1;-ms-grid-column:1}.su-news-list .su-news-list__headline-dek{-ms-grid-row:2;-ms-grid-column:1}}@media (min-width:1200px){.su-news-list .su-news-list__header{display:-ms-grid;display:grid;-ms-grid-columns:65% 35%;grid-template-columns:65% 35%;grid-template-areas:"date date" "headline article-image" "headline article-image"}.su-news-list .su-news-list__item-date{-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2}.su-news-list .image{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:2}.su-news-list .su-news-list__headline-dek{-ms-grid-row:2;-ms-grid-row-span:2;-ms-grid-column:1}}.su-news-list .su-news-list-image__empty .su-news-list__header{display:-ms-grid;display:grid;-ms-grid-columns:100%;grid-template-columns:100%;grid-template-areas:"date" "headline" "dek"}.su-news-list .su-news-article{margin:0;padding:0;border-bottom:1px solid #d2d3d4}@media only screen and (min-width:0){.su-news-list .su-news-article{padding-top:5.12rem;padding-bottom:5.12rem}}@media only screen and (min-width:768px){.su-news-list .su-news-article{padding-top:5.76rem;padding-bottom:5.76rem}}@media only screen and (min-width:1500px){.su-news-list .su-news-article{padding-top:6.08rem;padding-bottom:6.08rem}}.su-news-list .su-news-list__item-date{font-size:1.8rem;line-height:1.3;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}@media (max-width:767px){.su-news-list .su-news-list__item-date{font-size:1.6rem}}@media only screen and (min-width:0){.su-news-list .image .media{margin-left:4rem}}@media only screen and (min-width:768px){.su-news-list .image .media{margin-left:4.5rem}}@media only screen and (min-width:1500px){.su-news-list .image .media{margin-left:4.75rem}}@media (max-width:1199px){.su-news-list .image .media{display:none}}.su-news-list a{color:#006cb8;text-decoration:underline;font-weight:600;color:#b1040e;text-decoration:none}.su-news-list a:active,.su-news-list a:focus,.su-news-list a:hover{color:#2e2d29}.su-news-list a:active,.su-news-list a:focus,.su-news-list a:hover,.su-news-list a:visited{text-decoration:underline}.su-news-list h2{font-size:1.5625em;display:inline}@media only screen and (min-width:0){.su-news-list h2{margin-bottom:2.31rem}}@media only screen and (min-width:768px){.su-news-list h2{margin-bottom:2.6rem}}@media only screen and (min-width:1500px){.su-news-list h2{margin-bottom:2.74rem}}.su-news-list h2:focus{outline:none}.su-news-list .su-link--external:after{background-color:#b1040e;height:1.8rem;width:1.8rem}@media only screen and (min-width:768px){.su-news-list .su-news-list__dek{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.su-news-list .su-news-list__dek{margin-bottom:2.31rem}}@media only screen and (min-width:768px){.su-news-list .su-news-list__dek{margin-bottom:2.6rem}}@media only screen and (min-width:1500px){.su-news-list .su-news-list__dek{margin-bottom:2.74rem}}@media only screen and (min-width:0){.su-news-list .su-news-list__dek{margin-top:1.07rem}}@media only screen and (min-width:768px){.su-news-list .su-news-list__dek{margin-top:1.2rem}}@media only screen and (min-width:1500px){.su-news-list .su-news-list__dek{margin-top:1.27rem}}.su-news-list ul{list-style:none;overflow:auto;padding-bottom:0;padding-left:0}.su-news-list ul li{padding-right:1.1rem;display:inline-block}@media only screen and (min-width:768px){.su-news-list ul li{padding-right:1.2rem}}@media only screen and (min-width:1500px){.su-news-list ul li{padding-right:1.3rem}}.su-news-list ul li:after{content:", "}.su-news-list ul li:last-of-type:after{content:""}.container-2-items .paragraph--type--stanford-lists .su-news-list h2,.container-3-items .paragraph--type--stanford-lists .su-news-list h2{max-width:unset}@media only screen and (min-width:0){.views-infinite-scroll-content-wrapper{margin-bottom:6.4rem}}@media only screen and (min-width:768px){.views-infinite-scroll-content-wrapper{margin-bottom:7.2rem}}@media only screen and (min-width:1500px){.views-infinite-scroll-content-wrapper{margin-bottom:7.6rem}}@media only screen and (min-width:0){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:11.2rem}}@media only screen and (min-width:768px){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:12.6rem}}@media only screen and (min-width:1500px){.views-infinite-scroll-content-wrapper+.js-pager__items{margin-bottom:13.3rem}}.js-pager__items{text-align:center}.js-pager__items .pager__item{display:inline-block}.js-pager__items .pager__item .button{background-color:#b1040e;color:#fff;padding:1.3rem 2.8rem 1.5rem;font-size:2.5rem}.js-pager__items .pager__item .button:focus,.js-pager__items .pager__item .button:hover{background-color:#2e2d29;color:#fff}.js-pager__items .pager__item .button:focus{-webkit-box-shadow:0 0 3px #53565a,0 0 7px #53565a;box-shadow:0 0 3px #53565a,0 0 7px #53565a}@media only screen and (min-width:768px){.js-pager__items .pager__item .button{padding:1.5rem 3rem 1.8rem;font-size:2.8rem}}@media only screen and (min-width:1500px){.js-pager__items .pager__item .button{font-size:3rem}}.stanford-news--list .js-pager__items .pager__item .button{font-size:2.8rem}.su-news-external .su-news-list__item a{text-decoration:none}@supports ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)){.su-news-external .su-news-list__item a:after{margin-right:.3em;margin-left:.4em;height:10px;width:10px;display:inline-block;content:"";-webkit-mask:url(../assets/svg/arrow-up-right.svg) no-repeat 0 0;mask:url(../assets/svg/arrow-up-right.svg) no-repeat 0 0;-webkit-mask-size:contain;mask-size:contain;background-color:#006cb8;-webkit-transition:-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out;transition:-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out;transition:transform .2s ease-in-out,mask-image .2s ease-in-out;transition:transform .2s ease-in-out,mask-image .2s ease-in-out,-webkit-transform .2s ease-in-out,-webkit-mask-image .2s ease-in-out}.su-news-external .su-news-list__item a:focus:after,.su-news-external .su-news-list__item a:hover:after{background-color:#2e2d29;-webkit-transform:translate3d(.15em,-.15em,0);transform:translate3d(.15em,-.15em,0)}}.su-news-external .su-news-list__item a:after{background-color:#b1040e;height:1.8rem;width:1.8rem}.su-news-edit-article a{padding:1rem 2rem 1.15rem;background-color:#fff;-webkit-box-shadow:inset 0 0 0 2px #b1040e;box-shadow:inset 0 0 0 2px #b1040e;color:#b1040e;text-align:right}.su-news-edit-article a:focus,.su-news-edit-article a:hover{background-color:#fff;color:#2e2d29}.su-news-edit-article a:hover{-webkit-box-shadow:inset 0 0 0 2px #2e2d29;box-shadow:inset 0 0 0 2px #2e2d29}.su-news-edit-article a:focus{-webkit-box-shadow:inset 0 0 0 2px #2e2d29,0 0 3px #53565a,0 0 7px #53565a;box-shadow:inset 0 0 0 2px #2e2d29,0 0 3px #53565a,0 0 7px #53565a}@media only screen and (min-width:0){.stanford-news-terms--results-for{margin-bottom:4rem}}@media only screen and (min-width:768px){.stanford-news-terms--results-for{margin-bottom:4.5rem}}@media only screen and (min-width:1500px){.stanford-news-terms--results-for{margin-bottom:4.75rem}}.stanford-news-terms--results-for a,.stanford-news-terms--results-for span{font-size:1.8rem;line-height:1.3}@media (max-width:767px){.stanford-news-terms--results-for a,.stanford-news-terms--results-for span{font-size:1.6rem}}.mailchimp-magazine-block.flex-8-of-12{margin:0 auto}.mailchimp-magazine-block #mc_embed_signup_scroll{border:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.25);background-color:#f4f4f4;text-align:center}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-bottom:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-left:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{padding-right:4.75rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:9.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:10.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll{margin-bottom:11.4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll p{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll p{margin-top:1.9rem}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:1.9rem}}.mailchimp-magazine-block #mc_embed_signup_scroll h2{font-size:1.5625em;letter-spacing:-.012em;margin:0}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4.5rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll h2{padding-top:4.75rem}}.mailchimp-magazine-block #mc_embed_signup_scroll .mc_signup_submission_wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mailchimp-magazine-block #mc_embed_signup_scroll .mc-field-group{float:none}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll .mc-field-group input{font-size:2.1rem;line-height:1.7}}@media only screen and (min-width:0){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.6rem}}@media only screen and (min-width:768px){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.8rem}}@media only screen and (min-width:1500px){.mailchimp-magazine-block #mc_embed_signup_scroll .button{margin-left:1.9rem}}.mailchimp-magazine-block #mc_embed_signup_scroll form{margin-bottom:0}.js-pager__items .pager__item .button,.su-news-edit-article a{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;cursor:pointer;display:inline-block;border:0;font-size:2rem;font-weight:400;line-height:1;text-align:center;text-decoration:none;width:auto;-webkit-transition:background-color .25s ease-in-out,color .25s ease-in-out;transition:background-color .25s ease-in-out,color .25s ease-in-out}.js-pager__items .pager__item .button a,.su-news-edit-article a a{font-weight:400;text-decoration:none}.js-pager__items .pager__item .button:active,.js-pager__items .pager__item .button:focus,.js-pager__items .pager__item .button:hover,.su-news-edit-article a:active,.su-news-edit-article a:focus,.su-news-edit-article a:hover{text-decoration:underline}@media (max-width:1199px){.left-region.flex-lg-3-of-12{-webkit-box-flex:1;-ms-flex:auto;flex:auto;max-width:100%}}.news-topics{border:1px solid #d2d3d4}@media only screen and (min-width:0){.news-topics{padding:4rem}}@media only screen and (min-width:768px){.news-topics{padding:4.5rem}}@media only screen and (min-width:1500px){.news-topics{padding:4.75rem}}.news-topics .news-topics__collapsable-menu{font-size:1em;padding:0;background-color:transparent;color:#006cb8;cursor:pointer;display:inline-block;font-weight:600;text-align:left;text-decoration:none;width:100%}@media only screen and (min-width:1200px) and (min-width:0){.news-topics .news-topics__collapsable-menu{margin-bottom:3.2rem}}@media only screen and (min-width:1200px) and (min-width:768px){.news-topics .news-topics__collapsable-menu{margin-bottom:3.6rem}}@media only screen and (min-width:1200px) and (min-width:1500px){.news-topics .news-topics__collapsable-menu{margin-bottom:3.8rem}}@media only screen and (min-width:0){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.2rem}}@media only screen and (min-width:768px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.6rem}}@media only screen and (min-width:1500px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:3.8rem}}@media only screen and (min-width:1200px){.news-topics .news-topics__collapsable-menu.show{margin-bottom:0}.news-topics .news-topics__collapsable-menu.show+.menu>li.menu-item:last-of-type{padding-bottom:0}}.news-topics .news-topics__collapsable-menu:focus,.news-topics .news-topics__collapsable-menu:hover{text-decoration:underline}.news-topics .news-topics__collapsable-menu .su-link--jump{float:right}@media (max-width:1199px){.news-topics .news-topics__collapsable-menu:before{font-size:1.8rem;line-height:1.3;padding-right:15px;color:#006cb8;content:"\f1de";font-family:Font Awesome\ 5 Free;font-weight:600}}@media (max-width:1199px) and (max-width:767px){.news-topics .news-topics__collapsable-menu:before{font-size:1.6rem}}.news-topics .menu{margin:0;padding:0}.news-topics .menu .menu-item{font-size:1.8rem;line-height:1.3}@media only screen and (min-width:0){.news-topics .menu .menu-item{padding-bottom:3.2rem}}@media only screen and (min-width:768px){.news-topics .menu .menu-item{padding-bottom:3.6rem}}@media only screen and (min-width:1500px){.news-topics .menu .menu-item{padding-bottom:3.8rem}}@media only screen and (min-width:0){.news-topics .menu .menu-item{padding-left:1.6rem}}@media only screen and (min-width:768px){.news-topics .menu .menu-item{padding-left:1.8rem}}@media only screen and (min-width:1500px){.news-topics .menu .menu-item{padding-left:1.9rem}}@media (max-width:767px){.news-topics .menu .menu-item{font-size:1.6rem}}.news-topics .menu .menu-item a{color:#2e2d29;text-decoration:none}.news-topics .menu .menu-item a:focus,.news-topics .menu .menu-item a:hover{text-decoration:underline}.news-topics .menu>li.menu-item:last-of-type{padding-bottom:0}.news-topics .menu .menu-item--active-trail:before{font-size:1.8rem;line-height:1.3;color:#006cb8;content:"\f00c";font-family:Font Awesome\ 5 Free;font-weight:600;left:35px;position:absolute}@media (max-width:767px){.news-topics .menu .menu-item--active-trail:before{font-size:1.6rem}}.news-topics .menu .menu-item--active-trail .is-active{color:#006cb8}@media (max-width:1199px){.news-topics .menu{display:none}.news-topics .news-topics__collapsable-menu.show+.menu{display:block}}@media only screen and (min-width:1200px){.news-topics .menu{display:block}.news-topics .news-topics__collapsable-menu.show+.menu{display:none}} \ No newline at end of file diff --git a/lib/scss/components/news-list-item/_list-item.scss b/lib/scss/components/news-list-item/_list-item.scss index 9ffe9900..ac90b8e5 100644 --- a/lib/scss/components/news-list-item/_list-item.scss +++ b/lib/scss/components/news-list-item/_list-item.scss @@ -44,24 +44,77 @@ } .su-news-list { - @include margin(0); - @include padding(0); - @include modular-spacing('padding', 4 null); - list-style: none; overflow: auto; - border-bottom: 1px solid $su-color-cool-grey-25; + padding-left: 0; - .su-news-list__item__date { - @include small-paragraph; + li { + &:first-of-type { + > article { + padding-top: 0; + } + } } - .media { - @include modular-spacing('margin-left', 3); - float: right; + //List grid set up + .su-news-list__item-date { + grid-area: date; + } + + .image { + grid-area: article-image; + } + + .su-news-list__headline-dek { + grid-area: headline; + } + + .su-news-list__header { @include grid-media-max('lg') { - display: none; + display: grid; + grid-template-columns: 100%; + grid-template-areas: "date" "headline" "dek"; + } + + + @include grid-media-min('xl') { + display: grid; + grid-template-columns: 65% 35%; + grid-template-areas: "date date" "headline article-image" "headline article-image"; + } + } + + .su-news-list-image__empty { + .su-news-list__header { + display: grid; + grid-template-columns: 100%; + grid-template-areas: "date" "headline" "dek"; + } + } + + .su-news-article { + @include margin(0); + @include padding(0); + @include modular-spacing('padding', 4 null); + + border-bottom: 1px solid $su-color-cool-grey-25; + } + + + .su-news-list__item-date { + @include small-paragraph; + + order: -1; + } + + .image { + .media { + @include modular-spacing('margin-left', 3); + + @include grid-media-max('lg') { + display: none; + } } } @@ -71,17 +124,74 @@ color: $su-color-bright-red; text-decoration: none; + + &:focus, + &:visited, + &:active, + &:hover { + text-decoration: underline; + } } h2 { @include modular-spacing('margin-bottom', 1); + @include modular-typography(2); display: inline; + + &:focus { + outline: none; + } + } + + .su-link--external { + &::after { + background-color: $su-color-bright-red; + height: 1.8rem; + width: 1.8rem; + } } .su-news-list__dek { @include big-paragraph; - @include modular-spacing('margin-bottom', 2); + @include modular-spacing('margin-bottom', 1); + @include modular-spacing('margin-top', -1); + + } + + ul { + list-style: none; + overflow: auto; + padding-bottom: 0; + padding-left: 0; + + li { + @include responsive-spacing('padding-right', -1); + + display: inline-block; + + &::after { + content: ", "; + } + } + + li:last-of-type { + &::after { + content: ""; + } + } + } +} + +// Unset the widths of h2 for paragraphs +.container-2-items, +.container-3-items { + .paragraph--type--stanford-lists { + .su-news-list { + h2 { + max-width: unset; + } + } } } @@ -131,7 +241,7 @@ } } -.su-news-list__footer { +.su-news-edit-article { a { @include button-secondary; text-align: right; diff --git a/stanford_news.info.yml b/stanford_news.info.yml index 0f4db6d4..2723918c 100644 --- a/stanford_news.info.yml +++ b/stanford_news.info.yml @@ -3,7 +3,7 @@ type: module description: 'Stanford news items and views.' core_version_requirement: ^8.8 || ^9 package: Stanford -version: 8.x-2.12 +version: 8.x-2.13 dependencies: - allowed_formats:allowed_formats - auto_entitylabel:auto_entitylabel diff --git a/templates/components/news-list/news-item-list.twig b/templates/components/news-list/news-item-list.twig index 124f94f7..b3dd9b70 100644 --- a/templates/components/news-list/news-item-list.twig +++ b/templates/components/news-list/news-item-list.twig @@ -16,7 +16,7 @@ * - news_url: A url to wrap the image and heading with */ #} -{%- set attributes = attributes.addClass(['su-news-list', modifier_class]) -%} +{%- set attributes = attributes.addClass(['su-news-article', modifier_class]) -%} {# If the news source url is set go there instead of the default. #} {%- if news_source|render|striptags("")|trim is not empty -%} @@ -26,49 +26,76 @@ {% set news_url = news_url|render|striptags("")|trim %} - - {# News List Date #} - {%- block block_news_list_date %} - {% if news_list_publishing_date|render|striptags('') is not empty %} -
  • {{ news_list_publishing_date }}
    • - {% endif -%} - {% endblock -%} +{# Unique id for the title for A11y labels #} +{% set headline = news_list_headline|render_clean %} +{% if headline is not empty %} + {% set headingID = getUniqueId(headline|render) %} +{% endif %} + +{# If the news image is empty, create a class. #} +{%- if news_list_image|render|striptags('')|trim is empty -%} + {%- set attributes = attributes.addClass('su-news-list-image__empty') -%} +{%- endif %} + + {# News List Headline & Media #} {%- block block_news_list_headline %} -
  • + {# Wrapper for the top grid layout #} +
    +
    + {# Link for headline h2 #} + {%- if news_url is not empty -%} + + {%- endif -%} + + {% if news_list_headline|render_clean %} +

    + {{- news_list_headline -}} +

    + {% endif %} + + {%- if news_url is not empty -%} +     + {%- endif -%} + + {# News List Dek #} + {% if news_list_dek|render|striptags('')|trim is not empty %} +

    {{ news_list_dek|render_clean }}

    + {% endif %} +
    + + {# Add the image and link only if they both exist. #} + {% if news_list_image|render|striptags('')|trim is not empty -%} {%- if news_url is not empty -%} - + {%- endif -%} -
    • - {% endblock -%} + {%- endif -%} + + {# News List Date #} + {%- block block_news_list_date %} + {% if news_list_publishing_date|render|striptags('')|trim is not empty %} +

    {{ news_list_publishing_date|render_clean }}

    + {% endif -%} + {% endblock -%} - {# News List Dek #} - {% if news_list_dek|render|striptags('') is not empty %} -
  • {{ news_list_dek }}
    • - {% endif %} + + {% endblock -%} {# News List Topics #} {%- block block_news_list_topics %} - {%- if news_list_topics|render|striptags('') is not empty %} -
  • - - {{- news_list_topics -}} - -
    • + {%- if news_list_topics|render|striptags('')|trim is not empty %} +
    + {{- news_list_topics -}} +
    {% endif -%} {% endblock -%} - {%- if news_list_footer|render|striptags('') is not empty -%} -
  • {{ news_list_footer }}
    • + {%- if news_list_footer|render|striptags('')|trim is not empty -%} + {{ news_list_footer }} {%- endif -%} - +