Merge branch '28391-learning-materials' into test

eea · Feb 13, 2025 · 10d2197 · 10d2197
2 parents e91a134 + 306f0aa
commit 10d2197
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 14 deletions.
diff --git a/web/themes/custom/parc/templates/components/content/learning-material/style.pcss.css b/web/themes/custom/parc/templates/components/content/learning-material/style.pcss.css
@@ -1,13 +1,13 @@
 .learning-material {
   background-color: var(--bg-color);
   border-radius: 4px;
-  min-height: 286px;
+  min-height: 470px;
   position: relative;
   padding: 15px;
   height: 100%;
   border: 1px solid var(--bg-color);
 
-  .learning-material__body__icon svg {
+  .learning-material__icon svg {
     height: 120px;
     width: auto;
 
@@ -50,6 +50,29 @@
     line-height: 35px;
     margin-bottom: 10px;
     z-index: 1;
+    position: relative;
+
+    &__short {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      -webkit-box-orient: vertical;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &__long {
+      visibility: hidden;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
   }
 
   &__body {
@@ -68,11 +91,6 @@
       line-height: 20px;
       margin-bottom: 40px;
     }
-
-    &__icon {
-      position: absolute;
-      bottom: 110px;
-    }
   }
 
   &__bottom {
@@ -117,7 +135,7 @@
     background: #FFF;
     border: 1px solid var(--bg-color);
 
-    .learning-material__body__icon {
+    .learning-material__icon {
       display: none;
     }
 
@@ -129,6 +147,14 @@
     .learning-material__title {
       text-decoration: underline;
       color: var(--text-color);
+
+      &__long {
+        visibility: visible;
+      }
+
+      &__short {
+        display: none;
+      }
     }
 
     .go-to {

diff --git a/web/themes/custom/parc/templates/content/node--learning-material--card-item.html.twig b/web/themes/custom/parc/templates/content/node--learning-material--card-item.html.twig
@@ -13,15 +13,17 @@
     </div>
 
     <div class="learning-material__title">
-      {{ label }}
+      <div class="learning-material__title__long">{{ label }}</div>
+      <div class="learning-material__title__short">{{ label }}</div>
     </div>
 
+    {% if icon %}
+      <div class="learning-material__icon">
+        {{ include(icon) }}
+      </div>
+    {% endif %}
+
     <div class="learning-material__body">
-      {% if icon %}
-        <div class="learning-material__body__icon">
-          {{ include(icon) }}
-        </div>
-      {% endif %}
       <div class="learning-material__body__text">
         {{ content.body }}
       </div>