rDrama
/
rDrama
9
10
Fork 7
Code Issues Pull Requests Packages Releases Wiki Activity

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.
remotes/1693045480750635534/spooky-22
Snakes 2022-08-11 03:27:08 -04:00
parent a6f1fb17c9
commit 249c593379
10 changed files with 103 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
files/assets/css/main.css
View File

@ -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;
}

BIN
files/assets/images/hats/cakeday-1.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

21
files/classes/user.py
View File

@ -608,6 +608,27 @@ class User(Base):
return self.profileurl
return f"{SITE_FULL}/assets/images/default-profile-pic.webp?v=1008"
@property
@lazy
def hat_active(self):
if not FEATURES['HATS']:
return ''
if self.is_cakeday:
return 'cakeday-1'
return ''
@property
@lazy
def hat_tooltip(self):
if not FEATURES['HATS']:
return ''
if self.is_cakeday:
return 'I’ve spent another year rotting my brain with dramaposting, ' \
+ 'please ridicule me 🤓'
return ''
@lazy
def json_popover(self, v):
data = {'username': self.username,

3
files/helpers/const.py
View File

@ -168,6 +168,7 @@ FEATURES = {
'COUNTRY_CLUB': True,
'PRONOUNS': False,
'BADGES': True,
'HATS': False,
'HOUSES': False,
'GAMBLING': True,
'WORDLE': True,
@ -241,6 +242,7 @@ GAMBLING_THREAD = 0
if SITE in ('rdrama.net', 'devrama.xyz'):
FEATURES['PRONOUNS'] = True
FEATURES['HATS'] = True
FEATURES['HOUSES'] = True
SIDEBAR_THREAD = 37696
@ -389,6 +391,7 @@ elif SITE == 'lgbdropthet.com':
GAMBLING_THREAD = 25
else: # localhost or testing environment implied
FEATURES['PRONOUNS'] = True
FEATURES['HATS'] = True
FEATURES['HOUSES'] = True
FEATURES['REPOST_DETECTION'] = False

10
files/templates/comments.html
View File

@ -205,10 +205,12 @@
{% endif %}
<a class="user-name text-decoration-none" href="{{c.author.url}}" data-pop-info='{{c.author.json_popover(v) | tojson}}' onclick='popclick(event)' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="color:#{{c.author.namecolor}}; font-size:12px; font-weight:bold;">
<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-25 mr-2">
{% if c.author.is_cakeday %}
<img class="party-hat" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}
<div class="profile-pic-30-wrapper">
<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
{% if c.author.hat_active -%}
<img class="profile-pic-30-hat" src="/i/hats/{{c.author.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{c.author.hat_tooltip}}">
{%- endif %}
</div>
<span {% if c.author.patron and not c.distinguish_level %}class="patron" style="background-color:#{{c.author.namecolor}};"{% elif c.distinguish_level %}class="mod"{% endif %}>{{c.author_name}}</span>
</a>
{% if FEATURES['PRONOUNS'] %}

10
files/templates/header.html
View File

@ -199,11 +199,11 @@
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<div class="d-flex">
<div>
<img alt="your profile picture" loading="lazy" src="{{v.profile_url}}" class="profile-pic-35">
{% if v.is_cakeday %}
<img class="party-hat4" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}
<div class="profile-pic-35-wrapper">
<img loading="lazy" src="{{v.profile_url}}" class="profile-pic-35">
{% if v.hat_active -%}
<img class="profile-pic-35-hat" src="/i/hats/{{v.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{v.hat_tooltip}}">
{%- endif %}
</div>
<div class="text-left pl-2">
<div style="color: #{{v.namecolor}}" class="text-small font-weight-bold" id="header--username"><span {% if v.patron %}class="patron" style="background-color:#{{v.namecolor}}"{% endif %}>{{v.username}}</span></div>

10
files/templates/submission.html
View File

@ -670,10 +670,12 @@
{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i>
{% endif %}
<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' onclick='popclick(event)' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold"class="user-name">
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2">
{% if p.author.is_cakeday %}
<img class="party-hat" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}
<div class="profile-pic-30-wrapper">
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
{% if p.author.hat_active -%}
<img class="profile-pic-30-hat" src="/i/hats/{{p.author.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
{%- endif %}
</div>
<span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level %}class="mod"{% endif %}>{{p.author_name}}</span>
</a>
{% if FEATURES['PRONOUNS'] %}

10
files/templates/submission_listing.html
View File

@ -206,10 +206,12 @@
{% if p.author.verified %}<i class="fas fa-badge-check align-middle ml-1 {% if p.author.verified=='Glowiefied' %}glow{% endif %}" style="color:{% if p.author.verifiedcolor %}#{{p.author.verifiedcolor}}{% else %}#1DA1F2{% endif %}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.verified}}"></i>
{% endif %}
<a class="user-name text-decoration-none" href="{{p.author.url}}" data-pop-info='{{p.author.json_popover(v) | tojson}}' onclick='popclick(event)' data-bs-placement="bottom" data-bs-toggle="popover" data-bs-trigger="click" data-content-id="popover" role="button" tabindex="0" style="color: #{{p.author.namecolor}}; font-weight: bold;">
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-25 mr-2">
{% if p.author.is_cakeday %}
<img class="party-hat" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}
<div class="profile-pic-30-wrapper">
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
{% if p.author.hat_active -%}
<img class="profile-pic-30-hat" src="/i/hats/{{p.author.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{p.author.hat_tooltip}}">
{%- endif %}
</div>
<span {% if p.author.patron and not p.distinguish_level %}class="patron" style="background-color:#{{p.author.namecolor}};"{% elif p.distinguish_level %}class="mod"{% endif %}>{{p.author_name}}</span>
</a>
{% if FEATURES['PRONOUNS'] %}

19
files/templates/userpage.html
View File

@ -38,11 +38,13 @@
<div class="w-100 my-3">
<div class="container-fluid nobackground">
<div class="d-md-flex text-center text-md-left">
<div id="profile--pfp">
<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}"><img loading="lazy" src="{{u.profile_url}}" class="profile-pic profile-pic-100 mb-5"></a>
{% if u.is_cakeday %}
<img class="party-hat2" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}
<div id="profile--pfp" {% if u.hat_active %}class="profile--pfp--hat"{% endif %}>
<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}" class="profile-pic-100-wrapper">
<img loading="lazy" src="{{u.profile_url}}" class="profile-pic profile-pic-100 mb-5">
{% if u.hat_active -%}
<img class="profile-pic-100-hat" src="/i/hats/{{u.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
{%- endif %}
</a>
</div>
<div id="profilestuff" class="ml-3 w-100">
{% if u.is_suspended %}
@ -392,7 +394,12 @@
<div class="row border-bottom">
<div class="col">
<div style="margin-top: -34px;" id="profile-mobile--pfp">
<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}"><img loading="lazy" src="{{u.profile_url}}" class="profile-pic-65 bg-white border-2 border-white mb-2"></a>
<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}" class="profile-pic-65-wrapper">
<img loading="lazy" src="{{u.profile_url}}" class="profile-pic-65 bg-white border-2 border-white mb-2">
{% if u.hat_active -%}
<img class="profile-pic-65-hat" src="/i/hats/{{u.hat_active}}.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{u.hat_tooltip}}">
{%- endif %}
</a>
{% if u.is_cakeday %}
<img class="party-hat3" src="/i/party-hat.webp" data-bs-toggle="tooltip" data-bs-placement="bottom" title="I’ve spent another year rotting my brain with dramaposting, please ridicule me 🤓">
{% endif %}

2
files/templates/util/assetcache.html
View File

@ -1,6 +1,6 @@
{%-
set CACHE_VER = {
'css/main.css': 443,
'css/main.css': 444,
'css/catalog.css': 2,
'css/4chan.css': 61,