Skip to content

Commit

Permalink
Merge pull request #133 from Front-znad-zatoki/feature/#115-AddPlayer…
Browse files Browse the repository at this point in the history 
…Panel-styling

#115 AddPlayerPanel styling
  • Loading branch information
@SebastianBabinski1
SebastianBabinski1 authored Feb 15, 2021
2 parents 57a6bc0 + 07d8360 commit 1db0b35
Show file tree
Hide file tree
Showing 2 changed files with 212 additions and 23 deletions.
27 changes: 20 additions & 7 deletions src/app/ModeView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class ModeView extends EmptyView {
type: 'button',
className: 'mode-form__remove-player-btn hidden',
},
'remove player',
'+',
);
this.addPanelsWrapper = Render.elementFactory('div', {
className: 'mode-players-wrapper',
Expand Down Expand Up @@ -95,6 +95,14 @@ export class ModeView extends EmptyView {
'dynamic mode',
),
);

const modeHeader = Render.elementFactory(
'div',
{ className: 'mode-form__heading-wrapper' },
heading,
mode,
);

const form = Render.elementFactory(
'form',
{
Expand All @@ -103,10 +111,13 @@ export class ModeView extends EmptyView {
method: 'get',
className: 'mode-form',
},
heading,
mode,
this.addPanelsWrapper,
this.addPlayerButton,
modeHeader,
Render.elementFactory(
'div',
{ className: 'mode-form__content-wrapper' },
this.addPanelsWrapper,
this.addPlayerButton,
),
);
this.addPlayer();

Expand Down Expand Up @@ -164,7 +175,7 @@ export class ModeView extends EmptyView {
this.backButton = Render.elementFactory(
'button',
{
className: 'button',
className: 'mode__button',
},
'back',
);
Expand All @@ -173,7 +184,7 @@ export class ModeView extends EmptyView {
{
type: 'submit',
form: 'mode-form',
className: 'button',
className: 'mode__button',
},
'play',
);
Expand All @@ -196,6 +207,7 @@ export class ModeView extends EmptyView {
name: indicator,
placeholder: 'type nickname here',
className: 'mode-form__input',
maxLength: '15',
});

return input;
Expand All @@ -213,6 +225,7 @@ export class ModeView extends EmptyView {
'label',
{
className: 'mode-form__ai-label',
for: indicator,
},
'AI Player',
);
Expand Down
208 changes: 192 additions & 16 deletions styles/components/_modeView.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,201 @@
.mode-form {
&__avatar {
width: 50px;
.mode {
&-view {
&__heading {
top: 2rem;
left: 2rem;
}
}
&__add-player-btn {
}
&__color-wrapper {
&-inputs-wrapper {
display: flex;
}
&__color-label {
width: 50px;
height: 50px;
}
&__color-radio {
// display: none;
&-players-wrapper {
display: inline-flex;
}
&__colors {
&__buttons {
display: flex;
justify-content: center;
justify-content: space-between;
margin: 6rem 0 0 0;
}
&__button {
width: 12rem;
height: 4rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1.3rem;
font-weight: bold;
text-transform: uppercase;
&:first-child {
background: #fefefe;
}
&:last-child {
background: #71cfd7;
}
}
&__avatars {
&-form {
display: flex;
justify-content: center;
flex-direction: column;
&__content-wrapper {
display: inline-flex;
justify-content: center;
}
&__heading-wrapper {
display: flex;
justify-content: space-between;
}
&__remove-player-btn {
position: absolute;
top: 0.5rem;
right: 1.2rem;
border: none;
background: none;
cursor: pointer;
font-size: 3rem;
transform: rotate(45deg);
&:focus {
outline: none;
}
}
&__mode {
top: 2rem;
right: 2rem;
display: flex;
height: 2.5rem;
align-items: center;
padding: 1rem;
background: #fefefe;
border-radius: 0.5rem;
&-input {
margin-right: 0.5rem;
}
&-label {
font-weight: bold;
text-transform: uppercase;
}
}
&__add-btn {
width: 25rem;
border: 3px dashed #555757;
margin: 3rem 1.3rem 0 1.3rem;
background: none;
border-radius: 16px;
cursor: pointer;
&:focus {
outline: none;
}
}
&__add-player {
position: relative;
display: flex;
width: 25rem;
height: 70vh;
flex-direction: column;
align-items: center;
padding: 2rem;
border: 2px solid black;
margin: 3rem 1.3rem 0 1.3rem;
background-color: #fefefe;
border-radius: 1rem;
}
// Styles for name input
&__input {
padding: 0.5rem;
border: none;
border-bottom: 2px solid #9ca4a4;
margin-bottom: 1.3rem;
font-size: 1.2rem;
font-weight: bold;
outline: none;
text-align: center;
&:focus-within {
border-bottom: 2px solid black;
}
}

&__avatars {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1rem 0;
}
&__avatar {
&-wrapper {
position: relative;
}
width: 4.3rem;
cursor: pointer;
&-label {
display: flex;
width: 110px;
height: 110px;
justify-content: center;
margin: 10px;
}

&-radio {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
}

&-radio:checked + .mode-form__avatar-label {
border: 2px solid black;
border-radius: 50%;
}
}

// Styles for colors
&__colors {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1rem;
}
&__color-wrapper {
position: relative;
display: flex;
margin: 10px 20px;
}
&__color-label {
width: 110px;
height: 110px;
border-radius: 50%;
cursor: pointer;
}

&__color-radio {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
}

&__color-radio {
&:checked + .mode-form__color-label {
border: 2px solid black;
box-shadow: 0px 0px 0px 3px #fff inset;
}
}

// Styles for AI Player
&__ai {
&-input {
margin: 0 1rem;
}
&-label {
font-size: 1.5rem;
}
}
}
}

.hidden-element {
cursor: initial;
opacity: 0.3;
pointer-events: none;
}

.grey-background {
background: white;
opacity: 0.7;
}

0 comments on commit 1db0b35

Please sign in to comment.