Skip to content

Commit db3e1b6

Browse files
pryelluwpryelluw
committed
django-pattern-library setup and ready to use
1 parent d9707ac commit db3e1b6

File tree

14 files changed

+225
-5
lines changed

14 files changed

+225
-5
lines changed

‎.env.example‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
DEBUG=true
1+
DEBUG=on
22
SECRET_KEY=your-secret-key
33
ALLOWED_HOSTS=*,
44
DATABASE_URL=sqlite:///db.sqlite3
5-
STATIC_ROOT=static
5+
STATIC_ROOT=static
6+
ENABLE_PATTERN_LIBRARY=off # always off for production environments

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,19 @@ The unit tests use Django's test runner. The linter is flake8.
4848
- `python3 ./manage.py test`
4949

5050
Happy coding!
51+
52+
# Front end development
53+
54+
#### Enabling django-patterm-library
55+
56+
On your `.env` file add (if not already existing):
57+
58+
`ENABLE_PATTERN_LIBRARY=on`
59+
60+
The django-pattern-library is found at http://127.0.0.1:8000/pattern-library/
61+
62+
Please make sure to work on the front end on the pattern library first and commit changes.
63+
64+
Workflow:
65+
66+
Design -> Mockup -> Component -> Test -> Copy to templates

‎core/templates/patterns/README‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
This directory includes the HTML templates used with the django-pattern-library app.
2+
These are not meant to be used in production.
3+
They have to be adapted to whatever use.

‎core/templates/patterns/base.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en"><head>
3+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="description" content="PyATL Atlanta Python Programmers group">
7+
<meta name="author" content="PyATl">
8+
<meta name="twitter:card" content="summary">
9+
<meta name="twitter:site" content="@pyatl">
10+
<meta name="twitter:title" content="{% block twitter_card_title %}{% endblock %}">
11+
<meta name="twitter:description" content="{% block twitter_card_description %}{% endblock %}">
12+
<link rel="alternate" type="application/rss+xml" title="PyATL news" href="https://pyatl.dev/blog/feeds/latest/">
13+
{% load static %}
14+
<link rel="icon" href="{% static 'favicon.ico' %}" />
15+
16+
<title>{% block page_title %}{% endblock %}</title>
17+
18+
<link rel="canonical" href="https://pyatl.dev">
19+
20+
<!-- Bootstrap core CSS -->
21+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
22+
23+
24+
<style>
25+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
26+
27+
body {
28+
font-family: 'Open Sans', sans-serif;
29+
padding-top: 5rem;
30+
}
31+
32+
main { min-height:100vh; }
33+
34+
footer {background-color:#f5f5f5;}
35+
36+
{% block page_css %}{% endblock %}
37+
</style>
38+
</head>
39+
<body>
40+
41+
42+
<main role="main">
43+
{% for message in messages %}
44+
<div class="alert alert-success alert-dismissible fade show" role="alert">
45+
{{ message }}
46+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
47+
<span aria-hidden="true">&times;</span>
48+
</button>
49+
</div>
50+
{% endfor %}
51+
52+
53+
{% block content %}
54+
{# pattern_library_rendered_pattern is where the pattern library will inject the rendered pattern. #}
55+
{{ pattern_library_rendered_pattern }}
56+
{% endblock %}
57+
</main>
58+
59+
60+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
61+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
62+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
63+
64+
{% block js %}{% endblock %}
65+
66+
<script>
67+
document.getElementById("year").innerHTML = new Date().getFullYear();
68+
</script>
69+
70+
</body></html>

‎core/templates/patterns/base_page.html‎

Whitespace-only changes.

‎core/templates/patterns/components/footer/footer.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<footer>
2+
<div class="container pt-4 pb-3">
3+
<p><a href="{% url 'about' %}">About</a></p>
4+
<p><a href="{% url 'terms' %}">Terms of Service</a></p>
5+
<p><a href="{% url 'coc' %}">Code of Conduct</a></p>
6+
7+
{% block footer %}{% endblock %}
8+
<p class="small">&copy;<span id="year"></span> PyATL and respective license and copyright holders.</p>
9+
10+
</div>
11+
</footer>

‎core/templates/patterns/components/footer/footer.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
### Footer
2+
3+
Main footer used throughout the site

‎core/templates/patterns/components/footer/footer.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
name: Footer

‎core/templates/patterns/components/navbar/navbar.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<header>
2+
3+
<nav class="navbar navbar-light navbar-expand-md fixed-top" style="background-color: #ffffff;">
4+
<a class="navbar-brand" href="{% url 'index' %}">{% include "logo.html" %}</a>
5+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
6+
<span class="navbar-toggler-icon"></span>
7+
</button>
8+
9+
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
10+
<ul class="navbar-nav ml-auto">
11+
12+
<li class="nav-item active">
13+
<a class="nav-link" href="{% url 'member_create' %}" title="Become a Member">Become a Member</a>
14+
</li>
15+
16+
<li class="nav-item">
17+
<a class="nav-link" href="{% url 'blog_post_list' %}">Blog</a>
18+
</li>
19+
20+
<li class="nav-item">
21+
<a class="nav-link" href="{% url 'events' %}">Events</a>
22+
</li>
23+
24+
<li class="nav-item">
25+
<a class="nav-link" href="https://github.com/pyatl">Github</a>
26+
</li>
27+
28+
<li class="nav-item">
29+
<a class="nav-link" href="https://discord.gg/5UBnR3P" title="Twitter">Discord</a>
30+
</li>
31+
32+
<li class="nav-item">
33+
<a class="nav-link" href="https://twitter.com/pyatl" title="Twitter">Twitter</a>
34+
</li>
35+
36+
<li class="nav-item">
37+
<a class="nav-link" href="https://www.meetup.com/python-atlanta/" title="Meetup">Meetup</a>
38+
</li>
39+
40+
</ul>
41+
</div>
42+
</nav>
43+
44+
</header>

‎core/templates/patterns/components/navbar/navbar.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#### Navbar
2+
3+
Main navbar used throughout the site

0 commit comments

Comments
 (0)