Skip to content

Commit

Permalink
Float Play in mobile layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@anoek
anoek committed Nov 21, 2024
1 parent 8a61bc7 commit dea5cc0
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 68 deletions.
6 changes: 5 additions & 1 deletion src/views/Play/Play.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,12 @@
flex-direction: column;
align-items: stretch;
}

@media (max-width: hamburger-cutoff) {
.Matchmaking-header {
display: none;
}

@media (max-width 720px) {
.rengo-management-list-item {
margin: inherit; // override the `auto` directive so this goes to the left on narrow screens.
width: 40%; // try to fit the whole pane nicely on narrow phones
Expand Down
2 changes: 1 addition & 1 deletion src/views/Play/Play.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export function Play(): JSX.Element {
return (
<div className="Play container">
<div className="tab-head">
<h2>
<h2 className="Matchmaking-header">
<i className="ogs-goban"></i> {pgettext("Play page", "Matchmaking")}
</h2>

Expand Down
38 changes: 36 additions & 2 deletions src/views/Play/QuickMatch.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,14 @@
//flex-basis: 2.5rem;
font-size: 1.3rem;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-around;
align-items: center;
//align-content: center;
padding-bottom: 2.5rem;
padding-top: 1rem;



Expand Down Expand Up @@ -267,6 +270,9 @@
font-size: 0.9rem;
}

.PlayButton-container {
width: 100%;
}
.play-button {
//margin-top: 3rem;
width: 100%;
Expand Down Expand Up @@ -541,8 +547,36 @@
flex-direction: column;
margin-right: 0rem;
margin-left: 0rem;
margin-bottom: 4rem;
margin-bottom: 8rem;
column-gap: 0rem;
margin-top: 0rem;

.speed-options {
margin-bottom: 0;
}

.computer-select {
select {
min-width: calc(100vw - 6rem) !important;
max-width: calc(100vw - 6rem) !important;
width: calc(100vw - 6rem) !important;
}
}
}

.BoardSize-header {
display: none;
}
.PlayButton-container {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
right: 0;
themed background-color bg
.play-button {
margin: 0;
}
}

.GameOption-cell {
Expand Down
128 changes: 64 additions & 64 deletions src/views/Play/QuickMatch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,7 +597,7 @@ export function QuickMatch(): JSX.Element {
<div id="FindGame">
{/* Board Size */}
<div className="GameOption-cell">
<div className="GameOption">
<div className="GameOption BoardSize-header">
<span>{_("Board Size")}</span>
</div>

Expand Down Expand Up @@ -876,76 +876,76 @@ export function QuickMatch(): JSX.Element {
/>
</div>

{automatch_manager.active_live_automatcher && (
<div>
<div className="finding-game-container">
<span>{_("Finding you a game...")}</span>

<LoadingButton
className="danger sm"
loading={true}
onClick={cancelActiveAutomatch}
>
{pgettext("Cancel automatch", "Cancel search")}
</LoadingButton>
</div>
</div>
)}

{bot_spinner && (
<div>
<div className="finding-game-container">
<LoadingButton
className="danger sm"
loading={true}
onClick={cancel_bot_game.current}
>
{_("Cancel")}
</LoadingButton>
<div className="PlayButton-container">
{automatch_manager.active_live_automatcher && (
<div>
<div className="finding-game-container">
<LoadingButton
className="success sm"
loading={true}
onClick={cancelActiveAutomatch}
>
{pgettext("Cancel automatch", "Searching for game...")}
</LoadingButton>
</div>
</div>
</div>
)}

{correspondence_spinner && (
<div>
<div className="automatch-header">{_("Finding you a game...")}</div>
<div className="automatch-settings-corr">
{_(
'This can take several minutes. You will be notified when your match has been found. To view or cancel your automatch requests, please see the list below labeled "Your Automatch Requests".',
)}
)}

{bot_spinner && (
<div>
<div className="finding-game-container">
<LoadingButton
className="danger sm"
loading={true}
onClick={() => cancel_bot_game.current()}
>
{_("Cancel")}
</LoadingButton>
</div>
</div>
<div className="automatch-row-container">
<button className="primary" onClick={dismissCorrespondenceSpinner}>
)}

{correspondence_spinner && (
<div>
<div className="automatch-header">{_("Finding you a game...")}</div>
<div className="automatch-settings-corr">
{_(
pgettext(
"Dismiss the 'finding correspondence automatch' message",
"Got it",
),
'This can take several minutes. You will be notified when your match has been found. To view or cancel your automatch requests, please see the list below labeled "Your Automatch Requests".',
)}
</button>
</div>
<div className="automatch-row-container">
<button className="primary" onClick={dismissCorrespondenceSpinner}>
{_(
pgettext(
"Dismiss the 'finding correspondence automatch' message",
"Got it",
),
)}
</button>
</div>
</div>
</div>
)}
{user.anonymous && (
<div className="anonymous-container">
{_("Please sign in to play")}
<div>
<Link to="/register#/play">{_("Register for Free")}</Link>
{" | "}
<Link to="/sign-in#/play">{_("Sign in")}</Link>
)}
{user.anonymous && (
<div className="anonymous-container">
{_("Please sign in to play")}
<div>
<Link to="/register#/play">{_("Register for Free")}</Link>
{" | "}
<Link to="/sign-in#/play">{_("Sign in")}</Link>
</div>
</div>
</div>
)}
)}

{!search_active && !user.anonymous && (
<button
className="primary play-button"
onClick={play}
disabled={anon || warned}
>
{_("Play")}
</button>
)}
{!search_active && !user.anonymous && (
<button
className="primary play-button"
onClick={play}
disabled={anon || warned}
>
{_("Play")}
</button>
)}
</div>
</div>
</div>
);
Expand Down

0 comments on commit dea5cc0

Please sign in to comment.