moanos/Notfellchen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Streamline animal detail view with list of adoption notices

Browse Source
This commit is contained in:
moanos [he/him] 2024-04-19 21:43:30 +02:00
parent 5a8802f8f2
commit ad12a8e26e
3 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/fellchensammlung/static/fellchensammlung/css/styles.css
View File

@ -1,8 +1,9 @@
:root { :root {
--primary-light-one: #5daa68; --primary-light-one: #5daa68;
--primary-light-two: #4a9455; --primary-light-two: #4a9455;
--primary-dark-one: #203f24; --primary-dark-one: #17311b;
--secondary-light-one: #faf1cf; --secondary-light-one: #faf1cf;
--secondary-light-two: #e1d7b5;
--background-one: var(--primary-light-one); --background-one: var(--primary-light-one);
--background-two: var(--primary-light-two); --background-two: var(--primary-light-two);
--background-three: var(--secondary-light-one); --background-three: var(--secondary-light-one);
@ -43,6 +44,7 @@ a {
table { table {
border: none; border: none;
border-collapse: collapse; border-collapse: collapse;
background-color: var(--secondary-light-one);
} }
td { td {
@ -55,7 +57,7 @@ th {
border: 3px solid black; border: 3px solid black;
border-collapse: collapse; border-collapse: collapse;
padding: 8px; padding: 8px;
background-color: #ECECEC; background-color: var(--secondary-light-two);
} }
h1 { h1 {
@ -349,7 +351,7 @@ h1 {
list-style-type: none; list-style-type: none;
} }
.card-adoption-notice { .card {
flex: 1 16%; flex: 1 16%;
margin: 10px; margin: 10px;
border-radius: 3%; border-radius: 3%;
@ -358,12 +360,12 @@ h1 {
color: var(--text-two); color: var(--text-two);
} }
.card-adoption-notice h1 { .card h1 {
color: var(--text-three); color: var(--text-three);
text-shadow: 2px 2px var(--shadow-three); text-shadow: 2px 2px var(--shadow-three);
} }
.card-adoption-notice img { .card img {
max-width: 100%; max-width: 100%;
border-radius: 10%; border-radius: 10%;
} }
@ -385,25 +387,14 @@ h1 {
list-style-type: none; list-style-type: none;
} }
.card-animal {
flex: 1 16%;
margin: 10px 10px 10px 0px;
border-radius: 3%;
border: 4px grey solid;
padding: 5px;
}
@media (max-width: 920px) { @media (max-width: 920px) {
.card-animal { .card {
flex: 1 100%;
}
.card-adoption-notice {
flex: 1 100%; flex: 1 100%;
} }
} }
.adoption-notice-img img, .card-animal img { .adoption-notice-img img, img {
max-width: 100%; max-width: 100%;
border-radius: 10%; border-radius: 10%;
margin: 5px; margin: 5px;

2
src/fellchensammlung/templates/fellchensammlung/partials/partial-adoption-notice.html
View File

@ -1,7 +1,7 @@
{% load custom_tags %} {% load custom_tags %}
{% load i18n %} {% load i18n %}
<div class="card-adoption-notice"> <div class="card">
<div> <div>
<div class="header-card-adoption-notice"> <div class="header-card-adoption-notice">
<h1><a class="heading-card-adoption-notice" href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1> <h1><a class="heading-card-adoption-notice" href="{{ adoption_notice.get_absolute_url }}"> {{ adoption_notice.name }}</a></h1>

2
src/fellchensammlung/templates/fellchensammlung/partials/partial-animal-card.html
View File

@ -1,5 +1,5 @@
{% load i18n %} {% load i18n %}
<div class="card-animal"> <div class="card">
<div class="detail-animal-header"> <div class="detail-animal-header">
<h1>{{ animal.name }}</h1> <h1>{{ animal.name }}</h1>
<div class="tags"> <div class="tags">