OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity
impress/app/assets/stylesheets/items/sources.sass

59 lines
976 B
Sass
Raw Normal View History

Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
@import "../partials/clean/constants"
@import "../partials/clean/mixins"
.item-list
border-collapse: collapse
border: 1px solid $soft-border-color
Set fixed table width for Item Getting Guide tables We'll need to dig into this more for mobile, but here's my initial attempt at getting the tables to be consistently-sized and such!
2024-05-22 14:47:43 -07:00
width: 60%
table-layout: auto
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
td, th
border-top: 1px solid $soft-border-color
border-bottom: 1px solid $soft-border-color
padding: .25em
vertical-align: middle
&:first-child
padding-left: .5em
&:last-child
padding-right: .5em
Set fixed table width for Item Getting Guide tables We'll need to dig into this more for mobile, but here's my initial attempt at getting the tables to be consistently-sized and such!
2024-05-22 14:47:43 -07:00
.thumbnail-cell
Refactor and simplify Item Getting Guide item list CSS a bit Notably, we're renaming `.add-to-cart-cell` to `.actions-cell`, in preparation for other potential actions in other categories!
2024-05-20 16:15:46 -07:00
width: 2.5em
height: 2.5em
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
Set fixed table width for Item Getting Guide tables We'll need to dig into this more for mobile, but here's my initial attempt at getting the tables to be consistently-sized and such!
2024-05-22 14:47:43 -07:00
img
display: block
width: 100%
height: 100%
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
Add item page links to Item Getting Guide table rows Just a simple one! Clicking the item image or name takes you to the DTI item page for it now!
2024-05-21 18:57:32 -07:00
.name-cell a
text-decoration: none
Improve row focus and keyboard nav in Item Getting Guide Clearer focus states, row changes bg color on hover/focus to help you track where you are, remove the redundant image thumbnail link from the tab order (it's the same as the item name link!)
2024-05-22 14:57:28 -07:00
&:hover, &:focus
Add item page links to Item Getting Guide table rows Just a simple one! Clicking the item image or name takes you to the DTI item page for it now!
2024-05-21 18:57:32 -07:00
text-decoration: underline
Set fixed table width for Item Getting Guide tables We'll need to dig into this more for mobile, but here's my initial attempt at getting the tables to be consistently-sized and such!
2024-05-22 14:47:43 -07:00
.actions-cell
text-align: right
padding-left: 1em
font-size: 85%
Improve row focus and keyboard nav in Item Getting Guide Clearer focus states, row changes bg color on hover/focus to help you track where you are, remove the redundant image thumbnail link from the tab order (it's the same as the item name link!)
2024-05-22 14:57:28 -07:00
tbody
tr
&:hover, &:focus-within
background: rgba($module-bg-color, 0.5)
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
thead
background: $module-bg-color
th
text-align: left
Refactor and simplify Item Getting Guide item list CSS a bit Notably, we're renaming `.add-to-cart-cell` to `.actions-cell`, in preparation for other potential actions in other categories!
2024-05-20 16:15:46 -07:00
.actions-cell button
Use table layout for Item Getting Guide item list This helps us be more efficient with our use of space, keep the CTAs well aligned, show a clear total, and set up how we might do CTAs for more complex cases like all the potential Neopoint CTAs like Wiz/Trades/Auction/etc!
2024-05-20 15:23:34 -07:00
/* Bootstrap's Purple 600 */
+awesome-button-color(#59359a)
Add more PB item info and links to Item Getting Guide I add some infrastructural support for inferring an item's paintbrush color (if any), and a field to the database to manually track an item's paint brush item name! This is both useful for tracking which colors are even *available* via paint brush, and also for working with colors with unusual paint brush names, like the "Get Off My Lawn Paint Brush" (for Elderly pets). Here's the script I ran to backfill this for current colors and their paint brushes! ```rb Color.find_by_name("Baby").update!(pb_item_name: "Baby Paint Brush") Color.find_by_name("Biscuit").update!(pb_item_name: "Biscuit Paint Brush") Color.find_by_name("Blue").update!(pb_item_name: "Blue Paint Brush") Color.find_by_name("Brown").update!(pb_item_name: "Brown Paint Brush") Color.find_by_name("Camouflage").update!(pb_item_name: "Camouflage Paint Brush") Color.find_by_name("Candy").update!(pb_item_name: "Candy Paint Brush") Color.find_by_name("Checkered").update!(pb_item_name: "Checkered Paint Brush") Color.find_by_name("Christmas").update!(pb_item_name: "Christmas Paint Brush") Color.find_by_name("Cloud").update!(pb_item_name: "Cloud Paint Brush") Color.find_by_name("Darigan").update!(pb_item_name: "Darigan Paint Brush") Color.find_by_name("Dimensional").update!(pb_item_name: "Dimensional Paint Brush") Color.find_by_name("Disco").update!(pb_item_name: "Disco Fever Paint Brush") Color.find_by_name("Electric").update!(pb_item_name: "Electric Blue Paint Brush") Color.find_by_name("Eventide").update!(pb_item_name: "Eventide Paint Brush") Color.find_by_name("Faerie").update!(pb_item_name: "Faerie Paint Brush") Color.find_by_name("Fire").update!(pb_item_name: "Fire, Fire, Your Pants On Fire Paint Brush") Color.find_by_name("Elderlyboy").update!(pb_item_name: "Get Off My Lawn Paint Brush") Color.find_by_name("Elderlygirl").update!(pb_item_name: "Get Off My Lawn Paint Brush") Color.find_by_name("Ghost").update!(pb_item_name: "Ghost Paint Brush") Color.find_by_name("Glowing").update!(pb_item_name: "Glowing Paint Brush") Color.find_by_name("Gold").update!(pb_item_name: "Golden Paint Brush") Color.find_by_name("Green").update!(pb_item_name: "Green Paint Brush") Color.find_by_name("Grey").update!(pb_item_name: "Grey Paint Brush") Color.find_by_name("Halloween").update!(pb_item_name: "Halloween Paint Brush") Color.find_by_name("Invisible").update!(pb_item_name: "Invisible Paint Brush") Color.find_by_name("Desert").update!(pb_item_name: "Lost Desert Paint Brush") Color.find_by_name("Maractite").update!(pb_item_name: "Maractite Paint Brush") Color.find_by_name("Maraquan").update!(pb_item_name: "Maraquan Paint Brush") Color.find_by_name("Marble").update!(pb_item_name: "Marble Paint Brush") Color.find_by_name("Island").update!(pb_item_name: "Mystery Island Paint Brush") Color.find_by_name("Oil Paint").update!(pb_item_name: "Oil Paint Brush") Color.find_by_name("Orange").update!(pb_item_name: "Orange Paint Brush") Color.find_by_name("Origami").update!(pb_item_name: "Origami Paint Brush") Color.find_by_name("Pastel").update!(pb_item_name: "Pastel Paint Brush") Color.find_by_name("Pink").update!(pb_item_name: "Pink Paint Brush") Color.find_by_name("Pirate").update!(pb_item_name: "Pirate Paint Brush") Color.find_by_name("Plushie").update!(pb_item_name: "Plushie Paint Brush") Color.find_by_name("Polka Dot").update!(pb_item_name: "Polka Dot Paint Brush") Color.find_by_name("Purple").update!(pb_item_name: "Purple Paint Brush") Color.find_by_name("Rainbow").update!(pb_item_name: "Rainbow Paint Brush") Color.find_by_name("Red").update!(pb_item_name: "Red Paint Brush") Color.find_by_name("Relic").update!(pb_item_name: "Relic Paint Brush") Color.find_by_name("Royalboy").update!(pb_item_name: "Royal Paint Brush") Color.find_by_name("Royalgirl").update!(pb_item_name: "Royal Paint Brush") Color.find_by_name("Sketch").update!(pb_item_name: "Scritchy Sketchy Paint Brush") Color.find_by_name("Shadow").update!(pb_item_name: "Shadow Paint Brush") Color.find_by_name("Silver").update!(pb_item_name: "Silver Paint Brush") Color.find_by_name("Skunk").update!(pb_item_name: "Skunk Paint Brush") Color.find_by_name("Snow").update!(pb_item_name: "Snow Paint Brush") Color.find_by_name("Speckled").update!(pb_item_name: "Speckled Paint Brush") Color.find_by_name("Split").update!(pb_item_name: "Split Paint Brush") Color.find_by_name("Spotted").update!(pb_item_name: "Spotted Paint Brush") Color.find_by_name("Starry").update!(pb_item_name: "Starry Paint Brush") Color.find_by_name("Stealthy").update!(pb_item_name: "Stealth Paint Brush") Color.find_by_name("Steampunk").update!(pb_item_name: "Steampunk Paint Brush") Color.find_by_name("Strawberry").update!(pb_item_name: "Strawberry Fields Forever Paint Brush") Color.find_by_name("Striped").update!(pb_item_name: "Striped Paint Brush") Color.find_by_name("Swamp Gas").update!(pb_item_name: "Swamp Gas Paint Brush") Color.find_by_name("Toy").update!(pb_item_name: "Toy Paint Brush") Color.find_by_name("Transparent").update!(pb_item_name: "Transparent Paint Brush") Color.find_by_name("Tyrannian").update!(pb_item_name: "Tyrannian Paint Brush") Color.find_by_name("Usuki Boy").update!(pb_item_name: "Usuki Paint Brush") Color.find_by_name("Usuki Girl").update!(pb_item_name: "Usuki Paint Brush") Color.find_by_name("Valentine").update!(pb_item_name: "Valentine Paint Brush") Color.find_by_name("Water").update!(pb_item_name: "Water Paint Brush") Color.find_by_name("White").update!(pb_item_name: "White Paint Brush") Color.find_by_name("Woodland").update!(pb_item_name: "Woodland Paint Brush") Color.find_by_name("Wraith").update!(pb_item_name: "Wraith Paint Brush") Color.find_by_name("Yellow").update!(pb_item_name: "Yellow Paint Brush") Color.find_by_name("Zombie").update!(pb_item_name: "Zombie Paint Brush") ```
2024-05-22 15:41:46 -07:00
.special-color-explanation
text-wrap: balance
font-style: italic
Copy permalink