feat: mobile change (#518)

subquery · May 14, 2024 · ee80c7c · ee80c7c
1 parent 2ceafcd
commit ee80c7c
Show file tree

Hide file tree

Showing 8 changed files with 196 additions and 48 deletions.
diff --git a/docs/.vuepress/components/Banner.vue b/docs/.vuepress/components/Banner.vue
@@ -2,7 +2,7 @@
   <div
     class="flex gp24 layout mt140 bannerWithBackground"
     :style="{
-      backgroundImage: `url('${backgroundUrl}')`,
+      '--background-url': `url('${backgroundUrl}')`,
     }"
   >
     <div class="flexCol gp24">
@@ -60,15 +60,40 @@ defineProps<{
 
 <style lang="scss">
 .bannerWithBackground {
-  background: url("");
   padding: 40px;
-  background-repeat: no-repeat;
-  background-size: cover;
   border-radius: 8px;
   box-sizing: border-box;
+  position: relative;
+  z-index: 1;
+  background: var(--background-url) no-repeat;
+  overflow: hidden;
+  &::after {
+    display: none;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--background-url) no-repeat;
+    background-size: cover;
+    z-index: -1;
+    opacity: 0.5;
+  }
+
   p {
     max-width: 551px;
     font-size: 18px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .bannerWithBackground {
+    padding: 20px;
+    background: unset;
+    &::after {
+      display: block;
+    }
+  }
+}
 </style>
diff --git a/docs/.vuepress/components/Typography.vue b/docs/.vuepress/components/Typography.vue
@@ -100,4 +100,21 @@ defineProps<{
     color: var(--gray-400);
   }
 }
+
+@media screen and (max-width: 768px) {
+  .docsTypography {
+    max-width: 100% !important;
+    &.h1 {
+      font-size: 40px;
+    }
+
+    &.h2 {
+      font-size: 40px;
+    }
+
+    &.h3 {
+      font-size: 36px;
+    }
+  }
+}
 </style>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -39,6 +39,12 @@ export default defineUserConfig({
         href: "/assets/favicons/favicon-16x16.png",
       },
     ],
+    [
+      "meta",
+      {
+        content: "user-scalable=no, width=device-width, initial-scale=1.0",
+      },
+    ],
   ],
 
   locales: {

diff --git a/docs/.vuepress/public/assets/style/homepage.css b/docs/.vuepress/public/assets/style/homepage.css
@@ -61,6 +61,11 @@ body .theme-hope-content:not(.custom) {
   margin-bottom: 140px;
 }
 
+.grid2column {
+  display: grid;
+  grid-template-columns: 1fr 1fr
+}
+
 .grid3column {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
@@ -186,14 +191,6 @@ body .theme-hope-content:not(.custom) {
   flex-flow: row wrap;
 }
 
-@media screen and (max-width: 720px) {
-  .banner {
-    padding: 80px 0;
-  }
-  .banner > div {
-    flex-direction: column;
-  }
-}
 
 .graphGuide {
   background: radial-gradient(
@@ -254,3 +251,45 @@ iframe {
     max-width: var(--max-width);
   }
 }
+
+
+@media  screen and (max-width: 768px) {
+  .welcomeContainer {
+    padding: 0 20px;
+  }
+
+  .banner {
+    padding: 80px 0;
+  }
+  .banner > div {
+    flex-direction: column;
+  }
+
+  .bannerImage img {
+    width: 100vw;
+  }
+
+  .bannerImageBg {
+    width: 100%;
+  }
+
+  .flexColMobile {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bannerRow .bannerImage {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    z-index: 0;
+    opacity: .5;
+  }
+
+  .bannerRow .bannerImage img {
+    width: 100vw;
+  }
+
+  .bannerRow .bannerImageBg {
+    display: none;;
+  }
+}
diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
@@ -215,6 +215,33 @@ iframe {
   max-width: var(--max-width);
 }
 
+
+@media screen and (max-width: 768px) {
+  #navbar {
+    .vp-navbar-center {
+      display: none;
+    }
+    .vp-navbar-end {
+      flex: 1;
+      & > * {
+        margin: 0 !important;
+      }
+      #docsearch-container ~ div {
+        flex: 1;
+      }
+      .DocSearch {
+        width: 100%;
+      } 
+    }
+  }
+
+  .theme-container .vp-page {
+    padding-inline-start: 0;
+  }
+}
+
+
+
 html[data-theme="dark"] {
   --dark-grey: #fff;
   --primary-color: var(--theme-color);

diff --git a/docs/README.md b/docs/README.md
@@ -14,7 +14,7 @@ photoSwipe: false
       <div class="bannerImageBg"></div>
       <img src="/assets/img/welcomeBanner.png" />
     </div>
-    <div class="flexColCenter" style="position: relative">
+    <div class="flexColCenter" style="position: relative;gap: 24px;">
       <Typography tag="h1" center maxWidth="787">
         Learn how to build with SubQuery
       </Typography>
@@ -30,7 +30,7 @@ photoSwipe: false
       >
     </div>
   </div>
-  <div class="layout flex mt80 gp24">
+  <div class="layout flex mt80 gp24 flexColMobile">
     <BaseCard>
       <router-link
         class="flexCol gp24"
@@ -76,7 +76,7 @@ photoSwipe: false
   </div>
   <div class="layout mt140">
     <Typography tag="h3"> Our Most Popular Guides </Typography>
-    <div class="grid3column mt24 gp24">
+    <div class="grid3column mt24 gp24 flexColMobile">
       <BaseCard
         v-for="guide in polularGuides"
         :key="guide.title"

diff --git a/docs/indexer/welcome.md b/docs/indexer/welcome.md
@@ -9,7 +9,7 @@ photoSwipe: false
 <link rel="stylesheet" href="/assets/style/homepage.css" as="style" />
 <div class="welcomeContainer">
   <div class="bannerRow">
-    <div class="flexColCenter gp24" style="max-width: 614px">
+    <div class="flexColCenter gp24" style="max-width: 614px; z-index: 1;">
       <Typography tag="h2">Build with SubQuery's Indexer SDK</Typography>
       <Typography tag="h5">The SubQuery Data indexer is a open-source data indexer that provides you with custom APIs for your web3 project across all of our supported chains.</Typography>
     </div>
@@ -49,7 +49,7 @@ photoSwipe: false
     <div class="layout mt80">
       <Typography tag="h4" fontSize="32">Advanced Features from the Best Multi-chain Indexer</Typography>
       <Typography type="secondary" tag="p" size="large" style="margin-top: 24px; margin-bottom: 40px;">We built the best, fully-featured indexer, so you don’t have to!</Typography>
-      <div class="grid3column gp24">
+      <div class="grid3column gp24 flexColMobile">
         <BaseCard  v-for="item in advancedFeatures" :key="item.title">
           <router-link class="item" :to="{path: item.link}">
             <Typography tag="p">{{ item.title }}</Typography>
@@ -60,20 +60,26 @@ photoSwipe: false
     </div>
     <Banner title="Want a More in Depth Learning Experience?" description="We have detailed, step by step learning course. Follow video tutorials alongside real world examples." buttonText="Start your Course" buttonLink="/indexer/academy/herocourse/welcome.html" backgroundUrl="/assets/img/wantMoreDepthBg.png"></Banner>
     <Faqs></Faqs>
-    <div class="flex layout mt80" style="justify-content: space-between;">
+    <div class="flex layout mt80 flexColMobile" style="justify-content: space-between;">
       <div class="flexCol gp24" style="max-width: 590px">
         <Typography tag="h35">The SubQuery Network</Typography>
         <Typography tag="p" size="large" type="secondary">Say goodbye to relying on centralised service providers, we’re building the most open, performant, reliable and scalable data service for dApp developers. </Typography>
         <Typography tag="p" size="large" type="secondary">After publishing your project to the SubQuery Network, anyone can index and host it — providing data to users around the world faster and reliably.</Typography>
         <div class="flex">
-        <router-link :to="{path: '/subquery_network/welcome.html'}">
-          <Button>
-          Learn more about our Decentralised Network
+        <router-link :style="{
+            width: isMobile ? '100%' : 'auto'
+          }" :to="{path: '/subquery_network/welcome.html'}">
+          <Button :style="{
+            width: isMobile ? '100%' : 'auto',
+            justifyContent: 'center'
+          }">
+            {{ isMobile ? "Learn more" : "Learn more about our Decentralised Network" }}
           </Button>
         </router-link>
         </div>
       </div>
-      <img style="margin-top: -50px" src="/assets/img/architects.png" width="516" height="392" />
+      <img :style="{
+        marginTop: isMobile ? '' : '-50px'}" src="/assets/img/architects.png" :width="isMobile ? '100%' : 516" :height="isMobile ? 'auto': 392" />
     </div>
     <NeedHelp></NeedHelp>
     <Footer></Footer>
@@ -82,6 +88,21 @@ photoSwipe: false
 <script setup>
 import { ref, onMounted } from 'vue'
 
+const isMobile = ref(false)
+
+const checkIsMobile = () => {
+  if (window.screen && window.screen.width < 768) {
+    isMobile.value = true
+  } else {
+    isMobile.value = false
+  }
+ }
+
+onMounted(() => {
+  checkIsMobile()
+  window.addEventListener('resize', checkIsMobile)
+})
+
 const advancedFeatures = ref([
   {
     title: 'EVM, WASM, and more',