Merge branch 'main' into claro-theme

CHANGELOG.md

@@ -9,6 +9,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Adds Class Note Page + Class Notes List Page
+  Adds the `Class Note` Node and `Class Note List` node. A Class Note List Page lists your Class Notes and has built in filters to allow visitors to filter by year or sort by class year or date posted.
+
+  Includes:
+  `tiamat-theme` => https://github.com/CuBoulder/tiamat-theme/pull/621
+  `tiamat-custom-entities` => https://github.com/CuBoulder/tiamat-custom-entities/pull/91
+
+
+  Resolves https://github.com/CuBoulder/tiamat-theme/issues/588
+---
+
+- ### Fixes accessibility issues with Article and Article List
+  - Adds alt text to Article List images.
+  - Enhances readability and fixes bugs with article title backgrounds.
+
+  Resolves CuBoulder/tiamat-theme#616
+---
+
+- ### Fixes expandable content `aria-expanded` errors
+  Resolves CuBoulder/tiamat-theme#614
+---
+
 - ### Updates theme-provided 403 page; removes 404 image
   - Updates the theme-provided 403 page. This won't be visible often, as an anonymous user is redirected to the login page instead of being shown this page (CuBoulder/ucb_admin_menus#14).
   - Removes 404 image. CuBoulder/ucb_default_content#6

boulder_base.libraries.yml

@@ -457,3 +457,17 @@ ucb-user-page:
     theme:
       css/ucb-status-page-block.css: {}
       css/ucb-user-page.css: {}
+
+ucb-class-notes:
+  version: 1.x
+  css:
+    theme:
+      css/ucb-class-notes.css: {}
+
+ucb-class-notes-list-page:
+  version: 1.x
+  js:
+    js/ucb-class-notes-list.js: {}
+  css:
+    theme:
+      css/ucb-class-notes-list.css: {}

css/ucb-article.css

@@ -131,7 +131,7 @@ i.fa-regular.fa-calendar {
   margin-bottom: 20px;
 }
 
-.ucb-article-author-name span:not(:last-of-type):after{
+.ucb-article-author-name span:not(:last-of-type):after {
   content: ",";
 }
 
@@ -142,50 +142,58 @@ i.fa-regular.fa-calendar {
   object-fit: fill;
 }
 
-.centeredTitle {
+.backgroundTitleDiv .ucb-article-heading {
   position: absolute;
-  bottom: 0.5em;
+  display: block;
+  bottom: 0;
+  width: 100%;
+  background-color: transparent;
+  padding: 200px 20px 30px;
+}
+
+.backgroundTitleDiv.ucb-overlay-dark .ucb-article-heading {
+  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: -ms-linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+  background-image: linear-gradient(top, transparent, rgba(0, 0, 0, 0.85));
+}
+
+.backgroundTitleDiv.ucb-overlay-light .ucb-article-heading {
+  background-image: -webkit-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -moz-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -o-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: -ms-linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
+  background-image: linear-gradient(top, transparent, rgba(255, 255, 255, 0.85));
 }
 
-.article-header-White{
-  color: white;
+.ucb-article-heading.article-header-White, .ucb-article-heading.article-header-White h1 {
+  color: #FFF;
 }
 
-.article-header-Black{
-  color:black
+.ucb-article-heading.article-header-Black, .ucb-article-heading.article-header-Black h1 {
+  color: #000;
 }
 
-.backgroundTitleDiv > div > div > .imageMediaStyle > img {
+.backgroundTitleDiv .imageMediaStyle img {
   width: 100%;
   max-height: 600px;
   object-fit: cover;
 }
 
-.backgroundTitleDiv > div > div > .imageMediaStyle{
+.backgroundTitleDiv .imageMediaStyle {
   padding-bottom: 0;
   margin-bottom: 20px;
 }
 
-.ucb-overlay-dark > div > div > .imageMediaStyle > img, 
-.ucb-overlay-light > div > div > .imageMediaStyle > img{
-  opacity: 75%;
-}
-
-.ucb-overlay-light > div > div > .imageMediaStyle{
-  background: white;
-}
-.ucb-overlay-dark > div > div > .imageMediaStyle{
-  background: black;
-}
-
-.ucb-article-supplemental-text{
+.ucb-article-supplemental-text {
   margin-bottom: 1em;
   font-style: italic;
   font-size: 0.85em;
 }
 
 /* Removes caption on header img */
-.backgroundTitleDiv > div > div > .media-image-caption{
+.backgroundTitleDiv .media-image-caption {
   display: none;
 }
 
@@ -194,6 +202,6 @@ i.fa-regular.fa-calendar {
   display: block;
 }
 
-.backgroundTitleDiv .imageMediaStyle img{
+.backgroundTitleDiv .imageMediaStyle img {
   padding-bottom: 0px;
 }

css/ucb-class-notes-list.css

@@ -0,0 +1,101 @@
+.ucb-class-note-link{
+  font-size: 200%;
+    font-weight: 700;
+    color: #959595 !important;
+    margin-bottom: 10px;
+}
+
+.ucb-class-note-year-container{
+  margin-bottom: 10px;
+}
+
+.ucb-class-note-link:hover{
+  color: #333 !important;
+}
+
+.ucb-class-notes-list-container{
+  margin-top: 20px;
+}
+
+.class-note-posted-date{
+  font-size: 75%;
+}
+
+.ucb-class-notes-list-note-item{
+  margin-bottom: 20px;
+    border-bottom: 1px solid rgba(128, 128, 128, 0.333);
+    /* padding-bottom: 20px; */
+}
+
+.class-note-year-select, .ucb-class-notes-filter-label{
+  margin-right: 10px;
+}
+
+.ucb-list-msg {
+    font-size: 1.25em;
+    font-weight: bolder;
+    text-align: center;
+  }
+
+  .ucb-loading-data {
+    color: #01579b;
+    text-align: center;
+  }
+
+  .ucb-list-msg,
+  .ucb-loading-data {
+    display: block;
+  }
+  .ucb-list-msg[hidden],
+  .ucb-loading-data[hidden] {
+    display: none;
+  }
+
+.class-notes-list-filter{
+  display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid rgba(128, 128, 128, 0.333);
+    min-width: auto;
+}
+
+.ucb-class-notes-filter-label{
+  font-size: 85%;
+    font-weight: 600;
+}
+
+.ucb-class-notes-view-all-container{
+  flex: 1;
+  text-align: right;
+  font-size: 85%;
+}
+.ucb-class-notes-read-more-container{
+  text-align: center;
+}
+.ucb-class-notes-read-more{
+  padding: 5px 10px;
+    font-weight: bold;
+    font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
+    margin-bottom: 5px;
+    background-clip: padding-box;
+    color: #0277BD !important;
+    border: 1px solid #0277BD;
+    border-radius: 0px;
+    background-color: transparent;
+    text-decoration: none;
+}
+
+.ucb-class-notes-read-more:hover {
+  transition: background-color 0.25s ease,border-color 0.25s ease,color 0.25s ease;
+  background-color: #0277BD;
+  color: white !important;
+}
+
+@media only screen and (max-width: 525px) {
+  .ucb-class-notes-view-all-container{
+    flex: auto;
+    text-align: inherit;
+  }
+}

css/ucb-class-notes.css

@@ -0,0 +1,3 @@
+.ucb-class-notes{
+    padding: 20px 0;
+}