Feature 219 styling site landing page #221
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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}) |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" | ||
| integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> | ||
| <!-- Tailwind CSS --> | ||
| <link href="https://unpkg.com/tailwindcss@1.9.5/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. Link to ionicons and use icons elements and not svg files. There was a problem hiding this comment. Thanks, sure, your wish is my command :) There was a problem hiding this comment. @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>PyLendar {% block title %}{% endblock %}</title> | ||
| {% endblock %} | ||
| </head> | ||
|
|
||
| <body> | ||
| <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. please use the ionicons element and not the svg file. There was a problem hiding this comment. Thanks, sure it will be done There was a problem hiding this comment. @aviadamar was ionicons checked for performance? There was a problem hiding this comment. the script is in the head as written ? There was a problem hiding this comment. 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. @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. Agenda is not needs to appear in landing page. There was a problem hiding this comment. 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. Im not sure this sections needs to be in landing page. There was a problem hiding this comment. Thanks for the comment. |
||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link" href="{{ url_for('search') }}">Search</a> | ||
|
There was a problem hiding this comment. Search is not needs to appear in landing page. There was a problem hiding this comment. Thanks for the comment. |
||
| </li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| </div> | ||
|
|
||
| {% 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://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/bootstrap@5.0.0-beta1/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. 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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | ||
|
|
||
| sm:text-5xl sm:leading-none md:text-6xl"> | ||
| Not implemented</h2> | ||
| </div> | ||
|
|
||
| {% endblock %} | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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"> | ||
|
|
||
| <!-- 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. There are 4 divs that capture only 1 img - maybe it can be simplify ? There was a problem hiding this comment. 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 %} | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
tailwindis 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 :)