New "plain" page style for most logged out pages

This commit is contained in:
Andrew Godwin 2022-12-22 13:06:35 -08:00
parent c890382b30
commit a058140d11
14 changed files with 174 additions and 61 deletions

View file

@ -4,7 +4,7 @@ import httpx
from asgiref.sync import async_to_sync from asgiref.sync import async_to_sync
from django import forms from django import forms
from django.utils.decorators import method_decorator from django.utils.decorators import method_decorator
from django.views.generic import FormView from django.views.generic import FormView, TemplateView
from core.ld import canonicalise from core.ld import canonicalise
from users.decorators import admin_required from users.decorators import admin_required
@ -46,3 +46,13 @@ class JsonViewer(FormView):
context["result"] = result context["result"] = result
context["raw_result"] = raw_result context["raw_result"] = raw_result
return self.render_to_response(context) return self.render_to_response(context)
class NotFound(TemplateView):
template_name = "404.html"
class ServerError(TemplateView):
template_name = "500.html"

View file

@ -7,33 +7,32 @@ from django.utils.safestring import mark_safe
from django.views.generic import TemplateView, View from django.views.generic import TemplateView, View
from django.views.static import serve from django.views.static import serve
from activities.services.timeline import TimelineService
from activities.views.timelines import Home from activities.views.timelines import Home
from core.decorators import cache_page from core.decorators import cache_page
from core.models import Config from core.models import Config
from users.models import Identity
def homepage(request): def homepage(request):
if request.user.is_authenticated: if request.user.is_authenticated:
return Home.as_view()(request) return Home.as_view()(request)
else: else:
return LoggedOutHomepage.as_view()(request) return About.as_view()(request)
@method_decorator(cache_page(public_only=True), name="dispatch") @method_decorator(cache_page(public_only=True), name="dispatch")
class LoggedOutHomepage(TemplateView): class About(TemplateView):
template_name = "index.html" template_name = "about.html"
def get_context_data(self): def get_context_data(self):
service = TimelineService(self.request.identity)
return { return {
"about": mark_safe( "current_page": "about",
"content": mark_safe(
markdown_it.MarkdownIt().render(Config.system.site_about) markdown_it.MarkdownIt().render(Config.system.site_about)
), ),
"identities": Identity.objects.filter( "posts": service.local()[:10],
local=True,
discoverable=True,
).order_by("-created")[:20],
} }

View file

@ -122,8 +122,13 @@ main {
border-radius: 5px; border-radius: 5px;
} }
.no-sidebar main {
box-shadow: none;
max-width: 800px;
}
footer { footer {
width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0 0 10px 0; padding: 0 0 10px 0;
color: var(--color-text-duller); color: var(--color-text-duller);
@ -131,6 +136,10 @@ footer {
font-size: 90%; font-size: 90%;
} }
.no-sidebar footer {
max-width: 800px;
}
footer a { footer a {
border-bottom: 1px solid var(--color-text-duller); border-bottom: 1px solid var(--color-text-duller);
margin-right: 5px; margin-right: 5px;
@ -141,6 +150,10 @@ header {
height: 50px; height: 50px;
} }
.no-sidebar header {
justify-content: center;
}
header .logo { header .logo {
font-family: "Raleway"; font-family: "Raleway";
font-weight: bold; font-weight: bold;
@ -155,6 +168,10 @@ header .logo {
z-index: 10; z-index: 10;
} }
.no-sidebar header .logo {
border-radius: 5px;
}
header .logo:hover { header .logo:hover {
border-bottom: 3px solid rgba(255, 255, 255, 0.3); border-bottom: 3px solid rgba(255, 255, 255, 0.3);
} }
@ -173,6 +190,10 @@ header menu {
z-index: 10; z-index: 10;
} }
.no-sidebar header menu {
flex-grow: 0;
}
header menu a { header menu a {
padding: 10px 20px 4px 20px; padding: 10px 20px 4px 20px;
color: #eee; color: #eee;
@ -180,6 +201,10 @@ header menu a {
border-bottom: 3px solid rgba(0, 0, 0, 0); border-bottom: 3px solid rgba(0, 0, 0, 0);
} }
.no-sidebar header menu a {
margin: 0 10px;
}
body.has-banner header menu a { body.has-banner header menu a {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-right: 0; border-right: 0;
@ -190,6 +215,12 @@ header menu a.selected {
border-bottom: 3px solid var(--color-highlight); border-bottom: 3px solid var(--color-highlight);
} }
.no-sidebar header menu a:hover:not(.logo) {
border-bottom: 3px solid rgba(0, 0, 0, 0);
background-color: var(--color-bg-menu);
border-radius: 5px;
}
header menu a i { header menu a i {
font-size: 24px; font-size: 24px;
display: inline-block; display: inline-block;
@ -225,10 +256,6 @@ header menu a.identity {
width: 250px; width: 250px;
} }
body.no-sidebar header menu a.identity {
display: none;
}
header menu a.identity i { header menu a.identity i {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -341,10 +368,6 @@ nav a i {
border-radius: 0 0 5px 0; border-radius: 0 0 5px 0;
} }
body.no-sidebar .right-column {
display: none;
}
.right-column h2 { .right-column h2 {
background: var(--color-highlight); background: var(--color-highlight);
padding: 8px 10px; padding: 8px 10px;
@ -357,7 +380,43 @@ img.emoji {
height: 0.8em; height: 0.8em;
} }
/* Generic markdown styling */ /* Generic markdown styling and sections */
.no-sidebar section {
max-width: 700px;
background: var(--color-bg-box);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
margin: 25px auto 45px auto;
padding: 5px 15px;
}
.no-sidebar section.shell {
background: none;
box-shadow: none;
padding: 0;
}
.no-sidebar #main-content>h1 {
max-width: 700px;
margin: 25px auto 5px auto;
font-weight: bold;
font-size: 120%;
text-transform: uppercase;
color: var(--color-text-main);
}
.no-sidebar h1+section {
margin-top: 0;
}
.markdown .banner {
width: calc(100% + 30px);
height: auto;
object-fit: cover;
margin: -5px -15px 10px -15px;
border-radius: 5px 0 0 0;
display: block;
}
.markdown p { .markdown p {
margin: 4px 0 10px 0; margin: 4px 0 10px 0;
@ -461,6 +520,11 @@ img.emoji {
/* Forms */ /* Forms */
.no-sidebar form {
max-width: 500px;
margin: 40px auto;
}
fieldset { fieldset {
border: 0; border: 0;
background: var(--color-bg-box); background: var(--color-bg-box);
@ -1256,14 +1320,14 @@ form .post {
top: 50px; top: 50px;
} }
header { body:not(.no-sidebar) header {
height: var(--md-header-height); height: var(--md-header-height);
position: fixed; position: fixed;
width: 100%; width: 100%;
z-index: 9; z-index: 9;
} }
header menu a { body:not(.no-sidebar) header menu a {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
@ -1274,7 +1338,11 @@ form .post {
border-radius: 0; border-radius: 0;
} }
footer { .no-sidebar main {
margin: 20px auto 20px auto;
}
body:not(.no-sidebar) footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
@ -1284,12 +1352,12 @@ form .post {
text-align: right; text-align: right;
} }
footer a { body:not(.no-sidebar) footer a {
display: block; display: block;
border: 0; border: 0;
} }
header .logo { body:not(.no-sidebar) header .logo {
border-radius: 0; border-radius: 0;
} }
@ -1342,7 +1410,7 @@ form .post {
display: none; display: none;
} }
footer { body:not(.no-sidebar) footer {
display: none; display: none;
} }

View file

@ -17,7 +17,6 @@ urlpatterns = [
path("local/", timelines.Local.as_view(), name="local"), path("local/", timelines.Local.as_view(), name="local"),
path("federated/", timelines.Federated.as_view(), name="federated"), path("federated/", timelines.Federated.as_view(), name="federated"),
path("search/", search.Search.as_view(), name="search"), path("search/", search.Search.as_view(), name="search"),
path("debug/json/", debug.JsonViewer.as_view(), name="debug_json"),
path("tags/<hashtag>/", timelines.Tag.as_view(), name="tag"), path("tags/<hashtag>/", timelines.Tag.as_view(), name="tag"),
path("explore/", explore.Explore.as_view(), name="explore"), path("explore/", explore.Explore.as_view(), name="explore"),
path("explore/tags/", explore.ExploreTag.as_view(), name="explore-tag"), path("explore/tags/", explore.ExploreTag.as_view(), name="explore-tag"),
@ -190,11 +189,7 @@ urlpatterns = [
path("identity/select/", identity.SelectIdentity.as_view()), path("identity/select/", identity.SelectIdentity.as_view()),
path("identity/create/", identity.CreateIdentity.as_view()), path("identity/create/", identity.CreateIdentity.as_view()),
# Flat pages # Flat pages
path( path("about/", core.About.as_view(), name="about"),
"about/",
core.FlatPage.as_view(title="About This Server", config_option="site_about"),
name="about",
),
path( path(
"pages/privacy/", "pages/privacy/",
core.FlatPage.as_view(title="Privacy Policy", config_option="policy_privacy"), core.FlatPage.as_view(title="Privacy Policy", config_option="policy_privacy"),
@ -210,6 +205,10 @@ urlpatterns = [
core.FlatPage.as_view(title="Server Rules", config_option="policy_rules"), core.FlatPage.as_view(title="Server Rules", config_option="policy_rules"),
name="rules", name="rules",
), ),
# Debug aids
path("debug/json/", debug.JsonViewer.as_view(), name="debug_json"),
path("debug/404/", debug.NotFound.as_view(), name="not_found"),
path("debug/500/", debug.ServerError.as_view(), name="server_error"),
# Media/image proxy # Media/image proxy
path( path(
"proxy/identity_icon/<identity_id>/", "proxy/identity_icon/<identity_id>/",

View file

@ -1,6 +1,8 @@
{% extends "base.html" %} {% extends "base_plain.html" %}
{% block content %} {% block content %}
<h1>Page Not Found</h1> <h1>Page Not Found</h1>
<p>Sorry about that.</p> <section class="markdown">
<p>Sorry about that.</p>
</section>
{% endblock %} {% endblock %}

View file

@ -1,6 +1,8 @@
{% extends "base.html" %} {% extends "base_plain.html" %}
{% block content %} {% block content %}
<h1>Internal Server Error</h1> <h1>Internal Error</h1>
<p>Sorry about that.</p> <section class="markdown">
<p>Sorry about that. We'll try to have this working again soon.</p>
</section>
{% endblock %} {% endblock %}

19
templates/about.html Normal file
View file

@ -0,0 +1,19 @@
{% extends "base_plain.html" %}
{% block title %}Welcome{% endblock %}
{% block content %}
<section class="markdown">
<img class="banner" src="{{ config.site_banner }}">
{{ content }}
</section>
{% if not request.user.is_authenticated %}
<h1>Recent Posts</h1>
<section class="posts shell">
{% for post in posts %}
{% include "activities/_post.html" %}
{% endfor %}
</section>
{% endif %}
{% endblock %}

View file

@ -1,9 +1,7 @@
{% extends "base.html" %} {% extends "base_plain.html" %}
{% block title %}Login{% endblock %} {% block title %}Login{% endblock %}
{% block body_class %}no-sidebar{% endblock %}
{% block content %} {% block content %}
<form action="." method="POST"> <form action="." method="POST">
{% csrf_token %} {% csrf_token %}

View file

@ -1,4 +1,4 @@
{% extends "base.html" %} {% extends "base_plain.html" %}
{% block title %}Create Account{% endblock %} {% block title %}Create Account{% endblock %}

View file

@ -23,6 +23,7 @@
<a id='skip-to-main' class='screenreader-text' href='#main-content'>Skip to Content</a> <a id='skip-to-main' class='screenreader-text' href='#main-content'>Skip to Content</a>
<a id='skip-to-nav' class='screenreader-text' href='#side-navigation'>Skip to Navigation</a> <a id='skip-to-nav' class='screenreader-text' href='#side-navigation'>Skip to Navigation</a>
<main> <main>
{% block body_main %}
<header> <header>
<a class="logo" href="/"> <a class="logo" href="/">
<img src="{{ config.site_icon }}" width="32"> <img src="{{ config.site_icon }}" width="32">
@ -73,6 +74,7 @@
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% endblock %}
</main> </main>
<footer> <footer>

29
templates/base_plain.html Normal file
View file

@ -0,0 +1,29 @@
{% extends "base.html" %}
{% block body_class %}no-sidebar{% endblock %}
{% block body_main %}
<header>
<menu>
{% if not request.user.is_authenticated and current_page == "about" and config.signup_allowed %}
<a href="/auth/signup/">Sign Up</a>
{% else %}
<a href="/">Home</a>
{% endif %}
<a class="logo" href="/">
<img src="{{ config.site_icon }}" width="32">
{{ config.site_name }}
</a>
{% if request.user.is_authenticated %}
<a href="javascript:history.back()">Back</a>
{% else %}
<a href="/auth/login/">Login</a>
{% endif %}
</menu>
</header>
<div id="main-content">
{% block content %}
{% endblock %}
</div>
{% endblock %}

View file

@ -1,10 +1,10 @@
{% extends "base.html" %} {% extends "base_plain.html" %}
{% block title%}{{ title }}{% endblock %} {% block title%}{{ title }}{% endblock %}
{% block content %} {% block content %}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
<div class="markdown"> <section class="markdown">
{{ content }} {{ content }}
</div> </section>
{% endblock %} {% endblock %}

View file

@ -1,15 +0,0 @@
{% extends "base.html" %}
{% block title %}Welcome{% endblock %}
{% block content %}
<div class="about">
<img class="banner" src="{{ config.site_banner }}">
{{ about }}
</div>
<h2>People</h2>
{% for identity in identities %}
{% include "activities/_identity.html" %}
{% endfor %}
{% endblock %}

View file

@ -35,7 +35,7 @@ class Signup(FormView):
class form_class(forms.Form): class form_class(forms.Form):
email = forms.EmailField( email = forms.EmailField(
help_text="We will send a link to this email to set your password and create your account", help_text="We will send a link to this email to create your account.",
) )
def __init__(self, *args, **kwargs): def __init__(self, *args, **kwargs):