From 0f4e609e0be12cbb08e096ef29e629feb215078b Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 6 Feb 2020 21:54:58 +0300
Subject: [PATCH] Add styles for buttons in mobile UI

---
 src/views/settings/components/Inputs.vue      |  4 +--
 .../inputComponents/EditableKeywordInput.vue  | 15 ++++----
 .../components/inputComponents/IconsInput.vue | 11 ++++--
 .../inputComponents/MascotsInput.vue          |  9 +++--
 .../inputComponents/RateLimitInput.vue        |  7 ++--
 src/views/settings/styles/main.scss           | 35 ++++++++++++++++---
 6 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue
index ae3ebb8c..feec9fda 100644
--- a/src/views/settings/components/Inputs.vue
+++ b/src/views/settings/components/Inputs.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="input-container">
-    <el-form-item :label-width="customLabelWidth" :class="labelClass">
+    <el-form-item :label-width="customLabelWidth" :class="labelClass" class="settings-input">
       <span slot="label">
         {{ setting.label }}
         <el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
@@ -21,7 +21,7 @@
         :value="inputValue === null ? 0 : inputValue"
         :placeholder="setting.suggestions ? setting.suggestions[0].toString() : null"
         :min="0"
-        size="large"
+        :size="isDesktop ? 'large' : 'small'"
         @change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
       <el-select
         v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes(false))"
diff --git a/src/views/settings/components/inputComponents/EditableKeywordInput.vue b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
index 9489c685..0f5eb0d1 100644
--- a/src/views/settings/components/inputComponents/EditableKeywordInput.vue
+++ b/src/views/settings/components/inputComponents/EditableKeywordInput.vue
@@ -4,25 +4,25 @@
       <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)"/> :
         <el-input :value="getValue(element)" placeholder="replacement" class="value-input" @input="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
     <div v-else-if="editableKeywordWithInteger">
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-input-number :value="getValue(element)" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
     <div v-else>
       <div v-for="element in data" :key="getId(element)" class="setting-input">
         <el-input :value="getKey(element)" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', element)"/> :
         <el-select :value="getValue(element)" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', element)"/>
-        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteEditableKeywordRow(element)"/>
       </div>
-      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
   </div>
 </template>
@@ -53,6 +53,9 @@ export default {
   computed: {
     editableKeywordWithInteger() {
       return Array.isArray(this.setting.type) && this.setting.type.includes('keyword') && this.setting.type.includes('integer')
+    },
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
     }
   },
   methods: {
diff --git a/src/views/settings/components/inputComponents/IconsInput.vue b/src/views/settings/components/inputComponents/IconsInput.vue
index ac994fe1..f9c48608 100644
--- a/src/views/settings/components/inputComponents/IconsInput.vue
+++ b/src/views/settings/components/inputComponents/IconsInput.vue
@@ -8,16 +8,16 @@
             <el-input :value="value" placeholder="value" class="icon-value-input" @input="parseIcons($event, 'value', index, id)"/>
           </div>
         </div>
-        <el-button icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle class="icon-minus-button" @click="deleteIcondRow(index)"/>
       </div>
       <div class="icons-button-container">
-        <el-button icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addValueToIcons(index)"/>
         <span class="icons-button-desc">Add another `key - value` pair to this icon</span>
       </div>
       <div class="line"/>
     </div>
     <div class="icons-button-container">
-      <el-button icon="el-icon-plus" circle @click="addIconToIcons"/>
+      <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addIconToIcons"/>
       <span class="icons-button-desc">Add another icon configuration</span>
     </div>
   </div>
@@ -46,6 +46,11 @@ export default {
       }
     }
   },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     addIconToIcons() {
       const updatedValue = [...this.data, [{ key: '', value: '', id: this.generateID() }]]
diff --git a/src/views/settings/components/inputComponents/MascotsInput.vue b/src/views/settings/components/inputComponents/MascotsInput.vue
index 96ec5ca7..b4ad6980 100644
--- a/src/views/settings/components/inputComponents/MascotsInput.vue
+++ b/src/views/settings/components/inputComponents/MascotsInput.vue
@@ -4,7 +4,7 @@
       <el-form-item label="Name" label-width="100px">
         <div class="mascot-name-container">
           <el-input :value="getName(mascot)" placeholder="Name" class="mascot-name-input" @input="parseMascots($event, 'name', mascot)"/>
-          <el-button icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
+          <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="deleteMascotsRow(mascot)"/>
         </div>
       </el-form-item>
       <el-form-item label="URL" label-width="100px">
@@ -14,7 +14,7 @@
         <el-input :value="getMimeType(mascot)" placeholder="Mime type" class="mascot-input" @input="parseMascots($event, 'mimeType', mascot)"/>
       </el-form-item>
     </div>
-    <el-button icon="el-icon-plus" circle @click="addRowToMascots"/>
+    <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="addRowToMascots"/>
   </div>
 </template>
 
@@ -41,6 +41,11 @@ export default {
       }
     }
   },
+  computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    }
+  },
   methods: {
     addRowToMascots() {
       const updatedValue = [...this.data, { '': { ':url': '', ':mime_type': '', id: this.generateID() }}]
diff --git a/src/views/settings/components/inputComponents/RateLimitInput.vue b/src/views/settings/components/inputComponents/RateLimitInput.vue
index 358dcdf6..5328b347 100644
--- a/src/views/settings/components/inputComponents/RateLimitInput.vue
+++ b/src/views/settings/components/inputComponents/RateLimitInput.vue
@@ -13,7 +13,7 @@
         class="limit-input"
         @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
       <div class="limit-button-container">
-        <el-button icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-plus" circle @click="toggleLimits([['', ''], ['', '']], setting.key)"/>
         <p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
       </div>
     </div>
@@ -45,7 +45,7 @@
           @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
       </el-form-item>
       <div class="limit-button-container">
-        <el-button icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
+        <el-button :size="isDesktop ? 'medium' : 'mini'" icon="el-icon-minus" circle @click="toggleLimits(['', ''], setting.key)"/>
         <p class="expl limit-expl">Set limit for all users</p>
       </div>
     </div>
@@ -76,6 +76,9 @@ export default {
     }
   },
   computed: {
+    isDesktop() {
+      return this.$store.state.app.device === 'desktop'
+    },
     rateLimitAllUsers() {
       return this.data[this.setting.key] ? this.data[this.setting.key] : ['', '']
     },
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index e644a9da..66a0d2a8 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -206,14 +206,16 @@
   @media only screen and (max-width: 760px),
     (min-device-width: 768px) and (max-device-width: 1024px) {
     .input-container {
-      .el-form-item {
-        margin: 0 0 15px 0;
-      }
+      width: 100%;
       .settings-delete-button {
         margin: 4px 7px 0 7px;
       }
     }
-
+    .settings-input {
+      display: inline-block;
+      width: 90%;
+      margin: 0 0 10px 0;
+    }
     .el-input__inner {
     padding: 0 5px 0 5px
     }
@@ -229,6 +231,31 @@
     .el-select__tags {
       overflow: hidden;
     }
+    .expl, .expl > p {
+      line-height: 16px;
+    }
+    .icon-key-input {
+      width: 40%;
+      margin-right: 4px
+    }
+    .icon-minus-button {
+      width: 28px;
+      height: 28px;
+      margin-top: 4px;
+    }
+    .icon-values-container {
+      margin: 0 7px 7px 0;
+    }
+    .icon-value-input {
+      width: 60%;
+      margin-left: 4px;
+    }
+    .icons-button-container {
+      line-height: 24px;
+    }
+    .line {
+      margin-bottom: 10px;
+    }
     .name-input {
       width: 40%;
       margin-right: 5px