PythonFreeCourse · yammesicka · Feb 7, 2021 · Feb 5, 2021 · Feb 5, 2021 · Feb 5, 2021
diff --git a/app/routers/calendar.py b/app/routers/calendar.py
@@ -20,7 +20,7 @@ async def calendar(request: Request) -> Response:
     user_local_time = cg.Day.get_user_local_time()
     day = cg.create_day(user_local_time)
     return templates.TemplateResponse(
-        "calendar/calendar.html",
+        "calendar_monthly_view.html",
         {
             "request": request,
             "day": day,
@@ -34,6 +34,7 @@ async def calendar(request: Request) -> Response:
 async def update_calendar(request: Request, date: str) -> HTMLResponse:
     last_day = cg.Day.convert_str_to_date(date)
     next_weeks = cg.create_weeks(cg.get_n_days(last_day, ADD_DAYS_ON_SCROLL))
-    template = templates.get_template('calendar/add_week.html')
+    template = templates.get_template(
+        'partials/calendar/monthly_view/add_week.html')
     content = template.render(weeks_block=next_weeks)
     return HTMLResponse(content=content, status_code=HTTPStatus.OK)
diff --git a/app/static/global.css b/app/static/global.css
@@ -0,0 +1,20 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body{
+    height: 100%;
+}
+
+body{
+    background-color: #F7F7F7;
+    color: #222831;
+    font-family: "Assistant", "Ariel", sans-serif;
+    font-weight: 400;
+    line-height: 1.7;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+    width: 100%;
+}
diff --git a/app/static/grid_style.css b/app/static/grid_style.css
@@ -1,18 +1,5 @@
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
 html {
-    font-family: "Assistant", "Ariel", sans-serif;
-    font-weight: 400;
     font-size: 62.5%;  /*16px / 10px = 62.5% -> 1rem = 10px*/
-    line-height: 1.7;
-    text-rendering: optimizeLegibility;
-    scroll-behavior: smooth;
-    background-color: #F7F7F7;
-    color: #222831;
 }
 
 a {
@@ -22,14 +9,15 @@ a {
 
 /* Grids */
 /* -> Website Structure */
-.container {
-    display: grid;
+.pyldr-container {
+    display: flex;
     grid-template-columns: 4.8rem minmax(0, auto) 1fr;
+    height: 100%;
 }
 
 nav {
     z-index: 5;
-    grid-row: 1/3;
+    padding: 1rem;
 }
 
 .menu {
@@ -45,6 +33,12 @@ nav {
     text-align: center;
 }
 
+.content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 .user-features {margin-top: 3rem;}
 
 .fixed-features div {
@@ -84,7 +78,7 @@ nav {
 #feature-settings {
     visibility: hidden;
     width: 0.1rem;
-    grid-row: 1/3;
+    /*grid-row: 1/3;*/
 }
 
 .settings-open {
@@ -116,9 +110,16 @@ header div {
 main {
     display: flex;
     flex-flow: row wrap;
+    flex: 1;
+    overflow-y: hidden;
 }
 
-.calendar {flex: 1;}
+.calendar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+        height: 100%;
+}
 
 .day-view-visible {
     flex: 0 1 30%;
@@ -129,28 +130,36 @@ main {
 .calender-days-titles {
     z-index: 4;
     position: sticky;
-    top: 6rem;
     align-self: flex-start;
-    grid-column: 1/3;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     margin: 1rem 1rem 0 1rem;
     background-color: #F7F7F7;
+    align-self: stretch;
 }
 
 /* The Calendar Grid */
 #calender-grid {
     flex: 1;
-    display: flex;
-    flex-direction: column;
-    margin: 0 1rem 0 1rem;
+    display: grid;
+    grid-auto-rows: 20%;
+    grid-template-rows: repeat(5, 20%);
+    overflow: scroll;
+    height: 100%;
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+#calender-grid::-webkit-scrollbar {
+  display: none;
 }
 
 .week {
     flex: 1;
     display: grid;
+    margin: 0 1rem 0 1rem;
     grid-template-columns: repeat(7, 1fr);
-    grid-auto-rows: 12rem;
     font-weight: 900;
     font-size: 2rem;
 }

diff --git a/app/static/js/grid_scripts.js b/app/static/js/grid_scripts.js
@@ -11,6 +11,7 @@ function setToggle(elementClass, targetElement, classToAdd, lastIndex) {
 document.addEventListener(
     'DOMContentLoaded', function () {
         setToggle("day", "day-view", "day-view-visible", 0);
+        weekScroll();
     }
 )
 
@@ -28,14 +29,17 @@ function loadWeek(lastDay, index) {
     });
 }
 
-window.addEventListener(
-    'scroll', function () {
-        const tolerance = 1;
-        if (window.scrollY + window.innerHeight + tolerance < document.documentElement.scrollHeight) {
-            return false;
+function weekScroll() {
+    grid = document.getElementById("calender-grid");
+    grid.addEventListener(
+        'scroll', function () {
+            const tolerance = 1;
+            if (grid.scrollY + grid.innerHeight + tolerance < grid.scrollHeight) {
+                return false;
+            }
+            const allDays = document.getElementsByClassName('day');
+            const lastDay = allDays[allDays.length - 1];
+            loadWeek(lastDay, allDays.length);
         }
-        const allDays = document.getElementsByClassName('day');
-        const lastDay = allDays[allDays.length - 1];
-        loadWeek(lastDay, allDays.length);
-    }
-)
+    )
+}
diff --git a/app/templates/calendar/layout.html b/app/templates/calendar/layout.html
diff --git a/app/templates/calendar_monthly_view.html b/app/templates/calendar_monthly_view.html
@@ -0,0 +1,17 @@
+{% extends "partials/calendar/calendar_base.html" %}
+{% block content %}
+<header>
+    <div>
+        <div class="title"> {{day.display()}}</div>
+        <div class="sec-title"> Location 0<sup>o</sup>c 00:00</div>
+    </div>
+    <div id="logo-div">
+        <a href="/calendar/month">
+            <h1 class="title"> PYLENDAR </h1>
+        </a>
+    </div>
+</header>
+<main>
+    {% include 'partials/calendar/monthly_view/monthly_grid.html' %}
+</main>
+{% endblock content %}
diff --git a/app/templates/home.html b/app/templates/home.html
@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "partials/index/index_base.html" %}
 
 {% block content %}
 

diff --git a/app/templates/partials/base.html b/app/templates/partials/base.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    {% block head %}
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap"
+          rel="stylesheet">
+
+    <!-- CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="{{ url_for('static', path='/global.css') }}" rel="stylesheet">
+
+    <!-- Icons -->
+    <script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
+            integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
+            crossorigin="anonymous"></script>
+
+    <!-- Javascript -->
+    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+            crossorigin="anonymous"></script>
+    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
+            integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
+            crossorigin="anonymous"></script>
+    <script defer type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
+    {% endblock head %}
+    {% block title %}<title>Pylendar{% if self.page_name() %} - {% endif %}{% block page_name %}{% endblock %}</title>{%
+    endblock %}
+</head>
+<body>
+{% block body %}
+{% endblock %}
+</body>
+</html>
diff --git a/app/templates/partials/calendar/calendar_base.html b/app/templates/partials/calendar/calendar_base.html
@@ -0,0 +1,23 @@
+{% extends "./partials/base.html" %}
+{% block head %}
+{{super()}}
+
+    <!-- CSS -->
+    <link href="{{ url_for('static', path='/grid_style.css') }}" rel="stylesheet" type="text/css">
+
+    <!-- Scripts -->
+    <script src="{{ url_for('static', path='/js/grid_scripts.js') }}"></script>
+{% endblock head %}
+{% block page_name %}Month View{% endblock page_name %}
+{% block body %}
+    <div class="pyldr-container">
+        {% include 'partials/calendar/navigation.html' %}
+        <div class="background-lightgray" id="feature-settings">
+            {% include 'partials/calendar/feature_settings/example.html' %}
+        </div>
+        <div class="content">
+            {% block content %}
+            {% endblock content %}
+        </div>
+    </div>
+{% endblock body %}
diff --git a/app/templates/partials/calendar/feature_settings/example.html b/app/templates/partials/calendar/feature_settings/example.html
@@ -0,0 +1 @@
+<div class="title"> FEATURE NAME </div>
diff --git a/app/templates/calendar/add_week.html → ...tials/calendar/monthly_view/add_week.html b/app/templates/calendar/add_week.html → ...tials/calendar/monthly_view/add_week.html
diff --git a/app/templates/calendar/calendar.html → ...s/calendar/monthly_view/monthly_grid.html b/app/templates/calendar/calendar.html → ...s/calendar/monthly_view/monthly_grid.html
@@ -1,6 +1,3 @@
-{% extends 'calendar/layout.html' %}
-
-{% block main %}
 <div class="calendar">
     <div class="calender-days-titles">
         {% for d in week_days %}
@@ -12,8 +9,7 @@
         {% endfor %}
     </div>
     <div id="calender-grid">
-        {% include 'calendar/add_week.html' %}
+        {% include 'partials/calendar/monthly_view/add_week.html' %}
     </div>
 </div>
-<div id="day-view"></div>
-{% endblock %}
+<div id="day-view"></div>