granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #5 from jedmund/ui-update

Browse source 
Rudimentary responsive redesign
This commit is contained in:
Justin Edmund 2022-02-03 00:19:39 -08:00 committed by GitHub
commit bdb2082e7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 321 additions and 237 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/CharacterGrid/index.scss
View file

@ -1,19 +1,25 @@
.CharacterGrid {
#CharacterGrid {
display: flex;
justify-content: center;
}
#grid_characters {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
width: 761px;
max-width: 761px;
@media (max-width: $medium-screen) {
justify-content: space-between;
width: 100%;
}
& > * {
margin-bottom: 24px;
margin-right: 24px;
margin-right: $unit * 3;
@media (max-width: $medium-screen) {
margin-right: inherit;
}
}
& > li:last-child {

2
components/CharacterGrid/index.tsx
View file

@ -194,7 +194,7 @@ const CharacterGrid = (props: Props) => {
// Render: JSX components
return (
<div className="CharacterGrid">
<div id="CharacterGrid">
<ul id="grid_characters">
{Array.from(Array(numCharacters)).map((x, i) => {
return (

114
components/CharacterUnit/index.scss
View file

@ -3,68 +3,74 @@
flex-direction: column;
gap: 4px;
max-width: 200px;
}
.CharacterUnit .CharacterImage {
background: white;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.18s ease-in-out;
height: 268px;
width: 131px;
}
&.editable .CharacterImage: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-tall;
}
.CharacterUnit.editable .CharacterImage: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-tall;
}
&.filled h3 {
display: block;
}
.CharacterUnit.filled h3 {
display: block;
}
&.filled ul {
display: flex;
}
.CharacterUnit.filled ul {
display: flex;
}
h3,
ul {
display: none;
}
.CharacterUnit h3,
.CharacterUnit ul {
display: none;
}
h3 {
color: #333;
font-size: $font-regular;
font-weight: 500;
margin: 0;
max-width: 131px;
text-align: center;
word-wrap: normal;
}
.CharacterUnit h3 {
color: #333;
font-size: $font-regular;
font-weight: 500;
margin: 0;
max-width: 131px;
text-align: center;
word-wrap: normal;
}
img {
position: relative;
width: 100%;
z-index: 2;
}
.CharacterUnit img {
position: relative;
width: 100%;
z-index: 2;
}
.CharacterImage {
aspect-ratio: 131 / 238;
background: white;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.18s ease-in-out;
height: auto;
width: 131px;
.CharacterImage .icon {
position: absolute;
height: 20px;
width: 20px;
z-index: 1;
@media (max-width: $medium-screen) {
width: 17vw;
}
svg {
fill: #c9c9c9;
&:hover .icon {
color: #555;
}
.icon {
position: absolute;
height: 20px;
width: 20px;
z-index: 1;
svg {
fill: #c9c9c9;
}
}
}
}
.CharacterImage:hover .icon {
color: #555;
}

23
components/ExtraSummons/index.scss
View file

@ -10,6 +10,12 @@
position: relative;
left: 9px;
@media (max-width: $medium-screen) {
left: auto;
max-width: auto;
width: 100%;
}
& > span {
color: #825B39;
display: flex;
@ -22,6 +28,23 @@
width: 387px;
}
#grid_summons {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: $unit * 2;
grid-template-rows: 1fr;
grid-row-gap: $unit * 3;
& > li {
list-style: none;
min-height: 0;
.SummonUnit {
min-height: 0;
}
}
}
.SummonUnit .SummonImage {
background: #facea7;
}

19
components/ExtraWeapons/index.scss
View file

@ -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 {

4
components/ExtraWeapons/index.tsx
View file

@ -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 (

31
components/SummonGrid/index.scss
View file

@ -1,4 +1,4 @@
.SummonGrid {
#SummonGrid {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: $unit * 2;
@ -11,25 +11,16 @@
margin-bottom: $unit;
text-align: center;
}
}
#grid_summons {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: $unit * 2;
grid-template-rows: 1fr;
grid-row-gap: $unit * 3;
}
#grid_summons {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: $unit * 2;
grid-template-rows: 1fr;
grid-row-gap: $unit * 3;
#grid_summons > li {
list-style: none;
min-height: 180px;
}
#ExtraSummons #grid_summons > li {
min-height: 0;
.SummonUnit {
min-height: 0;
& > li {
list-style: none;
}
}
}
}

2
components/SummonGrid/index.tsx
View file

@ -265,7 +265,7 @@ const SummonGrid = (props: Props) => {
)
return (
<div>
<div className="SummonGrid">
<div id="SummonGrid">
{ mainSummonElement }
{ friendSummonElement }
{ summonGridElement }

59
components/SummonUnit/index.scss
View file

@ -3,6 +3,42 @@
flex-direction: column;
gap: 4px;
&.main .SummonImage,
&.friend .SummonImage {
aspect-ratio: 182 / 315;
width: 182px;
height: auto;
@media (max-width: $medium-screen) {
width: 20.3vw;
}
}
&.grid {
// max-width: 148px;
// min-height: 141px;
min-height: 180px;
@media (max-width: $medium-screen) {
min-height: 16.5vw;
}
.SummonImage {
aspect-ratio: 148 / 111;
list-style-type: none;
width: 148px;
height: auto;
@media (max-width: $medium-screen) {
width: 20vw;
}
}
}
&.friend {
margin-right: 0;
}
.SummonImage {
background: white;
border: 1px solid rgba(0, 0, 0, 0);
@ -67,26 +103,3 @@
z-index: 2;
}
}
/* Mainhand */
.SummonUnit.friend {
margin-right: 0;
}
.SummonUnit.main .SummonImage,
.SummonUnit.friend .SummonImage {
height: 315px;
width: 182px;
}
/* Grid */
.SummonUnit.grid {
max-width: 148px;
min-height: 141px;
}
.SummonUnit.grid .SummonImage {
list-style-type: none;
height: 111px;
width: 148px;
}

53
components/WeaponGrid/index.scss
View file

@ -1,31 +1,38 @@
#WeaponGrid {
#MainGrid {
display: flex;
justify-content: center;
.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;
}

6
components/WeaponGrid/index.tsx
View file

@ -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 : '' })() }

164
components/WeaponUnit/index.scss
View file

@ -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;
}

50
styles/globals.scss
View file

@ -1,42 +1,50 @@
@import '~meyer-reset-scss';
html {
background: $grey-90;
font-size: 62.5%;
padding: $unit * 2;
background: $background-color;
font-size: 62.5%;
padding: $unit * 2;
}
body {
-webkit-font-smoothing: antialiased;
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.4rem;
&.no-scroll {
overflow: hidden;
}
-webkit-font-smoothing: antialiased;
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.4rem;
&.no-scroll {
overflow: hidden;
}
}
a {
text-decoration: none;
text-decoration: none;
}
button, input {
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
}
h1, h2, h3, p {
color: $grey-00;
color: $grey-00;
}
h1 {
font-size: 2.1rem;
font-weight: $medium;
text-align: center;
font-size: 2.1rem;
font-weight: $medium;
text-align: center;
}
#Content {
display: flex;
flex-direction: column;
gap: $unit * 3;
margin-top: $unit * 3;
}
display: flex;
flex-direction: column;
gap: $unit * 3;
margin-top: $unit * 3;
min-width: 752px;
@media (max-width: $medium-screen) {
min-width: auto;
width: 100%;
}
}

13
styles/variables.scss
View file

@ -1,7 +1,8 @@
// @import 'include-media/dist/_include-media';
// Breakpoints
$breakpoints: (small: 320px, medium: 768px, large: 1024px);
$breakpoints: (small: 320px, medium: 800px, large: 1024px);
$medium-screen: 800px;
// Sizing
$unit: 8px;
@ -12,6 +13,7 @@ $grey-10: #777;
$grey-50: #888;
$grey-80: #E9E9E9;
$grey-90: #F5F5F5;
$background-color: $grey-90;
$blue: #61B3FF;
$red: #FF6161;
@ -23,10 +25,11 @@ $medium: 500;
$bold: 600;
// Font size
$font-small: 12px;
$font-regular: 14px;
$font-large: 18px;
$font-xlarge: 21px;
$font-small: 11px;
$font-button: 15px;
$font-regular: 16px;
$font-large: 21px;
$font-xlarge: 24px;
// Scale factors
$scale-wide: scale(1.05, 1.05);