Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature 219 styling site landing page #221

Merged
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
92095ae
feat: add calendar picture and icon
ron-huberfeld Feb 2, 2021
5b1eecc
feat: styling landing page and add 404 page
ron-huberfeld Feb 2, 2021
eab932b
fix: remove commented code
ron-huberfeld Feb 2, 2021
1564b70
fix: 404 page naming convention
ron-huberfeld Feb 2, 2021
72c30ef
fix: use ionicons instead of svg
ron-huberfeld Feb 2, 2021
a1e46d4
Merge 'develop' changes to resolve conflicts
ron-huberfeld Feb 2, 2021
a6de077
Merge 'develop' changes 2
ron-huberfeld Feb 2, 2021
04101dc
Merge branch 'develop' into feature-219-styling-site-landing-page
ron-huberfeld Feb 2, 2021
c514590
fix: handle flake8 issue
ron-huberfeld Feb 2, 2021
f409729
Merge branch 'develop' of https://github.com/PythonFreeCourse/calenda…
ron-huberfeld Feb 2, 2021
30a82b0
Apply automatic translateable string changes
ron-huberfeld Feb 7, 2021
6679c32
Merge branch 'develop' of https://github.com/ron-huberfeld/calendar i…
ron-huberfeld Feb 2, 2021
18f779d
Apply automatic translateable string changes
ron-huberfeld Feb 7, 2021
5cf612a
fix merge issue
ron-huberfeld Feb 2, 2021
f9e29ec
Merge 'develop' changes
ron-huberfeld Feb 10, 2021
68a2706
Merge branch 'develop' of https://github.com/PythonFreeCourse/calenda…
ron-huberfeld Feb 10, 2021
51305a9
Merge branch 'develop' of https://github.com/PythonFreeCourse/calenda…
ron-huberfeld Feb 10, 2021
8c6a35c
Merge 'develop' changes
ron-huberfeld Feb 10, 2021
d07eb44
Merge branch 'develop' of https://github.com/PythonFreeCourse/calenda…
ron-huberfeld Feb 11, 2021
603523e
fix: remove tailwind
ron-huberfeld Feb 11, 2021
627ede5
fix: remove comments
ron-huberfeld Feb 11, 2021
5bf93be
Merge 'develop' changes
ron-huberfeld Feb 11, 2021
2b8e0d3
fix: remove genereted file
ron-huberfeld Feb 11, 2021
be9216b
fix: move style from tailwind to bootstrap
ron-huberfeld Feb 11, 2021
b096fbe
fix: remove tailwind related style
ron-huberfeld Feb 11, 2021
2b4e06b
fix: reorder routes
ron-huberfeld Feb 11, 2021
f61ec8c
fix: reorder again :)
ron-huberfeld Feb 11, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 0 additions & 126 deletions app/locales/base.pot

This file was deleted.

44 changes: 19 additions & 25 deletions app/locales/en/LC_MESSAGES/base.po
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2021-02-07 23:37+0000\n"
"POT-Creation-Date: 2021-02-07 21:31+0000\n"
"PO-Revision-Date: 2021-01-26 21:31+0200\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language: en\n"
@@ -54,30 +54,6 @@ msgstr ""
msgid "No events found..."
msgstr ""

#: app/templates/base.html:19
msgid "Calendar"
msgstr ""

#: app/templates/base.html:26
msgid "Home"
msgstr ""

#: app/templates/base.html:29
msgid "Profile"
msgstr ""

#: app/templates/base.html:32
msgid "Sign in"
msgstr ""

#: app/templates/base.html:35
msgid "Sign up"
msgstr ""

#: app/templates/base.html:40
msgid "Agenda"
msgstr ""

#: app/templates/profile.html:50
msgid "Update name"
msgstr ""
@@ -137,3 +113,21 @@ msgstr ""
#~ msgid "Your feature"
#~ msgstr ""

#~ msgid "Calendar"
#~ msgstr ""

#~ msgid "Home"
#~ msgstr ""

#~ msgid "Profile"
#~ msgstr ""

#~ msgid "Sign in"
#~ msgstr ""

#~ msgid "Sign up"
#~ msgstr ""

#~ msgid "Agenda"
#~ msgstr ""

44 changes: 19 additions & 25 deletions app/locales/he/LC_MESSAGES/base.po
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ msgid ""
msgstr ""
"Project-Id-Version: PROJECT VERSION\n"
"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
"POT-Creation-Date: 2021-02-07 23:37+0000\n"
"POT-Creation-Date: 2021-02-07 21:31+0000\n"
"PO-Revision-Date: 2021-01-26 21:31+0200\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language: he\n"
@@ -54,30 +54,6 @@ msgstr ""
msgid "No events found..."
msgstr ""

#: app/templates/base.html:19
msgid "Calendar"
msgstr ""

#: app/templates/base.html:26
msgid "Home"
msgstr ""

#: app/templates/base.html:29
msgid "Profile"
msgstr "פרופיל"

#: app/templates/base.html:32
msgid "Sign in"
msgstr ""

#: app/templates/base.html:35
msgid "Sign up"
msgstr ""

#: app/templates/base.html:40
msgid "Agenda"
msgstr ""

#: app/templates/profile.html:50
msgid "Update name"
msgstr ""
@@ -137,3 +113,21 @@ msgstr "בדיקת תרגום בפייתון"
#~ msgid "Your feature"
#~ msgstr ""

#~ msgid "Calendar"
#~ msgstr ""

#~ msgid "Home"
#~ msgstr ""

#~ msgid "Profile"
#~ msgstr "פרופיל"

#~ msgid "Sign in"
#~ msgstr ""

#~ msgid "Sign up"
#~ msgstr ""

#~ msgid "Agenda"
#~ msgstr ""

7 changes: 4 additions & 3 deletions app/main.py
Original file line number Diff line number Diff line change
@@ -32,8 +32,8 @@ def create_tables(engine, psql_environment):
set_ui_language()

from app.routers import ( # noqa: E402
agenda, calendar, categories, celebrity, currency, dayview,
email, event, invitation, profile, search, telegram, whatsapp
agenda, calendar, categories, celebrity, currency, dayview, email,
event, four_o_four, invitation, profile, search, telegram, whatsapp
)

json_data_loader.load_to_db(next(get_db()))
@@ -47,6 +47,7 @@ def create_tables(engine, psql_environment):
dayview.router,
email.router,
event.router,
four_o_four.router,
invitation.router,
profile.router,
salary.router,
@@ -65,7 +66,7 @@ def create_tables(engine, psql_environment):
@logger.catch()
async def home(request: Request, db: Session = Depends(get_db)):
quote = daily_quotes.quote_per_day(db)
return templates.TemplateResponse("home.html", {
return templates.TemplateResponse("index.html", {
"request": request,
"quote": quote,
})
15 changes: 15 additions & 0 deletions app/routers/four_o_four.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
from app.dependencies import templates
from fastapi import APIRouter
from starlette.requests import Request

router = APIRouter(
prefix="/404",
tags=["404"],
responses={404: {"description": "Not found"}},
)


@router.get("/")
async def not_implemented(request: Request):
return templates.TemplateResponse("four_o_four.j2",
{"request": request})
Binary file added app/static/images/calendar.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions app/static/images/icons/calendar-outline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 38 additions & 6 deletions app/static/style.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
body {
background: #a1ffce;
background: -webkit-linear-gradient(to right, #faffd1, #a1ffce);
background: linear-gradient(to right, #faffd1, #a1ffce);
}

.profile-image {
width: 7em;
}
@@ -20,6 +14,44 @@ body {
transform: scale(1.02);
}

.top-line {
height: 0.25rem;
}

.bg-gradient2 {
background: linear-gradient(
135deg,
rgba(0, 97, 215, 1) 0%,
rgba(0, 200, 255, 1) 100%
);
}

h2,
p {
display: flex;
align-items: center;
justify-content: space-around;
}

#inner:hover {
cursor: pointer;
padding: 50px;
background-color: linear-gradient(
135deg,
rgba(0, 97, 215, 1) 0%,
rgba(0, 200, 255, 1) 100%
);
}

#inner {
transition: background 0.2s ease, padding 0.8s linear;
}

.landing-page-button {
border-radius: 9999px;
justify-content: center;
}

.event-posted-time {
font-size: 0.7rem;
}
104 changes: 54 additions & 50 deletions app/templates/base.html
Original file line number Diff line number Diff line change
@@ -7,68 +7,72 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<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">
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="icon" href="{{ url_for('static', path='/images/icons/calendar-outline.svg') }}" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link to ionicons and use icons elements and not svg files.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, sure, your wish is my command :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aviadamar - I didn't manage to find a way to do it in the page's tab icon.
Do you know how to do it in the page's tab icon?

<link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.js"></script>

<title>Calendar</title>
{% endblock %}
<title>PyLendar {% block title %}{% endblock %}</title>
{% endblock %}
</head>

<body>
<nav class="navbar navbar-expand-lg bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="/">{{ gettext("Calendar") }}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ url_for('home') }}">{{ gettext("Home") }}</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="{{ url_for('profile') }}">{{ gettext("Profile") }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">{{ gettext("Sign in") }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">{{ gettext("Sign up") }}</a>
</li>
<li class="nav-item">
<!-- new button for the agenda page. should be available after login
place will change later according to the web design -->
<a class="nav-link" href="{{ url_for('agenda') }}">{{ gettext("Agenda") }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('view_invitations') }}">Invitations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/search">Search</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/celebrity">Celebrities Born Today</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('salary_home') }}">Salary</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %} {% endblock %}
<div class="bg-gradient2 top-line"></div>
<div class="relative overflow-hidden">
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="navbar navbar-expand-md navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-brand">
<a href="{{ url_for('home') }}" aria-label="Home">
<ion-icon name="calendar-outline"></ion-icon>
</a>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mb-2 mb-lg-0 ">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('profile') }}">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('not_implemented') }}">Sign In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('not_implemented') }}">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('agenda') }}">Agenda</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agenda is not needs to appear in landing page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment.
@yammesicka do you approve removing existing links?

</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('view_invitations') }}">Invitations</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Im not sure this sections needs to be in landing page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment.
@yammesicka do you approve removing existing links?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whatever you want ^^"

</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('search') }}">Search</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Search is not needs to appear in landing page.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the comment.
@yammesicka do you approve removing existing links?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

W/E you decide

</li>
</ul>
</div>
</nav>
</div>

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
{% block content %}{% endblock %}
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
<script 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 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
<!-- This bootstrap version is needed here because of the toggler bug in the beta version-->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job commenting about it

<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
crossorigin="anonymous"></script>

</body>

</html>
12 changes: 12 additions & 0 deletions app/templates/four_o_four.j2
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{% extends "base.html" %}

{% block title %} - 404{% endblock %}

{% block content %}

<div class="container">
<h2 class="fs-1">
Not implemented</h2>
</div>

{% endblock %}
44 changes: 44 additions & 0 deletions app/templates/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{% extends "base.html" %}

{% block content %}

<div class="mx-auto">
<main class="d-flex justify-content-center">
<div>
<h2 class="fs-1 fw-bold">
PyLendar
<br>
</h2>
<p>
Open Source Calendar built with Python
</p>
<div class="d-flex position-relative">
<div class="container mx-auto gap-3">

{% if quote %}
{% if not quote.author%}
<p><i>"{{ quote.text }}"</i></p>
{% else %}
<p><i>"{{ quote.text }}"</i> <span style="font-size: small;">&nbsp; \ {{quote.author}}</span>
</p>
{% endif %}
{% endif %}
</div>
</div>
<div class="d-flex justify-content-center">
<div class="d-flex justify-content-center">
<a href="{{ url_for('calendar') }}"
class="btn btn-lg btn-primary shadow-lg bg-body p-3 mb-5 bg-gradient2 landing-page-button"
type="button">
<span>Get Started</span>
</a>
</div>
</div>
</div>
</main>
<div>
<img class="d-block w-100" src="{{ url_for('static', path='/images/calendar.jpg') }}" alt="calendar image">
</div>
</div>

{% endblock %}