optimize CLS

tryoasnafi · May 9, 2022 · f44aa37 · f44aa37 · vercel · May 9, 2022
1 parent ee0a231
commit f44aa37
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/src/scripts/views/templates/template-creator.js b/src/scripts/views/templates/template-creator.js
@@ -137,11 +137,11 @@ const createSkeletonRestaurantsTemplate = (count) => {
     template += `
     <section class="card">
       <img src="/icons/placeholder.png" alt="skeleton restaurant" class="restaurant-image" />
-      <h4 class="card__title text-overflow">Restaurant Title</h4>
-      <p class="card__description text-overflow">Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
+      <h4 class="card__title text-overflow">Restaurant Name</h4>
+      <p class="card__description text-overflow">A good restaurant for your best experience. We always on the mood to serve you!</p>
       <section class="flex align-center">
-        <p class="flex"> <img src="./icons/rating-star.svg" width="20px" height="24px" alt="rating icon" loading="lazy" /> <span class="label">Rating</span></p>
-        <p class="flex px-1"><img src="./icons/map-pin.svg" width="16px" height="24px" alt="location icon" loading="lazy" /> <span class="label">Locations</span></p>
+        <p class="flex"> <img src="/icons/placeholder.png" width="20px" height="24px" alt="rating icon" /> <span class="label">4.5</span></p>
+        <p class="flex px-1"><img src="/icons/placeholder.png" width="16px" height="24px" alt="location icon" /> <span class="label">locations</span></p>
       </section>
     </section>
     `;
@@ -156,7 +156,7 @@ const createSkeletonFoodsTemplate = (count) => {
   for (let i = 0; i < count; i += 1) {
     template += `
     <section class="card">
-      <img src="/icons/placeholder.png" width="100%" height="192px" alt="skeleton food" class="food-image"/>
+      <img src="/icons/placeholder.png" alt="skeleton food" class="food-image"/>
       <h4 class="card__title text-overflow">Food Menu Title</h4>
     </section>
     `;

diff --git a/src/styles/_content.scss b/src/styles/_content.scss
@@ -10,7 +10,6 @@
 
     &:hover {
       color: #15803d;
-      text-shadow: 1px 1px 2px #86efac;
       transition: all 0.2s;
     }
   }

diff --git a/src/styles/_default.scss b/src/styles/_default.scss
@@ -64,7 +64,8 @@ input {
 }
 
 .card__title {
-  line-clamp: 2;
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
 }
 
 .card__description {
@@ -81,8 +82,8 @@ input {
   -webkit-box-orient: vertical;
 }
 
-#mainContent {
-  min-height: 80vh;
+main {
+  min-height: min-content;
 
   &:focus {
     outline: #15803d solid 1px;

diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss
@@ -1,5 +1,8 @@
 footer {
-  padding: 1.75rem 0;
   background-color: #fff;
-  text-align: center;
+
+  p {
+    padding: 16px 0;
+    text-align: center;
+  }
 }
diff --git a/src/templates/index.html b/src/templates/index.html
@@ -39,12 +39,6 @@
       <nav class="container px-1">
         <section class="nav__brand">
           <a href="/" class="flex align-center">
-            <img
-              src="./icons/icon.png"
-              width="48px"
-              height="48px"
-              alt="logo resfi"
-            />
             <h1>Resfi</h1>
           </a>
           <button
@@ -79,7 +73,9 @@ <h1>Resfi</h1>
     </header>
     <main id="mainContent" tabindex="0"></main>
     <footer tabindex="0">
-      Copyright &copy; 2022 Resfi. Developed By Tryo Asnafi.
+      <p class="container">
+        Copyright &copy; 2022 Resfi. Developed By Tryo Asnafi.
+      </p>
     </footer>
   </body>
 </html>