Use grid instead of absolute position for games

Signed-off-by: HackerNCoder <hackerncoder@encryptionin.space>
This commit is contained in:
HackerNCoder 2023-02-14 18:35:35 +00:00
parent 405d2fc2e6
commit 31d46b5ae7
2 changed files with 27 additions and 9 deletions

View file

@ -4657,6 +4657,29 @@ textarea.form-control-lg {
padding: 1rem 1rem; padding: 1rem 1rem;
} }
@media (min-width: 768px) {
.card-body {
padding-left: 1rem;
padding-top: 1rem;
}
.card-grid {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: auto;
}
.card-grid-div {
grid-column: 1;
grid-row: 2;
}
.card-grid-btn {
grid-column: 2;
grid-row: 2;
}
}
.card-title { .card-title {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -6941,11 +6964,6 @@ textarea.form-control-lg {
position: absolute !important; position: absolute !important;
} }
@media (min-width: 768px) {
.position-absolute-md {
position: absolute !important;
}
}
.position-fixed { .position-fixed {
position: fixed !important; position: fixed !important;
} }

View file

@ -7,7 +7,7 @@
{% include 'header.html' %} {% include 'header.html' %}
<div class="container my-5 pt-5" > <div class="container my-5 pt-5" >
<div class="text-center" > <div class="text-center" >
<h1>A list of queer games</h1> <h1>{{ _("A list of queer games") }}</h1>
</div> </div>
{% for project in this.children %} {% for project in this.children %}
{% set image = project.attachments.images.first() %} {% set image = project.attachments.images.first() %}
@ -19,8 +19,8 @@
<div class="col-md-8" > <div class="col-md-8" >
<div class="card-body h-100 position-relative" > <div class="card-body h-100 position-relative" >
<h3 class="card-title {% if project.weblate %}mb-0{% endif %}">{{project.title}}</h3>{% if project.weblate %}<span class="badge bg-success mb-2">{{ _("Translated by the Queerscriptors") }}</span>{% endif %} <h3 class="card-title {% if project.weblate %}mb-0{% endif %}">{{project.title}}</h3>{% if project.weblate %}<span class="badge bg-success mb-2">{{ _("Translated by the Queerscriptors") }}</span>{% endif %}
{{project.body}} <div class="card-grid-div">{{project.body}}</div>
<div class="d-md-inline-block d-grid position-absolute-md bottom-0 end-0 mb-md-2 me-md-2"> <div class="d-md-inline-block d-grid mb-md-2 card-grid-btn">
{% if project.weblate %} {% if project.weblate %}
<a href="{{project|url}}" class="btn btn-primary btn-sm">{{ _("More") }} <i class="fa fa-angle-right" aria-hidden="true"></i></a> <a href="{{project|url}}" class="btn btn-primary btn-sm">{{ _("More") }} <i class="fa fa-angle-right" aria-hidden="true"></i></a>
{% else %} {% else %}