Fix catalog page when having hats on

This commit is contained in:
towards-a-new-leftypol 2023-08-08 17:51:52 -04:00
parent 724e8f674b
commit b634edd6e2
2 changed files with 34 additions and 8 deletions

View File

@ -353,7 +353,7 @@ form table tr td div label {
*/ */
/* /*
.thread { .thread .files {
position: relative; position: relative;
} }
@ -364,6 +364,7 @@ form table tr td div label {
left: 0px; left: 0px;
} }
[data-board] > .files > :nth-child(1).multifile > a:before { [data-board] > .files > :nth-child(1).multifile > a:before {
content: url('/static/partyhat.png'); content: url('/static/partyhat.png');
position: absolute; position: absolute;
@ -371,8 +372,29 @@ form table tr td div label {
left: -20px; left: -20px;
} }
.grid_thread_wrapper_for_hats:before {
content: "";
position: absolute;
width: 60px;
height: 75px;
top: -52px;
left: 20px;
background-image: url('/static/partyhat.png');
background-size: cover; /* You can adjust this value to fit your needs */
background-repeat: no-repeat;
background-position: center;
}
*/ */
.grid_thread_wrapper_for_hats {
overflow: hidden;
}
.theme-catalog div.thread {
overflow: visible !important;
}
.file:not(.multifile) { .file:not(.multifile) {
float: none; float: none;
} }
@ -889,7 +911,8 @@ pre {
max-width: 95% max-width: 95%
} }
.theme-catalog div.grid-size-vsmall { .theme-catalog div.grid-size-vsmall,
.grid-size-vsmall .grid_thread_wrapper_for_hats {
min-width:90px; max-width: 90px; min-width:90px; max-width: 90px;
max-height: 148px; max-height: 148px;
} }
@ -899,7 +922,8 @@ pre {
max-width: 95% max-width: 95%
} }
.theme-catalog div.grid-size-small { .theme-catalog div.grid-size-small,
.grid-size-small .grid_thread_wrapper_for_hats {
min-width:140px; max-width: 140px; min-width:140px; max-width: 140px;
max-height: 192px; max-height: 192px;
} }
@ -909,7 +933,8 @@ pre {
max-width: 95% max-width: 95%
} }
.theme-catalog div.grid-size-medium { .theme-catalog div.grid-size-medium,
.grid-size-medium .grid_thread_wrapper_for_hats {
min-width:200px; max-width: 200px; min-width:200px; max-width: 200px;
max-height: 274px; max-height: 274px;
} }
@ -919,7 +944,8 @@ pre {
max-width: 95% max-width: 95%
} }
.theme-catalog div.grid-size-large { .theme-catalog div.grid-size-large,
.grid-size-large .grid_thread_wrapper_for_hats {
min-width: 256px; max-width: 256px; min-width: 256px; max-width: 256px;
max-height: 384px; max-height: 384px;
} }
@ -947,7 +973,7 @@ pre {
margin-right: 0; margin-right: 0;
} }
.theme-catalog div.threads { .theme-catalog .grid_thread_wrapper_for_hats {
overflow: hidden; overflow: hidden;
} }
div.post .body { div.post .body {

View File

@ -60,7 +60,7 @@
data-sticky="{% if post.sticky %}true{% else %}false{% endif %}" data-sticky="{% if post.sticky %}true{% else %}false{% endif %}"
data-locked="{% if post.locked %}true{% else %}false{% endif %}" data-locked="{% if post.locked %}true{% else %}false{% endif %}"
> >
<div class="thread grid-li grid-size-small"> <div class="thread grid-li grid-size-small"><div class="grid_thread_wrapper_for_hats">
<a href="{{post.link}}"> <a href="{{post.link}}">
{% if post.youtube %} {% if post.youtube %}
<img src="/vi/{{ post.youtube }}/0.jpg" <img src="/vi/{{ post.youtube }}/0.jpg"
@ -84,7 +84,7 @@
{{ post.body }} {{ post.body }}
</div> </div>
</div> </div>
</div> </div></div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>