diff --git a/app/routers/calendar.py b/app/routers/calendar.py index 4762e16f..16d557e2 100644 --- 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 new file mode 100644 index 00000000..80443fa7 --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/app/static/grid_style.css b/app/static/grid_style.css index 073708a4..926e4452 100644 --- 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 index df509679..17ed6cce 100644 --- 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); - } -) \ No newline at end of file + ) +} \ No newline at end of file diff --git a/app/templates/calendar/layout.html b/app/templates/calendar/layout.html deleted file mode 100644 index 775d911a..00000000 --- a/app/templates/calendar/layout.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - - - - - - - - - - - - Calendar - - - -
- -
-
FEATURE NAME
-
-
-
-
-
{{day.display()}}
-
Location 0oc 00:00
-
- -
-
- {% block main %} - {% endblock %} -
-
-
- - - \ No newline at end of file diff --git a/app/templates/calendar_monthly_view.html b/app/templates/calendar_monthly_view.html new file mode 100644 index 00000000..1e71e9c3 --- /dev/null +++ b/app/templates/calendar_monthly_view.html @@ -0,0 +1,17 @@ +{% extends "partials/calendar/calendar_base.html" %} +{% block content %} +
+
+
{{day.display()}}
+
Location 0oc 00:00
+
+
+ +

PYLENDAR

+ +
+
+
+ {% include 'partials/calendar/monthly_view/monthly_grid.html' %} +
+{% endblock content %} \ No newline at end of file diff --git a/app/templates/home.html b/app/templates/home.html index e862867a..fb8c8fce 100644 --- 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 new file mode 100644 index 00000000..65614656 --- /dev/null +++ b/app/templates/partials/base.html @@ -0,0 +1,39 @@ + + + + {% block head %} + + + + + + + + + + + + + + + + + + + {% endblock head %} + {% block title %}Pylendar{% if self.page_name() %} - {% endif %}{% block page_name %}{% endblock %}{% + endblock %} + + +{% block body %} +{% endblock %} + + diff --git a/app/templates/partials/calendar/calendar_base.html b/app/templates/partials/calendar/calendar_base.html new file mode 100644 index 00000000..8c615b55 --- /dev/null +++ b/app/templates/partials/calendar/calendar_base.html @@ -0,0 +1,23 @@ +{% extends "./partials/base.html" %} +{% block head %} +{{super()}} + + + + + + +{% endblock head %} +{% block page_name %}Month View{% endblock page_name %} +{% block body %} +
+ {% include 'partials/calendar/navigation.html' %} +
+ {% include 'partials/calendar/feature_settings/example.html' %} +
+
+ {% block content %} + {% endblock content %} +
+
+{% endblock body %} \ No newline at end of file diff --git a/app/templates/partials/calendar/feature_settings/example.html b/app/templates/partials/calendar/feature_settings/example.html new file mode 100644 index 00000000..20de56df --- /dev/null +++ b/app/templates/partials/calendar/feature_settings/example.html @@ -0,0 +1 @@ +
FEATURE NAME
\ No newline at end of file diff --git a/app/templates/calendar/add_week.html b/app/templates/partials/calendar/monthly_view/add_week.html similarity index 100% rename from app/templates/calendar/add_week.html rename to app/templates/partials/calendar/monthly_view/add_week.html diff --git a/app/templates/calendar/calendar.html b/app/templates/partials/calendar/monthly_view/monthly_grid.html similarity index 72% rename from app/templates/calendar/calendar.html rename to app/templates/partials/calendar/monthly_view/monthly_grid.html index d5d95c15..f95a734d 100644 --- a/app/templates/calendar/calendar.html +++ b/app/templates/partials/calendar/monthly_view/monthly_grid.html @@ -1,6 +1,3 @@ -{% extends 'calendar/layout.html' %} - -{% block main %}
{% for d in week_days %} @@ -12,8 +9,7 @@ {% endfor %}
- {% include 'calendar/add_week.html' %} + {% include 'partials/calendar/monthly_view/add_week.html' %}
-
-{% endblock %} \ No newline at end of file +
\ No newline at end of file diff --git a/app/templates/partials/calendar/navigation.html b/app/templates/partials/calendar/navigation.html new file mode 100644 index 00000000..ec1758c0 --- /dev/null +++ b/app/templates/partials/calendar/navigation.html @@ -0,0 +1,31 @@ + \ No newline at end of file diff --git a/app/templates/partials/index/index_base.html b/app/templates/partials/index/index_base.html new file mode 100644 index 00000000..b4190a08 --- /dev/null +++ b/app/templates/partials/index/index_base.html @@ -0,0 +1,13 @@ +{% extends "partials/base.html" %} +{% block head %} +{{super()}} + + +{% endblock head %} +{% block body %} + {% include 'partials/index/navigation.html' %} + + {% block content %} + {% endblock %} + +{% endblock body %} \ No newline at end of file diff --git a/app/templates/partials/index/navigation.html b/app/templates/partials/index/navigation.html new file mode 100644 index 00000000..1e0b7d4b --- /dev/null +++ b/app/templates/partials/index/navigation.html @@ -0,0 +1,36 @@ + \ No newline at end of file