Merge branch 'feature/styles-for-tablet' into 'develop'

Add styles for tablets See merge request pleroma/admin-fe!93
2020-02-17 22:51:54 +00:00 · 2020-02-17 22:51:54 +00:00 · 2ef5198684
commit 2ef5198684
parent 436934109a 59a17dc5e9
30 changed files with 348 additions and 92 deletions
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@ -10,7 +10,7 @@
      </el-tooltip>
    </div>
    <el-divider class="divider"/>
-    <el-form label-width="180px" class="emoji-packs-form">
+    <el-form :label-width="labelWidth" class="emoji-packs-form">
      <el-form-item :label="$t('emoji.localPacks')">
        <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
      </el-form-item>
@ -71,8 +71,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '240px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '240px'
+      }
    },
    localPacks() {
      return this.$store.state.emojiPacks.localPacks
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/views/layout/mixin/ResizeHandler.js
@ -1,8 +1,9 @@
 import store from '@/store'

 const { body } = document
-const WIDTH = 1024
-const RATIO = 3
+const mobileWidth = 480
+const tabletWidth = 801
+const ratio = 3

 export default {
  watch: {
@ -17,23 +18,31 @@ export default {
  },
  mounted() {
    const isMobile = this.isMobile()
-    if (isMobile) {
-      store.dispatch('toggleDevice', 'mobile')
+    const isTablet = this.isTablet()
+    if (isMobile || isTablet) {
+      store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
      store.dispatch('closeSideBar', { withoutAnimation: true })
    }
  },
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
-      return rect.width - RATIO < WIDTH
+      return rect.width - ratio < mobileWidth
+    },
+    isTablet() {
+      const rect = body.getBoundingClientRect()
+      return rect.width - ratio < tabletWidth && rect.width - ratio > mobileWidth
    },
    resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.isMobile()
-        store.dispatch('toggleDevice', isMobile ? 'mobile' : 'desktop')
+        const isTablet = this.isTablet()

-        if (isMobile) {
+        if (isMobile || isTablet) {
+          store.dispatch('toggleDevice', isMobile ? 'mobile' : 'tablet')
          store.dispatch('closeSideBar', { withoutAnimation: true })
+        } else {
+          store.dispatch('toggleDevice', 'desktop')
        }
      }
    }
--- a/src/views/settings/components/ActivityPub.vue
+++ b/src/views/settings/components/ActivityPub.vue
@ -35,8 +35,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.$store.state.settings.loading
--- a/src/views/settings/components/Authentication.vue
+++ b/src/views/settings/components/Authentication.vue
@ -43,8 +43,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    ldap() {
      return this.settings.description.find(setting => setting.key === ':ldap')
--- a/src/views/settings/components/AutoLinker.vue
+++ b/src/views/settings/components/AutoLinker.vue
@ -31,8 +31,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Captcha.vue
+++ b/src/views/settings/components/Captcha.vue
@ -35,6 +35,9 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    kocaptcha() {
      return this.settings.description.find(setting => setting.key === 'Pleroma.Captcha.Kocaptcha')
    },
@ -42,7 +45,13 @@ export default {
      return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Esshd.vue
+++ b/src/views/settings/components/Esshd.vue
@ -31,8 +31,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Frontend.vue
+++ b/src/views/settings/components/Frontend.vue
@ -79,8 +79,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Gopher.vue
+++ b/src/views/settings/components/Gopher.vue
@ -31,8 +31,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Http.vue
+++ b/src/views/settings/components/Http.vue
@ -67,8 +67,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@ -15,7 +15,7 @@
          :setting-parent="[...settingParent, subSetting]"
          :setting="subSetting"
          :data="data[setting.key]"
-          :custom-label-width="isDesktop ? '120px' : '100px'"
+          :custom-label-width="isMobile ? '100px' : '120px'"
          :label-class="subSetting.type === 'keyword' ? 'center-label' : ''"
          :margin="isDesktop ? margin + 15 : margin + 8"
          :nested="true"/>
@ -92,7 +92,7 @@
        <prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
        <rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
        <!-------------------->
-        <el-tooltip v-if="canBeDeleted && isMobile" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
+        <el-tooltip v-if="canBeDeleted && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
          <el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
        </el-tooltip>
      </div>
@ -210,8 +210,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    keywordData() {
      return Array.isArray(this.data) ? this.data : []
--- a/src/views/settings/components/Instance.vue
+++ b/src/views/settings/components/Instance.vue
@ -65,8 +65,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/JobQueue.vue
+++ b/src/views/settings/components/JobQueue.vue
@ -37,8 +37,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Logger.vue
+++ b/src/views/settings/components/Logger.vue
@ -49,8 +49,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/MRF.vue
+++ b/src/views/settings/components/MRF.vue
@ -51,8 +51,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Mailer.vue
+++ b/src/views/settings/components/Mailer.vue
@ -40,8 +40,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.$store.state.settings.loading
--- a/src/views/settings/components/MediaProxy.vue
+++ b/src/views/settings/components/MediaProxy.vue
@ -25,8 +25,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Metadata.vue
+++ b/src/views/settings/components/Metadata.vue
@ -29,8 +29,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/Other.vue
+++ b/src/views/settings/components/Other.vue
@ -32,8 +32,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/RateLimiters.vue
+++ b/src/views/settings/components/RateLimiters.vue
@ -31,8 +31,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.$store.state.settings.loading
--- a/src/views/settings/components/Setting.vue
+++ b/src/views/settings/components/Setting.vue
@ -46,10 +46,10 @@
                  </el-tooltip>
                </span>
                <span class="label-font">{{ setting.label }}</span>
+                <el-tooltip v-if="canBeDeleted(setting.key) && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end">
+                  <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
+                </el-tooltip>
              </el-form-item>
-              <el-tooltip v-if="isMobile && canBeDeleted(setting.key)" :content="$t('settings.removeFromDB')" placement="bottom-end">
-                <el-button icon="el-icon-delete" circle size="mini" class="settings-delete-button" @click="removeSetting(setting.key)"/>
-              </el-tooltip>
            </div>
            <div v-for="subSetting in setting.children" :key="subSetting.key">
              <inputs
@ -103,6 +103,9 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    loading() {
      return this.$store.state.settings.loading
    }
--- a/src/views/settings/components/Upload.vue
+++ b/src/views/settings/components/Upload.vue
@ -43,8 +43,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/WebPush.vue
+++ b/src/views/settings/components/WebPush.vue
@ -25,8 +25,17 @@ export default {
    isMobile() {
      return this.$store.state.app.device === 'mobile'
    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
+    },
    labelWidth() {
-      return this.isMobile ? '120px' : '280px'
+      if (this.isMobile) {
+        return '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
    },
    loading() {
      return this.settings.loading
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="editable-keyword-container">
    <div v-if="setting.key === ':replace'">
      <div v-for="element in data" :key="getId(element)" class="setting-input">
        <el-input :value="getKey(element)" placeholder="pattern" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-for="(icon, index) in data" :key="index" class="mascot-container">
+  <div class="mascot-container">
+    <div v-for="(icon, index) in data" :key="index" class="mascot">
      <div class="icons-container">
        <div class="icon-container">
          <div v-for="{ key, value, id } in icon" :key="id" class="icon-values-container">
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@ -1,6 +1,6 @@
 <template>
-  <div>
-    <div v-for="mascot in data" :key="getId(mascot)" class="mascot-container">
+  <div class="mascot-container">
+    <div v-for="mascot in data" :key="getId(mascot)" class="mascot">
      <el-form-item label="Name" label-width="85px" class="mascot-form-item">
        <div class="mascot-name-container">
          <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
--- a/src/views/settings/components/inputComponents/MultipleSelect.vue
+++ b/src/views/settings/components/inputComponents/MultipleSelect.vue
@ -1,11 +1,12 @@
 <template>
-  <div>
+  <div class="multiple-select-container">
    <el-select
      v-if="setting.key === ':backends'"
      :value="data.value"
      multiple
      filterable
      allow-create
+      class="input"
      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
      <el-option value=":console" label="console"/>
      <el-option value=":ex_syslogger" label="ExSyslogger"/>
@ -17,6 +18,7 @@
      multiple
      filterable
      allow-create
+      class="input"
      @change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
      <el-option value="strip" label="strip"/>
      <el-option value="auto-orient" label="auto-orient"/>
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="rate-limit-container">
    <div v-if="!rateLimitAuthUsers">
      <el-input
        :value="rateLimitAllUsers[0]"
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@ -78,7 +78,7 @@
        </el-tab-pane>
      </el-tabs>
    </div>
-    <div v-if="isMobile">
+    <div v-if="isMobile || isTablet">
      <h1 class="settings-header">{{ $t('settings.settings') }}</h1>
      <div class="settings-header-container">
        <el-select v-model="activeTab" class="settings-menu" placeholder="Select">
@ -216,6 +216,9 @@ export default {
    },
    isMobile() {
      return this.$store.state.app.device === 'mobile'
+    },
+    isTablet() {
+      return this.$store.state.app.device === 'tablet'
    }
  },
  mounted: function() {
@ -224,44 +227,7 @@ export default {
 }
 </script>

-<style rel='stylesheet/scss' lang='scss' scoped>
-.settings-container {
-  .el-tabs {
-    margin-top: 20px
-  }
-}
-.settings-docs-button {
-  width: 163px;
-  text-align: left;
-  padding: 10px;
-}
-.settings-header {
-  margin: 0;
-}
-.settings-header-container {
-  display: flex;
-  height: 36px;
-  justify-content: space-between;
-  align-items: center;
-  margin: 22px 30px 15px 15px;
-}
-
-@media only screen and (min-width: 1824px) {
-  .settings-container {
-    max-width: 1824px;
-    margin: auto;
-  }
-}
-@media only screen and (max-width: 760px),
-  (min-device-width: 768px) and (max-device-width: 1024px) {
-  .settings-header {
-    margin: 7px 10px 15px 10px;
-  }
-  .settings-header-container {
-    margin: 15px;
-  }
-  .settings-menu {
-    width: 163px;
-  }
-}
+<style rel='stylesheet/scss' lang='scss'>
+@import './styles/main';
+@include settings
 </style>
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@ -40,6 +40,9 @@
  .divider.thick-line {
    height: 2px;
  }
+  .editable-keyword-container {
+    width: 100%;
+  }
  .el-form-item .rate-limit {
    margin-right: 0;
  }
@ -153,9 +156,12 @@
    border: 1px solid #eee;
    margin-bottom: 18px;
  }
-  .mascot-container {
+  .mascot {
    margin-bottom: 15px;
  }
+  .mascot-container {
+    width: 100%;
+  }
  .mascot-input {
    margin-bottom: 7px;
  }
@ -166,6 +172,9 @@
  .mascot-name-input {
    margin-right: 10px
  }
+  .multiple-select-container {
+    width: 100%;
+  }
  .name-input {
    width: 30%;
    margin-right: 8px
@ -178,6 +187,7 @@
    display: flex;
    align-items: center;
    margin-bottom: 10px;
+    width: 100%;
  }
  .proxy-url-host-input {
    width: 35%;
@ -202,6 +212,9 @@
      display: flex;
    }
  }
+  .rate-limit-container {
+    width: 100%;
+  }
  .rate-limit-content {
    width: 100%;
  }
@ -214,7 +227,7 @@
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei";
    font-weight: 700;
    height: 36px;
-    width: 240px;
+    width: 100%;
    margin-right: 10px;
  }
  .relays-container {
@ -229,13 +242,33 @@
    width: 47%;
    margin: 0 1% 5px 0
  }
-  .settings-delete-button {
-    margin-left: 5px;
-  }
  .setting-input {
    display: flex;
    margin-bottom: 10px;
  }
+  .settings-container {
+    .el-tabs {
+      margin-top: 20px
+    }
+  }
+  .settings-delete-button {
+    margin-left: 5px;
+  }
+  .settings-docs-button {
+    width: 163px;
+    text-align: left;
+    padding: 10px;
+  }
+  .settings-header {
+    margin: 0;
+  }
+  .settings-header-container {
+    display: flex;
+    height: 36px;
+    justify-content: space-between;
+    align-items: center;
+    margin: 22px 30px 15px 15px;
+  }
  .single-input {
    margin-right: 10px
  }
@ -285,6 +318,10 @@
  }

  @media only screen and (min-width: 1824px) {
+    .settings-container {
+      max-width: 1824px;
+      margin: auto;
+    }
    .submit-button-container {
      max-width: 1637px;
      margin-left: auto;
@ -293,8 +330,7 @@
    }
  }

-  @media only screen and (max-width: 760px),
-    (min-device-width: 768px) and (max-device-width: 1024px) {
+  @media only screen and (max-width:480px) {
    .delete-setting-button {
      margin: 4px 0 0 5px;
      height: 28px;
@ -345,7 +381,8 @@
        padding: 0;
      }
      .settings-delete-button {
-        margin: 4px 15px 0 -5px;
+        margin-top: 4px;
+        float: right;
      }
    }
    .input-row {
@ -353,7 +390,7 @@
      justify-content: space-between;
    }
    .limit-input {
-      width: 40%;
+      width: 45%;
    }
    .proxy-url-input {
      flex-direction: column;
@ -381,12 +418,21 @@
      float: left;
    }
    .scale-input {
-      width: 40%;
+      width: 45%;
    }
    .setting-label {
      display: flex;
      justify-content: space-between;
    }
+    .settings-header {
+      margin: 7px 10px 15px 15px;
+    }
+    .settings-header-container {
+      margin: 15px;
+    }
+    .settings-menu {
+      width: 163px;
+    }
    .socks5-checkbox-container {
      width: 100%;
    }
@ -461,4 +507,45 @@
      margin-right: 8px
    }
  }
+  @media only screen and (max-width:801px) and (min-width: 481px) {
+    .delete-setting-button {
+      margin: 4px 0 0 10px;
+      height: 28px;
+    }
+    .delete-setting-button-container {
+      flex: 0 0 auto;
+    }
+    .description > p {
+      line-height: 18px;
+      margin: 0 15px 10px 0;
+    }
+    .icon-minus-button {
+      width: 28px;
+      height: 28px;
+      margin-top: 4px;
+    }
+    .input {
+      flex: 1 1 auto;
+    }
+    .input-container {
+      .el-form-item__label {
+        span {
+          margin-left: 10px;
+        }
+      }
+    }
+    .input-row {
+      display: flex;
+      justify-content: space-between;
+    }
+    .rate-limit-label-container {
+      width: 250px;
+    }
+    .settings-delete-button {
+      float: right;
+    }
+    .settings-header {
+      margin: 5px 0 0 15px;
+    }
+  }
 }