Skip to content

Commit

Permalink
multiple UI fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
bocchilorenzo committed Dec 4, 2022
1 parent 4d46629 commit 9e0fcc5
Show file tree
Hide file tree
Showing 14 changed files with 153 additions and 132 deletions.
2 changes: 1 addition & 1 deletion neutralino.config.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"applicationId": "js.neutralino.xradio",
"version": "0.2.0",
"version": "0.2.1",
"defaultMode": "window",
"documentRoot": "/xradio-vue/dist/",
"port": 6498,
Expand Down
2 changes: 1 addition & 1 deletion xradio-vue/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "xradio",
"version": "0.2.0",
"version": "0.2.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand Down
51 changes: 37 additions & 14 deletions xradio-vue/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
dark:bg-nord-gray1
bg-white
transition-colors
duration-300
duration-100
ease-out
select-none
"
Expand Down Expand Up @@ -327,27 +327,50 @@ export default {
}
*/
:root {
--scrollbarBG: #2b251d;
--thumbBG: #4c566a;
scrollbar-color: var(--thumbBG) var(--scrollbarBG) !important;
scrollbar-width: thin !important;
--scrollbarBGDark: #434c5e;
--thumbBGDark: #eceff4;
--scrollbarBGLight: #e5e9f0;
--thumbBGLight: #2e3440;
}
body::-webkit-scrollbar {
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body {
scrollbar-width: thin !important;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
*::-webkit-scrollbar-track {
background: var(--scrollbarBGLight);
border-radius: 10px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: ease-out;
transition-duration: 100ms;
}
.dark *::-webkit-scrollbar-track {
background: var(--scrollbarBGDark);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: ease-out;
transition-duration: 100ms;
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
*::-webkit-scrollbar-thumb {
background-color: var(--thumbBGLight);
/* border: 1px solid var(--scrollbarBGLight); */
border-radius: 10px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: ease-out;
transition-duration: 100ms;
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG);
border: 1px solid var(--scrollbarBG);
.dark *::-webkit-scrollbar-thumb {
background-color: var(--thumbBGDark);
/* border: 1px solid var(--scrollbarBGDark); */
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: ease-out;
transition-duration: 100ms;
}
* {
font-family: "Nanum Gothic", sans-serif;
scrollbar-width: thin !important;
scrollbar-color: var(--thumbBGLight) var(--scrollbarBGLight);
}
.dark *{
scrollbar-color: var(--thumbBGDark) var(--scrollbarBGDark);
}
h1 {
font-family: "Rubik", sans-serif;
Expand Down
8 changes: 4 additions & 4 deletions xradio-vue/src/components/FilterModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="flex w-full">
<div class="font-bold text-lg">Filter results</div>
<button
class="ml-auto rounded p-1 hover:bg-nord-white1 dark:hover:bg-nord-gray4 transition-colors duration-100 ease-out"
class="ml-auto rounded p-1 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
@click="toggleModal"
>
<svg
Expand Down Expand Up @@ -59,7 +59,7 @@
class="z-20 w-full max-h-72 overflow-y-scroll mx-3"
>
<button
class="rounded-md py-1 px-2 hover:bg-nord-white2 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
class="rounded-md py-1 px-2 hover:bg-nord-white1 dark:hover:bg-nord-gray2 transition-colors duration-100 ease-out"
@click="toggleCountries"
>
Toggle all
Expand All @@ -71,7 +71,7 @@
>
<li>
<div
class="flex items-center p-2 rounded hover:bg-nord-white2 dark:hover:bg-nord-gray2"
class="flex items-center p-2 rounded hover:bg-nord-white1 dark:hover:bg-nord-gray2"
>
<input
:id="country.iso_3166_1"
Expand Down Expand Up @@ -108,7 +108,7 @@

<div class="ml-auto flex flex-col xs2:flex-row">
<button
class="ripple transition-colors duration-100 ease-out hover:bg-nord-white1 dark:hover:bg-nord-gray4 mt-2 xs2:mt-0 xs2:ml-2 py-2 px-4 rounded"
class="ripple transition-colors duration-100 ease-out hover:bg-nord-white1 dark:hover:bg-nord-gray2 mt-2 xs2:mt-0 xs2:ml-2 py-2 px-4 rounded"
@click="toggleModal"
>
Close
Expand Down
5 changes: 2 additions & 3 deletions xradio-vue/src/components/navbar2.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
w-12
py-2
h-full
bg-nord-white1
text-black
dark:text-nord-white3 dark:bg-nord-gray3
bg-nord-white2
dark:bg-nord-gray3
z-20
"
>
Expand Down
2 changes: 1 addition & 1 deletion xradio-vue/src/components/player.vue
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@
d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"
/>
</svg>
<div class="flex flex-col w-full text-center">
<div class="flex flex-col w-full text-center content-center items-center">
<div class="flex items-center content-center justify-center">
<p class="marquee font-bold">
<span>
Expand Down
1 change: 1 addition & 0 deletions xradio-vue/src/components/snackbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
mr-2
p-2
gap-x-2
text-black
bg-nord-aurora1
"
>
Expand Down
2 changes: 2 additions & 0 deletions xradio-vue/src/components/updateBanner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
sticky
top-0
w-max
text-black
pl-14
p-2
bg-nord-aurora4
Expand All @@ -12,6 +13,7 @@
items-center
gap-x-2
z-10
-mb-10
"
>
<h1 class="text-large cursor-pointer inline" @click="$emit('update')">
Expand Down
5 changes: 4 additions & 1 deletion xradio-vue/src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,10 @@ const routes = [

const router = createRouter({
history: createWebHashHistory(),
saveScrollPosition: false,
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 }
},
base: process.env.BASE_URL,
routes
})
Expand Down
177 changes: 93 additions & 84 deletions xradio-vue/src/views/about.vue
Original file line number Diff line number Diff line change
@@ -1,94 +1,103 @@
<template>
<div>
<p>Current instance: {{$store.state.baseUrl}}</p>
<h1 class="text-xl mt-2 dark:text-nord-white3 font-bold">About</h1>
<img src="https://www.gnu.org/graphics/agplv3-with-text-162x68.png" alt="AGPLv3" class="dark:bg-nord-white1 rounded p-2 my-1"/>
<p>
The source code can be found on
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://github.com/bocchilorenzo/xradio')"
>
Github
</span>
. Used technologies:
</p>
<ul class="list-disc">
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://v2.vuejs.org/')"
>
Vue.js 2
</span>
for the graphical interface
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://tailwindcss.com/')"
>
Tailwind CSS
</span>
for the styling
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://neutralino.js.org/')"
>
Neutralinojs
</span>
for the application wrapper
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://api.radio-browser.info/')"
>
Radio-browser APIs
</span>
for the radio stations
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="
$emit('link', 'https://www.vecteezy.com/free-vector/radio-icon')
"
>
Flagpedia APIs
</span>
for the country flags
</li>
</ul>
<p>
App icon found at
<span
@click="
$emit('link', 'https://www.vecteezy.com/free-vector/radio-icon')
"
class="text-nord-frost2 font-bold cursor-pointer"
>
Radio Icon Vectors by Vecteezy
</span>
</p>
</div>
<div>
<p>Current instance: {{ $store.state.baseUrl }}</p>
<br />
<h1 class="text-xl dark:text-nord-white3 font-bold">About</h1>
<img
src="https://www.gnu.org/graphics/agplv3-with-text-162x68.png"
alt="AGPLv3"
class="dark:bg-nord-white1 rounded p-2 my-1"
/>
<p>
XRadio is a desktop app to listen to internet radio stations from
all over the world. The source code can be found on
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="
$emit('link', 'https://github.com/bocchilorenzo/xradio')
"
>Github</span
>.
</p>
<br />
<p>Technologies used:</p>
<ul class="list-disc">
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://vuejs.org/')"
>
Vue.js
</span>
for the graphical interface
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://tailwindcss.com/')"
>
Tailwind CSS
</span>
for the styling
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://neutralino.js.org/')"
>
Neutralinojs
</span>
for the application wrapper
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://api.radio-browser.info/')"
>
Radio-browser API
</span>
for the radio stations
</li>
<li>
<span
class="text-nord-frost2 font-bold cursor-pointer"
@click="$emit('link', 'https://flagpedia.net')"
>
Flagpedia API
</span>
for the country flags
</li>
</ul>
<p>
App icon found at
<span
@click="
$emit(
'link',
'https://www.vecteezy.com/free-vector/radio-icon'
)
"
class="text-nord-frost2 font-bold cursor-pointer"
>
Radio Icon Vectors by Vecteezy
</span>
</p>
</div>
</template>

<script>
export default {
name: "about",
methods: {
async link(url) {
await window.Neutralino.os.open(url);
},
},
};
name: "about",
methods: {
async link(url) {
await window.Neutralino.os.open(url)
},
},
}
</script>

<style scoped>
li {
@apply my-1;
@apply my-1;
}
</style>
</style>
2 changes: 1 addition & 1 deletion xradio-vue/src/views/favorites.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<div class="mb-10">
<h1 class="text-xl mb-6 dark:text-nord-white3 font-bold">
Favorite stations
Favorites
</h1>
<div v-if="Object.keys(favorites).length != 0">
<div
Expand Down
Loading

0 comments on commit 9e0fcc5

Please sign in to comment.