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 · e4202d1 · e4202d1
1 parent 0878087
commit e4202d1
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"],