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

Merge remote-tracking branch 'origin/31-update-songdata-for-fetching-songs-on-frontend-for-playback' into 33-create-component-for-displaying-music-on-dashboard

Browse Source
This commit is contained in:
Ethan Girouard
2024-07-30 20:57:52 -04:00
parent af66381f5f 21bb2d127f
commit 906b5bd9dd
31 changed files with 1305 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
style/main.scss
View File

@ -10,6 +10,7 @@
@import 'personal.scss';
@import 'dashboard_tile.scss';
@import 'dashboard_row.scss';
@import 'upload.scss';
body {
font-family: sans-serif;

147
style/sidebar.scss
View File

@ -4,67 +4,20 @@
background-color: transparent;
width: 22rem;
height: calc(100% - 75px);
}
.sidebar-top-container {
border-radius: 1rem;
background-color: #1c1c1c;
height: 9rem;
margin: 3px;
padding: 0.1rem 1rem 1rem 1rem;
}
.sidebar-top-container .header {
font-size: 1.2rem;
}
.sidebar-top-container .buttons {
display: flex;
flex-direction: row;
font-size: 1.8rem;
align-items: center;
transition: all 0.5s;
cursor: pointer;
color: grey;
}
.sidebar-top-container .buttons:hover {
color: white;
}
.sidebar-top-container .buttons:last-child {
margin-left: 0.02rem;
margin-top: 0.5rem;
}
.sidebar-top-container h1 {
font-size: 0.95rem;
margin-left: 0.9rem;
font-weight: 400;
font-style: $standard-font;
letter-spacing: 0.5px;
}
.sidebar-bottom-container {
border-radius: 1rem;
background-color: #1c1c1c;
margin: 3px;
margin-top: 6px;
padding: 0.2rem 1rem 1rem 1rem;
height: calc(100% - 9rem);
.heading {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.sidebar-top-container {
border-radius: 1rem;
background-color: #1c1c1c;
height: 9rem;
margin: 3px;
padding: 0.1rem 1rem 1rem 1rem;
position: relative;
.header {
font-size: 1.2rem;
font-weight: 200;
}
.add-playlist {
.upload-btn {
position: absolute;
top: 10px;
right: 7px;
display: flex;
flex-direction: row;
align-items: center;
@ -73,8 +26,8 @@
border-radius: 50px;
border: none;
height: 2.2rem;
padding-right: 2rem;
padding-left: 2rem;
padding-right: 1rem;
padding-left: 1rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
@ -84,8 +37,80 @@
color: white;
}
}
.add-playlist:hover {
.upload-btn:hover {
background-color: #9e9e9e;
}
.buttons {
display: flex;
flex-direction: row;
font-size: 1.8rem;
align-items: center;
transition: all 0.5s;
cursor: pointer;
color: grey;
text-decoration: none;
}
.buttons:hover {
color: white;
}
.buttons:last-child {
margin-left: 0.02rem;
margin-top: 0.5rem;
}
h1 {
font-size: 0.95rem;
margin-left: 0.9rem;
font-weight: 400;
font-style: $standard-font;
letter-spacing: 0.5px;
}
}
.sidebar-bottom-container {
border-radius: 1rem;
background-color: #1c1c1c;
margin: 3px;
margin-top: 6px;
padding: 0.2rem 1rem 1rem 1rem;
height: calc(100% - 9rem);
.heading {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.header {
font-size: 1.2rem;
font-weight: 200;
}
.add-playlist {
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: 2rem;
padding-left: 2rem;
cursor: pointer;
transition: background-color 0.3s ease;
.add-sign {
font-size: 1.5rem;
margin-top: auto;
margin-right: 5px;
color: white;
}
}
.add-playlist:hover {
background-color: #9e9e9e;
}
}
}
}

188
style/upload.scss Normal file
View File

@ -0,0 +1,188 @@
@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;
}
}
.has-search {
position: relative;
width: 325px;
.search-results {
display: flex;
flex-direction: column;
border: 1px solid white;
width: 100%;
position: absolute;
top: 75%;
background-color: #1c1c1c;
z-index: 2;
border-radius: 5px;
padding: 0;
.result {
border-bottom: 1px solid white;
padding: 10px;
cursor: pointer;
transition: 0.3s;
&:hover {
background-color: #7f8fa6;
}
}
.result:last-child {
border-bottom: none;
}
}
}
}
.error-msg {
padding-top: 10px;
color: red;
display: flex;
justify-content: center;
align-items: center;
svg {
width: 20px;
height: 20px;
margin-right: 5px;
}
}
}