Klectr/KRadio
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

(feat): update ui styles and layout

Browse Source
This commit is contained in:
Triston Armstrong 2024-04-06 01:28:33 -05:00
parent 47be8b0665
commit 929b8eb719
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
3 changed files with 53 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src-tauri/tauri.conf.json
View File

@ -44,12 +44,12 @@
"windows": [
{
"title": "KlectrRadio",
"width": 1200,
"width": 800,
"height": 600,
"decorations": false,
"resizable": true,
"min-width": 800,
"min-height": 600
"minWidth": 800,
"minHeight": 600
}
],
"security": {

57
src/App.tsx
View File

@ -13,15 +13,17 @@ export function App() {
}, [])
return (
<div className="flex flex-row min-h-screen gap-2 px-2">
<div className="pt-10 min-h-screen max-h-screen min-w-[250px] flex flex-col gap-4 ">
<div className="flex flex-row gap-2 px-2 mt-[30px]">
{/* Left Section __________*/}
<div className="pt-2 min-h-[95vh] max-h-[95vh] min-w-[150px] flex flex-col gap-4 justify-start">
<div className="w-full flex justify-center">
<input type="text" className="rounded-md border p-1 w-full" placeholder="Search" />
</div>
<div>
<h2 className="text-gray-500 text-sm">Music</h2>
<ul>
<li className="flex gap-2 hover:bg-gray-200 rounded-md p-1 cursor-pointer">
<li className="flex gap-2 hover:bg-blue-100 rounded-md p-1 cursor-pointer hover:text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-radio-tower w-[15px]">
<path d="M4.9 16.1C1 12.2 1 5.8 4.9 1.9" />
<path d="M7.8 4.7a6.14 6.14 0 0 0-.8 7.5" />
@ -35,27 +37,62 @@ export function App() {
</li>
</ul>
</div>
<div className="flex justify-center">
<button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100">Create New +</button>
</div>
<button className="px-4 border border-blue-500 rounded-md text-blue-500 hover:bg-blue-100 w-full">Create New +</button>
</div>
{/* Right Section __________*/}
<div className="flex-1 h-full min-h-screen max-h-screen flex h-0 p-2">
<div className="flex-1 min-h-[95vh] max-h-[95vh] flex h-0 p-2">
<div className="bg-gray-200 w-full border rounded-xl p-4 flex-col flex gap-4">
<div id="top" className=" p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px]">
<p>Music Player</p>
{/* Music Player __________*/}
<div id="top" className="justify-between p-2 bg-gray-300 flex-[0.5] rounded-xl max-h-[100px] flex gap-2 items-center">
<div className="flex gap-2 items-center">
<img className="rounded-xl" src="https://www.thispersondoesnotexist.com" width={80} height={'auto'} alt="station art" />
<div className="flex flex-col">
<p>Camden to Chinatown</p>
<p>Loafy Building, Raimu</p>
</div>
<div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col">
</div>
<div >
<div className="flex gap-1 justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-play">
<polygon points="6 3 20 12 6 21 6 3" />
</svg>
</div>
<div className="flex gap-1">
<p>0:40</p>
<input type="range" />
<p>1:44</p>
</div>
</div>
<div className="flex gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-volume-1">
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
</svg>
<input type="range" />
</div>
</div>
{/* Popular Section __________*/}
<div id="middle" className="bg-gray-300 flex-[.8] rounded-xl flex flex-col max-h-[150px]">
<div id="middle-main" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
<h2>Popular</h2>
</div>
</div>
{/* Bottom Section __________*/}
<div id="bottom" className="flex-1 rounded-xl flex flex-row gap-4">
{/* Local Radio __________*/}
<div id="bottom-l" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
<h2>Local Radio</h2>
</div>
{/* Recommended Radio __________*/}
<div id="bottom-r" className="font-bold p-2 bg-white flex-1 rounded-xl shadow-md">
<h2>Recommended For You</h2>
</div>

5
src/styles.css
View File

@ -26,7 +26,7 @@ body {
}
.titlebar {
height: 20px;
height: 30px;
user-select: none;
display: flex;
justify-content: flex-start;
@ -35,7 +35,8 @@ body {
top: 0;
left: 0;
right: 0;
padding: 10px;
padding: 5px;
cursor: grab;
}
.titlebar-button {
display: inline-flex;