eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

styled upload form

Browse Source
This commit is contained in:
Danny Zou 2024-05-12 23:56:59 -07:00
parent 8a959d530d
commit 714fbc596a
5 changed files with 267 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/sidebar.rs
View File

@ -17,10 +17,8 @@ pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>, upload_open:
view! { view! {
<div class="sidebar-container"> <div class="sidebar-container">
<div class="sidebar-top-container"> <div class="sidebar-top-container">
<div class="sidebar-top-header-container">
<h2 class="header">LibreTunes</h2> <h2 class="header">LibreTunes</h2>
<UploadBtn dialog_open=upload_open /> <UploadBtn dialog_open=upload_open />
</div>
<div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} > <div class="buttons" on:click=open_dashboard style={move || if active() {"color: #e1e3e1"} else {""}} >
<Icon icon=icondata::OcHomeFillLg /> <Icon icon=icondata::OcHomeFillLg />
<h1>Dashboard</h1> <h1>Dashboard</h1>

52
src/components/upload.rs
View File

@ -33,53 +33,45 @@ pub fn Upload(open: RwSignal<bool>) -> impl IntoView {
view! { view! {
<Show when=open fallback=move || view! {}> <Show when=open fallback=move || view! {}>
<div class="dialog-container" on:click=close_dialog> <div class="upload-container" open=open>
<dialog open=open on:click=click_cancel_bubble> <div class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></div>
<div class="dialog-header"> <div class="upload-header">
<button class="close-button" on:click=close_dialog><Icon icon=icondata::IoClose /></button>
<h1>Upload Song</h1> <h1>Upload Song</h1>
</div> </div>
<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data") class="upload-form">
<Form action="/api/upload" method="POST" enctype=String::from("multipart/form-data")> <div class="input-bx">
<div class="input-box"> <input type="text" name="title" required class="text-input" required/>
<input class="info" type="text" name="title" required/>
<span>Title</span> <span>Title</span>
<i></i>
</div> </div>
<div class="input-bx">
<div class="input-box"> <input type="text" name="artist_ids" class="text-input" required/>
<input class="info" type="text" name="artist"/> <span>Artists</span>
<span>Artist</span>
<i></i>
</div> </div>
<div class="input-bx">
<div class="input-box"> <input type="text" name="album_id" class="text-input" required/>
<input class="info" type="text" name="album_id"/> <span>Album ID</span>
<span>Album</span>
<i></i>
</div> </div>
<div class="input-bx">
<div class="input-box"> <input type="number" name="track_number" class="text-input" required/>
<input class="info" type="number" name="track_number"/>
<span>Track Number</span> <span>Track Number</span>
<i></i>
</div> </div>
<div> <div class="release-date">
<div class="left">
<span>Release</span>
<span>Date</span>
</div>
<input class="info" type="date" name="release_date"/> <input class="info" type="date" name="release_date"/>
<span>Release Date</span>
<i></i>
</div> </div>
<div> <div class="file">
<input class="info" type="file" name="file"/>
<span>File</span> <span>File</span>
<i></i> <input class="info" type="file" name="file"/>
</div> </div>
<button type="submit">Upload</button> <button type="submit" class="upload-button">Upload</button>
</Form> </Form>
</dialog>
</div> </div>
</Show> </Show>
} }

1
style/main.scss
View File

@ -8,6 +8,7 @@
@import 'home.scss'; @import 'home.scss';
@import 'search.scss'; @import 'search.scss';
@import 'personal.scss'; @import 'personal.scss';
@import 'upload.scss';
body { body {
font-family: sans-serif; font-family: sans-serif;

48
style/sidebar.scss
View File

@ -4,20 +4,43 @@
background-color: transparent; background-color: transparent;
width: 22rem; width: 22rem;
height: calc(100% - 75px); height: calc(100% - 75px);
}
.sidebar-top-container { .sidebar-top-container {
border-radius: 1rem; border-radius: 1rem;
background-color: #1c1c1c; background-color: #1c1c1c;
height: 9rem; height: 9rem;
margin: 3px; margin: 3px;
padding: 0.1rem 1rem 1rem 1rem; padding: 0.1rem 1rem 1rem 1rem;
} position: relative;
.header {
.sidebar-top-container .header {
font-size: 1.2rem; font-size: 1.2rem;
} }
.sidebar-top-container .buttons { .upload-btn {
position: absolute;
top: 10px;
right: 7px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 0.9rem;
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 1rem;
padding-left: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
margin-right: 5px;
color: white;
}
}
.upload-btn:hover {
background-color: #9e9e9e;
}
.buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 1.8rem; font-size: 1.8rem;
@ -26,23 +49,21 @@
cursor: pointer; cursor: pointer;
color: grey; color: grey;
} }
.sidebar-top-container .buttons:hover { .buttons:hover {
color: white; color: white;
} }
.buttons:last-child {
.sidebar-top-container .buttons:last-child {
margin-left: 0.02rem; margin-left: 0.02rem;
margin-top: 0.5rem; margin-top: 0.5rem;
} }
h1 {
.sidebar-top-container h1 {
font-size: 0.95rem; font-size: 0.95rem;
margin-left: 0.9rem; margin-left: 0.9rem;
font-weight: 400; font-weight: 400;
font-style: $standard-font; font-style: $standard-font;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
}
.sidebar-bottom-container { .sidebar-bottom-container {
border-radius: 1rem; border-radius: 1rem;
background-color: #1c1c1c; background-color: #1c1c1c;
@ -89,3 +110,6 @@
} }
} }
} }
}

145
style/upload.scss Normal file
View File

@ -0,0 +1,145 @@
@import "theme.scss";
.upload-container {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 30rem;
border: 1px solid white;
border-radius: 5px;
padding: 1rem;
padding-top: 0;
z-index: 2;
display: flex;
flex-direction: column;
background-color: #1c1c1c;
.close-button {
position: absolute;
top: 5px;
right: 5px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 50%;
font-size: 1.6rem;
transition: all 0.3s;
border: none;
}
.close-button:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.1);
}
.close-button:active {
transform: scale(0.8);
}
.upload-header {
font-size: .7rem;
font-weight: 300;
padding-bottom: 0;
border-bottom: 1px solid white;
font-family: "Roboto", sans-serif;
}
.upload-form {
padding: .1rem;
display: flex;
flex-direction: column;
.input-bx{
margin-top: 1rem;
position: relative;
width: 300px;
input{
width: 100%;
padding: 10px;
border: 2px solid #7f8fa6;
border-radius: 5px;
outline: none;
font-size: 1rem;
transition: 0.6s;
background-color: transparent;
}
span{
position: absolute;
left: 0;
top: 1px;
padding: 10px;
font-size: 1rem;
color: #7f8fa6;
text-transform: uppercase;
pointer-events: none;
transition: 0.6s;
background-color: transparent;
}
input:valid ~ span,
input:focus ~ span{
color: #fff;
transform: translateX(10px) translateY(-7px);
font-size: 0.65rem;
font-weight: 600;
padding: 0 10px;
background: #1c1c1c;
letter-spacing: 0.1rem;
}
input:valid,
input:focus{
color: #fff;
border: 2px solid #fff;
}
}
.release-date {
margin-top: 1rem;
font-size: 1.2rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
display: flex;
align-items: center;
.left {
display: flex;
flex-direction: column;
margin-left: 5px;
margin-right: 10px;
}
span {
font-size: .85rem;
}
input {
padding: 8px;
}
}
.file {
margin-top: .5rem;
display: flex;
align-items: center;
span {
font-size: .9rem;
color: #7f8fa6;
font-family: "Roboto", sans-serif;
margin-left: 5px;
margin-right: 10px;
}
input {
padding: 10px;
}
}
.upload-button {
margin-top: 1rem;
padding: 10px;
background-color: #7f8fa6;
color: #fff;
font-size: 1rem;
font-family: "Roboto", sans-serif;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #fff;
color: #7f8fa6;
}
}
}
}