smaller buttons

This commit is contained in:
Luke Berndt
2024-09-21 11:05:51 -04:00
parent 475c67eed7
commit 5817bea3b7
4 changed files with 30 additions and 11 deletions

View File

@@ -214,20 +214,20 @@ function CallPlayer(props) {
<Menu fixed="bottom" inverted vertical fluid> <Menu fixed="bottom" inverted vertical fluid>
<div className="item-container"> <div className="item-container">
<div className={autoplayClassName} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></div> <div className={autoplayClassName} onClick={() => handleAutoPlay(autoPlay)}><Icon name="level up" /><span className="desktop-only">Autoplay</span></div>
<div className="mediaplayer-item"> <div className="mediaplayer">
<MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} /> <MediaPlayer call={currentCall} playSilence={silenceCount} onEnded={callEnded} onPlayPause={handlePlayPause} />
</div> </div>
<div className="button-item desktop-only"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}> {/* <div className="button-item desktop-only"><SupportModal trigger={<Button color='grey' animated='fade' size={"small"}>
<ButtonContent visible color="red"> <ButtonContent visible color="red">
<Icon name='heart' /> Donate <Icon name='heart' /> Donate
</ButtonContent> </ButtonContent>
<ButtonContent hidden>Thank You</ButtonContent> <ButtonContent hidden>Thank You</ButtonContent>
</Button>} /></div> </Button>} /></div> */}
<div className="button-item desktop-only" > <div className="link-item desktop-only" >
<a href={callDownload}><Icon name="download" />Download</a> <a href={callDownload}><Icon name="download" />Download</a>
</div> </div>
<div className="button-item desktop-only"> <div className="link-item desktop-only">
<a href={callLink}><Icon name="at" />Link</a> <a href={callLink}><Icon name="at" />Link</a>
</div> </div>

View File

@@ -26,14 +26,29 @@
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.mediaplayer {
flex-grow: 1;
color: white;
font-weight: bold;
text-align: center;
}
.mediaplayer-item { .mediaplayer-item {
padding: 9px 5px 5px 5px; padding: 9px 5px 5px 5px;
flex-grow: 1; flex-grow: 1;
color: white; color: white;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }
.link-item {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
width: 100px;
color: white;
font-weight: bold;
text-align: center;
}
.button-item { .button-item {
cursor:pointer; cursor:pointer;
display: flex; display: flex;
@@ -43,12 +58,17 @@
width: 100px; width: 100px;
color: white; color: white;
font-weight: bold; font-weight: bold;
text-align: center;
} }
.active{ .active{
background-color: #5c5c5c; background-color: #5c5c5c;
} }
.link-item a {
color: white;
text-align: center;
}
.button-item a { .button-item a {
color: white; color: white;
@@ -59,7 +79,7 @@ background-color: #5c5c5c;
.button-item { .button-item {
width: 50px; width: 40px;
color: white; color: white;
} }

View File

@@ -137,14 +137,12 @@ const MediaPlayer = (props) => {
<div className="button-item"> <div className="button-item" onClick={onPlayPause} >
<Button onClick={onPlayPause} floated='left'>
{ {
isPlaying isPlaying
? (<Icon name="pause" />) ? (<Icon name="pause" />)
: (<Icon name="play" />) : (<Icon name="play" />)
} }
</Button>
</div> </div>
<div className="mediaplayer-item"> <div className="mediaplayer-item">

View File

@@ -48,6 +48,7 @@ server {
proxy_pass http://frontend:3000; proxy_pass http://frontend:3000;
access_log off; access_log off;
expires 1M; expires 1M;
add_header Surrogate-Control "public, max-age=2629746";
add_header Cache-Control "max-age=2629746, public"; add_header Cache-Control "max-age=2629746, public";
} }