redesigned nopaste

diff --git a/src/templates/nopaste/create.html b/src/templates/nopaste/create.html
index 719ba99da9aa01d79da4c32a8db129a2d351afbf..155481309b2a511ddbd7817335bde081fec01609 100644 (file)
--- 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 %}