From 249c5933799710ac3cb5c249770b32cb02e8faf4 Mon Sep 17 00:00:00 2001 From: TLSM Date: Thu, 11 Aug 2022 03:27:08 -0400 Subject: [PATCH] Hats: frontend interface, migrate cakeday. Getting the basic hats frontend changes into master so my branch stops diverging from the templates. Migrates the existing cakeday partyhat functionality to the new system also. Establishes a (hopefully) static interface for PFP hat display: - Hat image assets are 100px w x 130px h and anchored to the bottom- left corner of pfps. - User.hat_active provides either empty string or the internal string identifier for active user hat. - User.hat_tooltip provides mouseover text. Likely only to be used for cakeday hats on one's cakeday. Additionally, per discussion with Carp, PFPs in comments and posts increased from 25px diameter to 30px. --- files/assets/css/main.css | 72 ++++++++++++++---------- files/assets/images/hats/cakeday-1.webp | Bin 0 -> 4816 bytes files/classes/user.py | 21 +++++++ files/helpers/const.py | 3 + files/templates/comments.html | 10 ++-- files/templates/header.html | 10 ++-- files/templates/submission.html | 10 ++-- files/templates/submission_listing.html | 10 ++-- files/templates/userpage.html | 19 +++++-- files/templates/util/assetcache.html | 2 +- 10 files changed, 103 insertions(+), 54 deletions(-) create mode 100644 files/assets/images/hats/cakeday-1.webp diff --git a/files/assets/css/main.css b/files/assets/css/main.css index 1c6cb3090..24e11ece8 100644 --- a/files/assets/css/main.css +++ b/files/assets/css/main.css @@ -3366,6 +3366,14 @@ small, .small { object-fit: cover; background-color: var(--gray-600); } +.profile-pic-30 { + width: 30px; + height: 30px; + border-radius: 50%; + text-align: center; + object-fit: cover; + background-color: var(--gray-600); +} .profile-pic-35 { width: 35px; height: 35px; @@ -3406,6 +3414,37 @@ small, .small { object-fit: cover; background-color: var(--gray-600); } + +.profile-pic-30-wrapper, +.profile-pic-35-wrapper, +.profile-pic-65-wrapper, +.profile-pic-100-wrapper { + display: inline-block; + position: relative; + vertical-align: middle; +} +.profile-pic-30-hat, +.profile-pic-35-hat, +.profile-pic-65-hat, +.profile-pic-100-hat { + position: absolute; + left: 0; + bottom: 0; +} + +.profile-pic-30-wrapper { width: 30px; height: 30px; } +.profile-pic-35-wrapper { width: 35px; height: 35px; } +.profile-pic-65-wrapper { width: 65px; height: 65px; } +.profile-pic-100-wrapper { width: 100px; height: 100px; } +.profile-pic-30-hat { width: 30px; } +.profile-pic-35-hat { width: 35px; } +.profile-pic-65-hat { width: 65px; } +.profile-pic-100-hat { width: 100px; } + +.profile--pfp--hat { + margin-top: 20px; +} + .card-header:first-child { border-radius: 0.35rem 0.35rem 0 0; } @@ -3730,6 +3769,7 @@ small, .small { color: var(--muted); margin-bottom: 0.25rem; margin-top: -0.25rem; + padding-top: 10px; } .comment .comment-body .user-name { color: var(--black); @@ -3876,7 +3916,7 @@ ul.comment-section { .comment.collapsed .user-info { margin-bottom: 0; } -.comment.collapsed .profile-pic-25 { +.comment.collapsed .profile-pic-30 { opacity: 0.5; } .comment.collapsed .comment-body { @@ -5085,7 +5125,7 @@ html { scroll-padding-top: 100px; } .comment .comment-body { - padding: 3px 0 0 0; + padding: 0px 0 0 0; } .comment-anchor { padding: 1px; @@ -5353,34 +5393,6 @@ th, td { } } -.party-hat { - cursor: pointer; - height: 20px; - position: absolute; - transform: translate(-36px, -10px); -} - -.party-hat2 { - cursor: pointer; - height: 50px; - position: absolute; - transform: translate(-100px,-30px); -} - -.party-hat3 { - cursor: pointer; - height: 40px; - position: absolute; - transform: translate(-70px,-22px); -} - -.party-hat4 { - cursor: pointer; - height: 30px; - position: absolute; - transform: translate(-40px,-20px); -} - .checkmark { color: #1DA1F2 !important; } diff --git a/files/assets/images/hats/cakeday-1.webp b/files/assets/images/hats/cakeday-1.webp new file mode 100644 index 0000000000000000000000000000000000000000..8ff14c49264980305b05f0db4868230ab730241d GIT binary patch literal 4816 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 - - {% if c.author.is_cakeday %} - - {% endif %} +
+ + {% if c.author.hat_active -%} + + {%- endif %} +
{{c.author_name}} {% if FEATURES['PRONOUNS'] %} diff --git a/files/templates/header.html b/files/templates/header.html index 24339a14c..9c58da980 100644 --- a/files/templates/header.html +++ b/files/templates/header.html @@ -199,11 +199,11 @@
- - {% if p.author.is_cakeday %} - - {% endif %} +
+ + {% if p.author.hat_active -%} + + {%- endif %} +
{{p.author_name}} {% if FEATURES['PRONOUNS'] %} diff --git a/files/templates/submission_listing.html b/files/templates/submission_listing.html index 5c9341636..b4f85cdb4 100644 --- a/files/templates/submission_listing.html +++ b/files/templates/submission_listing.html @@ -206,10 +206,12 @@ {% if p.author.verified %} {% endif %} - - {% if p.author.is_cakeday %} - - {% endif %} +
+ + {% if p.author.hat_active -%} + + {%- endif %} +
{{p.author_name}} {% if FEATURES['PRONOUNS'] %} diff --git a/files/templates/userpage.html b/files/templates/userpage.html index dde645b45..07e3bc601 100644 --- a/files/templates/userpage.html +++ b/files/templates/userpage.html @@ -38,11 +38,13 @@
-
- - {% if u.is_cakeday %} - - {% endif %} +
+ + + {% if u.hat_active -%} + + {%- endif %} +
{% if u.is_suspended %} @@ -392,7 +394,12 @@
- + + + {% if u.hat_active -%} + + {%- endif %} + {% if u.is_cakeday %} {% endif %} diff --git a/files/templates/util/assetcache.html b/files/templates/util/assetcache.html index 8687b4094..d0e3ba8e8 100644 --- a/files/templates/util/assetcache.html +++ b/files/templates/util/assetcache.html @@ -1,6 +1,6 @@ {%- set CACHE_VER = { - 'css/main.css': 443, + 'css/main.css': 444, 'css/catalog.css': 2, 'css/4chan.css': 61,