impress/app/assets/stylesheets/partials/_item_header.sass

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
@import "../application/item-badges"

=item-header
  border-bottom: 1px solid $module-border-color
  margin-top: 1em
  margin-bottom: 1em

  .item-header-main
    display: grid
    grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
    align-items: center
    justify-content: center
    column-gap: 1em
    row-gap: .5em

    .item-thumbnail
      grid-area: img

      border: 1px solid $module-border-color
      height: 80px
      width: 80px

    .item-name
      grid-area: name

      text-align: left
      line-height: 100%
      margin-bottom: 0

    .item-links
      grid-area: links

      font-size: 85%
      text-align: left
      display: flex
      align-items: center
      flex-wrap: wrap
      gap: 1em

      abbr
        cursor: help

    .support-form
      grid-area: support
      font-size: 85%
      text-align: left

    .user-lists-info
      grid-area: lists
      font-size: 85%
      text-align: left

      display: flex
      gap: 1em

      a::after
        content: " ›"

  .user-lists-form
    background: $background-color
    border: 1px solid $module-border-color
    border-radius: .5em
    padding: 1em
    width: 30em
    text-align: center
    z-index: 2
    margin-top: .5em
    margin-inline: auto
    margin-bottom: 1.5em
    font-size: 85%

    h3
      font-size: 150%
      font-weight: bold
      margin-bottom: .75em

    .closet-hangers-ownership-groups
      +clearfix
      margin-bottom: .5em

      div
        float: left
        margin: 0 5%
        text-align: left
        width: 40%

        li
          list-style: none
          word-wrap: break-word

          label.unlisted
            font-style: italic

    form
      padding: .5em 0

    select
      width: 9em

    input[type=number]
      margin-right: .5em
      width: 3em

  .item-description
    margin-top: .5em
    margin-bottom: 1em

  .item-subpages-nav
    display: flex
    align-items: flex-end
    gap: 1em

    .preview-link
      margin-right: auto

    .trades-section
      display: flex
      gap: .5em

      header
        align-self: center
        font-weight: bold

        &::after
          content: ":"

      ul
        align-self: flex-end
        list-style: none
        display: flex
        gap: .5em

        li
          display: block

    a
      display: block
      background: $module-bg-color
      border: 1px solid $module-border-color
      border-bottom: 0
      border-radius: .5em .5em 0 0
      padding: .5em 1em
      text-decoration: none

      &:hover, &:focus
        text-decoration: underline

      &[data-is-current=true]
        background: $background-color
        padding-bottom: calc(.5em + 1px)
        font-weight: bold
        margin-bottom: -1px
-												Fix style bug in trades page

Oops, I forgot this import! It worked when rebuilding styles in dev,
but not once I reloaded the server.

											
										
										
											2024-01-21 03:58:33 -08:00
+								@import "../partials/clean/constants"
-												Move item lists bulk management form to an openable dialog in the header

											
										
										
											2024-01-21 06:20:32 -08:00
+								@import "../partials/clean/mixins"
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
+								@import "../application/item-badges"
-												Fix style bug in trades page

Oops, I forgot this import! It worked when rebuilding styles in dev,
but not once I reloaded the server.

											
										
										
											2024-01-21 03:58:33 -08:00
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
+								=item-header
 								  border-bottom: 1px solid $module-border-color
-												Move item description into header

											
										
										
											2024-01-21 05:07:45 -08:00
+								  margin-top: 1em
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
+								  margin-bottom: 1em
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								  .item-header-main
 								    display: grid
-												Move item lists bulk management form to an openable dialog in the header

											
										
										
											2024-01-21 06:20:32 -08:00
+								    grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								    align-items: center
 								    justify-content: center
 								    column-gap: 1em
 								    row-gap: .5em
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								    .item-thumbnail
 								      grid-area: img
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								      border: 1px solid $module-border-color
 								      height: 80px
 								      width: 80px
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								    .item-name
 								      grid-area: name
 								      text-align: left
 								      line-height: 100%
 								      margin-bottom: 0
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								    .item-links
 								      grid-area: links
-												Replace rarity on item page with NC/NP badge, styled after 2020

											
										
										
											2024-01-21 05:20:08 -08:00
+								      font-size: 85%
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								      text-align: left
-												Replace rarity on item page with NC/NP badge, styled after 2020

											
										
										
											2024-01-21 05:20:08 -08:00
+								      display: flex
 								      align-items: center
-												Add responsive layout for item page

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!

											
										
										
											2024-09-05 16:18:48 -07:00
+								      flex-wrap: wrap
-												Replace rarity on item page with NC/NP badge, styled after 2020

											
										
										
											2024-01-21 05:20:08 -08:00
+								      gap: 1em
-												Add "first seen" timestamps to item pages

Impress 2020 has had this for a while, I've wanted it for reference on
occasion, let's bring it in!

Very similar logic, and Ruby & Rails's date affordances are super
helpful for simplifying how to express it!

											
										
										
											2024-02-20 14:32:45 -08:00
-												Add NC prices to item pages

											
										
										
											2024-06-18 13:25:29 -07:00
+								      abbr
 								        cursor: help
-												Add edit page for items, to set modeling status for done/glitchy items

											
										
										
											2024-11-20 12:07:25 -08:00
+								    .support-form
 								      grid-area: support
 								      font-size: 85%
 								      text-align: left
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								    .user-lists-info
-												Move item lists bulk management form to an openable dialog in the header

											
										
										
											2024-01-21 06:20:32 -08:00
+								      grid-area: lists
 								      font-size: 85%
 								      text-align: left
-												Add edit page for items, to set modeling status for done/glitchy items

											
										
										
											2024-11-20 12:07:25 -08:00
+								      display: flex
 								      gap: 1em
 								      a::after
 								        content: " ›"
-												Move item lists bulk management form to an openable dialog in the header

											
										
										
											2024-01-21 06:20:32 -08:00
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								  .user-lists-form
 								    background: $background-color
 								    border: 1px solid $module-border-color
 								    border-radius: .5em
 								    padding: 1em
 								    width: 30em
 								    text-align: center
 								    z-index: 2
 								    margin-top: .5em
 								    margin-inline: auto
 								    margin-bottom: 1.5em
 								    font-size: 85%
 								    h3
 								      font-size: 150%
 								      font-weight: bold
 								      margin-bottom: .75em
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								    .closet-hangers-ownership-groups
 								      +clearfix
 								      margin-bottom: .5em
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								      div
 								        float: left
 								        margin: 0 5%
 								        text-align: left
 								        width: 40%
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								        li
 								          list-style: none
 								          word-wrap: break-word
-												[WV2] Add badges to items

											
										
										
											2025-11-02 15:48:39 -08:00
-												Move user bulk lists form into a toggleable form, not a dialog

My intent is to next add behavior to save this state across pageloads,
for power users to not have to always reopen it!

											
										
										
											2024-01-23 04:20:03 -08:00
+								          label.unlisted
 								            font-style: italic
 								    form
 								      padding: .5em 0
 								    select
 								      width: 9em
 								    input[type=number]
 								      margin-right: .5em
 								      width: 3em
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
-												Move item description into header

											
										
										
											2024-01-21 05:07:45 -08:00
+								  .item-description
 								    margin-top: .5em
 								    margin-bottom: 1em
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								  .item-subpages-nav
 								    display: flex
 								    align-items: flex-end
-												Add responsive layout for item page

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!

											
										
										
											2024-09-05 16:18:48 -07:00
+								    gap: 1em
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
 								    .preview-link
 								      margin-right: auto
 								    .trades-section
 								      display: flex
 								      gap: .5em
 								      header
 								        align-self: center
 								        font-weight: bold
 								        &::after
 								          content: ":"
 								      ul
 								        align-self: flex-end
 								        list-style: none
 								        display: flex
 								        gap: .5em
 								        li
 								          display: block
-												Add basic styles to trades page

Still not accessible via links, just exists!

											
										
										
											2024-01-21 03:38:02 -08:00
 								    a
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								      display: block
-												Tweak tab styles

Oh right, I just remembered how tabs work, they join with the page when
selected! lol

Something about this still feels off to me, but idk, I find it charming
and I wanna just let it rock.

											
										
										
											2024-01-21 07:17:10 -08:00
+								      background: $module-bg-color
-												Add tab navigation to get to item trade pages

											
										
										
											2024-01-21 04:40:25 -08:00
+								      border: 1px solid $module-border-color
 								      border-bottom: 0
 								      border-radius: .5em .5em 0 0
 								      padding: .5em 1em
 								      text-decoration: none
 								      &:hover, &:focus
 								        text-decoration: underline
 								      &[data-is-current=true]
-												Tweak tab styles

Oh right, I just remembered how tabs work, they join with the page when
selected! lol

Something about this still feels off to me, but idk, I find it charming
and I wanna just let it rock.

											
										
										
											2024-01-21 07:17:10 -08:00
+								        background: $background-color
 								        padding-bottom: calc(.5em + 1px)
 								        font-weight: bold
-												Add responsive layout for item page

We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅

And then, I fix up a couple things on the item page (including in the
general items layout) to match!

I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!

											
										
										
											2024-09-05 16:18:48 -07:00
+								        margin-bottom: -1px