asc/webcal-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

2024-12-16

Browse Source
This commit is contained in:
Anthony Correa
2024-12-16 16:45:24 -06:00
parent 82d0389db4
commit d8d9e3bbab
4 changed files with 57 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
server/app/templates/base.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %}</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>{% include "style.css"%}</style>
<meta name="viewport" content="width=600, height=800" />
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

45
server/app/templates/dashboard.html
View File

@@ -1,12 +1,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<html> {% block title %}Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}}){% endblock %}
<head> {% block content %}
<title>Dashboard ({{today.strftime('%-m/%-d, %-H:%M')}})</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>{% include "style.css"%}</style>
<meta name="viewport" content="width=600, height=800" />
</head>
<body>
<div class="dashboard"> <div class="dashboard">
<div style="height:1em"></div> <div style="height:1em"></div>
<div class="panel top"> <div class="panel top">
@@ -23,40 +17,15 @@
<div class="panel bottom week"> <div class="panel bottom week">
<div class="row"> <div class="row">
{% for day, events in days [:4] %} {% for day, events in days [:4] %}
<div class="day"> {% include "includes/day.html" %}
<div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %} {% endfor %}
</div> </div>
<div class="row"> <div class="row">
{% for day, events in days [4:] %} {% for day, events in days [4:] %}
<div class="day"> {% include "includes/day.html" %}
<div id="dotw-1" class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div>
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div style="height:1em;text-align: center;"><code>{{extra_debug}} </code><code>{{ today.strftime('%c') }}</code></div> <div><code>{{extra_debug}} </code><code>{{ today.strftime('%c') }}</code></div>
</div> </div>
</body> {%endblock%}
</html>

15
server/app/templates/includes/day.html Normal file
View File

@@ -0,0 +1,15 @@
<div class="day">
<div class="day-title{% if day == today.date()%} current-day{% endif %}">
{{ day.strftime('%a %-d') }}
</div>
<div class="events">
{% for event in events %}
<div class="event">
{{ event.summary }}<br>
{% if not event.is_all_day %}
<span class="daterange">{{ event.range_str }}</span>
{% endif %}
</div>
{% endfor %}
</div>
</div>

24
server/app/templates/style.css
View File

@@ -3,13 +3,19 @@
box-sizing: border-box; /* Include padding and borders in size calculations */ box-sizing: border-box; /* Include padding and borders in size calculations */
} }
html, body { html, body {
width: 600px;
height: 800px;
margin: 0; /* Prevent any default margins */ margin: 0; /* Prevent any default margins */
padding: 0; padding: 0;
} }
body {
width: 600px;
height: 800px;
border: 2px solid red; /* Visual aid */
}
.dashboard { .dashboard {
border: 2px solid green; /* Visual aid */
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@@ -49,7 +55,7 @@ html, body {
font-size: 60px; font-size: 60px;
font-weight: bold; font-weight: bold;
vertical-align: top; vertical-align: top;
text-align: right !important; text-align: right;
} }
.splitpanel .weather-icon { .splitpanel .weather-icon {
@@ -71,6 +77,7 @@ html, body {
} }
.panel.bottom.week .row { .panel.bottom.week .row {
border: 2px solid yellow; /* Visual aid */
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@@ -78,6 +85,8 @@ html, body {
-webkit-flex: 1; -webkit-flex: 1;
flex: 1; flex: 1;
height: 50%; height: 50%;
align-items: stretch; /* Stretch children to fill the width (optional) */
} }
.panel.bottom.week .row .day { .panel.bottom.week .row .day {
@@ -85,13 +94,11 @@ html, body {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-box-orient: vertical; /* Old WebKit property for column layout */ -webkit-box-orient: vertical; /* Old WebKit property for column layout */
-webkit-box-direction: normal; /* Old WebKit property for forward direction */ -webkit-box-direction: column; /* Old WebKit property for forward direction */
-webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */ -webkit-flex-direction: column; /* Flexbox column direction for modern WebKit */
flex-direction: column; /* Standard Flexbox column layout */ flex-direction: column; /* Standard Flexbox column layout */
border-style: solid; border-style: solid;
width: 135px; /* Fixed width for each day */
margin: 1px; margin: 1px;
align-items: stretch; /* Stretch children to fill the width (optional) */
justify-content: flex-start; /* Align children at the top */ justify-content: flex-start; /* Align children at the top */
text-align: left; text-align: left;
flex: 1; flex: 1;
@@ -119,6 +126,11 @@ html, body {
padding: 2px; padding: 2px;
} }
.footer {
text-align: center;
height: 1em;
}
code { code {
font-size: .8em; font-size: .8em;
} }