Merge pull request #1 from web-radio/feature/ui-improvements

[Feature] UI improvements

src/App.vue

@@ -36,6 +36,8 @@ onBeforeMount(async () => {
     const userCountry = await getUserCountryCode();
     appStore.setExploreViewCountry(userCountry);
   }
+  appStore.setCountries(await appStore.apiClient.getCountries({}));
+  appStore.setLanguages(await appStore.apiClient.getLanguages({}));
   loading.value = false;
 });
 </script>

src/assets/main.scss

@@ -51,8 +51,10 @@ button {
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
+  font-feature-settings: 'liga';
   -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
+  vertical-align: middle;
 }
 
 // Spinner
@@ -85,7 +87,8 @@ button {
 
 .headline {
   font-size: 30px;
-  font-weight: 600;
+  font-weight: 700;
+  line-height: 30px;
 }
 
 // Block button
@@ -189,3 +192,33 @@ button.icon-button {
     }
   }
 }
+
+// Chips
+
+.chips__container {
+  padding: 5px 0;
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.chip {
+  border-radius: 7px;
+  border: 1px solid #ffffff10;
+  background: #ffffff04;
+  font-size: 14px;
+  padding: 6px 10px;
+  font-family: "Poppins", sans-serif;
+  color: #fffd;
+  cursor: pointer;
+
+
+  &.chip--active {
+    background: #fffd;
+    color: #000;
+  }
+
+  .material-symbols-rounded {
+    font-size: 16px;
+  }
+}

src/components/base-chip-dropdown.vue

@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import VDropdownMenu from 'v-dropdown-menu';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  icon: string;
+  label?: string;
+  required?: boolean;
+  options: { text: string; value: any }[];
+}>();
+const model = defineModel();
+function selectOption(optionValue: any) {
+  if (model.value !== optionValue || props.required) model.value = optionValue;
+  else model.value = undefined;
+}
+const selectedOption = computed(() =>
+  props.options.find(
+    (option) => JSON.stringify([option.value]) === JSON.stringify([model.value])
+  )
+);
+</script>
+
+<template>
+  <v-dropdown-menu :overlay="false" style="width: 100%">
+    <template #trigger>
+      <button
+        class="chip"
+        :class="{ 'chip--active': model && model !== 'all' }"
+      >
+        <span class="material-symbols-rounded">{{ icon }}</span>
+        {{ selectedOption?.value !== undefined ? selectedOption.text : label }}
+        <span class="material-symbols-rounded" style="margin-left: 10px">
+          keyboard_arrow_down
+        </span>
+      </button>
+    </template>
+    <template #body>
+      <div class="dropdown__options">
+        <div
+          class="dropdown__option"
+          v-for="(option, index) in options"
+          :key="index"
+          @click="selectOption(option.value)"
+        >
+          {{ option.text }}
+        </div>
+      </div>
+    </template>
+  </v-dropdown-menu>
+</template>
+
+<style lang="scss">
+.dropdown__options {
+  margin-top: 5px;
+  max-height: calc(100vh - 340px);
+  background: #09090d;
+  border-radius: 7px;
+  border: 1px solid #ffffff10;
+  overflow: scroll;
+  z-index: 20;
+
+  .dropdown__option {
+    padding: 10px 15px;
+    user-select: none;
+    width: 100%;
+    cursor: pointer;
+
+    &:hover {
+      background: #ffffff06;
+    }
+  }
+}
+
+.v-dropdown-menu__container {
+  background-color: inherit !important;
+  border: inherit !important;
+}
+
+.v-dropdown-menu {
+  width: inherit !important;
+}
+</style>

src/components/base-chip-toggle.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core';
+
+const model = defineModel();
+defineProps<{ icon: string; text: string }>();
+const toggle = useToggle(model);
+</script>
+
+<template>
+  <button class="chip" :class="{ 'chip--active': model }" @click="toggle()">
+    <span class="material-symbols-rounded">{{ icon }}</span>
+    {{ text }}
+  </button>
+</template>

src/components/index.ts

@@ -1,5 +1,7 @@
+export { default as BaseChipDropdown } from './base-chip-dropdown.vue';
+export { default as BaseChipToggle } from './base-chip-toggle.vue';
 export { default as BaseDropdown } from './base-dropdown.vue';
-export { default as BaseTextField } from './base-text-field.vue';
+export { default as SearchField } from './search-field.vue';
 export { default as CenterContainer } from './center-container.vue';
 export { default as StationCardSkeletonLoader } from './station-card-skeleton-loader.vue';
 export { default as StationCard } from './station-card.vue';

src/components/search-field.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+const model = defineModel();
+</script>
+
+<template>
+  <div class="search-field">
+    <input
+      class="search-field__input"
+      v-model="model"
+      :placeholder="$t('nav.search')"
+    />
+    <div class="search-field__icon">
+      <span class="material-symbols-rounded">search</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-field {
+  width: 100%;
+  position: relative;
+  max-width: 650px;
+
+  .search-field__icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 15px;
+    display: flex;
+    align-items: center;
+    .material-symbols-rounded {
+      color: #fff;
+      font-size: 20px;
+    }
+  }
+
+  input.search-field__input {
+    background: #ffffff04;
+    border-radius: 7px;
+    border: 1px solid #ffffff10;
+    width: 100%;
+    outline: none;
+    color: #fff;
+    font-family: 'Poppins', sans-serif !important;
+    padding: 15px 15px 15px 50px;
+    font-size: 14px;
+
+    &::placeholder {
+      color: #cfcfcf;
+      line-height: 16px;
+      font-family: 'Poppins', sans-serif !important;
+    }
+  }
+}
+</style>

src/components/station-card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { usePlayerStore } from '@/stores';
+import { useAppStore, usePlayerStore } from '@/stores';
 import { getFlagEmoji } from '@/utils';
 import type { Station } from 'radiobrowser-api-client';
 import { ref } from 'vue';
@@ -11,6 +11,7 @@ defineProps<{
 
 const router = useRouter();
 const playerStore = usePlayerStore();
+const appStore = useAppStore();
 const logoError = ref(false);
 </script>
 
@@ -40,6 +41,9 @@ const logoError = ref(false);
       </div>
       <div class="card__name">
         {{ data.name.trim() ? data.name.trim() : $t('withoutName') }}
+        <span class="material-symbols-rounded" v-if="data.hasExtendedInfo"
+          >verified</span
+        >
       </div>
       <div class="card__details">
         <div class="card__details-chip" v-if="data.countryCode">
@@ -69,12 +73,6 @@ const logoError = ref(false);
           <span class="material-symbols-rounded">thumb_up</span>
           {{ data.votes }}
         </div>
-        <div class="card__details-chip" v-if="data.clickTrend !== 0">
-          <span class="material-symbols-rounded">{{
-            data.clickTrend > 0 ? 'trending_up' : 'trending_down'
-          }}</span>
-          <template v-if="data.clickTrend > 0">+</template>{{ data.clickTrend }}
-        </div>
         <div class="card__details-chip" v-if="data.codec !== 'UNKNOWN'">
           <span class="material-symbols-rounded">album</span> {{ data.codec }}
         </div>
@@ -192,7 +190,7 @@ const logoError = ref(false);
     grid-row-gap: 10px;
     border: 1px solid #ffffff10;
     border-radius: 7px;
-    padding: 20px 17.5px;
+    padding: 18px;
     height: 100%;
 
     .card__image {
@@ -219,19 +217,23 @@ const logoError = ref(false);
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
+
+      .material-symbols-rounded {
+        font-size: inherit !important;
+      }
     }
 
     .card__details {
       grid-area: 2 / 1 / 2 / 4;
       font-size: 0.9em;
       display: flex;
       flex-wrap: wrap;
-      gap: 8px;
+      gap: 7px;
       max-height: 62px;
       overflow: hidden;
 
       .card__details-chip {
-        padding: 2px 8px;
+        padding: 2px 7px;
         border-radius: 5px;
         border: #ffffff10 solid 1px;
         background: #ffffff03;

src/components/stations-list.vue

@@ -53,16 +53,17 @@ async function loadMoreStations() {
 }
 
 async function getStations() {
-  if (props.stationsUUIDs) {
-    return await appStore.apiClient.getStationsByUUIDs({
-      stationUUIDs: props.stationsUUIDs,
-    });
-  } else {
-    return await appStore.apiClient.searchStations({
-      ...{ offset: stations.value?.length },
-      ...props.params,
-    });
-  }
+  if (props.stationsUUIDs)
+    return sortStations(
+      props.stationsUUIDs,
+      await appStore.apiClient.getStationsByUUIDs({
+        stationUUIDs: props.stationsUUIDs,
+      })
+    );
+  return await appStore.apiClient.searchStations({
+    ...{ offset: stations.value?.length },
+    ...props.params,
+  });
 }
 let timeout: any = null;
 
@@ -175,6 +176,11 @@ onDeactivated(() => {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  margin-top: 40px;
+
+  &:first-child {
+    margin-top: 0 !important;
+  }
   .stations-list__cards {
     width: auto;
     display: grid;