feat: dual pane settings view

frontend/src/css/dashboard.css

@@ -1,8 +1,29 @@
 .dashboard {
-  max-width: 600px;
   margin: 1em 0;
 }
 
+.dashboard .row {
+  display: flex;
+  margin: 0 -.5em;
+  flex-wrap: wrap;
+}
+
+.dashboard .row .column {
+  display: flex;
+  padding: 0 .5em;
+  width: 50%;
+}
+
+.dashboard .row .column .card {
+  flex-grow: 1;
+}
+
+@media(max-width: 1200px) {
+  .dashboard .row .column {
+    width: 100%;
+  }
+}
+
 a {
   color: inherit
 }
@@ -92,7 +113,7 @@ table tr>*:last-child {
 
 .card {
   position: relative;
-  margin: .5rem 0 1rem 0;
+  margin: 0 0 1rem 0;
   background-color: #fff;
   border-radius: 2px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
@@ -151,6 +172,7 @@ table tr>*:last-child {
 
 .card .card-content.full {
   padding-bottom: 0;
+  overflow: auto;
 }
 
 .card h2 {

frontend/src/views/settings/Global.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="dashboard" v-if="settings !== null">
+  <div class="row" v-if="settings !== null">
+    <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
           <h2>{{ $t('settings.globalSettings') }}</h2>
@@ -52,7 +53,9 @@
           <input class="button button--flat" type="submit" :value="$t('buttons.update')">
         </div>
       </form>
+    </div>
 
+    <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
           <h2>{{ $t('settings.userDefaults') }}</h2>
@@ -68,7 +71,9 @@
           <input class="button button--flat" type="submit" :value="$t('buttons.update')">
         </div>
       </form>
+    </div>
 
+    <div class="column">
       <form v-if="isExecEnabled" class="card" @submit.prevent="save">
         <div class="card-title">
           <h2>{{ $t('settings.commandRunner') }}</h2>
@@ -98,6 +103,7 @@
         </div>
       </form>
     </div>
+  </div>
 </template>
 
 <script>

frontend/src/views/settings/Profile.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="dashboard">
+  <div class="row">
+    <div class="column">
       <form class="card" @submit="updateSettings">
         <div class="card-title">
           <h2>{{ $t('settings.profileSettings') }}</h2>
@@ -16,7 +17,9 @@
           <input class="button button--flat" type="submit" :value="$t('buttons.update')">
         </div>
       </form>
+    </div>
 
+    <div class="column">
       <form class="card" v-if="!user.lockPassword" @submit="updatePassword">
         <div class="card-title">
           <h2>{{ $t('settings.changePassword') }}</h2>
@@ -32,6 +35,7 @@
         </div>
       </form>
     </div>
+  </div>
 </template>
 
 <script>

frontend/src/views/settings/Shares.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="row">
+    <div class="column">
       <div class="card">
         <div class="card-title">
           <h2>{{ $t('settings.shareManagement') }}</h2>
@@ -37,6 +39,8 @@
           </table>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script>

frontend/src/views/settings/User.vue

@@ -1,5 +1,6 @@
 <template>
-  <div>
+  <div class="row">
+    <div class="column">
       <form v-if="loaded" @submit="save" class="card">
         <div class="card-title">
           <h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
@@ -24,6 +25,7 @@
             :value="$t('buttons.save')">
         </div>
       </form>
+    </div>
 
     <div v-if="$store.state.show === 'deleteUser'" class="card floating">
       <div class="card-content">

frontend/src/views/settings/Users.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="row">
+    <div class="column">
       <div class="card">
         <div class="card-title">
           <h2>{{ $t('settings.users') }}</h2>
@@ -25,6 +27,8 @@
           </table>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script>