Position btn better using 3 grid rows and flexbox

Signed-off-by: HackerNCoder <hackerncoder@encryptionin.space>
This commit is contained in:
HackerNCoder 2023-02-14 19:59:25 +00:00
parent 6c83f291d8
commit ad08bdcb4f
2 changed files with 14 additions and 12 deletions

View file

@ -4665,17 +4665,17 @@ textarea.form-control-lg {
.card-grid { .card-grid {
display: grid; display: grid;
grid-template-columns: 70% 30%; grid-template-columns: 70% 30%;
grid-template-rows: auto; grid-template-rows: min-content auto auto;
} }
.card-grid-div { .card-grid-div {
grid-column: 1; grid-column: span 2;
grid-row: 2; grid-row: 2;
} }
.card-grid-btn { .card-grid-btn {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 3;
} }
} }

View file

@ -18,12 +18,13 @@
</div> </div>
<div class="col-md-8" > <div class="col-md-8" >
<div class="card-body h-100 position-relative card-grid" > <div class="card-body h-100 position-relative card-grid" >
<div class="card-grid-div">
<h3 class="card-title {% if project.weblate %}mb-0{% endif %}">{{project.title}}</h3> <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 %} {% if project.weblate %}<span class="badge bg-success mb-2">{{ _("Translated by the Queerscriptors") }}</span>{% endif %}
<div class="card-grid-div">
{{project.body}} {{project.body}}
</div> </div>
<div class="d-md-inline-block d-grid mb-md-2 card-grid-btn"> <div class="d-md-flex card-grid-btn justify-content-end">
<div class="d-md-inline-block d-grid me-md-2 mb-md-2 align-self-end">
{% 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 %}
@ -34,6 +35,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}