hulthe/stl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display category children & Add calendar stats

Browse Source
This commit is contained in:
Joakim Hulthe
2021-04-30 14:48:42 +02:00
parent e8e8f535c2
commit c3870bcded
22 changed files with 759 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
server/static/styles/calendar.css Normal file
View File

@ -0,0 +1,43 @@
.cal {
display: flex;
flex-direction: row;
}
.cal_col {
display: flex;
flex-direction: column;
}
.cal_day {
width: 4em;
height: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
border: dotted 1px grey;
}
.cal_day_non_empty {
background-color: #785ddc;
color: #fdab70;
}
.cal_day_missing {
background-color: pink;
}
.cal_day_border_top {
border-top: solid 1px white;
}
.cal_day_border_bottom {
border-bottom: solid 1px white;
}
.cal_day_border_left {
border-left: solid 1px white;
}
.cal_day_border_right {
border-right: solid 1px white;
}

39
server/static/styles/charts.css
View File

@ -1,43 +1,4 @@
/* CSS rules for charts/plots */
.chart_col_tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.chart_col_tooltip .chart_col_tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 110%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.chart_col_tooltip .chart_col_tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
.chart_col_tooltip:hover .chart_col_tooltiptext {
visibility: visible;
opacity: 1;
}
.chart_histogram {
height: 250px; /* TODO: possibly remove this */
padding: 0.75em;

75
server/static/styles/common.css
View File

@ -28,21 +28,40 @@ a:hover {
}
ul.striped_list {
max-width: 40em;
max-width: 40rem;
list-style-type: none;
margin: auto;
padding: 0;
}
ul.striped_list > li:nth-of-type(odd) {
background-color: #3f4a53;
}
ul.striped_list > li:nth-child(even) { background-color:#302f3b }
ul.striped_list > li:nth-child(odd) { background-color:#3f4a53 }
ul.striped_list > li:nth-child(even) ul li:nth-child(even) { background-color:#302f3b }
ul.striped_list > li:nth-child(even) ul li:nth-child(odd) { background-color:#3f4a53 }
ul.striped_list > li:nth-child(odd) ul li:nth-child(even) { background-color:#3f4a53 }
ul.striped_list > li:nth-child(odd) ul li:nth-child(odd) { background-color:#302f3b;}
.category_entry {
}
.category_header {
display: flex;
flex-direction: row;
}
.category_children {
display: flex;
flex-direction: column;
margin-left: 2.5em !important;
border-left: groove 1em;
border-top: groove 1em;
border-bottom: dotted;
border-color: #696969;
font-size: 0.8em;
}
.category_name {
font-size: 3em;
margin: auto;
@ -70,11 +89,11 @@ ul.striped_list > li:nth-of-type(odd) {
}
.category_button_container {
margin: 0.1em;
margin: 0.1rem;
background-color: #a4829c;
border-radius: 3.5em;
width: 7em;
height: 7em;
border-radius: 3.5rem;
width: 7rem;
height: 7rem;
}
.category_button {
@ -131,3 +150,43 @@ ul.striped_list > li:nth-of-type(odd) {
background-color: #aaaaaa;
margin: auto;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #000;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 110%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}