Re-orders the title and start time of the course to be read in the pr…

…oper order by the reader (#2503)
mitodl · Jan 10, 2025 · be30de0 · be30de0
1 parent 97df27c
commit be30de0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/frontend/public/scss/catalog.scss b/frontend/public/scss/catalog.scss
@@ -416,6 +416,10 @@
                     }
 
                     .catalog-item-description {
+                        display: -webkit-flex;
+                        -webkit-flex-flow: column;
+                        flex-flow: column;
+                        height: 85px;
                         display: flex;
                         padding: 15px;
                         flex-direction: column;
@@ -424,6 +428,8 @@
                         align-self: stretch;
 
                         .start-date-description {
+                            -webkit-order: 1;
+                            order: 1;
                             align-self: stretch;
                             overflow: hidden;
                             color: var(--grey-text, #6F7175);
@@ -435,7 +441,8 @@
                         }
 
                         .item-title {
-                            height: 36px;
+                            -webkit-order: 2;
+                            order: 2;
                             align-self: stretch;
                             color: rgba(3, 21, 45, 0.85);
                             /* Add elipses after 2 lines of title text */

diff --git a/frontend/public/src/containers/pages/CatalogPage.js b/frontend/public/src/containers/pages/CatalogPage.js
@@ -669,10 +669,10 @@ export class CatalogPage extends React.Component<Props> {
               alt=""
             />
             <div className="catalog-item-description">
+              <div className="item-title">{course.title}</div>
               <div className="start-date-description">
                 {getStartDateText(course)}
               </div>
-              <div className="item-title">{course.title}</div>
             </div>
           </div>
         </a>