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 08e76b33d0
commit 3943d08ab6
14 changed files with 163 additions and 70 deletions

View file

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

View file

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

View file

@ -2,10 +2,16 @@ import React from 'react';
import './NewRoom.scss';
const NewRoomButton = () => {
return (
<>
New Room
</>
return (
<div
className="nav__section"
>
<p
className="nav__section__label"
>
New Room
</p>
</div>
);
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -2,11 +2,12 @@
@import '../../../../public/stylesheets/partials/mixins';
div.player-container {
display: flex;
align-items: flex-end;
justify-content: space-around;
display: flex;
flex: 5;
height: 9vmin;
justify-content: space-around;
margin: 1em;
width: 100%;
&:last-child {
@ -20,40 +21,40 @@ div.player-container {
}
div.player-container__bowl {
order: -1;
margin: 4vh;
height: 15vh;
width: 15vh;
border-radius: 50%;
background-color: rgb(116, 48, 17);
align-items: center;
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);
display: flex;
align-items: center;
height: 15vh;
justify-content: center;
margin: 4vh;
order: -1;
width: 15vh;
@media #{map-get($break-points, "570")} {
margin: 3vh;
height: 10vh;
margin: 3vh;
width: 10vh;
}
&[data-turn]:hover p {
display: block;
color: #FFF;
background-color: rgba(0,0,0,0.3);
padding: .5em;
color: #FFF;
cursor: grab;
display: block;
padding: .5em;
}
&[data-turn] {
box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
& + .player-container__name-space .player-container__caps-space:hover :first-child {
display: block;
position: absolute;
background-color: rgba(0,0,0,0.7);
padding: .5em;
cursor: grab;
display: block;
padding: .5em;
position: absolute;
}
}
@ -64,20 +65,20 @@ div.player-container {
}
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;
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;
margin: 1vh;
width: 10vh;
@media #{map-get($break-points, "570")} {
margin: 2vh;
height: 7vh;
margin: 2vh;
width: 7vh;
}
@ -87,10 +88,10 @@ div.player-container__caps-space {
}
div.player-container__name-space {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
flex-direction: column;
display: flex;
order: 1;
h4 {
@include gameViewLabel;

View file

@ -1,5 +1,41 @@
@import '../../../../public/stylesheets/partials/variables';
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__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}/> : <></>}
</div>

View file

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

View file

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