Work on the UI

env/dev/clj/user.clj

@@ -4,18 +4,11 @@
             yenu.core))
 
 (defn start []
-  (mount/start-without #'yenu.core/http-server
+  (mount/start-without #'yenu.core/repl-server))
-                       #'yenu.core/repl-server))
 
 (defn stop []
-  (mount/stop-except #'yenu.core/http-server
+  (mount/stop-except #'yenu.core/repl-server))
-                     #'yenu.core/repl-server))
 
 (defn restart []
   (stop)
   (start))
-
-(defn start-with-server []
-  (start)
-  (mount/start #'yenu.core/http-server))
-

project.clj

@@ -17,7 +17,7 @@
                  [org.clojure/tools.cli "0.3.5"]
                  [org.clojure/tools.logging "0.3.1"]
                  [org.webjars.bower/tether "1.4.0"]
-                 [org.webjars/bootstrap "4.0.0-alpha.6"]
+                 [org.webjars/bootstrap "4.0.0-alpha.6-1"]
                  [org.webjars/font-awesome "4.7.0"]
                  [org.webjars/webjars-locator-jboss-vfs "0.1.0"]
                  [org.xerial/sqlite-jdbc "3.16.1"]

resources/templates/admin/upload.html

@@ -1,37 +1,39 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<h1>Upload a new image</h1>
+<h1>Bild hochladen</h1>
-<p>Here you can upload a new image to the gallery. This image is then saved in
+<p>Hier kann ein neues Bild der Gallerie hinzugefügt werden. Dabei sind alle
-  three different formats. The raw image, a scaled down version and a scoped
+  gängigen Bildformate und Auflösungen möglich. Das hochgeladene Bild wird
-  thumbnail image for the overview. You can upload all sorts of images.</p>
+  zugeschnitten (Thumbnail) und skaliert (Detailseite).</p>
 
 <form action="/upload" enctype="multipart/form-data" method="POST" class="form-horizontal">
     {% csrf-field %}
 
     <div class="form-group">
-      <label for="file" class="sr-only">Image</label>
+      <label for="file" class="sr-only">Bild</label>
       <input id="file" class="form-control" name="file" type="file" />
     </div>
 
     <div class="form-group">
-      <label for="title">Title</label>
+      <label for="title">Bildüberschrift</label>
-      <input type="text" name="title" class="form-control" placeholder="Default is the image name">
+      <input type="text" name="title" class="form-control"
+             placeholder="Leerlassen für Dateiname">
     </div>
 
     <div class="form-group">
-      <label for="description">Description</label>
+      <label for="description">Beschreibung (optional)</label>
-      <textarea name="description" class="form-control" rows="4" placeholder="Optional"></textarea>
+      <textarea name="description" class="form-control" rows="4"></textarea>
     </div>
 
     <div class="form-group">
       <label for="tags">Tags</label>
-      <input type="text" id="tags" name="tags" class="form-control" placeholder="Separate the tags with space(s) or comma">
+      <input type="text" id="tags" name="tags" class="form-control"
+             placeholder="Trennen mit Leerzeichen oder Kommas">
     </div>
 
     <button type="submit" class="btn btn-success">
       <span class="fa fa-floppy-o"></span>
-      Upload image
+      Bild hochladen
     </button>
 </form>
 {% endblock %}

resources/templates/detail.html

@@ -2,19 +2,19 @@
 
 {% block content %}
 
-<div class="btn-group pull-right" role="group">
+<div class="btn-group pull-right clearfix" role="group">
   {% if next-image %}
   <a class="btn btn-secondary" href="/show/{{ next-image.id }}">
     {% else %}
   <a class="btn btn-secondary disabled" href="#">
     {% endif %}
     <span class="fa fa-arrow-left"></span>
-    Nächstes Bild
+    Neuer
   </a>
 
   <a class="btn btn-secondary" href="/">
     <span class="fa fa-home"></span>
-    Zur Gallerie
+    Gallerie
   </a>
 
   {% if prev-image %}
@@ -22,24 +22,12 @@
   {% else %}
   <a class="btn btn-secondary disabled" href="#">
   {% endif %}
-    Vorheriges Bild
+    Älter
     <span class="fa fa-arrow-right"></span>
   </a>
 </div>
 
-<div class="btn-group pull-left" role="group">
+<div class="pull-left clearfix">
-  <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
-    <span class="fa fa-pencil"></span>
-    Bearbeiten
-  </a>
-  <a class="btn btn-danger btn-sm" href="/delete/{{ image.id }}">
-    <span class="fa fa-trash"></span>
-    Löschen
-  </a>
-</div>
-<div class="clearfix"></div>
-
-<div class="pull-left">
   <h1>{{ image.title }}</h1>
   <div id="image-tags">
     {% for tag in tags %}
@@ -50,8 +38,6 @@
 
 <div class="clearfix"></div>
 
-
-
 <hr>
 <div class="detail-image">
   <a href="/images/raw/{{ image.hash }}.png">
@@ -59,6 +45,16 @@
   </a>
 </div>
 <hr>
+<div class="btn-group pull-right clearfix" role="group">
+  <a class="btn btn-primary btn-sm" href="/edit/{{ image.id }}">
+    <span class="fa fa-pencil"></span>
+    Bearbeiten
+  </a>
+  <a class="btn btn-danger btn-sm" href="/delete/{{ image.id }}">
+    <span class="fa fa-trash"></span>
+    Löschen
+  </a>
+</div>
 
   <p>{{ image.created_at|parse-date|date:"dd-MM-yyyy HH:mm" }} Uhr</p>
 {% if image.description|length > 0 %}

resources/templates/error.html

@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 
 {% block content %}
-<h1><span class="text-danger">Error: {{status}}</span></h1>
+<h1><span class="text-danger">Fehler: {{status}}</span></h1>
 <hr>
 {% if title %}
 <h2 class="without-margin">{{title}}</h2>

resources/templates/index.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 {% if pages|count > 1 %}
-<nav aria-label="Page navigation" class="pull-right">
+<nav aria-label="Page navigation" class="pull-right clearfix">
   <ul class="pagination">
     <li class="page-item{% ifequal current-page 1 %} disabled{% endifequal %}">
       <a class="page-link" href="/page/{{ current-page|dec }}">
@@ -25,17 +25,14 @@
     </li>
   </ul>
 </nav>
-
-<div class="clearfix"></div>
 {% endif %}
 
-<div>
+<div class="clearfix">
   {% for image in images %}
     <a href="/show/{{ image.id }}" class="thumbnail-image">
       <img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">
     </a>
   {% endfor %}
 </div>
-<div class="clearfix"></div>
   
 {% endblock %}

resources/templates/layout.html

@@ -6,38 +6,43 @@
     <title>yenu -- the image sharing tool for friends</title>
   </head>
   <body>
-    <nav class="navbar bg-faded fixed-top">
+
+    <nav class="navbar navbar-toggleable-md bg-inverse navbar-inverse">
+      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
       <a class="navbar-brand" href="/">
         <img src="/img/logo.png">
         yenu
       </a>
 
-      <ul class="nav navbar-nav mr-auto pull-right">
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <li class="nav-item">
+        <ul class="navbar-nav mr-auto mt-2 mt-md-0">
-          <a class="nav-link" href="/upload">
+          <li class="nav-item">
-            <span class="fa fa-upload"></span>
+            <a class="nav-link" href="/upload">
-            Hochladen
+              <span class="fa fa-upload"></span>
-          </a>
+              Hochladen
-        </li>
+            </a>
-        <li class="nav-item">
+          </li>
-          <a class="nav-link" href="/comments">
+          <li class="nav-item">
-            <span class="fa fa-comments"></span>
+            <a class="nav-link" href="/comments">
-            Kommentarstream
+              <span class="fa fa-comments"></span>
-          </a>
+              Kommentarstream
-        </li>
+            </a>
-        <li class="nav-item">
+          </li>
-          <a class="nav-link" href="/statistics">
+          <li class="nav-item">
-            <span class="fa fa-bar-chart"></span>
+            <a class="nav-link" href="/statistics">
-            Statistik
+              <span class="fa fa-bar-chart"></span>
-          </a>
+              Statistik
-        </li>
+            </a>
-        <li class="nav-item">
+          </li>
-          <a class="nav-link" href="/logout">
+          <li class="nav-item">
-            <span class="fa fa-sign-out"></span>
+            <a class="nav-link" href="/logout">
-            Ausloggen
+              <span class="fa fa-sign-out"></span>
-          </a>
+              Ausloggen
-        </li>
+            </a>
-      </ul>
+          </li>
+      </div>
     </nav>
 
     <div id="content" class="col-md-12">
@@ -45,6 +50,12 @@
       {% endblock %}
     </div>
 
+    <div class="col-md-12 text-right mt-4 mb-1">
+      <hr>
+      <p>© 2017 <a href="https://aaron-fischer.net/">Aaron
+      Fischer</a>, <a href="https://instagram.com/juna_eule">Beatrice Fischer</a></p>
+    </div>
+
     <!-- cljs stuff, remove ore reuse it (see cljs/jenu/core.cljs) -->
     <div id="navbar"></div>
     <div id="app"></div>
@@ -53,11 +64,13 @@
     {% style "/assets/font-awesome/css/font-awesome.min.css" %}
     {% style "/css/screen.css" %}
 
+
     <script type="text/javascript">
-      var context = "{{servlet-context}}";
+     var context = "{{servlet-context}}";
-      var csrfToken = "{{csrf-token}}";
+     var csrfToken = "{{csrf-token}}";
     </script>
     {% script "/js/app.js" %}
+    {% script "/js/bootstrap.min.js" %}
   </body>
 </html>