WebsiteProjects/Liedkampf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add song form overlay styles and integrate into song submission screen for improved UX

Browse Source
This commit is contained in:
Mathias Wagner 2025-04-24 18:19:42 +02:00
parent 6c9f1c3348
commit 77df851e95
7 changed files with 128 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
client/src/common/styles/components/song-form-overlay.sass Normal file
View File

@ -0,0 +1,54 @@
// Song Form Overlay styles
@import '../colors'
.song-form-overlay
position: fixed
top: 0
left: 0
width: 100%
height: 100%
background-color: rgba(0, 0, 0, 0.75)
z-index: 1000
display: flex
align-items: center
justify-content: center
padding: 2rem
backdrop-filter: blur(5px)
.song-form
background-color: $card-bg
border: 4px solid #000
box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.5)
padding: 2rem
width: 100%
max-width: 600px
max-height: 90vh
overflow-y: auto
position: relative
image-rendering: pixelated
h3
margin-top: 0
color: $primary
font-family: 'Press Start 2P', monospace
text-transform: uppercase
letter-spacing: 1px
text-shadow: 2px 2px 0 #000
margin-bottom: 1.5rem
position: relative
&:after
content: ''
display: block
width: 100%
height: 4px
background-color: $primary
margin-top: 0.75rem
box-shadow: 2px 2px 0 #000
image-rendering: pixelated
.form-actions
display: flex
justify-content: flex-end
gap: 1rem
margin-top: 2rem

40
client/src/common/styles/components/song-submission-screen.sass
View File

@ -64,6 +64,7 @@
font-size: 1.2rem
text-transform: uppercase
margin-bottom: 1.5rem
text-shadow: 2px 2px 0 #000
&:after
content: ''
@ -72,43 +73,59 @@
height: 4px
background-color: $secondary
margin-top: 0.5rem
box-shadow: 2px 2px 0 #000
image-rendering: pixelated
.song-item
margin-bottom: 1rem
padding: 0.75rem
margin-bottom: 1.5rem
padding: 1rem
background-color: rgba(0, 0, 0, 0.3)
border: 3px solid #000
position: relative
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5)
transition: transform 0.2s ease
&:hover
transform: translateX(2px) translateY(-2px)
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.5)
.song-title
font-weight: bold
font-family: 'Press Start 2P', monospace
font-size: 0.9rem
color: $text
margin-bottom: 0.5rem
margin-bottom: 0.75rem
text-shadow: 1px 1px 0 #000
letter-spacing: 0.5px
.song-channel
font-size: 0.8rem
color: $text-muted
font-family: 'Press Start 2P', monospace
letter-spacing: 0.5px
text-shadow: 1px 1px 0 rgba(0,0,0,0.5)
.remove-song
position: absolute
top: 0.5rem
right: 0.5rem
top: 0.75rem
right: 0.75rem
background: $danger
color: #000
color: #fff
border: 2px solid #000
width: 24px
height: 24px
width: 28px
height: 28px
font-family: 'Press Start 2P', monospace
font-size: 0.7rem
display: flex
align-items: center
justify-content: center
cursor: pointer
box-shadow: 2px 2px 0 #000
image-rendering: pixelated
&:hover
transform: scale(1.1)
transform: translateY(-2px)
box-shadow: 2px 4px 0 #000
display: flex
align-items: center
gap: 0.5rem
@ -122,6 +139,7 @@
.song-card
background-color: rgba(255, 255, 255, 0.05)
border-radius: 0.5rem
box-sizing: border-box
padding: 1rem
position: relative
transition: transform 0.2s, box-shadow 0.2s
@ -172,7 +190,9 @@
cursor: pointer
gap: 0.5rem
transition: all 0.2s
margin-top: 1rem
margin-top: 1.5rem
margin-bottom: 1rem
clear: both
&:hover
background-color: rgba($primary, 0.1)

1
client/src/common/styles/components/voting-screen.sass
View File

@ -65,6 +65,7 @@
perspective: 1000px
.song-card
box-sizing: border-box
width: 100%
max-width: 600px
background-color: $card-bg

93
client/src/common/styles/components/youtube-search.sass
View File

@ -14,7 +14,6 @@
background: rgba(0, 0, 0, 0.3)
border: 3px solid #000
color: $text
font-size: 1rem
font-family: 'Press Start 2P', monospace
font-size: 0.8rem
box-shadow: 4px 4px 0 #000
@ -46,52 +45,6 @@
box-shadow: 4px 4px 0 #000
padding: 1rem
margin-bottom: 1.5rem
.video-details
h3
margin-top: 0.5rem
margin-bottom: 0.5rem
color: $secondary
font-family: 'Press Start 2P', monospace
font-size: 0.9rem
p
color: $text-muted
margin: 0 0 0.5rem
font-family: 'Press Start 2P', monospace
font-size: 0.7rem
.btn
margin-top: 1rem
.search-results
.result-item
background: rgba($card-bg, 0.7)
border: 2px solid #000
margin-bottom: 0.5rem
padding: 0.75rem
cursor: pointer
transition: all 0.2s ease
&:hover
border-color: $primary
background: rgba($card-bg, 0.9)
transform: translateX(4px)
&.selected
border-color: $secondary
border-width: 3px
box-shadow: 0 0 8px rgba($secondary, 0.5)
.result-title
font-family: 'Press Start 2P', monospace
font-size: 0.8rem
margin: 0 0 0.25rem
color: $text
.result-channel
font-size: 0.7rem
color: $text-muted
border: 1px solid rgba($primary, 0.3)
.preview-header
@ -104,14 +57,12 @@
margin: 0
color: $primary
.preview-toggle
background: transparent
border: none
.external-link
color: $secondary
cursor: pointer
text-decoration: none
font-size: 0.85rem
padding: 0.25rem 0.5rem
border-radius: 0.25rem
font-size: 0.85rem
&:hover
background: rgba($secondary, 0.15)
@ -121,11 +72,31 @@
gap: 1rem
margin-bottom: 1rem
.selected-thumbnail
.thumbnail-container
position: relative
width: 120px
height: 90px
object-fit: cover
border-radius: 0.25rem
flex-shrink: 0
.selected-thumbnail
width: 120px
height: 90px
object-fit: cover
border-radius: 0.25rem
.play-overlay
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
color: white
background: rgba(0, 0, 0, 0.6)
width: 36px
height: 36px
border-radius: 50%
display: flex
align-items: center
justify-content: center
opacity: 0.7
.selected-info
display: flex
@ -140,7 +111,6 @@
margin: 0
color: $text-muted
font-size: 0.9rem
.video-preview
position: relative
padding-bottom: 56.25%
@ -159,11 +129,16 @@
border-radius: 0.5rem
.search-results
background: rgba($card-bg, 0.6)
background: rgba($card-bg, 0.8)
border-radius: 0.75rem
padding: 1rem
max-height: 400px
max-height: 300px
overflow-y: auto
margin-bottom: 1.5rem
border: 2px solid #000
box-shadow: 4px 4px 0 #000
position: relative
z-index: 10
h4
margin-top: 0

2
client/src/common/styles/main.sass
View File

@ -11,6 +11,7 @@
@import './components/results-screen'
@import './components/youtube-embed'
@import './components/youtube-search'
@import './components/song-form-overlay'
// Global styles
html, body
@ -362,6 +363,7 @@ h1, h2, h3
margin-bottom: 2rem
.song-card
box-sizing: border-box
background-color: rgba($card-bg, 0.8)
backdrop-filter: blur(10px)
border-radius: 0.75rem

10
client/src/components/SongSubmissionScreen.jsx
View File

@ -321,10 +321,11 @@ const SongSubmissionScreen = () => {
</div>
{isFormVisible && (
<form className="song-form" onSubmit={handleAddSong}>
<h3>Add a Song</h3>
<div className="form-group search-group">
<div className="song-form-overlay">
<form className="song-form" onSubmit={handleAddSong}>
<h3>Add a Song</h3>
<div className="form-group search-group">
<label>Find a song</label>
<div className="search-container">
<input
@ -434,6 +435,7 @@ const SongSubmissionScreen = () => {
</button>
</div>
</form>
</div>
)}
<div className="action-buttons">

2
client/src/main.jsx
View File

@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "@fontsource/bangers";
import "@fontsource/press-start-2p";
import "./common/styles/main.sass";
import { SocketProvider, GameProvider } from "./context/GameContext.jsx";