Perform visual changes regarding the search modal

src/App.vue

@@ -174,6 +174,7 @@ export default defineComponent({
  margin: 0;
  padding: 0;
  overflow: hidden;
+ font-size: 1.1em;
 }
 
 h1 {

src/components/Album/AlbumView.vue

@@ -11,7 +11,7 @@
  <font-awesome-icon :icon="['fas', 'play']" title="Play" /> {{ $t("shared.play") }}
  </span>
  </div>
- <div class="addToPlaylist button">
+ <div class="addToPlaylist">
  <AddToPlaylist :itemId="album.getId()" :itemType="'album'" :showTitle="true" />
  </div>
  <div>

src/components/Lib/Modal.vue

@@ -2,26 +2,19 @@
  <div class="modal-backdrop">
  <div class="modal">
  <header class="modal-header">
- <slot name="header">
- </slot>
+ <div>
+ <slot name="header">
+ </slot>
+ </div>
+ <div class="modal-close">
+ <font-awesome-icon :icon="['fas', 'rectangle-xmark']" :title="$t('shared.close')" @click="close" class="modal-close-button"/>
+ </div>
  </header>
 
  <section class="modal-body">
  <slot name="body">
  </slot>
  </section>
-
- <footer class="modal-footer">
- <slot name="footer">
- </slot>
- <button
- type="button"
- class="button"
- @click="close"
- >
- {{ $t("shared.close") }}
- </button>
- </footer>
  </div>
  </div>
 </template>
@@ -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);
  }
 </style>

src/components/Navigation/Search.vue

@@ -2,18 +2,20 @@
  <span class="glass">
  <font-awesome-icon :icon="['fas', 'magnifying-glass']" :title="$t('header.search')"/>
  </span>
- <input type="text" :placeholder="$t('header.search')" v-model="searchQuery" @keyup="search"/>
+ <input type="text" :placeholder="$t('header.search')" v-model="searchQuery" @keyup="search" class="searchInput"/>
 
  <Modal v-show="isVisible" @close="closeModal">
  <template v-slot:header>
- {{ $t("header.search") }}:
+ <span class="glass">
+ <font-awesome-icon :icon="['fas', 'magnifying-glass']" :title="$t('header.search')"/>
+ </span>
  <input
- type="text"
- ref="modalSearchInput"
- :placeholder="$t('header.search')"
- v-model="searchQuery"
- @keyup="search"
- v-on:keydown.esc="closeModal"
+  type="text"
+  ref="modalSearchInput"
+  :placeholder="$t('header.search')"
+  v-model="searchQuery"
+  @keyup="search"
+  v-on:keydown.esc="closeModal"
  />
  </template>
 
@@ -48,8 +50,18 @@
  </div>
  <div v-if="searchResult.songs.length > 0">
  <div class="resultListHeader">Songs ({{ searchResult.songs.length }})</div>
- <div class="resultList" v-for="item in searchResult.songs" :key="item.getId()">
- <span>{{ item.getName() }}</span>
+ <div class="resultList" v-for="song in searchResult.songs" :key="song.getId()">
+ <div>
+ <SongCover :song="song" :size="'40'" />
+ </div>
+ <div>
+ <div>
+ {{ song.getName() }}
+ </div>
+ <div class="artistName">
+ <router-link :to="'/artist/' + song.getArtistId()">{{ song.getArtistName() }}</router-link>
+ </div>
+ </div>
  </div>
  </div>
  </template>
@@ -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<void> {
  if (this.searchState) {
@@ -130,7 +143,7 @@ export default defineComponent({
 <style scoped>
 input[type=text], input[type=text]:hover {
  margin: 0 0 0 10px;
- border: 0;
+ border-bottom: 1px #446683 solid;
  width: 300px
 }
 div.searchResults {
@@ -154,4 +167,8 @@ div.resultListHeader {
 span.glass {
  color: rgb(192, 140, 44);
 }
+
+div.artistName {
+ margin-top: 3px;
+}
 </style>

src/components/Playlist/Lib/AddToPlaylist.vue

@@ -99,7 +99,7 @@ export default defineComponent({
  methods: {
  async getPlaylists(): Promise<void> {
  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);
  });
  });

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": {

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": {

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();