Skip to content

fix(frontend): 1440px fixes #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cybernetic-Ransomware merged 2 commits into from
Jul 4, 2026
Merged

fix(frontend): 1440px fixes #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5223c2f
fix(frontend): 1440px fixes
Cybernetic-Ransomware Jul 4, 2026
5b0462a
fix(frontend): minor
Cybernetic-Ransomware Jul 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/ahc/apps/animals/templates/animals/tabs/_diet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
{% endif %}

<div class="grid">
<a role="button" class="secondary outline"
<a role="button"
href="{% url 'note_create' pk=animal.id %}?type_of_event=diet_note"
hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=diet_note"
hx-target="#modal-body"
Expand Down Expand Up @@ -43,7 +43,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E
</ol>
</section>
{% else %}
<p>No diet notes recorded yet.</p>
<p class="empty-state">No diet notes recorded yet.</p>
{% endif %}

{% else %}
Expand Down
2 changes: 1 addition & 1 deletion src/ahc/apps/animals/templates/animals/tabs/_mainpage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ <h4 class="button secondary outline section-header" role="button" tabindex="0">E

<br>
<div class="grid">
<a role="button" class="secondary outline"
<a role="button"
href="{% url 'note_create' pk=animal.id %}?type_of_event=fast_note"
hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=fast_note"
hx-target="#modal-body"
Expand Down
4 changes: 2 additions & 2 deletions src/ahc/apps/animals/templates/animals/tabs/_medications.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h3>Medications</h3>
{% if "medications" in allowed_categories %}

<div class="records-actions">
<a role="button" class="secondary outline"
<a role="button"
href="{% url 'note_create' pk=animal.id %}?type_of_event=medicament_note"
hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=medicament_note"
hx-target="#modal-body"
Expand Down Expand Up @@ -38,7 +38,7 @@ <h3>Medications</h3>
</ol>
</section>
{% else %}
<p>No medication notes recorded yet.</p>
<p class="empty-state">No medication notes recorded yet.</p>
{% endif %}

{% else %}
Expand Down
6 changes: 3 additions & 3 deletions src/ahc/apps/animals/templates/animals/tabs/_notes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ <h3>Notes</h3>
<section class="timeline">
<div class="info">
<div class="records-actions">
<a role="button" class="secondary outline"
<a role="button"
href="{% url 'note_create' pk=animal.id %}"
hx-get="{% url 'note_create' pk=animal.id %}"
hx-target="#modal-body"
Expand Down Expand Up @@ -68,7 +68,7 @@ <h3>Notes</h3>
<li></li>
</ol>
{% else %}
<p>No notes recorded yet.</p>
<p class="empty-state">No notes recorded yet.</p>
{% endif %}
</section>
{% endif %}
Expand All @@ -90,7 +90,7 @@ <h3>Biometrics</h3>
</ol>
</section>
{% else %}
<p>No biometric records yet.</p>
<p class="empty-state">No biometric records yet.</p>
{% endif %}
{% endif %}

Expand Down
6 changes: 3 additions & 3 deletions src/ahc/apps/animals/templates/animals/tabs/_ownership.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<h3>Ownership</h3>
<p>Current owner: <strong>{{ animal.owner }}</strong></p>
<a role="button" class="secondary outline" href="{% url 'animal_ownership' pk=animal.id %}">Change owner</a>
<a role="button" href="{% url 'animal_ownership' pk=animal.id %}">Change owner</a>

<br><br>
<h4>Keepers</h4>
Expand Down Expand Up @@ -41,9 +41,9 @@ <h4>Keepers</h4>
{% endfor %}
</ul>
{% else %}
<p>No keepers assigned yet.</p>
<p class="empty-state">No keepers assigned yet.</p>
{% endif %}

<a role="button" class="secondary outline" href="{% url 'manage_keepers' pk=animal.id %}">Add a keeper</a>
<a role="button" href="{% url 'manage_keepers' pk=animal.id %}">Add a keeper</a>

</section>
2 changes: 1 addition & 1 deletion src/ahc/apps/animals/templates/animals/tabs/_vaccinations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ <h3>Vaccinations</h3>
</div>

<div class="records-actions">
<a role="button" class="secondary outline"
<a role="button"
hx-get="{% url 'vaccination_add' pk=animal.id %}"
hx-target="#vaccination-rows"
hx-swap="beforeend"
Expand Down
4 changes: 2 additions & 2 deletions src/ahc/apps/animals/templates/animals/tabs/_vet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h3>Medical visit timeline</h3>
<section class="timeline">
<div class="info">
<div class="records-actions">
<a role="button" class="secondary outline"
<a role="button"
href="{% url 'note_create' pk=animal.id %}?type_of_event=medical_visit"
hx-get="{% url 'note_create' pk=animal.id %}?type_of_event=medical_visit"
hx-target="#modal-body"
Expand Down Expand Up @@ -84,7 +84,7 @@ <h3>Medical visit timeline</h3>
<li></li>
</ol>
{% else %}
<p>No medical visits recorded yet.</p>
<p class="empty-state">No medical visits recorded yet.</p>
{% endif %}
</section>
{% endif %}
Expand Down
50 changes: 26 additions & 24 deletions src/ahc/apps/homepage/templates/homepage/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,29 @@
<div class="site-header__banner">
<img src="{% static 'media/background/lizard2.jpg' %}" alt="">
</div>
<div class="site-header__user-nav">
{% if user.is_authenticated %}
<nav>
<ul>
<li><small>Hi {{ user.username }}!</small></li>
<li><a role="button" class="secondary outline" href="{% url 'profile' %}">Profile</a></li>
<li>
<form method="post" action="{% url 'logout' %}" style="margin:0;display:contents">
{% csrf_token %}
<button type="submit" class="secondary outline">Logout</button>
</form>
</li>
</ul>
</nav>
{% else %}
<nav>
<ul>
<li><a role="button" class="secondary outline" href="{% url 'login' %}">Login</a></li>
<li><a role="button" class="secondary outline" href="{% url 'register' %}">Register</a></li>
</ul>
</nav>
{% endif %}
</div>
</div>
</header>

Expand All @@ -50,32 +73,11 @@
</main>

<footer class="container">
<div class="grid">
<nav>
<ul>
{% if user.is_authenticated %}
<li><small>Hi {{ user.username }}!</small></li>
{% endif %}
</ul>
<nav>
<ul>
<li><a href="https://github.com/Cybernetic-Ransomware">Credits</a></li>
<li><a href="https://github.com/Cybernetic-Ransomware">Credits</a></li>
</ul>
<ul>
{% if user.is_authenticated %}
<li><a role="button" class="secondary outline" href="{% url 'profile' %}">Profile</a></li>
<li>
<form method="post" action="{% url 'logout' %}" style="margin:0;display:contents">
{% csrf_token %}
<button type="submit" class="secondary outline">Logout</button>
</form>
</li>
{% else %}
<li><a role="button" class="secondary outline" href="{% url 'login' %}">Login</a></li>
<li><a role="button" class="secondary outline" href="{% url 'register' %}">Register</a></li>
{% endif %}
</ul>
</nav>
</div>
</nav>
</footer>

<dialog id="ahc-modal">
Expand Down
17 changes: 6 additions & 11 deletions src/ahc/apps/homepage/templates/homepage/homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,35 @@ <h2>Welcome to your pet organizer</h2>
<div class="container">
<h4>Operations:</h4>

<div class="grid">
<a role="button" class="secondary outline" href="{% url 'animals_stable' %}">Manage all animals</a>
<div class="ops-row">
<a role="button" href="{% url 'animals_stable' %}">Manage all animals</a>
<a role="button" class="secondary outline" href="{% url 'animal_create' %}">Add animal</a>
<a role="button" class="secondary outline" href="{% url 'biometric_batch' %}">Batch measurements</a>
</div>
<br>
</div>

{% if pinned_animals %}
<div class="container">
<br>
<div class="container homepage-section">
<h4>Pinned up:</h4>

<div class="grid">
<div class="animals-grid">
{% for animal in pinned_animals %}
{% include "partials/animal_card.html" %}
{% endfor %}
</div>
<br>
</div>

{% endif %}

{% if recent_animals %}
<div class="container">
<br>
<div class="container homepage-section">
<h4>Recent added:</h4>

<div class="grid">
<div class="animals-grid">
{% for animal in recent_animals %}
{% include "partials/animal_card.html" %}
{% endfor %}
</div>
<br>
</div>

{% endif %}
Expand Down
88 changes: 82 additions & 6 deletions static/css/custom_pico.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,15 +105,16 @@ h1, h2, h3, h4, h5, h6 {
display: block;
}

/* Site header: Pico's .grid provides the 2-col layout; we add height + clip */
/* Site header: 3-col grid (brand | banner | user-nav); height clipped to 72px */
.site-header {
padding-block: 0;
}

.site-header__inner {
height: 120px;
overflow: hidden;
min-height: 72px;
overflow: visible;
align-items: center;
grid-template-columns: auto minmax(0, 1fr) max-content;
}

.site-header__brand {
Expand All @@ -132,19 +133,69 @@ h1, h2, h3, h4, h5, h6 {
}

.site-header__banner {
height: 120px;
height: 72px;
overflow: hidden;
min-width: 0;
}

/* height: 120px beats Pico's img { height: auto } (higher specificity: 0,1,1 vs 0,0,1) */
/* height: 72px beats Pico's img { height: auto } (higher specificity: 0,1,1 vs 0,0,1) */
.site-header__banner img {
width: 100%;
height: 120px;
height: 72px;
object-fit: cover;
object-position: 50% 30%;
display: block;
}

.site-header__user-nav {
display: flex;
align-items: center;
justify-content: flex-end;
}

.site-header__user-nav > nav {
margin-bottom: 0;
}

.site-header__user-nav nav ul {
margin-bottom: 0;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
}

.site-header__user-nav nav ul li {
display: flex;
align-items: center;
padding: 0;
margin: 0;
}

.site-header__user-nav nav ul li > a[role="button"],
.site-header__user-nav nav ul li > button {
padding-block: 0.35rem;
font-size: 0.875rem;
margin-bottom: 0;
}

.site-header__user-nav small {
display: inline-block;
max-width: 14ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

@media (max-width: 767px) {
.site-header__inner {
padding-block: 0.75rem;
grid-template-columns: 1fr;
}
.site-header__banner {
display: none;
}
}

/* Animal profile hero: image left, info right */
.animal-profile-hero {
display: flex;
Expand Down Expand Up @@ -366,3 +417,28 @@ footer nav ul li > button {
display: flex;
align-items: center;
}

.homepage-section {
margin-top: 2rem;
}

.ops-row {
display: flex;
flex-wrap: wrap;
gap: var(--pico-spacing);
align-items: center;
margin-bottom: var(--pico-spacing);
}

.animals-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--pico-spacing);
}

.empty-state {
color: var(--pico-muted-color);
font-style: italic;
padding: 1.5rem 0;
text-align: center;
}
Loading