forked from rDrama/rDrama
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.master
parent
a6f1fb17c9
commit
249c593379
|
@ -3366,6 +3366,14 @@ small, .small {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
background-color: var(--gray-600);
|
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 {
|
.profile-pic-35 {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
@ -3406,6 +3414,37 @@ small, .small {
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
background-color: var(--gray-600);
|
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 {
|
.card-header:first-child {
|
||||||
border-radius: 0.35rem 0.35rem 0 0;
|
border-radius: 0.35rem 0.35rem 0 0;
|
||||||
}
|
}
|
||||||
|
@ -3730,6 +3769,7 @@ small, .small {
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
margin-top: -0.25rem;
|
margin-top: -0.25rem;
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
.comment .comment-body .user-name {
|
.comment .comment-body .user-name {
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
|
@ -3876,7 +3916,7 @@ ul.comment-section {
|
||||||
.comment.collapsed .user-info {
|
.comment.collapsed .user-info {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.comment.collapsed .profile-pic-25 {
|
.comment.collapsed .profile-pic-30 {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
.comment.collapsed .comment-body {
|
.comment.collapsed .comment-body {
|
||||||
|
@ -5085,7 +5125,7 @@ html {
|
||||||
scroll-padding-top: 100px;
|
scroll-padding-top: 100px;
|
||||||
}
|
}
|
||||||
.comment .comment-body {
|
.comment .comment-body {
|
||||||
padding: 3px 0 0 0;
|
padding: 0px 0 0 0;
|
||||||
}
|
}
|
||||||
.comment-anchor {
|
.comment-anchor {
|
||||||
padding: 1px;
|
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 {
|
.checkmark {
|
||||||
color: #1DA1F2 !important;
|
color: #1DA1F2 !important;
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
|
@ -608,6 +608,27 @@ class User(Base):
|
||||||
return self.profileurl
|
return self.profileurl
|
||||||
return f"{SITE_FULL}/assets/images/default-profile-pic.webp?v=1008"
|
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
|
@lazy
|
||||||
def json_popover(self, v):
|
def json_popover(self, v):
|
||||||
data = {'username': self.username,
|
data = {'username': self.username,
|
||||||
|
|
|
@ -168,6 +168,7 @@ FEATURES = {
|
||||||
'COUNTRY_CLUB': True,
|
'COUNTRY_CLUB': True,
|
||||||
'PRONOUNS': False,
|
'PRONOUNS': False,
|
||||||
'BADGES': True,
|
'BADGES': True,
|
||||||
|
'HATS': False,
|
||||||
'HOUSES': False,
|
'HOUSES': False,
|
||||||
'GAMBLING': True,
|
'GAMBLING': True,
|
||||||
'WORDLE': True,
|
'WORDLE': True,
|
||||||
|
@ -241,6 +242,7 @@ GAMBLING_THREAD = 0
|
||||||
|
|
||||||
if SITE in ('rdrama.net', 'devrama.xyz'):
|
if SITE in ('rdrama.net', 'devrama.xyz'):
|
||||||
FEATURES['PRONOUNS'] = True
|
FEATURES['PRONOUNS'] = True
|
||||||
|
FEATURES['HATS'] = True
|
||||||
FEATURES['HOUSES'] = True
|
FEATURES['HOUSES'] = True
|
||||||
|
|
||||||
SIDEBAR_THREAD = 37696
|
SIDEBAR_THREAD = 37696
|
||||||
|
@ -389,6 +391,7 @@ elif SITE == 'lgbdropthet.com':
|
||||||
GAMBLING_THREAD = 25
|
GAMBLING_THREAD = 25
|
||||||
else: # localhost or testing environment implied
|
else: # localhost or testing environment implied
|
||||||
FEATURES['PRONOUNS'] = True
|
FEATURES['PRONOUNS'] = True
|
||||||
|
FEATURES['HATS'] = True
|
||||||
FEATURES['HOUSES'] = True
|
FEATURES['HOUSES'] = True
|
||||||
FEATURES['REPOST_DETECTION'] = False
|
FEATURES['REPOST_DETECTION'] = False
|
||||||
|
|
||||||
|
|
|
@ -205,10 +205,12 @@
|
||||||
{% endif %}
|
{% 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;">
|
<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">
|
<div class="profile-pic-30-wrapper">
|
||||||
{% if c.author.is_cakeday %}
|
<img loading="lazy" src="{{c.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||||
<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 🤓">
|
{% if c.author.hat_active -%}
|
||||||
{% endif %}
|
<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>
|
<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>
|
</a>
|
||||||
{% if FEATURES['PRONOUNS'] %}
|
{% if FEATURES['PRONOUNS'] %}
|
||||||
|
|
|
@ -199,11 +199,11 @@
|
||||||
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
|
<a class="nav-link bg-transparent py-0 pr-0" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
|
||||||
aria-haspopup="true" aria-expanded="false">
|
aria-haspopup="true" aria-expanded="false">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<div>
|
<div class="profile-pic-35-wrapper">
|
||||||
<img alt="your profile picture" loading="lazy" src="{{v.profile_url}}" class="profile-pic-35">
|
<img loading="lazy" src="{{v.profile_url}}" class="profile-pic-35">
|
||||||
{% if v.is_cakeday %}
|
{% if v.hat_active -%}
|
||||||
<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 🤓">
|
<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 %}
|
{%- endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-left pl-2">
|
<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>
|
<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>
|
||||||
|
|
|
@ -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>
|
{% 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 %}
|
{% 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">
|
<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">
|
<div class="profile-pic-30-wrapper">
|
||||||
{% if p.author.is_cakeday %}
|
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||||
<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 🤓">
|
{% if p.author.hat_active -%}
|
||||||
{% endif %}
|
<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>
|
<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>
|
</a>
|
||||||
{% if FEATURES['PRONOUNS'] %}
|
{% if FEATURES['PRONOUNS'] %}
|
||||||
|
|
|
@ -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>
|
{% 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 %}
|
{% 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;">
|
<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">
|
<div class="profile-pic-30-wrapper">
|
||||||
{% if p.author.is_cakeday %}
|
<img loading="lazy" src="{{p.author.profile_url}}" class="profile-pic-30 mr-2">
|
||||||
<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 🤓">
|
{% if p.author.hat_active -%}
|
||||||
{% endif %}
|
<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>
|
<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>
|
</a>
|
||||||
{% if FEATURES['PRONOUNS'] %}
|
{% if FEATURES['PRONOUNS'] %}
|
||||||
|
|
|
@ -38,11 +38,13 @@
|
||||||
<div class="w-100 my-3">
|
<div class="w-100 my-3">
|
||||||
<div class="container-fluid nobackground">
|
<div class="container-fluid nobackground">
|
||||||
<div class="d-md-flex text-center text-md-left">
|
<div class="d-md-flex text-center text-md-left">
|
||||||
<div id="profile--pfp">
|
<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 %}"><img loading="lazy" src="{{u.profile_url}}" class="profile-pic profile-pic-100 mb-5"></a>
|
<a rel="nofollow noopener noreferrer" href="{% if u.highres %}{{u.highres}}{% else %}{{u.profile_url}}{% endif %}" class="profile-pic-100-wrapper">
|
||||||
{% if u.is_cakeday %}
|
<img loading="lazy" src="{{u.profile_url}}" class="profile-pic profile-pic-100 mb-5">
|
||||||
<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 🤓">
|
{% if u.hat_active -%}
|
||||||
{% endif %}
|
<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>
|
||||||
<div id="profilestuff" class="ml-3 w-100">
|
<div id="profilestuff" class="ml-3 w-100">
|
||||||
{% if u.is_suspended %}
|
{% if u.is_suspended %}
|
||||||
|
@ -392,7 +394,12 @@
|
||||||
<div class="row border-bottom">
|
<div class="row border-bottom">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<div style="margin-top: -34px;" id="profile-mobile--pfp">
|
<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 %}
|
{% 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 🤓">
|
<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 %}
|
{% endif %}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{%-
|
{%-
|
||||||
set CACHE_VER = {
|
set CACHE_VER = {
|
||||||
'css/main.css': 443,
|
'css/main.css': 444,
|
||||||
'css/catalog.css': 2,
|
'css/catalog.css': 2,
|
||||||
|
|
||||||
'css/4chan.css': 61,
|
'css/4chan.css': 61,
|
||||||
|
|
Loading…
Reference in New Issue