derped/Berichtsheft
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Fix fluctuating tbody heights by not using tables.

Browse source
This commit is contained in:
Kevin Baensch 2021-04-19 17:35:02 +02:00
parent 742a51b674
commit d89bcbec06
Signed by: derped
GPG key ID: C0F1D326C7626543
3 changed files with 225 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

85
berichtsheft/assets/css/notebook.css
View file

@ -42,53 +42,82 @@ hr {
border-top: 1px solid black;
}
td {
height: 1.5em;
word-break: break-word;
}
table.week {
layout: fixed;
.week {
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
border: 1px solid #000000;
}
table.week th {
height: 2em;
font-weight: normal;
.week-head {
text-align: center;
vertical-align: middle;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
table.week tbody:nth-child(odd) tr:nth-child(odd) {
.day {
flex-basis: 18%;
margin-top: -1px;
margin-left: -1px;
margin-right: -1px;
border: 1px solid #000000;
}
.week-foot {
background-color: #f2f2f2;
}
table.week tbody:nth-child(even) tr:nth-child(even) {
background-color: #f2f2f2;
}
table.week thead th:nth-last-child(-n+2) {
width: 10%;
font-size: 80%;
}
table.week td:nth-last-child(-n+2) {
text-align: center;
}
table.week tbody:last-child tr:last-child td:first-child {
.week-foot div:first-child {
text-align: right;
}
.vtable {
width: 1em;
.day-line {
align-items: center;
flex-basis: 20%;
}
.day:nth-child(even) .day-line:nth-child(even) {
background-color: #f2f2f2;
}
.day:nth-child(odd) .day-line:nth-child(odd) {
background-color: #f2f2f2;
}
.flexh {
display: flex;
}
.flexv {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.flexgrow {
flex-grow: 1;
}
.flexten {
flex-basis: 10%;
flex-grow: 0;
flex-shrink: 0;
text-align: center;
}
.flexfive {
flex-basis: 5%;
}
.vertical {
text-align: center;
writing-mode: vertical-lr;
transform: rotate(180deg);
border-left: 1px solid #000000;;
}
.sign {