impress/app/assets/stylesheets/items/_show.sass

@import "../partials/clean/constants"
@import "../partials/clean/mixins"

body.items-show
  #item-header
    border-bottom: 1px solid $module-border-color
    margin-bottom: 1em
    padding: 1em 0

    display: grid
    grid-template-areas: "img gap1" "img name" "img links" "img gap2"
    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%
      
    #item-links
      grid-area: links

      text-align: left
      a
        font-size: 75%
        margin-left: 1em
    
  #item-name
    margin-bottom: 0

  #item-info-section
    display: grid

    grid-template-areas: "info form"
    grid-template-columns: 1fr auto

    #item-info
      grid-area: info
    
      #item-zones
        font:
          family: $text-font
          size: 85%
        margin-bottom: 1em

        p
          display: inline

          &:first-child
            margin-right: 1em

    #your-items-form
      grid-area: form

      border: 1px solid $module-border-color
      font-size: 85%
      margin-bottom: 3em
      margin-left: 1em
      padding: 1em
      width: 30em
      
      // compete with #trade-hangers
      position: relative
      z-index: 2

      h3
        font-size: 150%
        font-weight: bold
        margin-bottom: .25em
      
      #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
          
    #trade-hangers
      font-size: 85%
      margin-bottom: 3em
      text-align: left

      p
        position: relative

        &:first-child
          margin-bottom: .5em

        &.overflows
          .toggle
            display: block

        &.showing-more
          .toggle
            .less
              display: block

            .more
              display: none

      .toggle
        background: white
        bottom: 0
        cursor: pointer
        display: none
        font-family: $main-font
        padding: 0 1em
        position: absolute
        right: 0

        &:hover
          text-decoration: underline

        .less
          display: none
  
  #item-contributors
    +subtle-banner
    clear: both
    margin:
      bottom: 0
      top: 2em
    
    header
      display: inline
      font-weight: bold
      margin-right: .25em
    
    footer
      display: inline
    
    ul
      li::after
        content: ", "
      
      li:last-child::after
        content: "."
    
  .nc-icon
    height: 16px
    width: 16px

  &.js
    #trade-hangers
      p
        max-height: 3em
        overflow: hidden

        &.showing-more
          max-height: none
Upgrade to latest Sass and Sprockets This required a buncha fixes to how SASS scoping works! Needed to add a bunch of imports for stuff that previously would get read from the global scope by being imported after the constants and mixins etc. There's clearly a lot of refactor opportunity here, but I'm not gonna worry about it!! 2023-08-22 16:08:11 -07:00			`@import "../partials/clean/constants"`
			`@import "../partials/clean/mixins"`

move from scss to sass 2010-11-05 13:43:26 -07:00			`body.items-show`
simplify closeting item 2011-07-15 13:32:05 -07:00			`#item-header`
move from scss to sass 2010-11-05 13:43:26 -07:00			`border-bottom: 1px solid $module-border-color`
			`margin-bottom: 1em`
			`padding: 1em 0`
Use CSS grid for item page header Just modernizing some stuff, hum dee dum 2024-01-18 22:07:30 -08:00
			`display: grid`
			`grid-template-areas: "img gap1" "img name" "img links" "img gap2"`
			`align-items: center`
			`justify-content: center`
			`column-gap: 1em`
			`row-gap: .5em`

			`#item-thumbnail`
			`grid-area: img`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00
Use CSS grid for item page header Just modernizing some stuff, hum dee dum 2024-01-18 22:07:30 -08:00			`border: 1px solid $module-border-color`
			`height: 80px`
			`width: 80px`

			`#item-name`
			`grid-area: name`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00
move from scss to sass 2010-11-05 13:43:26 -07:00			`text-align: left`
Use CSS grid for item page header Just modernizing some stuff, hum dee dum 2024-01-18 22:07:30 -08:00			`line-height: 100%`
update items#show style 2012-03-23 14:37:53 -07:00
Use CSS grid for item page header Just modernizing some stuff, hum dee dum 2024-01-18 22:07:30 -08:00			`#item-links`
			`grid-area: links`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00
Use CSS grid for item page header Just modernizing some stuff, hum dee dum 2024-01-18 22:07:30 -08:00			`text-align: left`
			`a`
			`font-size: 75%`
			`margin-left: 1em`
update items#show style 2012-03-23 14:37:53 -07:00
move from scss to sass 2010-11-05 13:43:26 -07:00			`#item-name`
			`margin-bottom: 0`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00
			`#item-info-section`
			`display: grid`

			`grid-template-areas: "info form"`
			`grid-template-columns: 1fr auto`

			`#item-info`
			`grid-area: info`
update items#show style 2012-03-23 14:37:53 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`#item-zones`
			`font:`
			`family: $text-font`
			`size: 85%`
			`margin-bottom: 1em`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`p`
			`display: inline`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`&:first-child`
			`margin-right: 1em`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`#your-items-form`
			`grid-area: form`

			`border: 1px solid $module-border-color`
			`font-size: 85%`
			`margin-bottom: 3em`
			`margin-left: 1em`
			`padding: 1em`
			`width: 30em`

			`// compete with #trade-hangers`
show traders on items#show 2011-07-30 21:19:28 -07:00			`position: relative`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`z-index: 2`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`h3`
			`font-size: 150%`
			`font-weight: bold`
			`margin-bottom: .25em`

			`#closet-hangers-ownership-groups`
			`+clearfix`
show traders on items#show 2011-07-30 21:19:28 -07:00			`margin-bottom: .5em`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00
			`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`

			`#trade-hangers`
			`font-size: 85%`
			`margin-bottom: 3em`
			`text-align: left`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`p`
			`position: relative`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`&:first-child`
			`margin-bottom: .5em`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`&.overflows`
			`.toggle`
			`display: block`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`&.showing-more`
			`.toggle`
			`.less`
			`display: block`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`.more`
			`display: none`
show traders on items#show 2011-07-30 21:19:28 -07:00
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`.toggle`
			`background: white`
			`bottom: 0`
			`cursor: pointer`
show traders on items#show 2011-07-30 21:19:28 -07:00			`display: none`
Use CSS grid instead of floats for item page info I'm planning to mess with this layout a bit, I don't want floats getting in my way! 2024-01-18 22:16:56 -08:00			`font-family: $main-font`
			`padding: 0 1em`
			`position: absolute`
			`right: 0`

			`&:hover`
			`text-decoration: underline`

			`.less`
			`display: none`
brought-to-you-by on items#show lists contributors 2012-10-24 20:09:05 -07:00
			`#item-contributors`
			`+subtle-banner`
			`clear: both`
a few tweaks to items#show contributors appearance 2012-10-24 20:16:01 -07:00			`margin:`
			`bottom: 0`
			`top: 2em`
brought-to-you-by on items#show lists contributors 2012-10-24 20:09:05 -07:00
			`header`
			`display: inline`
			`font-weight: bold`
			`margin-right: .25em`

			`footer`
			`display: inline`

			`ul`
Remove compass-rails I wasn't sure what we were actually using it for, turns out it was mostly polyfills for CSS features that are very standard now! I didn't audit these changes very carefully tbqh because they seemed pretty simple? Fingers crossed! 2023-08-22 15:34:40 -07:00			`li::after`
			`content: ", "`
brought-to-you-by on items#show lists contributors 2012-10-24 20:09:05 -07:00
			`li:last-child::after`
			`content: "."`
update items#show style 2012-03-23 14:37:53 -07:00
move from scss to sass 2010-11-05 13:43:26 -07:00			`.nc-icon`
			`height: 16px`
			`width: 16px`
basic hanger interface from item 2011-07-14 09:50:24 -07:00
show traders on items#show 2011-07-30 21:19:28 -07:00			`&.js`
			`#trade-hangers`
			`p`
			`max-height: 3em`
			`overflow: hidden`

			`&.showing-more`
			`max-height: none`