Skip to content

Commit 9ace889

Browse files
Eliory09Eliory09
authored
Feature/settings fe (#305)
1 parent 2f6faaf commit 9ace889

File tree

9 files changed

+311
-3
lines changed

9 files changed

+311
-3
lines changed

‎app/main.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ def create_tables(engine, psql_environment):
7777
profile,
7878
register,
7979
search,
80+
settings,
8081
telegram,
8182
user,
8283
weekview,
@@ -128,6 +129,7 @@ async def swagger_ui_redirect():
128129
register.router,
129130
salary.router,
130131
search.router,
132+
settings.router,
131133
telegram.router,
132134
user.router,
133135
weekview.router,

‎app/media/arrow-left.png

3.17 KB
Loading

‎app/routers/settings.py

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
from fastapi import APIRouter, Request
2+
3+
from app.dependencies import templates
4+
5+
6+
router = APIRouter(
7+
prefix="/settings",
8+
tags=["settings"],
9+
responses={404: {"description": "Not found"}},
10+
)
11+
12+
13+
@router.get("/")
14+
async def settings(request: Request) -> templates.TemplateResponse:
15+
return templates.TemplateResponse(
16+
"settings.html",
17+
{
18+
"request": request,
19+
},
20+
)

‎app/static/grid_style.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,6 @@ header {
116116
position: sticky;
117117
top: 0;
118118
display: flex;
119-
grid-flow: row wrap;
120119
margin: 0 var(--space_s);
121120
margin: 0 1rem 0 1rem;
122121
background-color: var(--backgroundcol);

‎app/static/js/settings.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
document.addEventListener('DOMContentLoaded', () => {
2+
const tabBtn = document.getElementsByClassName("tab");
3+
for (let i = 0; i < tabBtn.length; i++) {
4+
const btn = document.getElementById("tab" + i);
5+
btn.addEventListener('click', () => {
6+
tabClick(btn.id, tabBtn);
7+
});
8+
}
9+
});
10+
11+
12+
function tabClick(tab_id, tabBtn) {
13+
let shownTab = document.querySelector(".tab-show");
14+
let selectedTabContent = document.querySelector(`#${tab_id}-content`);
15+
shownTab.classList.remove("tab-show");
16+
shownTab.classList.add("tab-hide");
17+
for (btn of tabBtn) {
18+
btn.children[0].classList.remove("active");
19+
}
20+
document.getElementById(tab_id).classList.add("active");
21+
selectedTabContent.classList.remove("tab-hide");
22+
selectedTabContent.classList.add("tab-show");
23+
}

‎app/static/settings_style.css

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/* Settings page */
2+
3+
.sub-title {
4+
font-size: 1em;
5+
padding-top: 0.2em;
6+
}
7+
8+
.settings {
9+
color: #222831;
10+
display: flex;
11+
font-size: 0.9em;
12+
}
13+
14+
#settings-left {
15+
padding: 1.5em 1.5em;
16+
display: flex;
17+
flex-direction: column;
18+
background-color: rgb(230, 230, 230);
19+
}
20+
21+
.settings-layout {
22+
display: flex;
23+
}
24+
25+
.left-options-bar {
26+
display: flex;
27+
}
28+
29+
.settings-main article {
30+
margin-bottom: 2em;
31+
}
32+
33+
.settings-options {
34+
flex: 1;
35+
}
36+
37+
.settings-options ul {
38+
list-style-type: none;
39+
padding-left: 0;
40+
padding-right: 1em;
41+
}
42+
43+
.settings-options ul li {
44+
margin-bottom: 1em;
45+
font-weight: bold;
46+
}
47+
48+
.settings-options ul > li > a:hover,
49+
.settings-options ul li a.active {
50+
transition: all .3s ease-in-out;
51+
color: #5786f5;
52+
cursor: pointer;
53+
text-decoration: none;
54+
}
55+
56+
.tab-show {
57+
display: block;
58+
transition: all .5s ease-in;
59+
}
60+
61+
.tab-hide {
62+
display: none;
63+
}
64+
65+
.settings-main {
66+
flex: 3;
67+
padding: 1.5em 1.5em;
68+
}
69+
70+
.settings-main h2 {
71+
margin-bottom: 1em;
72+
}
73+
74+
.settings-main .form-select {
75+
width: 17em;
76+
}
77+
78+
.tab-show p {
79+
display: block;
80+
align-self: left;
81+
}
82+
83+
.tab-show h2 {
84+
display: block;
85+
align-self: left;
86+
font-weight: bold;
87+
}
88+
89+
.form-select {
90+
font-size: 0.8em;
91+
}
92+
93+
.form-label {
94+
margin: 1em 0em;
95+
}
96+
97+
/* For Mobile */
98+
@media screen and (max-width: 600px) {
99+
.settings {
100+
display: block;
101+
font-size: 3vw;
102+
}
103+
104+
#settings-left {
105+
padding: 1.5em 0em 0em 2em;
106+
width: 100%;
107+
}
108+
109+
.settings-options {
110+
margin-bottom: 1em;
111+
}
112+
113+
.settings-options ul {
114+
padding-left: 0em;
115+
}
116+
117+
.settings-options ul li {
118+
margin-bottom: 0.5em;
119+
font-weight: bold;
120+
}
121+
122+
.settings-main {
123+
padding: 2em 2em;
124+
}
125+
.settings-main .form-select {
126+
width: 17em;
127+
}
128+
129+
.settings-main h2 {
130+
margin-bottom: 1em;
131+
}
132+
133+
.settings-main p {
134+
margin: 1em 0em;
135+
}
136+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<nav class="text-lightgray background-darkblue">
22
<div class="menu">
3-
43
<div class="fixed-features">
54
<div>
65
<a href="/profile">
@@ -16,7 +15,9 @@
1615
<ion-icon name="search" alt="Search icon"></ion-icon>
1716
</div>
1817
<div>
18+
<a href="{{ url_for('settings') }}">
1919
<ion-icon name="settings-outline"></ion-icon>
20+
</a>
2021
</div>
2122
<div>
2223
<ion-icon name="calendar-outline"></ion-icon>

‎app/templates/partials/user_profile/sidebar_left/profile_card/user_details.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<div class="card-body">
44
<h6 class="card-title text-center mb-1">{{ user.full_name }}</h6>
55
<p class="card-text text-center mt-0">
6-
<a class="nav-link text-secondary" href="#">
6+
<a class="nav-link text-secondary" href="{{ url_for('settings') }}">
77
<i class="fa fa-spin fa-cog" aria-hidden="true"></i> Settings
88
</a>
99
</p>

‎app/templates/settings.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
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+
<link href="{{ url_for('static', path='/settings_style.css') }}" rel="stylesheet" type="text/css">
8+
9+
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+
<header>
21+
<div>
22+
<div class="title">SETTINGS</div>
23+
<p class="s-paragraph sub-title">Change your preferences</p>
24+
</div>
25+
<div id="logo-div">
26+
<a href="/calendar/month">
27+
<span class="title">PYLENDAR</span>
28+
</a>
29+
</div>
30+
</header>
31+
<main class="settings">
32+
<div id="settings-left">
33+
<section class="settings-layout">
34+
<div class="left-options-bar">
35+
<div class="settings-options">
36+
<ul id="options">
37+
<li class="tab"><a id="tab0" href="#" class="active">
38+
Language and region
39+
</a></li>
40+
<li class="tab"><a id="tab1" href="#">
41+
Audio settings
42+
</a></li>
43+
<li class="tab"><a id="tab2" href="#">
44+
View options
45+
</a></li>
46+
<li class="tab"><a id="tab3" href="#">
47+
Keyboard shortcuts
48+
</a></li>
49+
<li class="tab"><a id="tab4" href="#">
50+
Event settings
51+
</a></li>
52+
</ul>
53+
</div>
54+
</div>
55+
</section>
56+
</div>
57+
58+
<div id="settings-main" class="settings-main">
59+
<!-- Language and region -->
60+
<article id="tab0-content" class="tab-show">
61+
<h2>Language and region</h2>
62+
<label for="form1" class="form-label">Language:</label>
63+
<select class="form-select form-select-sm" id="form1">
64+
<option value="1">English (US)</option>
65+
<option value="2">Hebrew</option>
66+
</select>
67+
<label for="form2" class="form-label">Country:</label>
68+
<select class="form-select form-select-sm" id="from2">
69+
<option value="1">Israel</option>
70+
<option value="2">United States</option>
71+
</select>
72+
<label for="form3" class="form-label">Date format:</label>
73+
<select class="form-select form-select-sm" id="from3">
74+
<option value="1">DD/MM/YYYY</option>
75+
<option value="2">YYYY/MM/DD</option>
76+
<option value="3">MM/DD/YYYY</option>
77+
</select>
78+
<label for="form4" class="form-label">Time format:</label>
79+
<select class="form-select form-select-sm" id="form4">
80+
<option value="1">24H</option>
81+
<option value="2">12H</option>
82+
</select>
83+
</article>
84+
<!-- Audio settings -->
85+
<article id="tab1-content" class="tab-hide">
86+
<h2>Audio settings</h2>
87+
<div class="form-check form-switch">
88+
<input class="form-check-input" type="checkbox" id="switch1">
89+
<label class="form-check-label" for="switch1">Music</label>
90+
</div>
91+
<div class="form-check form-switch">
92+
<input class="form-check-input" type="checkbox" id="switch2" checked>
93+
<label class="form-check-label" for="switch2">Sound Effects</label>
94+
</div>
95+
</article>
96+
<!-- View options -->
97+
<article id="tab2-content" class="tab-hide">
98+
<h2>View options</h2>
99+
<div class="form-check">
100+
<input class="form-check-input" type="checkbox" value="" id="view-tick1">
101+
<label class="form-check-label" for="view-tick1">
102+
Show declined events
103+
</label>
104+
</div>
105+
<div class="form-check">
106+
<input class="form-check-input" type="checkbox" value="" id="view-tick2" checked>
107+
<label class="form-check-label" for="view-tick2">
108+
Show week numbers
109+
</label>
110+
</div>
111+
<div class="form-check">
112+
<input class="form-check-input" type="checkbox" value="" id="view-tick3" checked>
113+
<label class="form-check-label" for="view-tick3">
114+
View calendars side by side in day view
115+
</label>
116+
</div>
117+
</article>
118+
<article id="tab3-content" class="tab-hide"></article>
119+
<article id="tab4-content" class="tab-hide"></article>
120+
</div>
121+
</main>
122+
{% endblock content %}
123+
</div>
124+
</div>
125+
<!-- Script -->
126+
<script src="{{ url_for('static', path='/js/settings.js') }}"></script>
127+
{% endblock body %}

0 commit comments

Comments
 (0)