From ee80c7cd9ce185ce975a867a2dfa32cf6f83eb14 Mon Sep 17 00:00:00 2001
From: Cyrbuzz <cyrbuzz@foxmail.com>
Date: Tue, 14 May 2024 17:58:47 +0800
Subject: [PATCH] feat: mobile change (#518)

---
 docs/.vuepress/components/Banner.vue          | 33 ++++++++--
 docs/.vuepress/components/Typography.vue      | 17 +++++
 docs/.vuepress/config.ts                      |  6 ++
 .../public/assets/style/homepage.css          | 55 +++++++++++++---
 docs/.vuepress/styles/index.scss              | 27 ++++++++
 docs/README.md                                |  6 +-
 docs/indexer/welcome.md                       | 35 ++++++++--
 docs/subquery_network/welcome.md              | 65 +++++++++++--------
 8 files changed, 196 insertions(+), 48 deletions(-)

diff --git a/docs/.vuepress/components/Banner.vue b/docs/.vuepress/components/Banner.vue
index cc9aad21ead..45c85093933 100644
--- 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
index 7e977002e35..5de87ac715b 100644
--- 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
index 949c5fc281c..0de3d343446 100644
--- 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
index 4ba5e5a86fd..17a636c5dc6 100644
--- 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
index a65b9e6e5aa..e5454dfb118 100644
--- 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
index 56216e891c8..d3ce8e6ad6f 100644
--- 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
index b749f7a7ccd..72507f9e710 100644
--- 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',
diff --git a/docs/subquery_network/welcome.md b/docs/subquery_network/welcome.md
index a17b164228e..bcf5db1f9c3 100644
--- a/docs/subquery_network/welcome.md
+++ b/docs/subquery_network/welcome.md
@@ -32,7 +32,7 @@ photoSwipe: false
   <Typography tag="h3" fontSize="42" style="margin-top: 140px; margin-bottom: 64px">
     One network, all your web3 data needs
   </Typography>
-  <div class="layout mb140" style="display: flex; gap: 24px">
+  <div class="layout mb140 flexColMobile" style="display: flex; gap: 24px">
     <BaseCard v-for="item in oneNetworkAllWeb3" :key="item.title">
       <div class="flexColCenter" style="gap: 24px; text-align: center">
         <img :src="item.image" height="300" />
@@ -50,7 +50,7 @@ photoSwipe: false
       </div>
     </BaseCard>
   </div>
-  <Typography tag="h3" fontSize="42" style="margin-bottom: 24px">Anyone can participate</Typography>
+  <Typography tag="h3" fontSize="42" style="margin-bottom: 24px; text-align: center;">Anyone can participate</Typography>
   <Typography
   center
   type="secondary"
@@ -65,10 +65,8 @@ photoSwipe: false
     out how you can participate and be rewarded.
   </Typography>
   <div
-    class="layout"
+    class="layout grid2column flexColMobile"
     style="
-      display: grid;
-      grid-template-columns: 1fr 1fr;
       gap: 96px;
       text-align: center;
     "
@@ -129,7 +127,7 @@ photoSwipe: false
   <div class="advancedFeatures layout mt80">
     <Typography tag="h35">Get Started with the Network Today</Typography>
     <Typography tag="p" size="large" style="margin: 24px 0 40px 0">Our decentralised network is live and vibrant</Typography>
-    <div class="grid3column" style="gap: 24px">
+    <div class="grid3column flexColMobile" style="gap: 24px">
       <router-link
         v-for="item in advancedFeatures"
         :key="item.title"
@@ -151,7 +149,7 @@ photoSwipe: false
       'SubQuery is a fast, flexible, and reliable open-source data indexer that provides you with custom APIs for your web3 project across all of our supported chains. ',
       'Build your own custom API for over 160 chains today by following our quick start guides, then host it your way',
     ]"
-    buttonText="Learn more about our Indexer SDK"
+    :buttonText="isMobile? 'Learn more' : 'Learn more about our Indexer SDK'"
     titleTag="h35"
     buttonLink="/indexer/welcome.html"
     backgroundUrl="https://subquery.network/images/indexerConcept.png"
@@ -165,26 +163,41 @@ photoSwipe: false
 </div>
    
 <script setup>
-import {ref} from 'vue'
+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 oneNetworkAllWeb3 = ref([
-  {
-    image: "https://subquery.network/images/indexerConcept.png",
-    title: 'Decentralised Data Indexers',
-    subtitle: 'Fast, reliable, decentralised, and customised APIs for your web3 project',
-    contents: [
-      "SubQuery APIs make your dApp lighting quick. By providing an indexed data layer, your dApps get richer data faster to allow you to build intuitive and immersive experiences for your users.",
-      "Easy to build, test, deploy, and run, SubQuery’s Data Indexer makes dApp development a breeze."
-    ],
-  },
-  {
-    image: "https://subquery.network/images/rpcConcept.png",
-    title: 'Decentralised RPC Endpoints',
-    subtitle: 'Faster, cheaper, and globally decentralised RPCs that supercharge your dApp',
-    contents: [
-      "The SubQuery Data Node is a heavily optimised RPC endpoint that unlocks new breakthroughs in performance and scalability to power the next generation of web3 projects.",
-      "With similar RPC endpoints and helpful SDKs to manage network connections, supercharging your dApp takes only a second."
-    ],
-  }
+{
+image: "https://subquery.network/images/indexerConcept.png",
+title: 'Decentralised Data Indexers',
+subtitle: 'Fast, reliable, decentralised, and customised APIs for your web3 project',
+contents: [
+"SubQuery APIs make your dApp lighting quick. By providing an indexed data layer, your dApps get richer data faster to allow you to build intuitive and immersive experiences for your users.",
+"Easy to build, test, deploy, and run, SubQuery’s Data Indexer makes dApp development a breeze."
+],
+},
+{
+image: "https://subquery.network/images/rpcConcept.png",
+title: 'Decentralised RPC Endpoints',
+subtitle: 'Faster, cheaper, and globally decentralised RPCs that supercharge your dApp',
+contents: [
+"The SubQuery Data Node is a heavily optimised RPC endpoint that unlocks new breakthroughs in performance and scalability to power the next generation of web3 projects.",
+"With similar RPC endpoints and helpful SDKs to manage network connections, supercharging your dApp takes only a second."
+],
+}
 ])
 
 const anyoneContents = ref([