Improved templating
This commit is contained in:
parent
b36ec7c403
commit
4855cf8490
141
main.py
141
main.py
|
|
@ -1,122 +1,16 @@
|
|||
import argparse
|
||||
import bottle
|
||||
|
||||
TEMPLATE_INDEX = '''
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>My calendar</title>
|
||||
<style>
|
||||
import templates
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
#
|
||||
|
||||
.week-counter {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
border-right: 1px lightgray solid;
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
}
|
||||
def determine_data():
|
||||
pass
|
||||
|
||||
.calendar-grid {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.calendar-weekday-header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border-bottom: 1px black solid;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
border-bottom: 1px lightgray solid;
|
||||
border-right: 1px lightgray solid;
|
||||
|
||||
min-height: 100px;
|
||||
font-size: 1rem;
|
||||
height: 18vh;
|
||||
}
|
||||
|
||||
.day-num.today {
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding-right: 4px;
|
||||
border-radius: 7px;
|
||||
margin: 5px 1px;
|
||||
}
|
||||
|
||||
.calendar-day.weekend-day {
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.calendar-day .day-num {
|
||||
text-align: right;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.calendar-day,.calendar-weekday-header {
|
||||
width: 14%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.month-header {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="month-header">August 2022</h1>
|
||||
<div class="calendar-grid">
|
||||
<div class="week-row">
|
||||
<div class="week-counter"></div>
|
||||
<div class="calendar-weekday-header">Monday</div>
|
||||
<div class="calendar-weekday-header">Tuesday</div>
|
||||
<div class="calendar-weekday-header">Wednesday</div>
|
||||
<div class="calendar-weekday-header">Thursday</div>
|
||||
<div class="calendar-weekday-header">Friday</div>
|
||||
<div class="calendar-weekday-header">Saturday</div>
|
||||
<div class="calendar-weekday-header">Sunday</div>
|
||||
|
||||
% for day_info in days:
|
||||
% if day_info['day_of_week'] == 1:
|
||||
</div><div class="week-row">
|
||||
<div class="week-counter
|
||||
">W{{ day_info['week_of_year'] }}</div>
|
||||
% end
|
||||
<div class="calendar-day
|
||||
% if day_info['is_weekend']:
|
||||
weekend-day
|
||||
% end
|
||||
"><div class="day-num
|
||||
% if day_info['today']:
|
||||
today
|
||||
% end
|
||||
">{{ day_info['day_of_month'] }}</div>
|
||||
% for event_text in day_info['events']:
|
||||
</br><span>{{ event_text }}</span>
|
||||
% end
|
||||
|
||||
</div>
|
||||
% end
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
## Paths
|
||||
@bottle.route('/')
|
||||
def reddit_index():
|
||||
events_map = {
|
||||
19: ['J: Spil Fredagsbar', 'L: Datbar'],
|
||||
20: ['F: Regatta'],
|
||||
}
|
||||
# Template rendering
|
||||
|
||||
def render_calendar(events_map, today):
|
||||
days = []
|
||||
for day_of_month in range(1, 31 + 1):
|
||||
day_of_week = (day_of_month - 1) % 7 + 1
|
||||
|
|
@ -126,10 +20,29 @@ def reddit_index():
|
|||
'day_of_week': day_of_week,
|
||||
'is_weekend': day_of_week == 6 or day_of_week == 7,
|
||||
'week_of_year' : week_of_year,
|
||||
'today': day_of_month == 19,
|
||||
'today': day_of_month == today,
|
||||
'already_past': day_of_month < today,
|
||||
'events': events_map.get(day_of_month, []),
|
||||
})
|
||||
return bottle.template(TEMPLATE_INDEX, days = days)
|
||||
return bottle.template(templates.TEMPLATE_INDEX, days = days)
|
||||
|
||||
## Paths
|
||||
|
||||
@bottle.route('/static/<path:path>')
|
||||
def static(path):
|
||||
return bottle.static_file(path, root = './static')
|
||||
|
||||
@bottle.route('/')
|
||||
def reddit_index():
|
||||
events_map = {
|
||||
15: ['J: Japansk 1'],
|
||||
19: ['J: Spil Fredagsbar', 'L: Datbar'],
|
||||
20: ['JL: Regatta'],
|
||||
}
|
||||
|
||||
today = 19
|
||||
|
||||
return render_calendar(events_map, today)
|
||||
|
||||
## Argument parsing
|
||||
|
||||
|
|
|
|||
96
static/style.css
Normal file
96
static/style.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.week-counter {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
border-right: 1px lightgray solid;
|
||||
display: inline-block;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.calendar-grid {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-weekday-header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
border-bottom: 1px black solid;
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.calendar-day {
|
||||
border-bottom: 1px lightgray solid;
|
||||
border-right: 1px lightgray solid;
|
||||
|
||||
min-height: 100px;
|
||||
font-size: 0.5rem;
|
||||
height: 18vh;
|
||||
}
|
||||
|
||||
.crossed-out {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.crossed-out:before, .crossed-out:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: grey;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.crossed-out:after {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.calendar-day.weekend-day {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.calendar-day .day-num {
|
||||
text-align: right;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.day-num.today {
|
||||
background-color: red;
|
||||
color: white;
|
||||
padding-right: 4px;
|
||||
border-radius: 7px;
|
||||
margin: 5px 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event {
|
||||
background: pink;
|
||||
padding: 1px 5px;
|
||||
border-radius: 7px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.calendar-day,.calendar-weekday-header {
|
||||
width: 14%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.month-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
56
templates.py
Normal file
56
templates.py
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
TEMPLATE_INDEX = '''
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>My calendar</title>
|
||||
<link href="static/style.css" rel="stylesheet">
|
||||
<meta http-equiv="refresh" content="60">
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="month-header">August 2022</h1>
|
||||
<table class="calendar-grid">
|
||||
<thead>
|
||||
<tr class="week-row">
|
||||
<td class="week-counter"></td>
|
||||
<td class="calendar-weekday-header">Monday</td>
|
||||
<td class="calendar-weekday-header">Tuesday</td>
|
||||
<td class="calendar-weekday-header">Wednesday</td>
|
||||
<td class="calendar-weekday-header">Thursday</td>
|
||||
<td class="calendar-weekday-header">Friday</td>
|
||||
<td class="calendar-weekday-header">Saturday</td>
|
||||
<td class="calendar-weekday-header">Sunday</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
% for day_info in days:
|
||||
% if day_info['day_of_week'] == 1:
|
||||
</tr><tr class="week-row">
|
||||
<td class="week-counter
|
||||
">W{{ day_info['week_of_year'] }}</td>
|
||||
% end
|
||||
<td class="calendar-day
|
||||
% if day_info['is_weekend']:
|
||||
weekend-day
|
||||
% end
|
||||
% if day_info['already_past']:
|
||||
crossed-out
|
||||
% end
|
||||
"><div class="day-num
|
||||
% if day_info['today']:
|
||||
today
|
||||
% end
|
||||
">{{ day_info['day_of_month'] }}</div>
|
||||
% for event_text in day_info['events']:
|
||||
<div class="event">{{ event_text }}</div>
|
||||
% end
|
||||
</td>
|
||||
% end
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
'''
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user