stub nav form styles and fix board span bug

This commit is contained in:
Sorrel Bri 2020-02-04 22:52:07 -08:00 committed by sorrelbri
parent a29431e67d
commit 497db97161
14 changed files with 163 additions and 70 deletions

View file

@ -3,9 +3,15 @@ import './Library.scss';
const LibraryButton = () => { const LibraryButton = () => {
return ( return (
<> <div
Library className="nav__section"
</> >
<p
className="nav__section__label"
>
Library
</p>
</div>
); );
} }

View file

@ -3,9 +3,15 @@ import './NewGame.scss';
const NewGameButton = () => { const NewGameButton = () => {
return ( return (
<> <div
New Game className="nav__section"
</> >
<p
className="nav__section__label"
>
New Game
</p>
</div>
); );
} }

View file

@ -3,9 +3,15 @@ import './NewRoom.scss';
const NewRoomButton = () => { const NewRoomButton = () => {
return ( return (
<> <div
New Room className="nav__section"
</> >
<p
className="nav__section__label"
>
New Room
</p>
</div>
); );
} }

View file

@ -3,9 +3,15 @@ import './RoomArchive.scss';
const RoomArchiveButton = () => { const RoomArchiveButton = () => {
return ( return (
<> <div
Room Archive className="nav__section"
</> >
<p
className="nav__section__label"
>
Room Archive
</p>
</div>
); );
} }

View file

@ -3,6 +3,9 @@ div.Loading {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
height: 6vw; height: 6vw;
left: 47vw;
position: absolute;
top: 45vh;
width: 6vw; width: 6vw;
div.point { div.point {

View file

@ -9,25 +9,35 @@ const Auth = (props) => {
return ( return (
<> <>
<p <div
className="auth-label" className="nav__section nav__section--auth"
onClick={()=>{setShowForm('login')}} onClick={()=>{setShowForm('login')}}
>Login</p> >
{ <p
showForm === 'login' className="nav__section__label"
? <Login dispatch={dispatch} state={state}/> >Login</p>
: <></>
}
<p {
className="auth-label" showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
</div>
<div
className="nav__section nav__section--auth"
onClick={()=>{setShowForm('signup')}} onClick={()=>{setShowForm('signup')}}
>Signup</p> >
<p
className="nav__section__label"
>Signup</p>
{ {
showForm === 'signup' showForm === 'signup'
? <Signup dispatch={dispatch} state={state}/> ? <Signup dispatch={dispatch} state={state}/>
: <></> : <></>
} }
</div>
</> </>
); );
} }

View file

@ -3,9 +3,15 @@ import './FindGame.scss';
const FindGameForm = () => { const FindGameForm = () => {
return ( return (
<> <div
Find Game className="nav__section"
</> >
<p
className="nav__section__label"
>
Find Game
</p>
</div>
); );
} }

View file

@ -3,10 +3,16 @@ import './FindRoom.scss';
const FindRoomForm = () => { const FindRoomForm = () => {
return ( return (
<> <div
Find Room className="nav__section"
</> >
); <p
className="nav__section__label"
>
Find Room
</p>
</div>
);
} }
export default FindRoomForm; export default FindRoomForm;

View file

@ -50,8 +50,10 @@ div.Game__board {
height: 5vmin; height: 5vmin;
@media #{map-get($break-points, "590")} { @media #{map-get($break-points, "590")} {
height: 3.5vh; height: 2.6vw;
width: 3.5vh; width: 2.6vw;
max-width: 3.5vh;
max-height: 3.5vh;
} }
} }
} }

View file

@ -2,11 +2,12 @@
@import '../../../../public/stylesheets/partials/mixins'; @import '../../../../public/stylesheets/partials/mixins';
div.player-container { div.player-container {
display: flex;
align-items: flex-end; align-items: flex-end;
justify-content: space-around; display: flex;
flex: 5; flex: 5;
height: 9vmin; height: 9vmin;
justify-content: space-around;
margin: 1em;
width: 100%; width: 100%;
&:last-child { &:last-child {
@ -20,40 +21,40 @@ div.player-container {
} }
div.player-container__bowl { div.player-container__bowl {
order: -1; align-items: center;
margin: 4vh;
height: 15vh;
width: 15vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
background: radial-gradient(farthest-corner at 48% 54%, rgba(30, 5, 0, 0.25) 0%, rgba(30, 5, 0, 0.45) 2%, rgba(30, 5, 0, 0.75) 32%, rgba(0,0,0,0.85)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%); background: radial-gradient(farthest-corner at 48% 54%, rgba(30, 5, 0, 0.25) 0%, rgba(30, 5, 0, 0.45) 2%, rgba(30, 5, 0, 0.75) 32%, rgba(0,0,0,0.85)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
background-color: rgb(116, 48, 17);
border-radius: 50%;
box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61); box-shadow: -1vmin 2vmin 1.5vmin rgba(83, 53, 35, 0.61);
display: flex; display: flex;
align-items: center; height: 15vh;
justify-content: center; justify-content: center;
margin: 4vh;
order: -1;
width: 15vh;
@media #{map-get($break-points, "570")} { @media #{map-get($break-points, "570")} {
margin: 3vh;
height: 10vh; height: 10vh;
margin: 3vh;
width: 10vh; width: 10vh;
} }
&[data-turn]:hover p { &[data-turn]:hover p {
display: block;
color: #FFF;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
padding: .5em; color: #FFF;
cursor: grab; cursor: grab;
display: block;
padding: .5em;
} }
&[data-turn] { &[data-turn] {
box-shadow: 0 0 3vh 3vh rgb(255, 175, 2); box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
& + .player-container__name-space .player-container__caps-space:hover :first-child { & + .player-container__name-space .player-container__caps-space:hover :first-child {
display: block;
position: absolute;
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
padding: .5em;
cursor: grab; cursor: grab;
display: block;
padding: .5em;
position: absolute;
} }
} }
@ -64,20 +65,20 @@ div.player-container {
} }
div.player-container__caps-space { div.player-container__caps-space {
color: #FFF;
margin: 1vh;
height: 10vh;
width: 10vh;
border-radius: 50%;
background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
display: flex;
align-items: center; align-items: center;
background: radial-gradient(farthest-side at 49% 52%, rgb(150, 75, 50) 0%, rgb(116,48,17) 35%, rgb(116,48,17) 64%, rgb(80, 20, 0) 65%, rgb(175, 140, 95) 70%, rgb(120, 50, 40) 80%, rgb(80, 20, 0) 95%, rgb(175, 140, 95) 100%);
border-radius: 50%;
box-shadow: -0.5vmin 1vmin 1vmin rgba(83, 53, 35, 0.61);
color: #FFF;
display: flex;
height: 10vh;
justify-content: center; justify-content: center;
margin: 1vh;
width: 10vh;
@media #{map-get($break-points, "570")} { @media #{map-get($break-points, "570")} {
margin: 2vh;
height: 7vh; height: 7vh;
margin: 2vh;
width: 7vh; width: 7vh;
} }
@ -87,10 +88,10 @@ div.player-container__caps-space {
} }
div.player-container__name-space { div.player-container__name-space {
order: 1;
display: flex;
flex-direction: column;
align-items: center; align-items: center;
flex-direction: column;
display: flex;
order: 1;
h4 { h4 {
@include gameViewLabel; @include gameViewLabel;

View file

@ -1,5 +1,41 @@
@import '../../../../public/stylesheets/partials/variables'; @import '../../../../public/stylesheets/partials/variables';
aside { aside {
color: map-get($colors, "sidebar_link") color: map-get($colors, "sidebar_link");
display: flex;
flex-flow: column nowrap;
nav {
align-items: stretch;
display: flex;
flex-flow: column nowrap;
}
h3 {
font-size: 130%;
margin: .2em auto;
text-transform: capitalize;
}
input {
display: block;
margin: .2em 0 .2em auto;
}
div.nav__section {
border: rgba(100,100,100,0.5) solid .25em;
margin: .5em;
padding: .75em .5em;
}
p.nav__section__label {
font-size: 110%;
margin-bottom: .5em;
text-decoration: none;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
} }

View file

@ -81,8 +81,6 @@ const Room = (props) => {
<div className="Room" data-testid="Room"> <div className="Room" data-testid="Room">
<div className="Room__heading"> <div className="Room__heading">
<h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
{/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>} {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
</div> </div>

View file

@ -11,12 +11,18 @@ div.Room {
width: 100%; width: 100%;
height: 100%; height: 100%;
h2 { div.Room__heading {
justify-self:stretch; align-self: center;
align-self: flex-start; height: 100%;
width: 100%; position: sticky;
max-height: 5vh; top: 1em;
z-index: 3;
span.error--action {
padding: 1em;
background-color: map-get($colors, "error");
color: white;
}
} }
div.Room__game-container { div.Room__game-container {

View file

@ -19,6 +19,7 @@ const RoomSidebar = props => {
return ( return (
<nav> <nav>
<h3>{ state.currentRoom.name }</h3>
{showAuth()} {showAuth()}
<FindGameForm /> <FindGameForm />
<NewGameButton /> <NewGameButton />