Merge pull request #131 from filecoin-project/fix-mobile-text-truncation

filecoin-project · Jan 25, 2024 · 85a73d5 · 85a73d5
2 parents 2312413 + ef159f9
commit 85a73d5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/components/Navigation.vue b/components/Navigation.vue
@@ -1,7 +1,7 @@
 <template>
   <section
     id="header-navigation"
-    :class="headerNavigationClasses">
+    :class="[{ 'force-visible': forceNavigationVisible }, { 'show-background': showBackground }, { 'nav-open': navOpen }]">
     <div class="grid-noGutter-middle">
 
       <div :class="['modal-background', { 'show-background': navOpen }]"></div>
@@ -172,21 +172,14 @@ export default {
         }
       })
       return breadcrumbs
-    },
-    headerNavigationClasses () {
-      const showBackground = this.showBackground
-      const forceVisible = this.forceNavigationVisible
-      let compiled = ''
-      if (forceVisible) { compiled += 'force-visible ' }
-      if (showBackground) { compiled += 'show-background' }
-      return compiled
     }
   },
 
   watch: {
     scrollPosition (newVal, oldVal) {
       const showBackground = this.showBackground
       const forceVisible = this.forceNavigationVisible
+      console.log(this.forceNavigationVisible)
       // const scrollSpeed = this.$GetScrollSpeed(newVal)
       if (newVal === 0 && showBackground) {
         this.showBackground = false
@@ -268,6 +261,9 @@ export default {
   @include small {
     padding-top: toRem(20);
     height: toRem(92);
+    &.nav-open {
+      transform: translateY(0) !important;
+    }
   }
   &.force-visible {
     transform: translateY(0);
@@ -429,7 +425,7 @@ export default {
   margin-left: 2rem;
   transform: translateY(2px);
   @include small {
-    display: none;
+    display: none !important;
   }
 }
 
@@ -455,7 +451,7 @@ export default {
   @include small {
     position: absolute;
     width: 100vw;
-    height: 100vh;
+    height: calc(200vh);
     top: 0;
     left: 0;
     z-index: 99;

diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
@@ -42,7 +42,7 @@
           <span>{{ title }}</span>
         </p>
         <div :class="['description', { expanded }, { 'clip': !blockDescription }]">
-          <span>{{ description }}</span>
+          <span class="description-text">{{ description }}</span>
           <span v-if="tagString" class="tags">{{ tagString }}</span>
           <div class="socials">
             <a
@@ -329,6 +329,7 @@ export default {
     font-weight: 600;
     line-height: leading(30, 16);
     letter-spacing: 0.36px;
+    margin-bottom: 0.625rem;
     @include small {
       padding-left: toRem(52);
       font-size: 0.875rem;
@@ -350,19 +351,9 @@ export default {
     transition: max-height 250ms ease;
     overflow: hidden;
     @include small {
-      margin-top: 0.625rem;
       font-size: 0.75rem;
       line-height: leading(18, 12);
-      max-height: toRem(79);
-    }
-    &.clip {
-      display: -webkit-box;
-      -webkit-box-flex: 1;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      @include small {
-        -webkit-line-clamp: 4;
-      }
+      max-height: toRem(72);
     }
     &.expanded {
       max-height: toRem(200);
@@ -374,9 +365,20 @@ export default {
         opacity: 1;
       }
     }
-    span {
+    .description-text {
       display: block;
     }
+    &.clip {
+      .description-text {
+        display: -webkit-box;
+        -webkit-box-flex: 1;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        @include small {
+          -webkit-line-clamp: 4;
+        }
+      }
+    }
   }
   .button-row {
     display: flex;
@@ -456,6 +458,7 @@ export default {
     }
   }
   .tags {
+    display: block;
     color: rgba(255, 255, 255, 0.70);
     font-size: toRem(13);
     font-style: italic;