-
Notifications
You must be signed in to change notification settings - Fork 52
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
Changes from 4 commits
92095ae
5b1eecc
eab932b
1564b70
72c30ef
a1e46d4
a6de077
04101dc
c514590
f409729
30a82b0
6679c32
18f779d
5cf612a
f9e29ec
68a2706
51305a9
8c6a35c
d07eb44
603523e
627ede5
5bf93be
2b8e0d3
be9216b
b096fbe
2b4e06b
f61ec8c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,68 +1,79 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
|
||
<head> | ||
{% block head %} | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
|
||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | ||
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> | ||
<!-- Tailwind CSS --> | ||
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | ||
<link rel="icon" href="{{ url_for('static', path='/images/icons/calendar-outline.svg') }}" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Link to ionicons and use icons elements and not svg files. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, sure, your wish is my command :) There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
<link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet"> | ||
|
||
<title>Calendar</title> | ||
<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="/">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') }}">Home</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link active" aria-current="page" href="{{ url_for('profile') }}">Profile</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="#">Sign In</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="#">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') }}">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> | ||
</ul> | ||
</div> | ||
<div class="bg-gradient2 h-1"></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"> | ||
<img class="h-8 w-auto sm:h-10" | ||
src="{{ url_for('static', path='/images/icons/calendar-outline.svg') }}" alt="Logo"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please use the ionicons element and not the svg file.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, sure it will be done There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @aviadamar was ionicons checked for performance? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the script is in the head as written ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I modified the scripts to be in the head as stated and it solved the warning in console. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @aviadamar - this change done |
||
</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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Agenda is not needs to appear in landing page. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the comment. |
||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="{{ url_for('view_invitations') }}">Invitations</a> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Im not sure this sections needs to be in landing page. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the comment. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Search is not needs to appear in landing page. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the comment. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. W/E you decide |
||
</li> | ||
</ul> | ||
</div> | ||
</nav> | ||
</div> | ||
</nav> | ||
{% block content %} | ||
|
||
|
||
{% endblock %} | ||
|
||
{% 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/[email protected]/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" | ||
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" | ||
crossorigin="anonymous"></script> | ||
<script type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" | ||
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" | ||
crossorigin="anonymous"></script> | ||
<!-- This bootstrap version is needed here because of the toggler bug in the beta version--> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{% extends "base.html" %} | ||
|
||
{% block title %} - 404{% endblock %} | ||
|
||
{% block content %} | ||
|
||
<div class="container"> | ||
<h2 class="text-4xl tracking-tight leading-10 font-extrabold text-purple-900 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Need to adapt from tailwind There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
sm:text-5xl sm:leading-none md:text-6xl"> | ||
Not implemented</h2> | ||
</div> | ||
|
||
{% endblock %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
{% extends "base.html" %} | ||
|
||
{% block content %} | ||
|
||
<div class="max-w-screen-xl mx-auto"> | ||
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Need to adapt from tailwind There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done |
||
<!-- Angled image on the right --> | ||
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2" | ||
fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none"> | ||
<polygon points="0,0 50,0 100,100 50,100" /> | ||
</svg> | ||
|
||
<main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> | ||
<div class="sm:text-center lg:text-center"> | ||
<h2 | ||
class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl"> | ||
PyLendar | ||
<br class="xl:hidden"> | ||
</h2> | ||
<p | ||
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | ||
Open Source Calendar built with Python | ||
</p> | ||
<div class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> | ||
{% if quote %} | ||
{% if not quote.author%} | ||
<p><i>"{{ quote.text }}"</i></p> | ||
{% else %} | ||
<p><i>"{{ quote.text }}"</i> <span style="font-size: small;"> \ {{quote.author}}</span></p> | ||
{% endif %} | ||
{% endif %} | ||
</div> | ||
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center"> | ||
<div class="mt-6 flex justify-center"> | ||
<a href="{{ url_for('calendar') }}" | ||
class="flex rounded-full items-center py-2 px-6 bg-gradient2 focus:outline-none shadow-lg text-white text-2xl" | ||
type="button"> | ||
<span>Get started</span> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</main> | ||
</div> | ||
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There are 4 divs that capture only 1 img - maybe it can be simplify ? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sure, will be done |
||
<div id="slidesCarousel" class="carousel slide carousel-fade" data-pause="false" data-ride="carousel"> | ||
<div class="carousel-inner"> | ||
<div class="carousel-item active"> | ||
<img class="d-block w-100" src="{{ url_for('static', path='/images/calendar.jpg') }}" | ||
alt="calendar image"> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
{% endblock %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't use Tailwind in this project.
We won't add it 'cause it will make a mess of a code (Bootstrap + Tailwind mishmash) and will make the page much heavier than it should be. :(
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No issue, I'll remove it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
By the way, I will remove Bootstrap before removing Tailwind :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's almost a valid point, but
tailwind
is harder to work with if you don't use React/Vue/Angular, especially for new users, and will create a bloated code which will load slower. ^^"If I have to choose only one of them (and that's the case) - I take Bootstrap
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@yammesicka - done - removed tailwind :)