From eb3f130a696ed35fd12e1fc9bf78d83309ec8600 Mon Sep 17 00:00:00 2001 From: Daniel Jakob Date: Sun, 30 Apr 2023 13:28:26 +0200 Subject: [PATCH] Perform visual changes regarding the search modal --- src/App.vue | 1 + src/components/Album/AlbumView.vue | 2 +- src/components/Lib/Modal.vue | 53 +++++++++---------- src/components/Navigation/Search.vue | 41 +++++++++----- src/components/Playlist/Lib/AddToPlaylist.vue | 6 +-- src/locales/de.json | 2 +- src/locales/en.json | 2 +- src/main.ts | 3 +- 8 files changed, 64 insertions(+), 46 deletions(-) diff --git a/src/App.vue b/src/App.vue index 47fd1cf..faa93c5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -174,6 +174,7 @@ export default defineComponent({ margin: 0; padding: 0; overflow: hidden; + font-size: 1.1em; } h1 { diff --git a/src/components/Album/AlbumView.vue b/src/components/Album/AlbumView.vue index 5e3e80f..d1b44da 100644 --- a/src/components/Album/AlbumView.vue +++ b/src/components/Album/AlbumView.vue @@ -11,7 +11,7 @@ {{ $t("shared.play") }} -
+
diff --git a/src/components/Lib/Modal.vue b/src/components/Lib/Modal.vue index 390c4cd..d419f4a 100644 --- a/src/components/Lib/Modal.vue +++ b/src/components/Lib/Modal.vue @@ -2,26 +2,19 @@
- - +
+ + +
+
+ +
- -
- - - -
@@ -56,32 +49,38 @@ export default { box-shadow: 2px 2px 20px 1px rgb(85, 57, 5); border: 1px solid rgb(85, 57, 5); overflow-x: auto; + overflow-y: hidden; display: flex; flex-direction: column; - } - - .modal-header, - .modal-footer { - padding: 15px; - display: flex; + height: 90%; + font-size: 1.1em; } .modal-header { + padding: 10px 10px 5px 10px; + line-height: normal; + color: rgb(141, 102, 31); position: relative; border-bottom: 1px #446683 solid; - color: #ffffff; justify-content: space-between; font-size: 120%; - } - - .modal-footer { - border-top: 1px #446683 solid; - flex-direction: column; - justify-content: flex-end; + display: grid; + grid-template-columns: auto 50px; } .modal-body { position: relative; padding: 20px 10px; + height: auto; + } + + div.modal-close { + text-align: right; + } + .modal-close-button { + cursor: pointer; + } + .modal-close-button:hover { + color: rgb(192, 140, 44); } \ No newline at end of file diff --git a/src/components/Navigation/Search.vue b/src/components/Navigation/Search.vue index 5bbf333..8c04bf5 100644 --- a/src/components/Navigation/Search.vue +++ b/src/components/Navigation/Search.vue @@ -2,18 +2,20 @@ - + @@ -48,8 +50,18 @@
Songs ({{ searchResult.songs.length }})
-
- {{ item.getName() }} +
+
+ +
+
+
+ {{ song.getName() }} +
+
+ {{ song.getArtistName() }} +
+
@@ -72,10 +84,11 @@ import Artist from "../../model/Artist"; import SongListItem from "../../model/SongListItem"; import AlbumCover from "../Album/Lib/AlbumCover.vue"; import ArtistCover from "../Artist/Lib/ArtistCover.vue"; +import SongCover from "../Lib/SongCover.vue"; export default defineComponent({ name: 'Search', - components: {ArtistCover, AlbumCover, LoadingIcon, Modal}, + components: {SongCover, ArtistCover, AlbumCover, LoadingIcon, Modal}, methods: { async search(): Promise { if (this.searchState) { @@ -130,7 +143,7 @@ export default defineComponent({ diff --git a/src/components/Playlist/Lib/AddToPlaylist.vue b/src/components/Playlist/Lib/AddToPlaylist.vue index 590ec16..cacb544 100644 --- a/src/components/Playlist/Lib/AddToPlaylist.vue +++ b/src/components/Playlist/Lib/AddToPlaylist.vue @@ -99,7 +99,7 @@ export default defineComponent({ methods: { async getPlaylists(): Promise { HttpRequest.get(`playlists/user`).then(res => { - this.playlists = res.data.items.map((album_data: any): PlaylistInterface => { + this.playlists = res.data.items.map((album_data: object): PlaylistInterface => { let playlist = plainToInstance(Playlist, album_data); this.states.set(playlist.getId(), LoadingState.NONE); return playlist; @@ -127,10 +127,10 @@ export default defineComponent({ 'mediaId': this.itemId } ) - .then(res => { + .then(() => { this.states.set(playlistId, LoadingState.SUCCESS); }) - .catch(res => { + .catch(() => { this.states.set(playlistId, LoadingState.ERROR); }); }); diff --git a/src/locales/de.json b/src/locales/de.json index d5bba15..0be8394 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -61,7 +61,7 @@ "title": "Playlist" }, "add_to_playlists": { - "title": "Zu Playlist hinzufügen...", + "title": "Zu Playlist hinzufügen", "add_media": "Füge die Medien den folgenden Playlists hinzu", "table": { "columns": { diff --git a/src/locales/en.json b/src/locales/en.json index 8c19316..1a5d1e2 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -61,7 +61,7 @@ "title": "Playlist" }, "add_to_playlists": { - "title": "Add to playlist...", + "title": "Add to playlist", "add_media": "Add the media(s) to the following playlists.", "table": { "columns": { diff --git a/src/main.ts b/src/main.ts index 7edb0ce..8f8eff6 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,7 +5,7 @@ import Store from './components/Store/Store' import mitt from 'mitt'; import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' -import { faFileCirclePlus, faPlay } from '@fortawesome/free-solid-svg-icons' +import {faFileCirclePlus, faPlay, faRectangleXmark} from '@fortawesome/free-solid-svg-icons' import { faStar as faStarSol } from '@fortawesome/free-solid-svg-icons' import { faStar as faStarReg } from '@fortawesome/free-regular-svg-icons' import { faPause } from '@fortawesome/free-solid-svg-icons' @@ -57,6 +57,7 @@ library.add( faArrowRightFromBracket, faUser, faMagnifyingGlass, + faRectangleXmark, ); const emitter = mitt();