From c3f5513025b7b382e0052a5fd75221de82ccdbd9 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 18 Nov 2024 10:52:24 +0000
Subject: [PATCH 1/4] Clean up dashboard cards

---
 .../Pages/ManageWiki/Cards/Delete.vue         | 19 ++--
 .../ManageWiki/Features/EntityMapping.vue     | 15 ++--
 .../Pages/ManageWiki/Features/EntityTable.vue |  4 +-
 .../Pages/ManageWiki/Features/Lexeme.vue      | 88 ++++++++++---------
 .../Pages/ManageWiki/TabSettings.vue          | 15 +++-
 .../Pages/ManageWiki/Tabs/ManageFeatures.vue  |  9 --
 6 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Cards/Delete.vue b/src/components/Pages/ManageWiki/Cards/Delete.vue
index 04af38d9..d1c76aeb 100644
--- a/src/components/Pages/ManageWiki/Cards/Delete.vue
+++ b/src/components/Pages/ManageWiki/Cards/Delete.vue
@@ -1,12 +1,15 @@
 <template>
-  <v-card class="pa-4" color="#fad1d0">
-    <p class="text-h5 ma-0">Delete Wikibase Instance</p>
-    <p class="text-sm-body-2">
-      Selecting Confirm Deletion will permanently delete the selected Wikibase instance. All data associated <br/>
-      with this instance will be purged permanently in 30 days. The domain will <strong>not</strong> be available for reuse.
-    </p>
-    <v-btn @click="expandDelete = true" color="red" class="text-sm-button white--text">Delete site</v-btn>
-    <ConfirmDelete v-if="expandDelete" :wiki-id=this.wikiId @close="expandDelete=false"/>
+  <v-card color="#fad1d0">
+    <v-card-title>Delete Wikibase Instance</v-card-title>
+    <v-card-text>
+      This will permanently delete the selected Wikibase instance.
+      All data associated with this instance will be purged permanently in 30 days.
+      The domain will <strong>not</strong> be available for reuse.
+    </v-card-text>
+    <v-card-actions>
+      <v-btn @click="expandDelete = true" color="red" class="text-sm-button white--text">Delete site</v-btn>
+      <ConfirmDelete v-if="expandDelete" :wiki-id=this.wikiId @close="expandDelete=false"/>
+    </v-card-actions>
   </v-card>
 </template>
 
diff --git a/src/components/Pages/ManageWiki/Features/EntityMapping.vue b/src/components/Pages/ManageWiki/Features/EntityMapping.vue
index 8d3d7f14..b21caffb 100644
--- a/src/components/Pages/ManageWiki/Features/EntityMapping.vue
+++ b/src/components/Pages/ManageWiki/Features/EntityMapping.vue
@@ -1,6 +1,7 @@
 <template>
 <div>
-    <v-card elevation="1" class="padding" outlined>
+  <v-col>
+    <v-card>
         <v-card-title>Mapping Properties to Wikidata</v-card-title>
         <v-card-text>
             Some tools assume properties with special meanings under certain identifiers.
@@ -9,6 +10,7 @@
             on your Wikibase you can create a mapping between them.
         </v-card-text>
         <EntityTable
+            class="padding"
             mappingName="Properties"
             entityName="Property"
             :entityValidation="/^P\d+$/"
@@ -16,16 +18,16 @@
             @setEntityMapping="setPropertiesMapping( $event )"
         />
     </v-card>
-
-    <div class="space"></div>
-
-    <v-card elevation="1" class="padding" outlined>
+  </v-col>
+  <v-col>
+    <v-card>
         <v-card-title>Mapping Items to Wikidata</v-card-title>
         <v-card-text>
             Some tools assume items with special meanings under certain identifiers.
             Here, you can map a item on your Wikibase instance to an item on Wikidata.
         </v-card-text>
         <EntityTable
+            class="padding"
             mappingName="Items"
             entityName="Item"
             :entityValidation="/^Q\d+$/"
@@ -33,6 +35,7 @@
             @setEntityMapping="setItemsMapping( $event )"
         />
     </v-card>
+  </v-col>
 </div>
 </template>
 
@@ -74,6 +77,6 @@ export default {
   margin-bottom: 20px;
 }
 .padding {
-  padding: 15px;
+  padding: 0 16px 16px 16px;
 }
 </style>
diff --git a/src/components/Pages/ManageWiki/Features/EntityTable.vue b/src/components/Pages/ManageWiki/Features/EntityTable.vue
index 8d60c7cd..d08b5bda 100644
--- a/src/components/Pages/ManageWiki/Features/EntityTable.vue
+++ b/src/components/Pages/ManageWiki/Features/EntityTable.vue
@@ -28,7 +28,7 @@
 
   <v-dialog v-model="dialog" max-width="500px">
     <template v-slot:activator="{ on, attrs }">
-        <v-btn color="primary" dark class="space" v-bind="attrs" v-on="on">
+        <v-btn class="space" v-bind="attrs" v-on="on">
             Add New Mapping
         </v-btn>
     </template>
@@ -188,6 +188,6 @@ export default {
 
 <style lang="css" scoped>
 .space {
-  margin: 20px;
+  margin-top: 24px;
 }
 </style>
diff --git a/src/components/Pages/ManageWiki/Features/Lexeme.vue b/src/components/Pages/ManageWiki/Features/Lexeme.vue
index d025bffc..080310ab 100644
--- a/src/components/Pages/ManageWiki/Features/Lexeme.vue
+++ b/src/components/Pages/ManageWiki/Features/Lexeme.vue
@@ -1,52 +1,54 @@
 <template>
-  <v-form ref="form" v-model="valid" @submit="handleSubmit" id="formLexeme">
-    <v-card elevation="1" class="padding" outlined>
-      <v-card-title>Lexeme</v-card-title>
-      <v-card-text>
-      Lexeme allows modeling of lexical entities such as words and phrases.<br>
-      <span v-if="isEnabled">If you turn this off, and confirm the warning, lexeme entities used on your wikibase will no longer be accessible, but will still appear as broken pages. You may want to delete all of your lexeme entities first.</span>
-      </v-card-text>
-      <v-card-actions>
-        <v-btn @click="showModal" color="red" v-if="isEnabled">Disable Lexeme</v-btn>
-        <v-btn v-else type="submit">Enable Lexeme</v-btn>
-      </v-card-actions>
-    </v-card>
-    <v-dialog v-model="dialog" width="500" v-if="dialog">
-      <v-card>
-        <v-toolbar flat dark color="primary">
-            <v-toolbar-title>Change Lexeme settings</v-toolbar-title>
-            <v-spacer></v-spacer>
-            <v-btn icon dark @click="hideModal">
-              <v-icon>mdi-close</v-icon>
-            </v-btn>
-          </v-toolbar>
-        <br />
-        <v-card-text>
-          <span v-if="isEnabled">If you turn this off, and confirm the warning, lexeme entities used on your wikibase will no longer be accessible, but will still appear as broken pages. You may want to delete all of your lexeme entities first.</span>
-        </v-card-text>
+  <v-col>
+    <v-form ref="form" v-model="valid" @submit="handleSubmit" id="formLexeme">
+      <v-card class="padding">
+        <v-card-title>Lexeme</v-card-title>
         <v-card-text>
-          <v-text-field
-            :label="`Please type ${userConfirmationString} to confirm`"
-            :rules="[rules.match]"
-          > {</v-text-field>
+        Lexeme allows modeling of lexical entities such as words and phrases.<br>
+        <span v-if="isEnabled">If you turn this off, and confirm the warning, lexeme entities used on your wikibase will no longer be accessible, but will still appear as broken pages. You may want to delete all of your lexeme entities first.</span>
         </v-card-text>
-        <v-divider>
-        }</v-divider>
-
         <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-tooltip top>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn v-bind="attrs" v-on="on" color="primary" type="submit" form="formLexeme">
-                I understand
-              </v-btn>
-            </template>
-            <span>It may take up to 10 seconds for changes to be reflected on your wiki</span>
-          </v-tooltip>
+          <v-btn @click="showModal" color="red" class="white--text" v-if="isEnabled">Disable Lexeme</v-btn>
+          <v-btn v-else type="submit">Enable Lexeme</v-btn>
         </v-card-actions>
       </v-card>
-    </v-dialog>
-  </v-form>
+      <v-dialog v-model="dialog" width="500" v-if="dialog">
+        <v-card>
+          <v-toolbar flat dark color="primary">
+              <v-toolbar-title>Change Lexeme settings</v-toolbar-title>
+              <v-spacer></v-spacer>
+              <v-btn icon dark @click="hideModal">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-toolbar>
+          <br />
+          <v-card-text>
+            <span v-if="isEnabled">If you turn this off, and confirm the warning, lexeme entities used on your wikibase will no longer be accessible, but will still appear as broken pages. You may want to delete all of your lexeme entities first.</span>
+          </v-card-text>
+          <v-card-text>
+            <v-text-field
+              :label="`Please type ${userConfirmationString} to confirm`"
+              :rules="[rules.match]"
+            > {</v-text-field>
+          </v-card-text>
+          <v-divider>
+          }</v-divider>
+
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-tooltip top>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn v-bind="attrs" v-on="on" color="primary" type="submit" form="formLexeme">
+                  I understand
+                </v-btn>
+              </template>
+              <span>It may take up to 10 seconds for changes to be reflected on your wiki</span>
+            </v-tooltip>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-form>
+  </v-col>
 </template>
 
 <script>
diff --git a/src/components/Pages/ManageWiki/TabSettings.vue b/src/components/Pages/ManageWiki/TabSettings.vue
index af88d553..f297ee29 100644
--- a/src/components/Pages/ManageWiki/TabSettings.vue
+++ b/src/components/Pages/ManageWiki/TabSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="tab-container">
       <div v-if="isReady">
         <v-tabs v-model="tab">
             <v-tab>Wiki Settings</v-tab>
@@ -49,5 +49,16 @@ export default {
 </script>
 
 <style scoped>
-
+.tab-container >>> .col {
+  max-width: 740px;
+  padding: 12px;
+}
+.tab-container >>> .v-card {
+  min-width: 288px;
+}
+.tab-container >>> .v-card__actions {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+}
 </style>
diff --git a/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue b/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
index 33b124f9..ab5d375c 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
@@ -1,8 +1,6 @@
 <template>
   <v-main>
-    <div class="space"></div>
     <EntityMapping :wikiId="wikiId"/>
-    <div class="space"></div>
     <Lexeme :wikiId="wikiId" />
   </v-main>
 </template>
@@ -25,10 +23,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.space {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-</style>

From 7f3c7c51d842f81ffdb1978953f22fbc40d105b3 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 18 Nov 2024 11:36:47 +0000
Subject: [PATCH 2/4] Update card padding

---
 .../ManageWiki/Features/EntityMapping.vue      |  4 ++--
 .../Pages/ManageWiki/Features/Lexeme.vue       |  2 +-
 .../Pages/ManageWiki/TabSettings.vue           |  7 ++++++-
 .../Pages/ManageWiki/Tabs/ManageWiki.vue       | 18 +++++++++---------
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/Pages/ManageWiki/Features/EntityMapping.vue b/src/components/Pages/ManageWiki/Features/EntityMapping.vue
index b21caffb..b62a1ff3 100644
--- a/src/components/Pages/ManageWiki/Features/EntityMapping.vue
+++ b/src/components/Pages/ManageWiki/Features/EntityMapping.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-  <v-col>
+  <v-col class="card-column">
     <v-card>
         <v-card-title>Mapping Properties to Wikidata</v-card-title>
         <v-card-text>
@@ -19,7 +19,7 @@
         />
     </v-card>
   </v-col>
-  <v-col>
+  <v-col class="card-column">
     <v-card>
         <v-card-title>Mapping Items to Wikidata</v-card-title>
         <v-card-text>
diff --git a/src/components/Pages/ManageWiki/Features/Lexeme.vue b/src/components/Pages/ManageWiki/Features/Lexeme.vue
index 080310ab..7bcf92ba 100644
--- a/src/components/Pages/ManageWiki/Features/Lexeme.vue
+++ b/src/components/Pages/ManageWiki/Features/Lexeme.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-col>
+  <v-col class="card-column">
     <v-form ref="form" v-model="valid" @submit="handleSubmit" id="formLexeme">
       <v-card class="padding">
         <v-card-title>Lexeme</v-card-title>
diff --git a/src/components/Pages/ManageWiki/TabSettings.vue b/src/components/Pages/ManageWiki/TabSettings.vue
index f297ee29..d678917d 100644
--- a/src/components/Pages/ManageWiki/TabSettings.vue
+++ b/src/components/Pages/ManageWiki/TabSettings.vue
@@ -49,9 +49,11 @@ export default {
 </script>
 
 <style scoped>
+.tab-container >>> .card-column {
+  padding: 8px;
+}
 .tab-container >>> .col {
   max-width: 740px;
-  padding: 12px;
 }
 .tab-container >>> .v-card {
   min-width: 288px;
@@ -61,4 +63,7 @@ export default {
   padding-right: 16px;
   padding-bottom: 16px;
 }
+.v-tabs {
+  padding-bottom: 4px;
+}
 </style>
diff --git a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
index 3230dbcb..48e1e9ac 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
@@ -5,22 +5,22 @@
         <!--Col 1-->
         <v-col>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <Details :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <Skin :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <Logo :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <QuestyCaptcha :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
@@ -28,29 +28,29 @@
         <!--Col 2-->
         <v-col>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <Registration :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <Wikibase :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
           <v-row>
-            <v-col>
+            <v-col class="card-column">
               <EntityImport :wikiId="this.wikiId"/>
             </v-col>
           </v-row>
         </v-col>
       </v-row>
       <v-row>
-        <v-col>
+        <v-col class="card-column">
           <Delete :wikiId="this.wikiId"/>
         </v-col>
       </v-row>
       <v-row v-if="wikiId == 0">
-        <v-col>
+        <v-col class="card-column">
           <v-card>
             <v-toolbar dark color="primary">
               <v-toolbar-title>Wiki Management</v-toolbar-title>

From 5305fc682fa8c2af9090082c02f7c0add76d38e9 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 19 Nov 2024 13:44:35 +0000
Subject: [PATCH 3/4] Update padding

---
 src/components/Pages/ManageWiki/TabSettings.vue | 8 +++++---
 src/router/index.js                             | 3 ++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/ManageWiki/TabSettings.vue b/src/components/Pages/ManageWiki/TabSettings.vue
index d678917d..2275683f 100644
--- a/src/components/Pages/ManageWiki/TabSettings.vue
+++ b/src/components/Pages/ManageWiki/TabSettings.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="content">
     <div class="tab-container">
       <div v-if="isReady">
         <v-tabs v-model="tab">
@@ -19,6 +20,7 @@
         <v-progress-circular indeterminate color="primary"></v-progress-circular>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -49,6 +51,9 @@ export default {
 </script>
 
 <style scoped>
+.content {
+  padding: 8px;
+}
 .tab-container >>> .card-column {
   padding: 8px;
 }
@@ -63,7 +68,4 @@ export default {
   padding-right: 16px;
   padding-bottom: 16px;
 }
-.v-tabs {
-  padding-bottom: 4px;
-}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 5a099b8c..21eb0315 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -117,7 +117,8 @@ const router = new Router({
       name: 'TabSettings',
       component: TabSettings,
       meta: {
-        requiresAuth: true
+        requiresAuth: true,
+        customLayout: true
       }
     },
     {

From 4c3f33e6ae8619eb86411e2cc3433e7a75a6e7c5 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 27 Nov 2024 12:04:27 +0000
Subject: [PATCH 4/4] Update max-width for cards

---
 src/components/Pages/ManageWiki/TabSettings.vue         | 3 ---
 src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue | 6 ++++++
 src/components/Pages/ManageWiki/Tabs/ManageWiki.vue     | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/ManageWiki/TabSettings.vue b/src/components/Pages/ManageWiki/TabSettings.vue
index 2275683f..8bcee366 100644
--- a/src/components/Pages/ManageWiki/TabSettings.vue
+++ b/src/components/Pages/ManageWiki/TabSettings.vue
@@ -57,9 +57,6 @@ export default {
 .tab-container >>> .card-column {
   padding: 8px;
 }
-.tab-container >>> .col {
-  max-width: 740px;
-}
 .tab-container >>> .v-card {
   min-width: 288px;
 }
diff --git a/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue b/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
index ab5d375c..46e2b9b5 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageFeatures.vue
@@ -23,3 +23,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.v-main >>> .col {
+  max-width: 896px;
+}
+</style>
diff --git a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
index 48e1e9ac..6b851623 100644
--- a/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
+++ b/src/components/Pages/ManageWiki/Tabs/ManageWiki.vue
@@ -102,5 +102,7 @@ export default {
   .red-notice-highlight{
     background-color: red;
   }
-
+.v-main >>> .col {
+  max-width: 640px;
+}
 </style>