Vuetable

src/main/java/com/blck/MusicReleaseTracker/Main.java

@@ -67,7 +67,6 @@ public void addCorsMappings(CorsRegistry registry) {
 
     @Component
     public class StartupRunner implements CommandLineRunner {
-
         // on startup of springboot server
         @Override
         public void run(String... args) {

vue/src/components/Bar/SourceMenu.vue

@@ -220,7 +220,7 @@ export default {
 
 .scrapenotice {
   position: absolute;
-  right: 65px;
+  right: 62px;
   top: 2px;
   height: 35px;
   z-index: 3;

vue/src/components/Content/SourceTable.vue

@@ -1,35 +1,31 @@
 <template>
   <div class="table-container" v-if="hideTable">
-    <div class="table-header">
-      <table>
-        <thead>
-          <tr>
-            <th class="song">song</th>
-            <th v-if="!hideArtistColumn" class="artist">artist</th>
-            <th class="date">date</th>
-          </tr>
-        </thead>
-      </table>
-    </div>
-
     <div class="table-body">
-      <table>
-        <tbody>
-          <br /><br />
-          <tr
-            v-for="(mediaItem, mediaIndex) in processedTableData"
-            :key="mediaIndex"
-            :class="{
-              'album-header': mediaItem.isAlbumHeader,
-              'album-song': mediaItem.isAlbumSong,
-              'future-date': isDateInFuture(mediaItem.date),
-            }">
-            <td class="tdsong">{{ mediaItem.name }}</td>
-            <td class="tdartist" v-if="!hideArtistColumn">{{ mediaItem.artists }}</td>
-            <td class="tddate">{{ this.formatDate(mediaItem.date) }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <div v-for="(mediaItem, mediaIndex) in this.tableData" :key="mediaIndex" class="aBubble">
+        <table>
+          <tbody>
+            <template v-if="mediaItem.songs && mediaItem.songs.length">
+              <tr v-if="mediaItem.album" class="album-header">
+                <td class="tdalbumname">
+                  <strong>{{ mediaItem.album }}</strong>
+                </td>
+                <td class="tdartist"></td>
+                <td class="tddate">{{ formatDate(mediaItem.date) }}</td>
+              </tr>
+              <tr class="album-bubble" v-for="(song, songIndex) in mediaItem.songs" :key="songIndex">
+                <td class="tdsong">{{ song.name }}</td>
+              </tr>
+            </template>
+            <template v-else>
+              <tr class="single-bubble" :class="{ 'future-date': isDateInFuture(mediaItem.date) }">
+                <td class="tdsong">{{ mediaItem.name }}</td>
+                <td class="tdartist" v-if="!hideArtistColumn">{{ mediaItem.artists }}</td>
+                <td class="tddate">{{ formatDate(mediaItem.date) }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 
@@ -56,32 +52,6 @@ export default {
   },
   computed: {
     ...mapState(["tableData", "previewVis", "selectedArtist", "isoDates", "sourceTab", "urlExists"]),
-    processedTableData() {
-      return this.tableData
-        .map((item) => {
-          if (item.album !== null) {
-            return [
-              {
-                isAlbumHeader: true,
-                name: item.album,
-                date: item.date,
-              },
-              ...item.songs.map((song) => ({
-                isAlbumSong: true,
-                name: song.name,
-              })),
-            ];
-          } else {
-            return {
-              album: false,
-              name: item.name,
-              artists: item.artists,
-              date: item.date,
-            };
-          }
-        })
-        .flat();
-    },
     hideArtistColumn() {
       return this.sourceTab !== "combview" && this.selectedArtist !== "";
     },
@@ -109,23 +79,23 @@ export default {
 </script>
 
 <style scoped>
-.table-header {
-  flex-shrink: 0;
-  overflow: hidden;
-  z-index: 3;
-  position: fixed;
-  width: calc(100% - 170px);
+.table-container {
+  margin-top: 20px;
 }
 .table-body {
-  flex-grow: 1;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transform: translateX(-90px);
   user-select: text;
+  overflow-y: auto;
   margin-bottom: 10vh;
 }
 table {
-  width: 100%;
   min-width: 500px;
   border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
 }
 th,
 td {
@@ -137,26 +107,33 @@ th {
   position: sticky;
   top: 0;
 }
-.song,
 .tdsong {
-  width: 50%;
+  width: 80%;
   max-width: 120px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.artist,
+.tdalbumname {
+  width: 50%;
+  max-width: 120px;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+}
 .tdartist {
   width: 50%;
   max-width: 120px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.date,
 .tddate {
   width: 100px;
   min-width: 100px;
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 10px;
 }
 .emptynotice {
   position: fixed;
@@ -176,19 +153,27 @@ th {
 .quickstart .title {
   font-weight: bold;
 }
-.tddate {
-  display: flex;
-  justify-content: flex-end;
-  margin-right: 30px;
-}
-.album-header {
+.aBubble {
   background-color: var(--duller-color);
+  width: 70%;
+  border-radius: 5px;
+  margin-bottom: 3px;
+  min-width: 500px;
 }
-.album-song {
-  border-left: 30px solid var(--primary-color);
-  border-right: 0px solid transparent;
+.single-bubble {
+  background-color: var(--primary-color);
 }
 .future-date {
-  opacity: 40%;
+  opacity: 50%;
+}
+tr.single-bubble {
+  display: flex;
+  justify-content: space-between;
+}
+.album-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3px 0px;
 }
 </style>

vue/src/components/Settings/SettingsAppearance.vue

@@ -46,9 +46,6 @@ export default {
 </script>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .title {
   font-weight: bold;
 }
@@ -77,6 +74,7 @@ input[type="checkbox"] {
 }
 
 .colorindicator {
+  transition: 0.3s;
   position: absolute;
   right: 0;
   top: 0;

vue/src/components/Settings/SettingsDangerZone.vue

@@ -60,9 +60,6 @@ export default {
 </script>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .title {
   font-weight: bold;
 }

vue/src/components/Settings/SettingsFilters.vue

@@ -47,9 +47,6 @@ export default {
 </script>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .title {
   font-weight: bold;
 }

vue/src/components/Settings/SettingsOther.vue

@@ -1,29 +1,23 @@
 <template>
-
-    <p class="title">Other</p>
-       <div class="flex-items">
-         <div class="flex-padding">
-           <input type="checkbox" :checked="isoDates" @change="$emit('set-setting', 'isoDates', $event.target.checked)">
-               <label>Dates as yyyy-MM-dd</label>
-         </div>
-       </div>
-
+  <p class="title">Other</p>
+  <div class="flex-items">
+    <div class="flex-padding">
+      <input type="checkbox" :checked="isoDates" @change="$emit('set-setting', 'isoDates', $event.target.checked)" />
+      <label>Dates as yyyy-MM-dd</label>
+    </div>
+  </div>
 </template>
 
 <script>
-
- export default {
-  emits: ['set-setting'],
+export default {
+  emits: ["set-setting"],
   props: {
     isoDates: Boolean,
   },
- };
- </script>
+};
+</script>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .title {
   font-weight: bold;
 }
@@ -33,5 +27,4 @@
 input {
   margin-right: 5px;
 }
-
 </style>

vue/src/components/Settings/SettingsSelf.vue

@@ -10,9 +10,6 @@
 </template>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .container {
   display: flex;
   justify-content: space-evenly;

vue/src/pages/SettingsPage.vue

@@ -128,9 +128,6 @@ export default {
 </script>
 
 <style scoped>
-* {
-  transition: 0.1s;
-}
 .settings {
   overflow-y: scroll;
   overflow-x: hidden;