style: Some minor style improvements

Griefed · Feb 4, 2024 · e0c861f · e0c861f
1 parent f189c90
commit e0c861f
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 96 deletions.
diff --git a/serverpackcreator-web-frontend/src/components/ErrorsCard.vue b/serverpackcreator-web-frontend/src/components/ErrorsCard.vue
@@ -2,9 +2,18 @@
   <q-card flat bordered style="height: 400px;">
     <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 400px;">
       <q-list dense>
-        <q-item class="force-wrap" v-for="error in errors" :key="error.id" clickable @click="copyToClipboard(error.error)">
-          <q-item-section avatar>
-            <q-chip :label="error.id" color="accent" text-color="white"/>
+        <q-item class="force-wrap" v-for="error in errors" :key="error.id" clickable
+                @click="copyToClipboard(error.error)">
+          <!--          <q-item-section side>
+                      <q-chip :label="error.id" color="accent" text-color="white" :ripple="false" @click="copyToClipboard(error.error)"/>
+                    </q-item-section>-->
+          <q-item-section side>
+            <q-btn icon="bug_report" color="negative" round dense flat unelevated :ripple="false"
+                   @click="copyToClipboard(error.error)">
+              <q-badge color="negative" floating text-color="white" class="text-bold" :ripple="false" rounded>
+                {{ error.id }}
+              </q-badge>
+            </q-btn>
           </q-item-section>
           <q-item-section>
             {{ error.error }}

diff --git a/serverpackcreator-web-frontend/src/components/HistoryTable.vue b/serverpackcreator-web-frontend/src/components/HistoryTable.vue
@@ -1,17 +1,12 @@
 <template>
-  <q-card flat bordered style="max-width: 100vw;" class="relative-position" v-if="visible">
-    <q-card-section>
-      <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut"/>
-    </q-card-section>
-    <q-inner-loading :showing="visible">
-      <q-spinner-gears size="50px" color="accent"/>
-    </q-inner-loading>
-  </q-card>
-  <q-table
-    v-else class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" bordered dense :filter="filter"
-    style="max-width: 100vw;" no-data-label="No history available (yet)..."
-    no-results-label="The search didn't uncover any results"
-    :pagination="initialPagination">
+  <q-table class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" bordered dense :filter="filter"
+           no-data-label="No history available (yet)..." title="History / Event Log"
+           no-results-label="The search didn't uncover any results"
+           :pagination="initialPagination" :loading="visible">
+    <template v-slot:loading>
+      <q-inner-loading showing color="accent"/>
+    </template>
+
     <template v-slot:top-right>
       <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
         <template v-slot:append>
@@ -42,7 +37,12 @@
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
-          {{ col.value }}
+          <span v-if="col.name === 'errors' && col.value > 0" class="text-bold text-red-14">
+            {{ col.value }}
+          </span>
+          <span v-else>
+            {{ col.value }}
+          </span>
         </q-td>
       </q-tr>
       <q-tr v-show="props.expand" :props="props">
@@ -51,16 +51,13 @@
             <div class="col">
               <ModPackCard :id="props.row.modPackId"/>
             </div>
-            <q-separator spaced inset v-if="props.row.serverPackId !== null"/>
-            <div class="col" v-if="props.row.serverPackId !== null">
+            <div class="col" v-if="props.row.serverPackId !== null" style="margin-left: 5px;">
               <ServerPackCard :id="props.row.serverPackId"/>
             </div>
-            <q-separator spaced inset v-if="props.row.serverPackId !== null"/>
-            <div class="col" v-if="props.row.serverPackId !== null">
+            <div class="col" v-if="props.row.serverPackId !== null" style="margin-left: 5px;">
               <RunConfigurationCard :id="props.row.serverPackId"/>
             </div>
-            <q-separator spaced inset v-if="props.row.errors.length > 0"/>
-            <div class="col" v-if="props.row.errors.length > 0">
+            <div class="col" v-if="props.row.errors.length > 0" style="margin-left: 5px;">
               <ErrorsCard :errors="props.row.errors"/>
             </div>
           </div>

diff --git a/serverpackcreator-web-frontend/src/components/ModPackCard.vue b/serverpackcreator-web-frontend/src/components/ModPackCard.vue
@@ -10,7 +10,7 @@
   <q-card flat bordered style="height: 400px;" v-else>
     <q-list dense>
       <q-item clickable @click="copyToClipboard(id.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="token"/>
         </q-item-section>
         <q-item-section>
@@ -20,7 +20,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(projectID.length === 1 ? projectID : 'N/A')">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="badge"/>
         </q-item-section>
         <q-item-section>
@@ -30,7 +30,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(versionID.length === 1 ? versionID : 'N/A')">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="badge"/>
         </q-item-section>
         <q-item-section>
@@ -40,7 +40,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(date.formatDate(dateCreated, 'YYYY-MM-DD : HH:mm'))">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="event"/>
         </q-item-section>
         <q-item-section>
@@ -50,7 +50,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(name)">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="abc"/>
         </q-item-section>
         <q-item-section>
@@ -60,7 +60,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(size.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="scale"/>
         </q-item-section>
         <q-item-section>
@@ -70,7 +70,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(status)">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="pending_actions"/>
         </q-item-section>
         <q-item-section>
@@ -80,7 +80,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(source)">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="move_to_inbox"/>
         </q-item-section>
         <q-item-section>
@@ -90,7 +90,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(sha256)">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="tag"/>
         </q-item-section>
         <q-item-section>
@@ -100,7 +100,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(serverPacks.length.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="dns"/>
         </q-item-section>
         <q-item-section>

diff --git a/serverpackcreator-web-frontend/src/components/ModpacksTable.vue b/serverpackcreator-web-frontend/src/components/ModpacksTable.vue
@@ -1,20 +1,11 @@
 <template>
-  <q-card flat bordered style="max-width: 100vw;" class="relative-position" v-if="visible">
-    <q-card-section>
-      <transition
-        appear
-        enter-active-class="animated fadeIn"
-        leave-active-class="animated fadeOut"
-      >
-      </transition>
-    </q-card-section>
-    <q-inner-loading :showing="visible">
-      <q-spinner-gears size="50px" color="accent"/>
-    </q-inner-loading>
-  </q-card>
-  <q-table v-else class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" title="Modpacks" bordered
-           dense style="max-width: 100vw;" no-data-label="No modpacks available (yet)..." :filter="filter"
-           no-results-label="The search didn't uncover any results" :pagination="initialPagination">
+  <q-table class="sticky-header-table" :rows="rows" :columns="columns" row-key="id" title="Modpacks" bordered
+           dense no-data-label="No modpacks available (yet)..." :filter="filter"
+           no-results-label="The search didn't uncover any results" :pagination="initialPagination" :loading="visible">
+    <template v-slot:loading>
+      <q-inner-loading showing color="accent"/>
+    </template>
+
     <template v-slot:top-right>
       <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
         <template v-slot:append>
@@ -45,10 +36,9 @@
           </q-btn>
         </q-td>
         <q-td v-for="col in props.cols" :key="col.name" :props="props" auto-width>
-          <span v-if="col.field === 'name' && props.row.size > 0">
-            {{ col.value }}
+          <span v-if="col.name === 'download'">
             <q-btn :href="buildDownloadUrl(props.row.id)" color="info" dense icon="download" round size="sm"
-                   style="margin-left: 5px;" type="a">
+                   type="a" v-if="props.row.size > 0">
               <q-tooltip>
                 Download modpack
               </q-tooltip>
@@ -77,6 +67,7 @@ import ServerPacksTable from 'components/ServerPacksTable.vue';
 const columns = [
   {name: 'id', label: 'Modpack ID', field: 'id', sortable: true, align: 'left'},
   {name: 'name', label: 'Name', field: 'name', sortable: false, align: 'left'},
+  {name: 'download', label: 'Download', sortable: false, align: 'center'},
   {name: 'projectID', label: 'Project ID', field: 'projectID', sortable: true, align: 'left'},
   {name: 'versionID', label: 'Version ID', field: 'versionID', sortable: true, align: 'left'},
   {name: 'source', label: 'Source', field: 'source', sortable: false, align: 'left'},
@@ -170,7 +161,7 @@ export default defineComponent({
           progress: true,
           icon: 'error',
           color: 'negative',
-          message: 'Could not retrieve event history: ' + error
+          message: 'Could not retrieve modpacks: ' + error
         });
       });
     }

diff --git a/serverpackcreator-web-frontend/src/components/RunConfigurationCard.vue b/serverpackcreator-web-frontend/src/components/RunConfigurationCard.vue
@@ -11,7 +11,7 @@
     <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 400px;">
       <q-list dense>
         <q-item clickable @click="copyToClipboard(id.toString())">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="token"/>
           </q-item-section>
           <q-item-section>
@@ -21,7 +21,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(minecraftVersion)">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="pin"/>
           </q-item-section>
           <q-item-section>
@@ -31,7 +31,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(modloader)">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="pin"/>
           </q-item-section>
           <q-item-section>
@@ -41,7 +41,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(modloaderVersion)">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="pin"/>
           </q-item-section>
           <q-item-section>
@@ -51,7 +51,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(startArgs.join(' '))">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="not_started"/>
           </q-item-section>
           <q-item-section>
@@ -61,7 +61,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(clientMods.join(', '))">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="format_list_numbered"/>
           </q-item-section>
           <q-item-section>
@@ -71,7 +71,7 @@
         </q-item>
 
         <q-item clickable @click="copyToClipboard(whitelistedMods.join(', '))">
-          <q-item-section avatar>
+          <q-item-section side>
             <q-icon color="accent" name="format_list_numbered"/>
           </q-item-section>
           <q-item-section>

diff --git a/serverpackcreator-web-frontend/src/components/ServerPackCard.vue b/serverpackcreator-web-frontend/src/components/ServerPackCard.vue
@@ -10,7 +10,7 @@
   <q-card flat bordered style="height: 400px;" v-else>
     <q-list dense>
       <q-item clickable @click="copyToClipboard(id.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="token"/>
         </q-item-section>
         <q-item-section>
@@ -20,7 +20,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(size.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="scale"/>
         </q-item-section>
         <q-item-section>
@@ -30,7 +30,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(downloads.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="download"/>
         </q-item-section>
         <q-item-section>
@@ -40,7 +40,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(confirmedWorking.toString())">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="thumbs_up_down"/>
         </q-item-section>
         <q-item-section>
@@ -50,7 +50,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(date.formatDate(dateCreated, 'YYYY-MM-DD : HH:mm'))">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="event"/>
         </q-item-section>
         <q-item-section>
@@ -60,7 +60,7 @@
       </q-item>
 
       <q-item clickable @click="copyToClipboard(sha256)">
-        <q-item-section avatar>
+        <q-item-section side>
           <q-icon color="accent" name="tag"/>
         </q-item-section>
         <q-item-section>