admin/dog_training
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Merged layouts for core and dog sections as much as possible.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2025-07-31 16:37:11 +01:00
parent 2d1f7269e0
commit 4b1fac2dcb
53 changed files with 697 additions and 920 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
static/css/layouts/header.css
View File

@@ -2,17 +2,19 @@
/* Navigation */
.topnav {
border-bottom-left-radius: 2.5vh;
border-bottom-right-radius: 2.5vh;
display: flex;
flex-wrap: wrap;
flex: 1;
flex-direction: row;
font-weight: bold;
font-size: 1vh;
max-height: 15vh;
height: 15vh;
max-height: 7vh;
height: 7vh;
align-items: flex-start;
background: var(--colour-text-background);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
justify-content: center; /* space-between */
align-items: center;
}
.topnav a,
.topnav label,
@@ -23,7 +25,7 @@
text-align: center;
text-decoration: none;
width: 100%;
max-height: 15vh;
max-height: 7vh;
justify-content: center;
}
.topnav h1 {
@@ -31,37 +33,55 @@
}
.topnav a:hover {
background-color: var(--colour-page-background);
color: var(--colour-text)
}
.topnav > .container {
max-width: 50%;
width: 10vh;
height: 100%;
align-items: center;
align-self: center;
display: flex;
}
.topnav > .container.logo {
min-width: 15vh;
max-width: 15vh;
.topnav .container.logo {
cursor: pointer;
}
.topnav > .container.company-name {
min-width: calc(100vw - 30vh);
max-width: calc(100vw - 30vh);
.topnav .container .logo {
/* min-width: 35vh; */
max-width: 35vh;
/* min-height: 6vh; */
max-height: 6vh;
margin: 0.5vh;
margin-right: auto;
}
.topnav select {
padding: 1vh;
margin: 1vh;
border-radius: 1vh;
border: 2px solid var(--border-colour);
font-weight: bold;
text-align: center;
width: 25vw;
}
.topnav select .is_collapsed {
width: 5vw;
.topnav .container.company-name {
min-width: calc(100vw - 20vh);
max-width: calc(100vw - 20vh);
margin-right: 10vh;
}
.company-name {
font-size: min(28px, calc(1vh * 7));
font-size: 1.6rem;
}
.nav-links {
display: flex;
gap: 1vh 2rem;
display: flex;
flex-wrap: wrap;
max-width: calc(1vw * 100 - 1vh * 35);
align-items: center;
margin: 1vh 1vw;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: normal;
align-content: center;
font-size: 1.2rem;
width: fit-content;
}
.nav-links a.button {
color: var(--colour-text-background);
margin: 0 auto;
font-weight: bold;
}
/*
@media screen and (max-width: 450px) {
@@ -70,6 +90,88 @@
}
}
*/
/*
header {
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/ * position: fixed;
top: 0; * /
width: 100%;
z-index: 1000;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.nav-links {
display: flex;
gap: 2rem;
display: flex;
flex-wrap: wrap;
max-width: 58vw;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
align-content: center;
font-size: 1rem;
}
.nav-links a.button {
color: white;
margin: 0 auto;
}
.container {
max-width: min(2000px, 90vw);
margin: 0 auto;
padding: 0 5vw;
}
/ * Header * /
header {
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/ * position: fixed;
top: 0; * /
width: 100%;
z-index: 1000;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 2rem;
font-weight: bold;
color: #8932CB;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
align-content: center;
}
.nav-links a.button {
color: white;
}
*/
/* Page Filters */
#formFilters {
width: fit-content;
@@ -152,12 +254,25 @@ form.filter button.save, form.filter button.button-cancel {
margin-bottom: 1px;
}
/*
@media screen and (max-width: 400px) {
#formFilters .container-input select {
/* height: 3vh; */
}
.topnav h1 {
font-size: 16px;
}
}
*/
@media screen and (max-width: 940px) {
/*
.hero h1 {
font-size: 2.5rem;
}
*/
.nav-links {
display: none;
}
.topnav {
justify-content: flex-start;
align-items: start;
}
}