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.

Sign up for GitHub

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

Make the layout more similar to stimulus-reflex expo #2

Merged
merged 4 commits into from
Nov 29, 2020
Merged

Make the layout more similar to stimulus-reflex expo #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23f9844
Make the layout more similar to stimulus-reflex expo
jonathan-s Nov 28, 2020
0e62e51
Add css for refactored view
jonathan-s Nov 28, 2020
8225949
Improve the book search view
jonathan-s Nov 28, 2020
f0467ec
Make sure that fontawesome shows up
jonathan-s Nov 28, 2020
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
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,4 +152,5 @@ dmypy.json

# End of https://www.toptal.com/developers/gitignore/api/django
node_modules
static
/static
/core/static/dist
2 changes: 1 addition & 1 deletion app/settings.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_ROOT = BASE_DIR / "static"

CHANNEL_LAYERS = {
"default": {
Expand Down
69 changes: 69 additions & 0 deletions core/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
:root {
--justify-important: left;
}

header {
padding-top: 0;
margin-left: 0.5rem;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
height: 100%;
padding: 0;
}
aside {
padding: 0.5rem;
min-height: calc(100vh - 200px);
}
footer {
position: fixed;
right: 0;
left: 0;
}

footer,
header,
main {
margin: 0 auto;
max-width: var(--width-content);
padding: 0rem 2rem;
}

hr { margin-top: 0; margin-bottom: 0; }
h1 { font-family: 'Open Sans', sans-serif; }
nav ul li { display: block; }

table {
width: 100%;
display: inline-table;
}

form {
max-width: 100%;
}

.min-vh-100 {
min-height: 100vh !important;
}

flex-container { display: flex; }
.flex { display: flex; }
.flex-grow { flex-grow: 1; }
.self-center { align-self: center; }
.leading-none { line-height: 1; }
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-battam: 1rem; }
.pl-1 { padding-left: 1rem; }
.pr-2 { padding-right: 2rem; }
.py--5 { padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-1 { padding-top: 1rem; padding-bottom: 1rem;}

.border-right {
border-right: 1px #AAA solid;
}
82 changes: 43 additions & 39 deletions core/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,55 @@
{% load static pygmentize %}
<!DOCTYPE html>
<html lang="en">

<head>
<link rel="icon" href="https://via.placeholder.com/70x70">
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
<style>{% pygments_css %}</style> <!-- load css for pygments -->
<meta charset="utf-8">
<meta name="description" content="My description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expo</title>
<script src="{% static 'dist/js/example.js' %}"></script>
<link rel="icon" href="https://via.placeholder.com/70x70">
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<style>{% pygments_css %}</style> <!-- load css for pygments -->
<meta charset="utf-8">
<meta name="description" content="My description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expo</title>
<script src="{% static 'dist/js/example.js' %}"></script>
</head>

<body>
<header style="padding-bottom:0px;">
<nav style="margin-bottom:0px;">
<h1>
<a href="/"> django-sockpuppet Expo </a>
</h1>
<ul>
<li><a href="{%url 'index' %}">Index</a></li>
<li><a>Demos </a>
<ul>
<li><a href="{%url 'example' %}">Example</a></li>
<li><a href="{%url 'book_search' %}">BookSearch</a></li>
<body class="min-vh-100">

</ul>
</li>
<header class="flex py-1">
<img
src="https://i.imgur.com/FX0KFM7m.jpg"
style="filter: grayscale(0.9) contrast(1.2); height: 4rem;" alt="" />
<h1 class="leading-none m-0 pl-1 self-center">
<a href="{% url 'index' %}">Sockpuppet</a>
</h1>
</header>
<hr>
<flex-container>
<aside class="border-right pr-2">
<nav>
<ul>
<li><a href="{% url 'example' %}">Example</a></li>
<li><a href="{% url 'book_search' %}">BookSearch</a></li>
</ul>
</nav>
<h2> {% block subtitle %}
<img src="https://i.imgur.com/FX0KFM7m.jpg" alt=""/>
{% endblock subtitle %}</h2>
</header>

<main>
<hr style="margin-top:0px;">
{% block main %}
{% endblock %}

</nav>
</aside>
<main class="flex-grow">
<h2> {% block subtitle %}<h1>Django Sockpuppet</h1>{% endblock subtitle %}</h2>
{% block main %}
{% endblock %}
</main>
<footer>
<p>
by <a href="https://twitter.com/zodman">@zodman</a>
</p>
<a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangosite80x15.gif" border="0" alt="A Django site." title="A Django site." /></a>
</footer>
</flex-container>
<footer>
<p>
by <a href="https://twitter.com/zodman">@zodman</a>
</p>
<a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangosite80x15.gif"
border="0" alt="A Django site." title="A Django site." /></a>
</footer>
</body>

</html>
6 changes: 3 additions & 3 deletions core/templates/book_search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@
</tr>
</thead>
<tbody>
{% for book in books|slice:'0:5' %}
{% for book in books|slice:'0:10' %}
<tr>
<td>{{book.subject|join:', '|truncatechars:10}} </td>
<td>{{book.subject|join:', '|truncatechars:40}} </td>
<td>{{book.title|truncatechars:30}}</td>
<td>{{book.author_name|join:', '|truncatechars:30}}</td>
<td>{{book.publish_year.0 }}</td>
<td>{{book.isbn.0|truncatechars:5}}</td>
<td>{{book.isbn.0|truncatechars:30}}</td>
</tr>
{% endfor %}
</tbody>
Expand Down