feat(#3206): UICard content sticked to the bottom, EventsCar descript…

…ion to the top Signed-off-by: Pablo Aragón <[email protected]>
Qiskit · Jan 15, 2024 · eef79b9 · eef79b9
1 parent 9b98e32
commit eef79b9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/components/Events/EventsCard.vue b/components/Events/EventsCard.vue
@@ -12,6 +12,9 @@
     :alt-text="altText"
   >
     <div v-if="description" class="events-card__description">
+      <p v-if="!tooLongDescription">
+        {{ description }}
+      </p>
       <p v-if="tooLongDescription && !showMore">
         {{ description.substring(0, MAX_DESCRIPTION_LENGTH_CH).trim() }}...
         <span
@@ -101,16 +104,17 @@ function toggleDescriptionLength() {
 
 <style lang="scss" scoped>
 @use "~/assets/scss/carbon.scss";
+@use "~/assets/scss/helpers/index.scss" as qiskit;
 
 .events-card {
   &__description {
     margin-bottom: carbon.$spacing-06;
     max-height: 240ch;
+    height: 100%;
 
     &__toggle {
-      text-decoration: underline;
       cursor: pointer;
-      color: var(--cds-link-primary, #{carbon.$purple-80});
+      color: qiskit.$link-color-tertiary;
     }
   }
 

diff --git a/components/Ui/UiCard.vue b/components/Ui/UiCard.vue
@@ -168,6 +168,10 @@ function hasTags(tags: string[]) {
 
   &__body {
     overflow-wrap: break-word;
+    height: 100%;
+    display: flex;
+    justify-content: flex-end;
+    flex-direction: column;
   }
 
   &__content {
@@ -178,6 +182,13 @@ function hasTags(tags: string[]) {
     justify-content: space-between;
   }
 
+  &__description {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
   &__ctas {
     display: flex;
     justify-content: flex-start;

diff --git a/hooks/mock/content/events/upcoming-community-events.json b/hooks/mock/content/events/upcoming-community-events.json
@@ -11,7 +11,7 @@
     "startDateAndTime": null,
     "endDate": "",
     "to": "https://imperturbable-hyphenation.info/",
-    "abstract": "Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem."
+    "abstract": "Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur minima aperiam dicta amet rem. Accusamus eos amet animi saepe quidem fugit veritatis ex eveniet. Consectetur saepe assumenda. Esse id unde quibusdam consequuntur"
   },
   {
     "types": ["Open Source"],