Add html5 badge to new item previews
This commit is contained in:
parent
edcb21558a
commit
6f08abc3aa
5 changed files with 105 additions and 25 deletions
|
|
@ -255,6 +255,12 @@ body.items-show
|
|||
&:has(species-face-picker-options[inert])
|
||||
cursor: wait
|
||||
|
||||
.item-preview-meta-info
|
||||
display: grid
|
||||
grid-template-columns: 1fr auto
|
||||
gap: .5em
|
||||
align-items: center
|
||||
|
||||
.item-zones-info
|
||||
h3
|
||||
display: inline
|
||||
|
|
@ -280,6 +286,37 @@ body.items-show
|
|||
font-style: italic
|
||||
text-decoration: underline dotted
|
||||
|
||||
// Many of these styles copied from Impress 2020 and its Chakra UI styles!
|
||||
.item-html5-info
|
||||
display: flex
|
||||
align-items: center
|
||||
border: 1px solid
|
||||
border-radius: .375em
|
||||
padding: 4px 8px
|
||||
min-height: 30px
|
||||
box-sizing: border-box
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
|
||||
|
||||
&[data-status=converted]
|
||||
background: $module-bg-color
|
||||
color: $text-color
|
||||
|
||||
svg:nth-of-type(2)
|
||||
margin-right: -4px // spacing hacks!
|
||||
|
||||
&[data-status=unconverted]
|
||||
background: $warning-bg-color
|
||||
color: #975A16
|
||||
gap: .25em // spacing hacks!
|
||||
|
||||
svg:first-of-type
|
||||
width: 12px
|
||||
height: 12px
|
||||
|
||||
svg:nth-of-type(2)
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
#item-preview
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
|
@ -287,7 +324,7 @@ body.items-show
|
|||
|
||||
@media (min-width: 600px)
|
||||
display: grid
|
||||
grid-template-areas: "viewer faces" "picker zones"
|
||||
grid-template-areas: "viewer faces" "picker meta"
|
||||
gap: .5em
|
||||
|
||||
outfit-viewer
|
||||
|
|
@ -303,8 +340,8 @@ body.items-show
|
|||
max-height: 350px
|
||||
margin: -10px
|
||||
|
||||
.item-zones-info
|
||||
grid-area: zones
|
||||
.item-preview-meta-info
|
||||
grid-area: meta
|
||||
|
||||
@keyframes fade-in
|
||||
from
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@ class ItemsController < ApplicationController
|
|||
@all_appearances = @item.appearances
|
||||
@appearances_by_occupied_zone = @item.appearances_by_occupied_zone.
|
||||
sort_by { |z, a| z.label }
|
||||
@selected_item_appearance = @preview_outfit.item_appearances.first
|
||||
|
||||
@preview_pet_type_options = PetType.where(color: @preview_outfit.color).
|
||||
includes(:species).merge(Species.alphabetical)
|
||||
|
|
|
|||
|
|
@ -508,6 +508,10 @@ class Item < ApplicationRecord
|
|||
{item:, body:, swf_assets:}
|
||||
end
|
||||
|
||||
def html5?
|
||||
swf_assets.all?(&:html5?)
|
||||
end
|
||||
|
||||
def occupied_zone_ids
|
||||
swf_assets.map(&:zone_id).uniq.sort
|
||||
end
|
||||
|
|
|
|||
|
|
@ -236,6 +236,17 @@ class SwfAsset < ApplicationRecord
|
|||
self[:known_glitches] = new_known_glitches
|
||||
end
|
||||
|
||||
def html5?
|
||||
# NOTE: This is slightly different than how Impress 2020 reasons about
|
||||
# this; it checks for an SVG or canvas movie. I *think* we did
|
||||
# this just to keep the API simpler, and this check is more
|
||||
# correct? But I do wonder if any assets have a manifest but are
|
||||
# arguably "not converted" because the manifest is just so bad.
|
||||
# NOTE: Just checking `manifest_url` isn't enough, because there *are*
|
||||
# assets with a `manifest_url` saved but it 404s.
|
||||
manifest.present?
|
||||
end
|
||||
|
||||
def restricted_zone_ids
|
||||
[].tap do |ids|
|
||||
zones_restrict.chars.each_with_index do |bit, index|
|
||||
|
|
|
|||
|
|
@ -53,30 +53,57 @@
|
|||
item_fits?(@item, pet_type) ? :happy : :sad,
|
||||
:face
|
||||
|
||||
.item-zones-info
|
||||
%section
|
||||
%h3 Occupies
|
||||
- if @appearances_by_occupied_zone.present?
|
||||
%ul
|
||||
- @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
|
||||
%li
|
||||
= zone.label
|
||||
- if item_zone_partial_fit? appearances_in_zone, @all_appearances
|
||||
%span.zone-species-info{
|
||||
title: item_zone_species_list(appearances_in_zone)
|
||||
}
|
||||
(#{appearances_in_zone.size} species)
|
||||
- else
|
||||
%span.no-zones (None)
|
||||
.item-preview-meta-info
|
||||
.item-zones-info
|
||||
%section
|
||||
%h3 Occupies
|
||||
- if @appearances_by_occupied_zone.present?
|
||||
%ul
|
||||
- @appearances_by_occupied_zone.each do |zone, appearances_in_zone|
|
||||
%li
|
||||
= zone.label
|
||||
- if item_zone_partial_fit? appearances_in_zone, @all_appearances
|
||||
%span.zone-species-info{
|
||||
title: item_zone_species_list(appearances_in_zone)
|
||||
}
|
||||
(#{appearances_in_zone.size} species)
|
||||
- else
|
||||
%span.no-zones (None)
|
||||
|
||||
%section
|
||||
%h3 Restricts
|
||||
- if @item.restricted_zones.present?
|
||||
%ul
|
||||
- @item.restricted_zones.sort_by(&:label).each do |zone|
|
||||
%li= zone.label
|
||||
%section
|
||||
%h3 Restricts
|
||||
- if @item.restricted_zones.present?
|
||||
%ul
|
||||
- @item.restricted_zones.sort_by(&:label).each do |zone|
|
||||
%li= zone.label
|
||||
- else
|
||||
%span.no-zones (None)
|
||||
|
||||
%div
|
||||
- if @selected_item_appearance.html5?
|
||||
.item-html5-info{
|
||||
"data-status": "converted",
|
||||
"aria-label": "HTML5 supported!",
|
||||
title: "This item is converted to HTML5, and ready to use on Neopets.com!",
|
||||
}
|
||||
%svg{viewBox: "0 0 24 24"}
|
||||
%path{fill: "currentColor", d: "M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"}
|
||||
%svg{viewBox: "0 0 36 36"}
|
||||
%path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
|
||||
- else
|
||||
%span.no-zones (None)
|
||||
.item-html5-info{
|
||||
"data-status": "unconverted",
|
||||
"aria-label": "HTML5 not supported",
|
||||
title: "This item isn't converted to HTML5 yet, so it might not appear in " +
|
||||
"Neopets.com customization yet. Once it's ready, it could look a " +
|
||||
"bit different than our temporary preview here. It might even be " +
|
||||
"animated!"
|
||||
}
|
||||
%svg{viewBox: "0 0 24 24"}
|
||||
%path{fill: "currentColor", d: "M23.119,20,13.772,2.15h0a2,2,0,0,0-3.543,0L.881,20a2,2,0,0,0,1.772,2.928H21.347A2,2,0,0,0,23.119,20ZM11,8.423a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Zm1.05,11.51h-.028a1.528,1.528,0,0,1-1.522-1.47,1.476,1.476,0,0,1,1.448-1.53h.028A1.527,1.527,0,0,1,13.5,18.4,1.475,1.475,0,0,1,12.05,19.933Z"}
|
||||
%svg{viewBox: "0 0 36 36"}
|
||||
%path{fill: "currentColor", d: "M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"}
|
||||
%path{fill: "#DD2E44", opacity: "0.75", d: "M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"}
|
||||
|
||||
- unless @contributors_with_counts.empty?
|
||||
#item-contributors
|
||||
|
|
|
|||
Loading…
Reference in a new issue