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

Fix layout
All checks were successful
Publish Docker image / Push Docker image to Docker Hub (push) Successful in 2m39s
Details

Browse Source
This commit is contained in:
Mathias Wagner 2025-03-01 00:57:37 +01:00
parent 6e8a235629
commit f00ca9ba7c
3 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/pages/Game/Game.jsx
View File

@ -370,7 +370,7 @@ export const Game = () => {
}; };
return ( return (
<div className="game-page"> <div className={`game-page ${phase === "composing" ? "with-otamatone" : ""}`}>
<div className="background-overlay"> <div className="background-overlay">
<div className="rotating-gradient"></div> <div className="rotating-gradient"></div>
</div> </div>

14
client/src/pages/Game/components/MusicSlider/styles.sass
View File

@ -9,17 +9,19 @@
right: 0 right: 0
bottom: 0 bottom: 0
padding: 20px 30px 30px 30px padding: 20px 30px 30px 30px
background: rgba(20, 20, 30, 0.75) background: rgba(20, 20, 30, 0.85)
backdrop-filter: blur(15px) backdrop-filter: blur(15px)
border-radius: 30px 30px 0 0 border-radius: 30px 30px 0 0
margin: 0 margin: 0
z-index: 10 z-index: 100
box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3), 0 -2px 10px rgba(255, 255, 255, 0.1) box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.3), 0 -2px 10px rgba(255, 255, 255, 0.1)
border-top: 1px solid rgba(255, 255, 255, 0.3) border-top: 1px solid rgba(255, 255, 255, 0.3)
border-left: 1px solid rgba(255, 255, 255, 0.2) border-left: 1px solid rgba(255, 255, 255, 0.2)
border-right: 1px solid rgba(255, 255, 255, 0.2) border-right: 1px solid rgba(255, 255, 255, 0.2)
transition: transform 0.3s ease transition: transform 0.3s ease
width: 100% width: 100%
height: 100px
animation: slide-in-bottom 0.4s ease-out
.otamatone .otamatone
display: flex display: flex
@ -174,3 +176,11 @@
100% 100%
transform: translateY(0) transform: translateY(0)
opacity: 1 opacity: 1
@keyframes slide-in-bottom
0%
transform: translateY(100%)
opacity: 0
100%
transform: translateY(0)
opacity: 1

14
client/src/pages/Game/styles.sass
View File

@ -11,6 +11,14 @@
animation: page-fade-in 1s ease-in-out animation: page-fade-in 1s ease-in-out
overflow: hidden overflow: hidden
&.with-otamatone
.game-layout
height: calc(100vh - 280px)
padding-bottom: 20px
.chat-panel
max-height: calc(100vh - 300px)
.game-layout .game-layout
display: flex display: flex
width: 100% width: 100%
@ -20,6 +28,7 @@
padding: 0 20px padding: 0 20px
z-index: 2 z-index: 2
position: relative position: relative
transition: height 0.3s ease
.main-content .main-content
flex: 1 flex: 1
@ -28,13 +37,14 @@
display: flex display: flex
flex-direction: column flex-direction: column
align-items: center align-items: center
min-width: 0 // Fix for flex child overflow min-width: 0
margin-right: 20px margin-right: 20px
// Redesigned chat panel // Redesigned chat panel
.chat-panel .chat-panel
width: 280px width: 280px
height: 100% height: 100%
max-height: calc(100vh - 200px)
background: rgba(255, 255, 255, 0.08) background: rgba(255, 255, 255, 0.08)
backdrop-filter: blur(10px) backdrop-filter: blur(10px)
border-radius: 20px border-radius: 20px
@ -43,7 +53,7 @@
display: flex display: flex
flex-direction: column flex-direction: column
overflow: hidden overflow: hidden
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), max-height 0.3s ease
animation: slide-in-right 0.5s ease-out animation: slide-in-right 0.5s ease-out
.chat-header .chat-header