Add text ellipsis to the dApp cards (#1186)

* add text ellipsis to the dapp card * update * Revert "update" This reverts commit 29c7d3f. * fix the arrow style of the ads section * fix builders card layout * fix dapp page short description
AstarNetwork · Feb 14, 2024 · 378bee2 · 378bee2
1 parent 5c5dd02
commit 378bee2
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 19 deletions.
diff --git a/src/staking-v3/components/DynamicAdsArea.vue b/src/staking-v3/components/DynamicAdsArea.vue
@@ -95,3 +95,29 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import './styles/ads-area.scss';
 </style>
+
+<style lang="scss">
+.swiper--ads-area {
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: white;
+    width: 40px;
+    height: 40px;
+    border-radius: 20px;
+    background-color: $navy-1;
+    &::after {
+      font-size: 12px;
+      font-weight: 600;
+    }
+  }
+  .swiper-button-prev {
+    padding-right: 2px;
+  }
+  .swiper-button-next {
+    padding-left: 2px;
+  }
+  .swiper-button-disabled {
+    display: none;
+  }
+}
+</style>
diff --git a/src/staking-v3/components/dapp/DappAvatar.vue b/src/staking-v3/components/dapp/DappAvatar.vue
@@ -1,15 +1,15 @@
 <template>
   <div :class="`wrapper--dapp-avatar ${small ? 'small' : ''}`">
     <div class="column--avatar">
-      <div>
-        <img class="image--dapp-icon" :src="dapp.extended?.iconUrl" :alt="dapp.extended?.name" />
+      <div class="image--dapp-icon">
+        <img :src="dapp.extended?.iconUrl" :alt="dapp.extended?.name" />
       </div>
       <div class="column--details">
         <div class="row--dapp-title">
           {{ dapp.extended?.name }}
         </div>
         <div v-if="!small" class="row--dapp-description">
-          {{ dapp.extended?.description }}
+          {{ dapp.extended?.shortDescription }}
         </div>
         <div v-if="dapp.extended?.tags && !small" class="row--tags">
           <div v-for="tag in dapp.extended?.tags" :key="tag" class="tag">

diff --git a/src/staking-v3/components/dapp/styles/builders.scss b/src/staking-v3/components/dapp/styles/builders.scss
@@ -67,11 +67,16 @@
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   @media (min-width: $sm) {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   @media (min-width: $lg) {
-    display: flex;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  @media (min-width: $xl) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  @media (min-width: $xxl) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
 
@@ -84,7 +89,6 @@
   flex-direction: column;
   gap: 12px;
   @media (min-width: $lg) {
-    width: 200px;
     padding: 24px 32px;
   }
 }

diff --git a/src/staking-v3/components/dapp/styles/dapp-avatar.scss b/src/staking-v3/components/dapp/styles/dapp-avatar.scss
@@ -22,12 +22,15 @@
 }
 
 .image--dapp-icon {
-  width: 120px;
-  height: 120px;
-  border-radius: 16px;
-  object-fit: contain;
-  overflow: hidden;
-  margin: auto;
+  flex-shrink: 0;
+  img {
+    width: 120px;
+    height: 120px;
+    border-radius: 16px;
+    object-fit: contain;
+    overflow: hidden;
+    margin: auto;
+  }
 }
 
 .row--dapp-title {
@@ -129,11 +132,13 @@
     }
   }
   .image--dapp-icon {
-    width: 44px;
-    height: 44px;
-    @media (min-width: $sm) {
-      width: 60px;
-      height: 60px;
+    img {
+      width: 44px;
+      height: 44px;
+      @media (min-width: $sm) {
+        width: 60px;
+        height: 60px;
+      }
     }
   }
   .row--dapp-title {

diff --git a/src/staking-v3/components/styles/dapps.scss b/src/staking-v3/components/styles/dapps.scss
@@ -88,14 +88,24 @@
 .text--title {
   font-weight: 700;
   font-size: 16px;
-  margin: 12px 0 8px 0;
+  margin: 0 0 4px 0;
   line-height: 1.25;
+  overflow: hidden;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
 }
 
 .text--description {
   color: $navy-4;
   font-size: 12px;
   font-weight: 500;
+  overflow: hidden;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
 
 .card__bottom {