nopaste: Update design

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/base.html b/src/templates/base.html
index 0717c78b2905cefd06d4b5e8c2ecf983c52a679e..bd8327f490b56ebb59aaac2d9350a97349db7454 100644 (file)
--- 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 ea3bf19b8f56265e30a5cc8e5ae8f2f4f981cad1..b3d3dcbd57f85a1e7eb304f290e8048b99e2ea94 100644 (file)
--- 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 e99764614d970b43a31284fda63e1cc0a3ddd9c7..48b9b8660ac518d1550e90f927951a6cc4e0e7a4 100644 (file)
--- 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 %}