Clean up dashboard cards

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>
 

src/components/Pages/ManageWiki/Features/EntityMapping.vue

@@ -1,6 +1,7 @@
 <template>
 <div>
-    <v-card elevation="1" class="padding" outlined>
+  <v-col class="card-column">
+    <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,30 +10,32 @@
             on your Wikibase you can create a mapping between them.
         </v-card-text>
         <EntityTable
+            class="padding"
             mappingName="Properties"
             entityName="Property"
             :entityValidation="/^P\d+$/"
             :entitiesList="propertiesList"
             @setEntityMapping="setPropertiesMapping( $event )"
         />
     </v-card>
-
-    <div class="space"></div>
-
-    <v-card elevation="1" class="padding" outlined>
+  </v-col>
+  <v-col class="card-column">
+    <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+$/"
             :entitiesList="itemsList"
             @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>

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>

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 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>
         <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>

src/components/Pages/ManageWiki/TabSettings.vue

@@ -1,5 +1,6 @@
 <template>
-    <div>
+  <div class="content">
+    <div class="tab-container">
       <div v-if="isReady">
         <v-tabs v-model="tab">
             <v-tab>Wiki Settings</v-tab>
@@ -19,6 +20,7 @@
         <v-progress-circular indeterminate color="primary"></v-progress-circular>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -49,5 +51,18 @@ export default {
 </script>
 
 <style scoped>
-
+.content {
+  padding: 8px;
+}
+.tab-container >>> .card-column {
+  padding: 8px;
+}
+.tab-container >>> .v-card {
+  min-width: 288px;
+}
+.tab-container >>> .v-card__actions {
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+}
 </style>

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>
@@ -27,8 +25,7 @@ export default {
 </script>
 
 <style scoped>
-.space {
-  margin-top: 20px;
-  margin-bottom: 20px;
+.v-main >>> .col {
+  max-width: 896px;
 }
 </style>

src/components/Pages/ManageWiki/Tabs/ManageWiki.vue

@@ -5,52 +5,52 @@
         <!--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>
         </v-col>
         <!--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>
@@ -102,5 +102,7 @@ export default {
   .red-notice-highlight{
     background-color: red;
   }
-
+.v-main >>> .col {
+  max-width: 640px;
+}
 </style>

src/router/index.js

@@ -117,7 +117,8 @@ const router = new Router({
       name: 'TabSettings',
       component: TabSettings,
       meta: {
-        requiresAuth: true
+        requiresAuth: true,
+        customLayout: true
       }
     },
     {