christoph/flask-formula10
1
Fork 0
Code Issues 14 Actions Packages Activity

Fix grid layout on PC screen
All checks were successful
Build Formula10 Docker Image / build-docker (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2024-03-03 00:25:36 +01:00
parent 64d37acc23
commit 481492868b
5 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
formula10/static/style/grid.css Normal file
View File

@ -0,0 +1,13 @@
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
grid-row-gap: 0;
grid-column-gap: 8px;
}
@media only screen and (min-width: 470px) {
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
grid-row-gap: 0;
grid-column-gap: 8px;
}
}

2
formula10/templates/base.jinja
View File

@ -176,6 +176,8 @@
<link href="../static/style/bootstrap.css" rel="stylesheet">
<script src="../static/script/bootstrap.bundle.js"></script>
<link href="../static/style/grid.css" rel="stylesheet">
<script defer>
{# Initialize Bootstrap Tooltips #}
let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")

2
formula10/templates/result.jinja
View File

@ -42,7 +42,7 @@
{% block body %}
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
<div class="grid card-grid">
<div class="card shadow-sm mb-2" style="max-width: 450px;">
<div class="card-header">

2
formula10/templates/season.jinja
View File

@ -22,7 +22,7 @@
</div>
</div>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
<div class="grid card-grid">
{% for user in model.all_users_or_active_user() %}

2
formula10/templates/statistics.jinja
View File

@ -16,7 +16,7 @@
</div>
</div>
<div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(325px, 1fr)); grid-row-gap: 0; grid-column-gap: 8px;">
<div class="grid card-grid">
<div class="card mb-2">
<div class="card-header">