From 02d7c71d1fbde55115bbe93a7a8e5778a0a68539 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Oct 2020 09:51:23 +0200
Subject: [PATCH] Fix margins and paddings and use full viewport width

---
 settings/ui/components/SettingsApp.vue        | 62 ++++++++++---------
 settings/ui/components/SettingsBundle.vue     |  2 +-
 .../ui/components/settings/SettingNumber.vue  |  4 +-
 .../ui/components/settings/SettingString.vue  |  4 +-
 4 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/settings/ui/components/SettingsApp.vue b/settings/ui/components/SettingsApp.vue
index 441a7d3f3..c368d9393 100644
--- a/settings/ui/components/SettingsApp.vue
+++ b/settings/ui/components/SettingsApp.vue
@@ -1,38 +1,40 @@
 <template>
-  <div>
-    <div v-if="initialized" class="uk-width-3-4@m uk-container uk-padding">
-      <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
-        <p class="uk-flex uk-flex-middle">
-          <oc-icon name="info" class="uk-margin-xsmall-right" />
-          <translate>No settings available</translate>
-        </p>
-      </oc-alert>
-      <template v-else>
-        <template v-if="selectedExtensionName">
-          <div class="uk-flex uk-flex-between uk-flex-middle">
-            <h1 class="oc-page-title">
-              {{ selectedExtensionName }}
-            </h1>
+  <div class="oc-p">
+    <div class="uk-flex uk-flex-column" id="settings-app">
+      <template v-if="initialized">
+        <oc-alert v-if="extensions.length === 0" variation="primary" no-close>
+          <p class="uk-flex uk-flex-middle">
+            <oc-icon name="info" class="oc-mr-s" />
+            <translate>No settings available</translate>
+          </p>
+        </oc-alert>
+        <template v-else>
+          <template v-if="selectedExtensionName">
+            <div class="uk-flex uk-flex-between uk-flex-middle">
+              <h1 class="oc-page-title">
+                {{ selectedExtensionName }}
+              </h1>
+            </div>
+            <hr />
+          </template>
+          <template v-if="settingsValuesLoaded">
+            <settings-bundle
+              v-for="bundle in selectedBundles"
+              :key="'bundle-' + bundle.id"
+              :bundle="bundle"
+              class="oc-mt"
+            />
+          </template>
+          <div class="oc-mt" v-else>
+            <oc-loader :aria-label="$gettext('Loading personal settings')" />
+            <oc-alert :aria-hidden="true" varition="primary" no-close>
+              <p v-translate>Loading personal settings...</p>
+            </oc-alert>
           </div>
-          <hr />
         </template>
-        <template v-if="settingsValuesLoaded">
-          <settings-bundle
-            v-for="bundle in selectedBundles"
-            :key="'bundle-' + bundle.id"
-            :bundle="bundle"
-            class="uk-margin-top"
-          />
-        </template>
-        <div class="uk-margin-top" v-else>
-          <oc-loader :aria-label="$gettext('Loading personal settings')" />
-          <oc-alert :aria-hidden="true" varition="primary" no-close>
-            <p v-translate>Loading personal settings...</p>
-          </oc-alert>
-        </div>
       </template>
+      <oc-loader v-else />
     </div>
-    <oc-loader v-else />
   </div>
 </template>
 
diff --git a/settings/ui/components/SettingsBundle.vue b/settings/ui/components/SettingsBundle.vue
index b35b8d608..eec2d9376 100644
--- a/settings/ui/components/SettingsBundle.vue
+++ b/settings/ui/components/SettingsBundle.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="uk-width-1-1 uk-width-2-3@m uk-width-1-2@l">
-    <div class="uk-text-bold uk-margin-small-bottom">
+    <div class="oc-text-bold oc-mb-s">
       <translate>{{ bundle.displayName }}</translate>
     </div>
     <oc-grid gutter="small">
diff --git a/settings/ui/components/settings/SettingNumber.vue b/settings/ui/components/settings/SettingNumber.vue
index 95822a15e..d159ceb1f 100644
--- a/settings/ui/components/settings/SettingNumber.vue
+++ b/settings/ui/components/settings/SettingNumber.vue
@@ -12,10 +12,10 @@
       />
     </div>
     <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
         <translate>Cancel</translate>
       </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
         <translate>Save</translate>
       </oc-button>
     </div>
diff --git a/settings/ui/components/settings/SettingString.vue b/settings/ui/components/settings/SettingString.vue
index 75d3d48c7..49e605125 100644
--- a/settings/ui/components/settings/SettingString.vue
+++ b/settings/ui/components/settings/SettingString.vue
@@ -10,10 +10,10 @@
       />
     </div>
     <div v-if="isChanged">
-      <oc-button @click="cancel" class="uk-margin-xsmall-left">
+      <oc-button @click="cancel" class="oc-ml-s">
         <translate>Cancel</translate>
       </oc-button>
-      <oc-button @click="applyValue" class="uk-margin-xsmall-left" variation="primary">
+      <oc-button @click="applyValue" class="oc-ml-s" variation="primary">
         <translate>Save</translate>
       </oc-button>
     </div>