Apply minor style changes and improvements to modals.

knadh · Oct 22, 2024 · b2866b1 · b2866b1
1 parent 74e77bd
commit b2866b1
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 55 deletions.
diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -451,15 +451,24 @@ body.is-noscroll {
 }
 .modal-content, .modal.dialog .modal-card {
   background: $white;
-  box-shadow: 2px 2px 3px #e4e4e4;
-  border: 1px solid #e5e5e5;
+  box-shadow: 0 0 10px #e4e4e4;
+  border: 1px solid #eee;
   padding: 0;
+  border-radius: 5px;
 }
 .modal-card-head {
   display: block;
+  border-bottom: 0;
+}
+.modal-card-body {
+  padding: 30px 20px;
 }
 .modal .modal-card-foot {
   justify-content: flex-end;
+  border-top: 0;
+}
+.modal .modal-card-foot button {
+  flex-grow: 1;
 }
 .modal .modal-close.is-large {
   display: none;

diff --git a/frontend/src/views/ListForm.vue b/frontend/src/views/ListForm.vue
@@ -23,7 +23,7 @@
         </b-field>
 
         <b-field :label="$t('lists.type')" label-position="on-border" :message="$t('lists.typeHelp')">
-          <b-select v-model="form.type" name="type" :placeholder="$t('lists.typeHelp')" required>
+          <b-select v-model="form.type" name="type" :placeholder="$t('lists.typeHelp')" required expanded>
             <option value="private">
               {{ $t('lists.types.private') }}
             </option>
@@ -34,7 +34,7 @@
         </b-field>
 
         <b-field :label="$t('lists.optin')" label-position="on-border" :message="$t('lists.optinHelp')">
-          <b-select v-model="form.optin" name="optin" placeholder="Opt-in type" required>
+          <b-select v-model="form.optin" name="optin" placeholder="Opt-in type" required expanded>
             <option value="single">
               {{ $t('lists.optins.single') }}
             </option>

diff --git a/frontend/src/views/SubscriberForm.vue b/frontend/src/views/SubscriberForm.vue
@@ -45,25 +45,26 @@
             </b-field>
           </div>
         </div>
-
-        <list-selector :label="$t('subscribers.lists')" :placeholder="$t('subscribers.listsPlaceholder')"
-          :message="$t('subscribers.listsHelp')" v-model="form.lists" :selected="form.lists" :all="lists.results" />
-        <div class="columns mb-5">
-          <div class="column is-7">
-            <b-field :message="$t('subscribers.preconfirmHelp')">
-              <b-checkbox v-model="form.preconfirm" :native-value="true" :disabled="!hasOptinList">
-                {{ $t('subscribers.preconfirm') }}
-              </b-checkbox>
-            </b-field>
-          </div>
-          <div v-if="$can('subscribers:manage') && isEditing" class="column is-5 has-text-right">
-            <a href="#" @click.prevent="sendOptinConfirmation" :class="{ 'is-disabled': !hasOptinList }">
-              <b-icon icon="email-outline" size="is-small" />
-              {{ $t('subscribers.sendOptinConfirm') }}</a>
+        <div class="box">
+          <list-selector :label="$t('subscribers.lists')" :placeholder="$t('subscribers.listsPlaceholder')"
+            :message="$t('subscribers.listsHelp')" v-model="form.lists" :selected="form.lists" :all="lists.results" />
+          <div class="columns mb-5">
+            <div class="column is-7">
+              <b-field :message="$t('subscribers.preconfirmHelp')">
+                <b-checkbox v-model="form.preconfirm" :native-value="true" :disabled="!hasOptinList">
+                  {{ $t('subscribers.preconfirm') }}
+                </b-checkbox>
+              </b-field>
+            </div>
+            <div v-if="$can('subscribers:manage') && isEditing" class="column is-5 has-text-right">
+              <a href="#" @click.prevent="sendOptinConfirmation" :class="{ 'is-disabled': !hasOptinList }">
+                <b-icon icon="email-outline" size="is-small" />
+                {{ $t('subscribers.sendOptinConfirm') }}</a>
+            </div>
           </div>
         </div>
 
-        <b-field :message="$t('subscribers.attribsHelp') + ' ' + egAttribs" class="mb-5">
+        <b-field :message="$t('subscribers.attribsHelp') + ' ' + egAttribs" class="mt-5">
           <div>
             <h5>{{ $t('subscribers.attribs') }}</h5>
             <b-input v-model="form.strAttribs" name="attribs" type="textarea" />
@@ -73,41 +74,43 @@
           </div>
         </b-field>
 
-        <div class="mb-5 mt-6" v-if="data.lists">
+        <div class="mb-5 mt-5" v-if="data.lists">
           <h5>{{ $tc('globals.terms.subscriptions', 2) }} ({{ data.lists.length }})</h5>
-          <b-table :data="data.lists" hoverable default-sort="createdAt" class="subscriptions">
-            <b-table-column v-slot="props" field="name" :label="$tc('globals.terms.list', 1)">
-              <div>
-                <router-link :to="`/lists/${props.row.id}`">
-                  {{ props.row.name }}
-                </router-link>
-                <br />
-                <b-tag :class="props.row.optin" :data-cy="`optin-${props.row.optin}`">
-                  <b-icon :icon="props.row.optin === 'double' ? 'account-check-outline' : 'account-off-outline'"
-                    size="is-small" />
-                  {{ ' ' }}
-                  {{ $t(`lists.optins.${props.row.optin}`) }}
-                </b-tag>{{ ' ' }}
-              </div>
-            </b-table-column>
-
-            <b-table-column v-slot="props" field="status" cell-class="status" :label="$t('globals.fields.status')">
-              <b-tag :class="`status-${props.row.subscriptionStatus}`">
-                {{ $t(`subscribers.status.${props.row.subscriptionStatus}`) }}
-              </b-tag>
-              <template v-if="props.row.optin === 'double' && props.row.subscriptionMeta.optinIp">
-                <br /><span class="is-size-7">{{ props.row.subscriptionMeta.optinIp }}</span>
-              </template>
-            </b-table-column>
-
-            <b-table-column v-slot="props" field="createdAt" :label="$t('globals.fields.createdAt')">
-              {{ $utils.niceDate(props.row.subscriptionCreatedAt, true) }}
-            </b-table-column>
-
-            <b-table-column v-slot="props" field="updatedAt" :label="$t('globals.fields.updatedAt')">
-              {{ $utils.niceDate(props.row.subscriptionCreatedAt, true) }}
-            </b-table-column>
-          </b-table>
+          <div class="box">
+            <b-table :data="data.lists" hoverable default-sort="createdAt" class="subscriptions">
+              <b-table-column v-slot="props" field="name" :label="$tc('globals.terms.list', 1)">
+                <div>
+                  <router-link :to="`/lists/${props.row.id}`">
+                    {{ props.row.name }}
+                  </router-link>
+                  <br />
+                  <b-tag :class="props.row.optin" :data-cy="`optin-${props.row.optin}`">
+                    <b-icon :icon="props.row.optin === 'double' ? 'account-check-outline' : 'account-off-outline'"
+                      size="is-small" />
+                    {{ ' ' }}
+                    {{ $t(`lists.optins.${props.row.optin}`) }}
+                  </b-tag>{{ ' ' }}
+                </div>
+              </b-table-column>
+
+              <b-table-column v-slot="props" field="status" cell-class="status" :label="$t('globals.fields.status')">
+                <b-tag :class="`status-${props.row.subscriptionStatus}`">
+                  {{ $t(`subscribers.status.${props.row.subscriptionStatus}`) }}
+                </b-tag>
+                <template v-if="props.row.optin === 'double' && props.row.subscriptionMeta.optinIp">
+                  <br /><span class="is-size-7">{{ props.row.subscriptionMeta.optinIp }}</span>
+                </template>
+              </b-table-column>
+
+              <b-table-column v-slot="props" field="createdAt" :label="$t('globals.fields.createdAt')">
+                {{ $utils.niceDate(props.row.subscriptionCreatedAt, true) }}
+              </b-table-column>
+
+              <b-table-column v-slot="props" field="updatedAt" :label="$t('globals.fields.updatedAt')">
+                {{ $utils.niceDate(props.row.subscriptionCreatedAt, true) }}
+              </b-table-column>
+            </b-table>
+          </div>
         </div>
 
         <div class="bounces" v-show="bounces.length > 0">

diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue
@@ -181,7 +181,7 @@
     </b-modal>
 
     <!-- Add / edit form modal -->
-    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="800" @close="onFormClose">
+    <b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="850" @close="onFormClose">
       <subscriber-form :data="curItem" :is-editing="isEditing" @finished="querySubscribers" />
     </b-modal>
   </section>