Skip to content

Commit 21faa13

Browse files
OdeYecOdeYec
authored
Frontend Inheritance Organization (WIP) - Calendar Responsiveness Bug Fix (#218)
* fix: grid responsiveness (fills grid to the bottom now)
1 parent b84a9fe commit 21faa13

File tree

15 files changed

+233
-121
lines changed

15 files changed

+233
-121
lines changed

‎app/routers/calendar.py

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ async def calendar(request: Request) -> Response:
2020
user_local_time = cg.Day.get_user_local_time()
2121
day = cg.create_day(user_local_time)
2222
return templates.TemplateResponse(
23-
"calendar/calendar.html",
23+
"calendar_monthly_view.html",
2424
{
2525
"request": request,
2626
"day": day,
@@ -34,6 +34,7 @@ async def calendar(request: Request) -> Response:
3434
async def update_calendar(request: Request, date: str) -> HTMLResponse:
3535
last_day = cg.Day.convert_str_to_date(date)
3636
next_weeks = cg.create_weeks(cg.get_n_days(last_day, ADD_DAYS_ON_SCROLL))
37-
template = templates.get_template('calendar/add_week.html')
37+
template = templates.get_template(
38+
'partials/calendar/monthly_view/add_week.html')
3839
content = template.render(weeks_block=next_weeks)
3940
return HTMLResponse(content=content, status_code=HTTPStatus.OK)

‎app/static/global.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html, body{
8+
height: 100%;
9+
}
10+
11+
body{
12+
background-color: #F7F7F7;
13+
color: #222831;
14+
font-family: "Assistant", "Ariel", sans-serif;
15+
font-weight: 400;
16+
line-height: 1.7;
17+
text-rendering: optimizeLegibility;
18+
scroll-behavior: smooth;
19+
width: 100%;
20+
}

‎app/static/grid_style.css

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,5 @@
1-
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
5-
}
6-
71
html {
8-
font-family: "Assistant", "Ariel", sans-serif;
9-
font-weight: 400;
102
font-size: 62.5%; /*16px / 10px = 62.5% -> 1rem = 10px*/
11-
line-height: 1.7;
12-
text-rendering: optimizeLegibility;
13-
scroll-behavior: smooth;
14-
background-color: #F7F7F7;
15-
color: #222831;
163
}
174

185
a {
@@ -22,14 +9,15 @@ a {
229

2310
/* Grids */
2411
/* -> Website Structure */
25-
.container {
26-
display: grid;
12+
.pyldr-container {
13+
display: flex;
2714
grid-template-columns: 4.8rem minmax(0, auto) 1fr;
15+
height: 100%;
2816
}
2917

3018
nav {
3119
z-index: 5;
32-
grid-row: 1/3;
20+
padding: 1rem;
3321
}
3422

3523
.menu {
@@ -45,6 +33,12 @@ nav {
4533
text-align: center;
4634
}
4735

36+
.content {
37+
flex: 1;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
4842
.user-features {margin-top: 3rem;}
4943

5044
.fixed-features div {
@@ -84,7 +78,7 @@ nav {
8478
#feature-settings {
8579
visibility: hidden;
8680
width: 0.1rem;
87-
grid-row: 1/3;
81+
/*grid-row: 1/3;*/
8882
}
8983

9084
.settings-open {
@@ -116,9 +110,16 @@ header div {
116110
main {
117111
display: flex;
118112
flex-flow: row wrap;
113+
flex: 1;
114+
overflow-y: hidden;
119115
}
120116

121-
.calendar {flex: 1;}
117+
.calendar {
118+
flex: 1;
119+
display: flex;
120+
flex-direction: column;
121+
height: 100%;
122+
}
122123

123124
.day-view-visible {
124125
flex: 0 1 30%;
@@ -129,28 +130,36 @@ main {
129130
.calender-days-titles {
130131
z-index: 4;
131132
position: sticky;
132-
top: 6rem;
133133
align-self: flex-start;
134-
grid-column: 1/3;
135134
display: grid;
136135
grid-template-columns: repeat(7, 1fr);
137136
margin: 1rem 1rem 0 1rem;
138137
background-color: #F7F7F7;
138+
align-self: stretch;
139139
}
140140

141141
/* The Calendar Grid */
142142
#calender-grid {
143143
flex: 1;
144-
display: flex;
145-
flex-direction: column;
146-
margin: 0 1rem 0 1rem;
144+
display: grid;
145+
grid-auto-rows: 20%;
146+
grid-template-rows: repeat(5, 20%);
147+
overflow: scroll;
148+
height: 100%;
149+
-ms-overflow-style: none; /* IE and Edge */
150+
scrollbar-width: none; /* Firefox */
151+
}
152+
153+
/* Hide scrollbar for Chrome, Safari and Opera */
154+
#calender-grid::-webkit-scrollbar {
155+
display: none;
147156
}
148157

149158
.week {
150159
flex: 1;
151160
display: grid;
161+
margin: 0 1rem 0 1rem;
152162
grid-template-columns: repeat(7, 1fr);
153-
grid-auto-rows: 12rem;
154163
font-weight: 900;
155164
font-size: 2rem;
156165
}

‎app/static/js/grid_scripts.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ function setToggle(elementClass, targetElement, classToAdd, lastIndex) {
1111
document.addEventListener(
1212
'DOMContentLoaded', function () {
1313
setToggle("day", "day-view", "day-view-visible", 0);
14+
weekScroll();
1415
}
1516
)
1617

@@ -28,14 +29,17 @@ function loadWeek(lastDay, index) {
2829
});
2930
}
3031

31-
window.addEventListener(
32-
'scroll', function () {
33-
const tolerance = 1;
34-
if (window.scrollY + window.innerHeight + tolerance < document.documentElement.scrollHeight) {
35-
return false;
32+
function weekScroll() {
33+
grid = document.getElementById("calender-grid");
34+
grid.addEventListener(
35+
'scroll', function () {
36+
const tolerance = 1;
37+
if (grid.scrollY + grid.innerHeight + tolerance < grid.scrollHeight) {
38+
return false;
39+
}
40+
const allDays = document.getElementsByClassName('day');
41+
const lastDay = allDays[allDays.length - 1];
42+
loadWeek(lastDay, allDays.length);
3643
}
37-
const allDays = document.getElementsByClassName('day');
38-
const lastDay = allDays[allDays.length - 1];
39-
loadWeek(lastDay, allDays.length);
40-
}
41-
)
44+
)
45+
}

‎app/templates/calendar/layout.html

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎app/templates/calendar_monthly_view.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% extends "partials/calendar/calendar_base.html" %}
2+
{% block content %}
3+
<header>
4+
<div>
5+
<div class="title"> {{day.display()}}</div>
6+
<div class="sec-title"> Location 0<sup>o</sup>c 00:00</div>
7+
</div>
8+
<div id="logo-div">
9+
<a href="/calendar/month">
10+
<h1 class="title"> PYLENDAR </h1>
11+
</a>
12+
</div>
13+
</header>
14+
<main>
15+
{% include 'partials/calendar/monthly_view/monthly_grid.html' %}
16+
</main>
17+
{% endblock content %}

‎app/templates/home.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
{% extends "base.html" %}
1+
{% extends "partials/index/index_base.html" %}
22

33
{% block content %}
44

‎app/templates/partials/base.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
{% block head %}
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Fonts -->
9+
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap"
10+
rel="stylesheet">
11+
12+
<!-- CSS -->
13+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
14+
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
15+
<link href="{{ url_for('static', path='/global.css') }}" rel="stylesheet">
16+
17+
<!-- Icons -->
18+
<script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
19+
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
20+
integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
21+
crossorigin="anonymous"></script>
22+
23+
<!-- Javascript -->
24+
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
25+
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
26+
crossorigin="anonymous"></script>
27+
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
28+
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
29+
crossorigin="anonymous"></script>
30+
<script defer type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
31+
{% endblock head %}
32+
{% block title %}<title>Pylendar{% if self.page_name() %} - {% endif %}{% block page_name %}{% endblock %}</title>{%
33+
endblock %}
34+
</head>
35+
<body>
36+
{% block body %}
37+
{% endblock %}
38+
</body>
39+
</html>

‎app/templates/partials/calendar/calendar_base.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% extends "./partials/base.html" %}
2+
{% block head %}
3+
{{super()}}
4+
5+
<!-- CSS -->
6+
<link href="{{ url_for('static', path='/grid_style.css') }}" rel="stylesheet" type="text/css">
7+
8+
<!-- Scripts -->
9+
<script src="{{ url_for('static', path='/js/grid_scripts.js') }}"></script>
10+
{% endblock head %}
11+
{% block page_name %}Month View{% endblock page_name %}
12+
{% block body %}
13+
<div class="pyldr-container">
14+
{% include 'partials/calendar/navigation.html' %}
15+
<div class="background-lightgray" id="feature-settings">
16+
{% include 'partials/calendar/feature_settings/example.html' %}
17+
</div>
18+
<div class="content">
19+
{% block content %}
20+
{% endblock content %}
21+
</div>
22+
</div>
23+
{% endblock body %}

‎app/templates/partials/calendar/feature_settings/example.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div class="title"> FEATURE NAME </div>

‎app/templates/calendar/add_week.html renamed to ‎app/templates/partials/calendar/monthly_view/add_week.html

File renamed without changes.

‎app/templates/calendar/calendar.html renamed to ‎app/templates/partials/calendar/monthly_view/monthly_grid.html

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
{% extends 'calendar/layout.html' %}
2-
3-
{% block main %}
41
<div class="calendar">
52
<div class="calender-days-titles">
63
{% for d in week_days %}
@@ -12,8 +9,7 @@
129
{% endfor %}
1310
</div>
1411
<div id="calender-grid">
15-
{% include 'calendar/add_week.html' %}
12+
{% include 'partials/calendar/monthly_view/add_week.html' %}
1613
</div>
1714
</div>
18-
<div id="day-view"></div>
19-
{% endblock %}
15+
<div id="day-view"></div>

0 commit comments

Comments
 (0)