From 060a00e7086fc7771e6b9f9fb710e6e44133617f Mon Sep 17 00:00:00 2001
From: Helios <i@shangyes.net>
Date: Sat, 27 Jun 2020 16:31:54 +0800
Subject: [PATCH] feat: mobile-friendly style (#48)

beautify the mobile page on the premise that the style of desktop page
is not changed
---
 src/components/App.vue            | 32 ++++++++++++++++++++++++++++---
 src/components/BugReport.vue      | 10 +++++++---
 src/components/FeatureRequest.vue |  2 +-
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/App.vue b/src/components/App.vue
index d76911a..4030028 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -6,11 +6,11 @@
     <form class="main-form" @submit.prevent="generate">
       <FormIntro/>
 
-      <div class="common-fields vue-ui-grid col-2 default-gap">
+      <div class="common-fields">
         <VueFormField
           :title="i18n('repo-title')"
           :subtitle="i18n('repo-subtitle')"
-          class="first-row"
+          class="first-row can-narrow"
         >
           <VueSelect
             v-model="repo"
@@ -26,7 +26,7 @@
 
         <VueFormField
           :title="i18n('type-title')"
-          class="first-row"
+          class="first-row can-narrow"
         >
           <VueGroup
             v-model="type"
@@ -254,3 +254,29 @@ export default {
   text-align center
   margin 24px 0
 </style>
+
+<style lang="stylus">
+@media screen and (max-width: 600px)
+  .title
+    font-weight bold
+  .vue-ui-form-field
+    margin-bottom 24px
+
+@media screen and (min-width: 600px)
+  .can-narrow
+    flex: 0 0 48% !important
+
+.common-fields
+  display flex !important
+  flex-flow row wrap
+  justify-content space-between
+
+.vue-ui-form-field
+  margin-bottom 12px
+  width 100%
+
+.medium > .shell
+  width 800px !important
+  min-width auto !important
+  max-width calc(100vw - 40px) !important
+</style>
diff --git a/src/components/BugReport.vue b/src/components/BugReport.vue
index 7fe62c2..5d48204 100644
--- a/src/components/BugReport.vue
+++ b/src/components/BugReport.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="bug-report" style="margin:0">
-    <div class="vue-ui-grid col-2 default-gap">
+    <div class="common-fields">
       <VueFormField
         :title="i18n('version-title')"
         :subtitle="i18n('version-subtitle')"
+        class="can-narrow"
       >
         <VueTypeAhead
           v-model="attrs.version"
@@ -19,6 +20,7 @@
       <VueFormField
         v-if="repo.id === 'vuejs/vue-devtools'"
         :title="i18n('browser-and-os-title')"
+        class="can-narrow"
       >
         <VueInput
           v-model="attrs.browserAndOS"
@@ -35,6 +37,7 @@
         <VueFormField
           v-if="isCLI && doesNotSupportVueInfo"
           :title="i18n('node-and-os-title')"
+          class="can-narrow"
         >
           <VueInput
             v-model="attrs.nodeAndOS"
@@ -50,7 +53,6 @@
         <VueFormField
           v-else-if="isCLI"
           :title="i18n('cli-envinfo-title')"
-          class="span-2"
         >
           <VueInput
             v-model="attrs.cliEnvInfo"
@@ -64,7 +66,7 @@
           />
         </VueFormField>
 
-        <VueFormField :title="i18n('repro-title')">
+        <VueFormField :title="i18n('repro-title')" class="can-narrow">
           <VueInput
             type="url"
             v-model="attrs.reproduction"
@@ -99,6 +101,7 @@
 
       <VueFormField
         :title="i18n('expected-title')"
+        class="can-narrow"
       >
         <VueInput
           type="textarea"
@@ -110,6 +113,7 @@
 
       <VueFormField
         :title="i18n('actual-title')"
+        class="can-narrow"
       >
         <VueInput
           type="textarea"
diff --git a/src/components/FeatureRequest.vue b/src/components/FeatureRequest.vue
index fc82217..2b648c0 100644
--- a/src/components/FeatureRequest.vue
+++ b/src/components/FeatureRequest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="feature-request">
-    <div class="vue-ui-grid col-1 default-gap">
+    <div class="common-fields">
       <VueFormField
         :title="i18n('rationale-title')"
       >