stub nav form styles and fix board span bug
This commit is contained in:
Sorrel Bri
parent
d0d4f2429c
commit
64dfe54953
14 changed files with 163 additions and 70 deletions
|
|
@ -3,9 +3,15 @@ import './Library.scss';
|
|||
|
||||
const LibraryButton = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
Library
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import './NewGame.scss';
|
|||
|
||||
const NewGameButton = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
New Game
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import './NewRoom.scss';
|
|||
|
||||
const NewRoomButton = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
New Room
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import './RoomArchive.scss';
|
|||
|
||||
const RoomArchiveButton = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
Room Archive
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ div.Loading {
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 6vw;
|
||||
left: 47vw;
|
||||
position: absolute;
|
||||
top: 45vh;
|
||||
width: 6vw;
|
||||
|
||||
div.point {
|
||||
|
|
|
|||
|
|
@ -9,25 +9,35 @@ const Auth = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<p
|
||||
className="auth-label"
|
||||
<div
|
||||
className="nav__section nav__section--auth"
|
||||
onClick={()=>{setShowForm('login')}}
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>Login</p>
|
||||
|
||||
{
|
||||
showForm === 'login'
|
||||
? <Login dispatch={dispatch} state={state}/>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
|
||||
<p
|
||||
className="auth-label"
|
||||
<div
|
||||
className="nav__section nav__section--auth"
|
||||
onClick={()=>{setShowForm('signup')}}
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>Signup</p>
|
||||
|
||||
{
|
||||
showForm === 'signup'
|
||||
? <Signup dispatch={dispatch} state={state}/>
|
||||
: <></>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import './FindGame.scss';
|
|||
|
||||
const FindGameForm = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
Find Game
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,15 @@ import './FindRoom.scss';
|
|||
|
||||
const FindRoomForm = () => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="nav__section"
|
||||
>
|
||||
<p
|
||||
className="nav__section__label"
|
||||
>
|
||||
Find Room
|
||||
</>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const RoomSidebar = props => {
|
|||
|
||||
return (
|
||||
<nav>
|
||||
<h3>{ state.currentRoom.name }</h3>
|
||||
{showAuth()}
|
||||
<FindGameForm />
|
||||
<NewGameButton />
|
||||
|
|
|
|||
Loading…
Reference in a new issue