From 65681022df98ee9cb1ec63375fff18ea295324fd Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 8 Jan 2021 17:20:39 +0000
Subject: [PATCH] nopaste: Update design

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/templates/base.html           |  4 +-
 src/templates/nopaste/create.html | 91 +++++++++++++++++--------------
 src/templates/nopaste/view.html   | 65 ++++++++++------------
 3 files changed, 82 insertions(+), 78 deletions(-)

diff --git a/src/templates/base.html b/src/templates/base.html
index 0717c78b..bd8327f4 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -25,7 +25,9 @@
 			<nav class="navbar navbar-light navbar-expand-lg">
 				<div class="container">
 					<a class="navbar-brand" href="/">
-						{% if hostname == "people.ipfire.org" %}
+						{% if hostname == "nopaste.ipfire.org" %}
+							IPFire<span class="text-primary">_</span>Nopaste
+						{% elif hostname == "people.ipfire.org" %}
 							IPFire<span class="text-primary">_</span>People
 						{% else %}
 							IPFire<span class="text-primary">_</span>
diff --git a/src/templates/nopaste/create.html b/src/templates/nopaste/create.html
index ea3bf19b..b3d3dcbd 100644
--- a/src/templates/nopaste/create.html
+++ b/src/templates/nopaste/create.html
@@ -8,59 +8,68 @@
 	{% end %}
 {% end block %}
 
-{% block content %}
-	<div class="row justify-content-center">
-		<div class="col-12 col-md-8">
+{% block container %}
+	<div class="header">
+		<div class="container">
 			{% if mode == "paste" %}
-				<h1>{{ _("New Paste") }}</h2>
+				<h1>{{ _("New Paste") }}</h1>
 			{% elif mode == "upload" %}
-				<h1>{{ _("Upload File") }}</h3>
+				<h1>{{ _("Upload File") }}</h1>
 			{% end %}
 
-			<form class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
-				{% raw xsrf_form_html() %}
+			<p class="text-muted">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+				tempor incididunt ut labore et dolore magna aliqua.
+				Viverra accumsan in nisl nisi scelerisque eu ultrices.
+				Semper auctor neque vitae tempus quam pellentesque nec.
+				Platea dictumst quisque sagittis purus sit amet.
+			</p>
+		</div>
+	</div>
 
-				<input type="hidden" name="mode" value="{{ mode }}">
+	<div class="container">
+		<form class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
+			{% raw xsrf_form_html() %}
 
-				{% if mode == "paste" %}
-					<div class="form-group">
-						<label>{{ _("Subject") }}</label>
-						<input type="text" class="form-control" name="subject"
-							placeholder="{{ _("Subject") }} ({{ _("optional") }})">
-					</div>
-				{% end %}
+			<input type="hidden" name="mode" value="{{ mode }}">
 
+			{% if mode == "paste" %}
 				<div class="form-group">
-					{% if mode == "paste" %}
-						<textarea class="form-control" rows="12" name="content"
-							placeholder="{{ _("Please paste your content here...") }}"></textarea>
-					{% elif mode == "upload" %}
-						<label>{{ _("File") }}</label>
-						<input type="file" name="file" class="form-control-file">
+					<input type="text" class="form-control" name="subject"
+						placeholder="{{ _("Subject") }} ({{ _("optional") }})">
+				</div>
+			{% end %}
 
-						{% if max_size %}
-							<small class="form-text text-muted">
-								{{ _("You may upload up to %s") % format_size(max_size) }}
-							</small>
-						{% end %}
+			<div class="form-group">
+				{% if mode == "paste" %}
+					<textarea class="form-control" rows="12" name="content"
+						placeholder="{{ _("Paste your content here...") }}"></textarea>
+				{% elif mode == "upload" %}
+					<label>{{ _("File") }}</label>
+					<input type="file" name="file" class="form-control-file">
+
+					{% if max_size %}
+						<small class="form-text text-muted">
+							{{ _("You may upload up to %s") % format_size(max_size) }}
+						</small>
 					{% end %}
-				</div>
+				{% end %}
+			</div>
 
-				<div class="form-group">
-					<label>{{ _("Expires") }}</label>
+			<div class="form-group">
+				<label>{{ _("Expires") }}</label>
 
-					<select class="form-control" name="expires">
-						<option value="0">{{ _("never") }}</option>
-						<option value="600">{{ _("after ten minutes") }}</option>
-						<option value="3600">{{ _("after one hour") }}</option>
-						<option value="{{ 24 * 3600 }}">{{ _("after one day") }}</option>
-						<option value="{{ 7 * 24 * 3600 }}">{{ _("after one week") }}</option>
-						<option value="{{ 30 * 24 * 3600 }}" selected>{{ _("after one month") }}</option>
-					</select>
-				</div>
+				<select class="form-control" name="expires">
+					<option value="0">{{ _("never") }}</option>
+					<option value="600">{{ _("after ten minutes") }}</option>
+					<option value="3600">{{ _("after one hour") }}</option>
+					<option value="{{ 24 * 3600 }}">{{ _("after one day") }}</option>
+					<option value="{{ 7 * 24 * 3600 }}">{{ _("after one week") }}</option>
+					<option value="{{ 30 * 24 * 3600 }}" selected>{{ _("after one month") }}</option>
+				</select>
+			</div>
 
-				<button type="submit" class="btn btn-primary btn-block">{{ _("Submit") }}</button>
-			</form>
-		</div>
+			<button type="submit" class="btn btn-primary btn-block">{{ _("Upload") }}</button>
+		</form>
 	</div>
 {% end block %}
diff --git a/src/templates/nopaste/view.html b/src/templates/nopaste/view.html
index e9976461..48b9b866 100644
--- a/src/templates/nopaste/view.html
+++ b/src/templates/nopaste/view.html
@@ -2,43 +2,36 @@
 
 {% block title %}{{ entry.subject or _("Paste %s") % entry.uuid }}{% end block %}
 
-{% block content %}
-	<div class="row justify-content-center">
-		<div class="col col-md-10">
-			<div class="card">
-				<div class="card-body">
-					<h3 class="card-title mb-1">{{ entry.subject or _("Paste %s") % entry.uuid }}</h3>
-					<h6 class="card-subtitle text-muted mb-3">
-						{{ _("Uploaded %s") % locale.format_date(entry.time_created) }}
-
-						{% if entry.account %}
-							{{ _("by") }}
-							<a href="https://people.ipfire.org/users/{{ entry.account.uid }}">{{ entry.account }}</a>
-						{% else %}
-							{{ _("from %s") % entry.address }}
-						{% end %}
-					</h6>
-
-					<hr>
-
-					{% if content %}
-						<div class="mb-3">
-							{% module Code(content) %}
-						</div>
-
-						<hr>
-					{% elif entry.mimetype.startswith("image/") %}
-						<img class="img-fluid mb-3" src="/raw/{{ entry.uuid }}">
-
-						<hr>
-					{% end %}
+{% block container %}
+	<div class="header">
+		<div class="container">
+			<h1>{{ entry.subject or _("Paste %s") % entry.uuid }}</h1>
+
+			<p class="text-muted">
+				{{ _("Uploaded %s") % locale.format_date(entry.time_created) }}
+
+				{% if entry.account %}
+					{{ _("by") }}
+					<a href="https://people.ipfire.org/users/{{ entry.account.uid }}">{{ entry.account }}</a>
+				{% else %}
+					{{ _("from %s") % entry.address }}
+				{% end %}
+			</p>
+		</div>
+	</div>
 
-					<a class="btn btn-primary btn-lg btn-block" href="/raw/{{ entry.uuid }}">
-						<span class="fas fa-file-download"></span>
-						{{ _("Download") }} ({{ format_size(entry.size) }})
-					</a>
-				</div>
+	<div class="container">
+		{% if content %}
+			<div class="mb-3">
+				{% module Code(content) %}
 			</div>
-		</div>
+		{% elif entry.mimetype.startswith("image/") %}
+			<img class="img-fluid mb-3" src="/raw/{{ entry.uuid }}">
+		{% end %}
+
+		<a class="btn btn-primary btn-lg btn-block" href="/raw/{{ entry.uuid }}">
+			<span class="fas fa-file-download"></span>
+			{{ _("Download") }} ({{ format_size(entry.size) }})
+		</a>
 	</div>
 {% end block %}
-- 
2.47.3