hensei-web/components/reps/CharacterRep/index.scss
Justin Edmund d765b00120
Redesigned team navigation (#310)
* Add ellipsis icon

* Reduce size of tokens

* Move UpdateToast to toasts folder

* Update variables.scss

* Add reps for grid objects

These reps act like the existing PartyRep except for Characters and Summons, as well as a new component just for Weapons.

They only render the grid of objects and nothing else.

Eventually PartyRep will use WeaponRep

* Added RepSegment

This is a Character, Weapon or Summon rep wrapped with an input and label for use in a SegmentedControl

* Modify PartySegmentedControl to use RepSegments

This will not work on mobile yet, where it should gracefully degrade to a normal SegmentedControl with only text

* Extract URL copied and Remixed toasts into files

* Extract delete team alert into a file

Also, to support this:
* Added `Destructive` class to Button
* Added `primaryActionClassName` prop to Alert

* Added an alert for when remixing teams

* Began refactoring PartyDetails into several files

* PartyHeader will live at the top, above the new segmented control
* PartyDetails stays below, only showing remixed teams and the description
* PartyDropdown handles the new ... menu

* Remove duplicated code

This is description and remix code that is still in `PartyDetails`

* Small fixes for weapon grid

* Add placeholder image for guidebooks

* Add localizations

* Add Guidebook type and update other types

* Update gitignore

Don't commit guidebook images

* Indicate if a dialog is scrollable

We had broken paging in the infinite scroll component. Turning off "scrolling" at the dialog levels fixes it without adding scrollbars in environments that persistently show them

* Add ExtraContainer

This is the purple container that will contain additional weapons and sephira guidebooks

* Move ExtraWeapons to ExtraWeaponsGrid

And put it in ExtraContainer

* Added GuidebooksGrid and GuidebookUnit

These are the display components for Guidebooks in the WeaponGrid

* Visual adjustments to summon grid

* Add Empty class to weapons when unit is unfilled

* Implement GuidebooksGrid in WeaponGrid

* Remove extra switch

* Remove old dependencies and props

* Implement searching for/adding guidebooks to party

* Update styles

* Fix dependency

* Properly determine when extra container should display

* Change to 1-indexing for guidebooks

* Add support for removing guidebooks

* Display guidebook validation error

* Move read only buttons to PartyHeader

Also broke up tokens and made them easier to render

* Add guidebooks to DetailsObject

* Remove preview when on mobile sizes
2023-06-16 18:49:55 -07:00

75 lines
1.5 KiB
SCSS

.CharacterRep {
aspect-ratio: 2/0.99;
border-radius: $card-corner;
grid-gap: $unit-half; /* add a gap of 8px between grid items */
height: $rep-height;
.Character {
background: var(--card-bg);
border-radius: 4px;
}
.GridCharacters {
display: grid; /* make the right-images container a grid */
grid-template-columns: repeat(
4,
1fr
); /* create 3 columns, each taking up 1 fraction */
gap: $unit-half;
}
.Grid.Character {
aspect-ratio: 16 / 33;
box-sizing: border-box;
display: grid;
overflow: hidden;
&.MC {
border-color: transparent;
border-width: 1px;
border-style: solid;
aspect-ratio: 32 / 66;
img {
position: relative;
width: 100%;
height: 100%;
}
&.fire {
background: var(--fire-hover-bg);
border-color: var(--fire-bg);
}
&.water {
background: var(--water-hover-bg);
border-color: var(--water-bg);
}
&.wind {
background: var(--wind-hover-bg);
border-color: var(--wind-bg);
}
&.earth {
background: var(--earth-hover-bg);
border-color: var(--earth-bg);
}
&.light {
background: var(--light-hover-bg);
border-color: var(--light-bg);
}
&.dark {
background: var(--dark-hover-bg);
border-color: var(--dark-bg);
}
}
}
.Grid.Character img[src*='jpg'] {
border-radius: 4px;
width: 100%;
}
}