L-Nafaryus/elnafo-radio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: client appearance [#1]
Some checks failed
nix-build-publish / check (push) Failing after 3m49s
Details

Browse Source
This commit is contained in:
L-Nafaryus 2024-10-10 22:14:08 +05:00
parent 79de647d2a
commit 71ff2ad34a
Signed by: L-Nafaryus
GPG Key ID: 553C97999B363D38
13 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
crates/frontend/Cargo.toml
View File

@ -1,6 +1,6 @@
[package] [package]
name = "elnafo-radio-frontend" name = "elnafo-radio-frontend"
version = "0.1.0" version = "0.1.1"
edition = "2021" edition = "2021"
publish = ["elnafo-vcs"] publish = ["elnafo-vcs"]
authors = ["L-Nafaryus <l.nafaryus@elnafo.ru>"] authors = ["L-Nafaryus <l.nafaryus@elnafo.ru>"]

2
crates/frontend/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/assets/vinyl.svg" type="image/svg+xml" sizes="16x16 32x32"> <link rel="icon" href="/assets/vinyl.svg" type="image/svg+xml" sizes="16x16 32x32">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Elnafo Radio Dev</title> <title>Elnafo Radio Dev</title>
</head> </head>
<body class="h-full text-zinc-200 font-sans "> <body class="h-full text-zinc-200 font-sans ">

4
crates/frontend/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "elnafo-radio-vue", "name": "elnafo-radio-vue",
"version": "0.1.0", "version": "0.1.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "elnafo-radio-vue", "name": "elnafo-radio-vue",
"version": "0.1.0", "version": "0.1.1",
"dependencies": { "dependencies": {
"@catppuccin/tailwindcss": "^0.1.6", "@catppuccin/tailwindcss": "^0.1.6",
"@hey-api/client-axios": "^0.2.3", "@hey-api/client-axios": "^0.2.3",

2
crates/frontend/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "elnafo-radio-vue", "name": "elnafo-radio-vue",
"version": "0.1.0", "version": "0.1.1",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {

2
crates/frontend/src/assets/style.css
View File

@ -27,7 +27,7 @@
} }
.button { .button {
@apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded-md bg-ctp-peach border hover:bg-ctp-surface0/20 text-ctp-blue cursor-pointer; @apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded-md bg-none border hover:bg-ctp-surface0/20 text-ctp-blue cursor-pointer;
} }
.link-button { .link-button {

6
crates/frontend/src/components/MatrixIcon.vue Normal file
View File

@ -0,0 +1,6 @@
<template>
<svg viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6">
<path
d="M0.844 0.735v30.531h2.197v0.735h-3.041v-32h3.041v0.735zM10.235 10.412v1.547h0.041c0.412-0.595 0.912-1.047 1.489-1.371 0.579-0.323 1.251-0.484 2-0.484 0.719 0 1.38 0.141 1.975 0.417 0.599 0.281 1.047 0.776 1.359 1.479 0.339-0.5 0.803-0.943 1.38-1.323 0.579-0.38 1.267-0.573 2.063-0.573 0.604 0 1.161 0.073 1.677 0.224 0.521 0.145 0.959 0.38 1.328 0.703 0.365 0.329 0.651 0.751 0.86 1.272 0.203 0.52 0.307 1.151 0.307 1.891v7.635h-3.129v-6.468c0-0.381-0.016-0.745-0.048-1.084-0.020-0.307-0.099-0.604-0.239-0.88-0.131-0.251-0.333-0.459-0.584-0.593-0.255-0.152-0.609-0.224-1.047-0.224-0.443 0-0.797 0.083-1.068 0.249-0.265 0.167-0.489 0.396-0.64 0.667-0.161 0.287-0.265 0.604-0.308 0.927-0.052 0.349-0.077 0.699-0.083 1.048v6.359h-3.131v-6.401c0-0.339-0.005-0.672-0.025-1-0.011-0.317-0.073-0.624-0.193-0.916-0.104-0.281-0.301-0.516-0.552-0.672-0.255-0.167-0.636-0.255-1.136-0.255-0.151 0-0.348 0.031-0.588 0.099-0.24 0.067-0.479 0.192-0.703 0.375-0.229 0.188-0.428 0.453-0.589 0.797-0.161 0.343-0.239 0.796-0.239 1.359v6.62h-3.131v-11.421zM31.156 31.265v-30.531h-2.197v-0.735h3.041v32h-3.041v-0.735z" />
</svg>
</template>

2
crates/frontend/src/components/NavBar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="h-12 mx-auto bg-ctp-peach rounded-b-xl"> <div class="h-12 mx-auto bg-ctp-peach/85 rounded-b-xl">
<nav class="w-full h-full max-w-[1200px] flex justify-between items-center mx-auto my-0 pl-3 pr-3"> <nav class="w-full h-full max-w-[1200px] flex justify-between items-center mx-auto my-0 pl-3 pr-3">
<div class="items-center m-0 flex"> <div class="items-center m-0 flex">
<slot name="left"></slot> <slot name="left"></slot>

23
crates/frontend/src/components/Player.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import PlayIcon from "@/components/PlayIcon.vue"; import PlayIcon from "@/components/PlayIcon.vue";
import PauseIcon from "@/components/PauseIcon.vue"; import PauseIcon from "@/components/PauseIcon.vue";
import StopIcon from "@/components/StopIcon.vue";
import VinylIcon from "@/components/VinylIcon.vue"; import VinylIcon from "@/components/VinylIcon.vue";
import { api, store } from "@"; import { api, store } from "@";
import { ref, onUpdated, onMounted } from "vue"; import { ref, onUpdated, onMounted } from "vue";
@ -32,7 +33,8 @@ onMounted(() => {
<div class="flex items-center"> <div class="flex items-center">
<button @click="player.toggle()" <button @click="player.toggle()"
class="h-full w-20 inline-flex rounded items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50"> class="h-full w-20 inline-flex rounded items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
<PlayIcon v-if="!player.playing" class="text-ctp-peach w-8 h-8" /> <StopIcon v-if="!player.station" class="text-ctp-peach w-8 h-8" />
<PlayIcon v-else-if="!player.playing" class="text-ctp-peach w-8 h-8" />
<PauseIcon v-else class="text-ctp-peach w-8 h-8" /> <PauseIcon v-else class="text-ctp-peach w-8 h-8" />
</button> </button>
</div> </div>
@ -49,19 +51,20 @@ onMounted(() => {
@apply appearance-none bg-ctp-surface0 hover:bg-ctp-surface1 w-4 rounded-full; @apply appearance-none bg-ctp-surface0 hover:bg-ctp-surface1 w-4 rounded-full;
} }
.slider::-webkit-slider-thumb {
@apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 border-none;
}
.slider::-moz-range-thumb { .slider::-moz-range-thumb {
@apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 border-none; @apply appearance-none bg-ctp-peach rounded-full cursor-pointer w-4 h-4 border-none;
}
.slider::-webkit-progress-value {
@apply bg-ctp-peach/30 w-4 rounded-full;
} }
.slider::-moz-range-progress { .slider::-moz-range-progress {
@apply bg-ctp-peach/30 w-4 rounded-full; @apply bg-ctp-peach/30 w-4 rounded-full;
} }
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
@apply bg-ctp-peach rounded-full cursor-pointer w-4 h-4 border-none;
}
.slider::-webkit-slider-runnable-track {
@apply bg-ctp-peach/30 w-4 rounded-full border-none bg-no-repeat;
}
</style> </style>

2
crates/frontend/src/components/Station.vue
View File

@ -69,7 +69,7 @@ onMounted(() => {
<InfoIcon class="text-ctp-peach" /> <InfoIcon class="text-ctp-peach" />
</Tooltip> </Tooltip>
</button> </button>
<a :href="stationInfo.url" <a :href="stationInfo.url" target="_blank"
class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50 cursor-pointer"> class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50 cursor-pointer">
<ExternalIcon class="text-ctp-peach" /> <ExternalIcon class="text-ctp-peach" />
</a> </a>

11
crates/frontend/src/components/StopIcon.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<svg class="w-4 h-4 p-1" fill="currentColor" viewBox="0 0 8.466666 8.4666661" version="1.1" id="svg1"
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<defs id="defs1" />
<g id="layer1">
<path style="opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round" id="rect1"
width="8.4666662" height="8.4666662" x="0" y="0"
d="M 0.33866665,0 H 8.1279996 A 0.33866665,0.33866665 45 0 1 8.4666662,0.33866665 V 8.1279996 A 0.33866665,0.33866665 135 0 1 8.1279996,8.4666662 H 0.33866665 A 0.33866665,0.33866665 45 0 1 0,8.1279996 V 0.33866665 A 0.33866665,0.33866665 135 0 1 0.33866665,0 Z" />
</g>
</svg>
</template>

25
crates/frontend/src/components/rect1.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="31.999998"
height="31.999998"
viewBox="0 0 8.466666 8.4666661"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="layer1">
<path
style="opacity:1;fill:#000000;fill-opacity:0.979565;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round"
id="rect1"
width="8.4666662"
height="8.4666662"
x="0"
y="0"
d="M 0.33866665,0 H 8.1279996 A 0.33866665,0.33866665 45 0 1 8.4666662,0.33866665 V 8.1279996 A 0.33866665,0.33866665 135 0 1 8.1279996,8.4666662 H 0.33866665 A 0.33866665,0.33866665 45 0 1 0,8.1279996 V 0.33866665 A 0.33866665,0.33866665 135 0 1 0.33866665,0 Z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 881 B

14
crates/frontend/src/views/Base.vue
View File

@ -4,6 +4,7 @@ import { headMeta, devel } from "@";
import NavBar from "@/components/NavBar.vue"; import NavBar from "@/components/NavBar.vue";
import DocumentationIcon from "@/components/DocumentationIcon.vue"; import DocumentationIcon from "@/components/DocumentationIcon.vue";
import DiscordIcon from "@/components/DiscordIcon.vue"; import DiscordIcon from "@/components/DiscordIcon.vue";
import MatrixIcon from "@/components/MatrixIcon.vue";
import GitIcon from "@/components/GitIcon.vue"; import GitIcon from "@/components/GitIcon.vue";
import VinylIcon from "@/components/VinylIcon.vue"; import VinylIcon from "@/components/VinylIcon.vue";
import Player from "@/components/Player.vue"; import Player from "@/components/Player.vue";
@ -13,6 +14,7 @@ import Error from "@/components/Error.vue";
const title = ref(null); const title = ref(null);
const author = ref(null); const author = ref(null);
const discord = ref(null); const discord = ref(null);
const matrix = ref(null);
const git = ref(null); const git = ref(null);
const documentation = ref(null); const documentation = ref(null);
@ -20,6 +22,7 @@ onMounted(() => {
title.value = document.getElementsByTagName("title")[0].text; title.value = document.getElementsByTagName("title")[0].text;
author.value = devel ? "L-Nafaryus" : headMeta("author"); author.value = devel ? "L-Nafaryus" : headMeta("author");
discord.value = devel ? "http://example.com" : headMeta("discord"); discord.value = devel ? "http://example.com" : headMeta("discord");
matrix.value = devel ? "http://example.com" : headMeta("matrix");
git.value = devel ? "http://example.com" : headMeta("git"); git.value = devel ? "http://example.com" : headMeta("git");
documentation.value = devel ? "http://example.com" : headMeta("documentation"); documentation.value = devel ? "http://example.com" : headMeta("documentation");
}); });
@ -35,7 +38,12 @@ onMounted(() => {
</template> </template>
<template #right> <template #right>
<a v-if="discord" :href="discord" <a v-if="matrix" :href="discord" target="_blank" rel="noreferrer"
class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
<MatrixIcon />
<span class="hidden sm:inline">Matrix</span>
</a>
<a v-if="discord" :href="discord" target="_blank" rel="noreferrer"
class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold"> class="flex justify-center items-center space-x-1 text-ctp-surface0 link-button font-bold">
<DiscordIcon /> <DiscordIcon />
<span class="hidden sm:inline">Discord</span> <span class="hidden sm:inline">Discord</span>
@ -54,12 +62,12 @@ onMounted(() => {
<div class="flex justify-between max-w-[1200px] mx-auto"> <div class="flex justify-between max-w-[1200px] mx-auto">
<span v-if="author" class="text-ctp-peach font-bold items-center flex">Made by {{ author }}</span> <span v-if="author" class="text-ctp-peach font-bold items-center flex">Made by {{ author }}</span>
<div class="flex space-x-1"> <div class="flex space-x-1">
<a v-if="documentation" :href="documentation" <a v-if="documentation" :href="documentation" target="_blank" rel="noreferrer"
class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle"> class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
<DocumentationIcon /> <DocumentationIcon />
<span class="hidden sm:inline">Docs</span> <span class="hidden sm:inline">Docs</span>
</a> </a>
<a v-if="git" :href="git" <a v-if="git" :href="git" target="_blank" rel="noreferrer"
class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle"> class="flex justify-center items-center space-x-1 text-ctp-peach link-button font-bold bg-ctp-mantle">
<GitIcon /> <GitIcon />
<span class="hidden sm:inline">Git</span> <span class="hidden sm:inline">Git</span>

2
crates/frontend/templates/base.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="/assets/logo.svg"> <link rel="icon" type="image/svg+xml" sizes="16x16 32x32" href="/assets/logo.svg">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>{{ title }}</title> <title>{{ title }}</title>
{% for item in meta.as_deref().unwrap_or([]) %} {% for item in meta.as_deref().unwrap_or([]) %}
<meta name="{{ item.name }}" content="{{ item.content }}"> <meta name="{{ item.name }}" content="{{ item.content }}">