From: Rico Hoppe <rico.hoppe@ipfire.org>
Date: Sun, 23 Jul 2023 14:12:19 +0000 (+0000)
Subject: redesigned nopaste
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=818f8f6cbf353c584bc07104e7ee2f8fd6f5b615;p=ipfire.org.git

redesigned nopaste
---

diff --git a/src/templates/nopaste/create.html b/src/templates/nopaste/create.html
index 719ba99d..15548130 100644
--- a/src/templates/nopaste/create.html
+++ b/src/templates/nopaste/create.html
@@ -9,69 +9,100 @@
 {% end block %}
 
 {% block container %}
-	<div class="header">
-		<div class="container">
-			{% if mode == "paste" %}
-				<h1>{{ _("New Paste") }}</h1>
-			{% elif mode == "upload" %}
-				<h1>{{ _("Upload File") }}</h1>
-			{% end %}
-
-			<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>
+	<section class="hero has-background-primary-light">
+		<div class="hero-body">
+			<div class="container">
+				<nav class="breadcrumb is-medium" aria-label="breadcrumbs">
+					<ul>
+						<li>
+							<a href="/">Home</a>
+						</li>
+						<li class="is-active">
+							<a href="#" aria-current="page">Nopaste</a>
+						</li>
+					</ul>
+				</nav>
+				<h1 class="title is-1">
+					{% if mode == "paste" %}
+						{{ _("New Paste") }}
+					{% elif mode == "upload" %}
+						{{ _("Upload File") }}
+					{% end %}
+				</h1>
+			</div>
 		</div>
-	</div>
+	</section>
 
-	<div class="container">
-		<form class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
-			{% raw xsrf_form_html() %}
+	<section class="section">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-8">
+					<form class="form-horizontal" action="" method="POST" enctype="multipart/form-data">
+						{% raw xsrf_form_html() %}
 
-			<input type="hidden" name="mode" value="{{ mode }}">
+						<input type="hidden" name="mode" value="{{ mode }}">
 
-			{% if mode == "paste" %}
-				<div class="mb-3">
-					<input type="text" class="form-control" name="subject"
-						placeholder="{{ _("Subject") }} ({{ _("optional") }})">
-				</div>
-			{% end %}
+						{% if mode == "paste" %}
+							<div class="block">
+								<input class="input" type="text" name="subject"
+									placeholder="{{ _("Subject") }} ({{ _("optional") }})">
+							</div>
+						{% end %}
 
-			<div class="mb-3">
-				{% if mode == "paste" %}
-					<textarea class="form-control" rows="12" name="content"
-						placeholder="{{ _("Paste your content here...") }}"></textarea>
-				{% elif mode == "upload" %}
-					<label class="form-label">{{ _("File") }}</label>
-					<input type="file" name="file" class="form-control-file">
+						<div class="block">
+							{% if mode == "paste" %}
+								<textarea class="textarea" rows="12" name="content"
+									placeholder="{{ _("Paste your content here...") }}"></textarea>
+							{% elif mode == "upload" %}
+								<p class="is-size-4">{{ _("File") }}</p>
+								<div class="file has-name is-fullwidth">
+									<label class="file-label">
+									  	<input class="file-input" type="file" name="file">
+									  	<span class="file-cta">
+											<span class="file-icon">
+										  		<i class="fas fa-upload"></i>
+											</span>
+											<span class="file-label">
+											Choose a file…
+											</span>
+									  	</span>
+									  	<span class="file-name">
+											<!-- hier müsste man irgendwie den filenamen anzeigen-->
+									  	</span>
+									</label>
+								</div>
 
-					{% if max_size %}
-						<small class="form-text text-muted">
-							{{ _("You may upload up to %s") % format_size(max_size) }}
-						</small>
-					{% end %}
-				{% end %}
-			</div>
+								{% if max_size %}
+									<p class="is-size-6">
+										{{ _("You may upload up to %s") % format_size(max_size) }}
+									</p>
+								{% end %}
+							{% end %}
+						</div>
 
-			<div class="mb-3">
-				<label class="form-label">{{ _("Expires") }}</label>
+						<div class="block">
+							<p class="is-size-5">Expires</p>
 
-				<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>
+							<div class="select" name="expires">
+								<select>
+									<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>
+						</div>
 
-			<div class="d-grid">
-				<button type="submit" class="btn btn-primary">{{ _("Upload") }}</button>
+						<div class="block">
+							<button type="submit" class="button is-primary has-text-weight-bold">
+								<i class="fa-solid fa-upload"></i>{{ _("Upload") }}
+							</button>
+						</div>
+					</form>
+				</div>
 			</div>
-		</form>
-	</div>
+		</div>
+	</section>
 {% end block %}