Make WeaponGrid responsive
This commit is contained in:
parent
061e510b44
commit
d5332ccee5
6 changed files with 151 additions and 106 deletions
|
|
@ -1,4 +1,4 @@
|
|||
#ExtraWeapons {
|
||||
#ExtraGrid {
|
||||
background: #ECEBFF;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -10,16 +10,31 @@
|
|||
position: relative;
|
||||
left: 8px;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
left: auto;
|
||||
max-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: #4F3C79;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
text-align: center;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
.grid_weapons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 528px;
|
||||
}
|
||||
|
||||
.WeaponUnit .WeaponImage {
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ const ExtraWeapons = (props: Props) => {
|
|||
const numWeapons: number = 3
|
||||
|
||||
return (
|
||||
<div id="ExtraWeapons">
|
||||
<div id="ExtraGrid">
|
||||
<span>Additional<br />Weapons</span>
|
||||
<ul id="grid_weapons">
|
||||
<ul className="grid_weapons">
|
||||
{
|
||||
Array.from(Array(numWeapons)).map((x, i) => {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,31 +1,42 @@
|
|||
#WeaponGrid {
|
||||
#MainGrid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
|
||||
}
|
||||
|
||||
.grid_weapons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-width: 528px;
|
||||
}
|
||||
}
|
||||
|
||||
#MainGrid, #ExtraGrid {
|
||||
.grid_weapons > * {
|
||||
margin-bottom: $unit * 3;
|
||||
margin-right: $unit * 3;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
margin-bottom: $unit * 2;
|
||||
margin-right: $unit * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_weapons > *:nth-child(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.grid_weapons > li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
#ExtraWeapons #grid_weapons > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#grid_weapons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 528px;
|
||||
}
|
||||
|
||||
#grid_weapons > * {
|
||||
margin-bottom: 24px;
|
||||
margin-right: 24px;
|
||||
|
||||
}
|
||||
|
||||
#grid_weapons > *:nth-child(3n+3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#grid_weapons > li {
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -238,10 +238,10 @@ const WeaponGrid = (props: Props) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<div id="weapon_grids">
|
||||
<div id="WeaponGrid">
|
||||
<div id="WeaponGrid">
|
||||
<div id="MainGrid">
|
||||
{ mainhandElement }
|
||||
<ul id="grid_weapons">{ weaponGridElement }</ul>
|
||||
<ul className="grid_weapons">{ weaponGridElement }</ul>
|
||||
</div>
|
||||
|
||||
{ (() => { return (props.extra) ? extraGridElement : '' })() }
|
||||
|
|
|
|||
|
|
@ -2,91 +2,103 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.WeaponUnit .WeaponImage {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
transition: all 0.18s ease-in-out;
|
||||
}
|
||||
&.mainhand {
|
||||
margin-right: $unit * 3;
|
||||
max-width: 200px;
|
||||
|
||||
.WeaponUnit.editable .WeaponImage:hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
|
||||
cursor: pointer;
|
||||
transform: $scale-wide;
|
||||
}
|
||||
@media (max-width: $medium-screen) {
|
||||
margin-right: $unit * 2;
|
||||
}
|
||||
|
||||
.WeaponUnit.mainhand.editable .WeaponImage:hover {
|
||||
transform: $scale-tall;
|
||||
}
|
||||
&.editable .WeaponImage:hover {
|
||||
transform: $scale-tall;
|
||||
}
|
||||
|
||||
.WeaponUnit.filled h3 {
|
||||
display: block;
|
||||
}
|
||||
.WeaponImage {
|
||||
aspect-ratio: 200 / 418;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
width: 25vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WeaponUnit.filled ul {
|
||||
display: flex;
|
||||
}
|
||||
&.grid {
|
||||
max-width: 160px;
|
||||
|
||||
.WeaponUnit h3,
|
||||
.WeaponUnit ul {
|
||||
display: none;
|
||||
}
|
||||
.WeaponImage {
|
||||
aspect-ratio: 160 / 92;
|
||||
list-style-type: none;
|
||||
width: 160px;
|
||||
height: auto;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
width: 20vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WeaponUnit h3 {
|
||||
color: #333;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
&.filled h3 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.WeaponUnit img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
&.filled ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.WeaponImage .icon {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
z-index: 1;
|
||||
& h3,
|
||||
& ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #c9c9c9;
|
||||
.WeaponImage {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
transition: all 0.18s ease-in-out;
|
||||
|
||||
&:hover .icon {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
&.editable .WeaponImage:hover {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
|
||||
cursor: pointer;
|
||||
transform: $scale-wide;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #333;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
z-index: 1;
|
||||
|
||||
svg {
|
||||
fill: #c9c9c9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WeaponImage:hover .icon {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Mainhand */
|
||||
.WeaponUnit.mainhand {
|
||||
margin-right: 24px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.WeaponUnit.mainhand .WeaponImage {
|
||||
height: 418px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Grid */
|
||||
.WeaponUnit.grid {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.WeaponUnit.grid .WeaponImage {
|
||||
list-style-type: none;
|
||||
height: 92px;
|
||||
width: 160px;
|
||||
}
|
||||
|
|
@ -41,3 +41,10 @@ h1 {
|
|||
margin-top: $unit * 3;
|
||||
min-width: 752px;
|
||||
|
||||
@media (max-width: $medium-screen) {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue