Fix mobile device css

Signed-off-by: mohin7 <mohin@appscode.com>
appscode · Mar 13, 2024 · adbe15c · adbe15c
1 parent 687f2a4
commit adbe15c
Show file tree

Hide file tree

Showing 11 changed files with 105 additions and 71 deletions.
diff --git a/layouts/_default/contact_us.html b/layouts/_default/contact_us.html
@@ -5,7 +5,7 @@
 {{ define "main" }}
 
 <!-- about hero  area start -->
-<section class="contact-hero" style="padding: 120px 0 60px;">
+<section class="contact-hero">
   <div class="container">
     <div class="columns">
       <div class="column is-6 d-table">

diff --git a/layouts/_default/embed_console.html b/layouts/_default/embed_console.html
@@ -30,6 +30,10 @@
       transition: 0.3s ease-in-out;
       width: calc(100% - 64px);
       gap: 8px;
+
+      @media screen and (max-width: 768px) {
+        height: 44px;
+      }
       &:hover {
         background-color: var(--ac-primary, #1c1c1c);
         color: var(--ac-text, #ffffff);

diff --git a/layouts/index.html b/layouts/index.html
@@ -255,7 +255,7 @@ <h2 data-aos="fade-up" data-aos-duration="600" class="mb-4">{{ $p.homepage.highl
     <!-- section title  -->
     <div class="columns is-centered">
       <div class="column is-8">
-        <div class="section-title has-text-centered">
+        <div class="section-title has-text-centered-desktop">
           <h2>Manage your Kubernetes native applications across public or private clouds</h2>
           <p>A single pane of glass for managing your stateful or stateless applications across various private and public clouds. Hide the complexity of Kubernetes behind a simple, elegant UI</p>
         </div>
@@ -421,7 +421,7 @@ <h2>Explore the Mechanics and Features of Our UI</h2>
    </div>
    <!-- section title  -->
 
-   <div class="columns" style="padding-bottom: 60px;">
+   <div class="columns is-vcentered" style="padding-bottom: 60px;">
     <div class="column is-4">
       <div class="is-flex is-flex-direction-column is-flex-wrap-wrap" style="gap: 8px;">
 
@@ -488,27 +488,27 @@ <h5 class="alert">Alert</h5>
       </div>
     </div>
     <div class="column is-8">
-      <div class="ui-dashboardd">
-        <div id="provisioing" class="Provisioning">
-          <h1>provisioning</h1>
+      <div class="ui-mechanism">
+        <div id="provisioing" class="single-ui-ss provisioning">
+          <img src="/assets/images/products/appscode/features/steps/provisioning.jpg" alt="provisioning-databases">
         </div>
         <div id="database-insight" class="database-insight is-hidden">
           <h1>database-insight</h1>
         </div>
 
-        <div id="managing" class="managing is-hidden">
+        <div id="managing" class="single-ui-ss managing is-hidden">
           <h1>managing</h1>
         </div>
 
-        <div id="disaster-recovery" class="disaster-recovery is-hidden">
+        <div id="disaster-recovery" class="single-ui-ss disaster-recovery is-hidden">
           <h1>disaster-recovery</h1>
         </div>
 
-        <div id="monitoting" class="minitoring is-hidden">
+        <div id="monitoting" class="single-ui-ss minitoring is-hidden">
           <h1>monitoring</h1>
         </div>
 
-        <div id="alert" class="alert is-hidden">
+        <div id="alert" class="single-ui-ss alert is-hidden">
           <h1>Alert</h1>
         </div>
       </div>
@@ -522,23 +522,22 @@ <h1>Alert</h1>
 // Add click event listener to each single-feature mechanism element
 singleFeatures.forEach(function(feature) {
     feature.addEventListener('click', function() {
-        const h5Element = feature.querySelector('h5');
+        const title = feature.querySelector('.mechanism .content h5');
 
-        const className = h5Element.className;
+        const className = title.className;
         showOnlySelectedDiv(className)
         singleFeatures.forEach(function(feature) {
             feature.classList.remove('is-active');
         });
 
         feature.classList.add('is-active');
-
         const divs=document.querySelectorAll(className)
 
 
     });
 });
 function showOnlySelectedDiv(selectedId) {
-    const divs = document.querySelectorAll('.ui-dashboardd > div');
+    const divs = document.querySelectorAll('.ui-mechanism > div');
 
     divs.forEach(function(div) {
         if (div.id === selectedId) {

diff --git a/static/assets/images/products/appscode/features/steps/provisioning.jpg b/static/assets/images/products/appscode/features/steps/provisioning.jpg
diff --git a/static/assets/sass/base/_global.scss b/static/assets/sass/base/_global.scss
@@ -6,6 +6,9 @@
 }
 .section-padding {
   padding: 60px 0;
+  @include touch {
+    padding: 48px 0;
+  }
 }
 .list-items {
   display: flex;

diff --git a/static/assets/sass/components/_button.scss b/static/assets/sass/components/_button.scss
@@ -14,6 +14,9 @@
     align-items: center;
     justify-content: center;
     height: 48px;
+    @include mobile {
+      height: 44px;
+    }
     &:focus-visible {
       outline: none;
     }

diff --git a/static/assets/sass/components/_product-hero-area.scss b/static/assets/sass/components/_product-hero-area.scss
@@ -470,14 +470,6 @@ Responsive Classes
       padding: 30px 0;
       padding-bottom: 0px;
       justify-content: center;
-
-      .single-brand {
-        padding: 5px;
-
-        img {
-          max-height: 1.5rem;
-        }
-      }
     }
   }
 }

diff --git a/static/assets/sass/layouts/_responsive.scss b/static/assets/sass/layouts/_responsive.scss
@@ -1,10 +1,6 @@
 /* Normal desktop :1216px. */
 @media (min-width: 1216px) and (max-width: 1407px) {
 
-  .section-padding {
-    padding: 60px 0;
-  }
-
   // pricing page style start
   .pricing-area-wrapper {
     overflow-x: scroll;
@@ -59,9 +55,6 @@
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -617,9 +610,6 @@
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -712,9 +702,7 @@
   }
 
   .section-title h2 {
-    font-size: 22px;
-    margin-bottom: 30px;
-    line-height: 36px;
+
   }
 
   .carousel-wrapper {

diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
@@ -18326,6 +18326,11 @@ strong {
 .section-padding {
   padding: 60px 0;
 }
+@media screen and (max-width: 1023px) {
+  .section-padding {
+    padding: 48px 0;
+  }
+}
 
 .list-items {
   display: flex;
@@ -21931,6 +21936,11 @@ a.nav-link.active:after {
   justify-content: center;
   height: 48px;
 }
+@media screen and (max-width: 768px) {
+  .button.ac-button {
+    height: 44px;
+  }
+}
 .button.ac-button:focus-visible {
   outline: none;
 }
@@ -22471,12 +22481,6 @@ Responsive Classes
     padding-bottom: 0px;
     justify-content: center;
   }
-  .social-prove-brand-area .brand-image-wrapper .single-brand {
-    padding: 5px;
-  }
-  .social-prove-brand-area .brand-image-wrapper .single-brand img {
-    max-height: 1.5rem;
-  }
 }
 @media (max-width: 378px) {
   .hero-area.is-product .buttons .button {
@@ -25085,6 +25089,11 @@ Responsive Classes
 .more-products .single-feature, .intro-kubedb-ui .single-feature {
   flex-basis: calc(50% - 6px);
 }
+@media screen and (max-width: 768px) {
+  .more-products .single-feature, .intro-kubedb-ui .single-feature {
+    flex-basis: 100%;
+  }
+}
 
 .single-feature {
   display: flex;
@@ -25143,6 +25152,13 @@ Responsive Classes
   color: #666F6A;
 }
 
+.single-ui-ss {
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  margin-left: 32px;
+}
+
 .ui-dashboard {
   position: relative;
   z-index: 1;
@@ -25717,20 +25733,22 @@ Responsive Classes
   .hero-area-1 h1 {
     font-size: 38px;
     letter-spacing: -0.57px;
-    text-align: center;
+  }
+  .hero-area-1 h1 img {
+    height: 32px;
   }
   .hero-area-1 p {
     text-align: center;
     font-size: 1rem;
   }
   .hero-area-1 .buttons {
     margin-bottom: 15px;
-    justify-content: center;
   }
   .hero-area-1 .buttons .button.ac-button {
     margin-bottom: 0.5rem;
     margin-right: 0.5rem !important;
     padding: 0.5rem 1rem;
+    width: 100%;
   }
   .hero-area-1 .buttons .play-buttons a span {
     font-size: 20px;
@@ -25741,13 +25759,8 @@ Responsive Classes
   .hero-area-1 .h-right-content {
     margin-right: 0;
   }
-  .news-message-wrapper {
-    display: flex;
-    justify-content: center;
-  }
   .products-area .single-product {
     padding: 30px 20px;
-    text-align: center;
   }
   .others-products {
     padding: 50px 0;
@@ -25763,7 +25776,6 @@ Responsive Classes
   }
   .others-products .products .single-product {
     margin-top: 1rem;
-    text-align: center;
     border: 1px solid #e7e7e7;
     padding: 20px 15px;
     border-radius: 4px;
@@ -26020,13 +26032,28 @@ Responsive Classes
     padding: 0 !important;
   }
 }
+.contact-hero {
+  padding: 120px 0 60px;
+}
+@media screen and (max-width: 768px) {
+  .contact-hero {
+    padding: 150px 0 30px;
+  }
+}
 .contact-hero h2 {
   font-weight: 700;
   letter-spacing: -0.5px;
   line-height: 120%;
   text-wrap: balance;
   margin-bottom: 16px;
 }
+@media screen and (max-width: 768px) {
+  .contact-hero h2 {
+    font-size: 38px;
+    letter-spacing: -0.57px;
+    text-wrap: inherit;
+  }
+}
 .contact-hero p {
   margin-bottom: 16px;
 }
@@ -26037,9 +26064,19 @@ Responsive Classes
   flex-wrap: wrap;
   gap: 12px;
 }
+@media screen and (max-width: 768px) {
+  .location-area {
+    margin-top: 32px;
+  }
+}
 .location-area .location {
   width: calc(50% - 6px);
 }
+@media screen and (max-width: 768px) {
+  .location-area .location {
+    width: 100%;
+  }
+}
 
 .location {
   border: 1px solid #e7e7e7;
@@ -26101,9 +26138,6 @@ Responsive Classes
 
 /* Normal desktop :1216px. */
 @media (min-width: 1216px) and (max-width: 1407px) {
-  .section-padding {
-    padding: 60px 0;
-  }
   .pricing-area-wrapper {
     overflow-x: scroll;
     padding-top: 64px;
@@ -26145,9 +26179,6 @@ Responsive Classes
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -26601,9 +26632,6 @@ Responsive Classes
   p {
     font-size: 15px;
   }
-  .section-padding {
-    padding: 60px 0;
-  }
   .pt-100.is-mobile-device {
     padding-top: 30px;
   }
@@ -26681,11 +26709,6 @@ Responsive Classes
     padding: 0;
     overflow: hidden;
   }
-  .section-title h2 {
-    font-size: 22px;
-    margin-bottom: 30px;
-    line-height: 36px;
-  }
   .carousel-wrapper {
     padding: 30px 15px;
   }