Add navigation and pagination
This commit is contained in:
parent
9e8af48b88
commit
b570e2af7c
8 changed files with 65 additions and 28 deletions
|
|
@ -1,9 +0,0 @@
|
||||||
#images {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.thumbnail-image {
|
|
||||||
margin: 2px;
|
|
||||||
padding: 1px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
html, body {
|
|
||||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
@ -16,8 +16,12 @@ WHERE id = :id
|
||||||
|
|
||||||
-- :name get-all-images :? :*
|
-- :name get-all-images :? :*
|
||||||
SELECT * FROM images
|
SELECT * FROM images
|
||||||
|
ORDER BY created_at DESC
|
||||||
LIMIT :count OFFSET :offset
|
LIMIT :count OFFSET :offset
|
||||||
|
|
||||||
|
-- :name get-image-count :? :1
|
||||||
|
SELECT COUNT(id) as count FROM images
|
||||||
|
|
||||||
|
|
||||||
-- :name create-tag! :i!
|
-- :name create-tag! :i!
|
||||||
INSERT OR IGNORE INTO tags (tagname)
|
INSERT OR IGNORE INTO tags (tagname)
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h2>Upload a new image</h2>
|
<h1>Upload a new image</h1>
|
||||||
<p>Here you can upload a new image to the gallery. This image is then saved in
|
<p>Here you can upload a new image to the gallery. This image is then saved in
|
||||||
three different formats. The raw image, a scaled down version and a scoped
|
three different formats. The raw image, a scaled down version and a scoped
|
||||||
thumbnail image for the overview. You can upload all sorts of images.</p>
|
thumbnail image for the overview. You can upload all sorts of images.</p>
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,34 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
|
{% if pages|count > 1 %}
|
||||||
|
<nav aria-label="Page navigation" class="pull-right">
|
||||||
|
<ul class="pagination">
|
||||||
|
<li class="page-item{% ifequal current-page 1 %} disabled{% endifequal %}">
|
||||||
|
<a class="page-link" href="/page/{{ current-page|dec }}">Zurück</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{% for page in pages %}
|
||||||
|
<li class="page-item{% ifequal page current-page %} active{% endifequal %}">
|
||||||
|
<a class="page-link" href="/page/{{ page }}">{{ page }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
<li class="page-item{% ifequal current-page pages|count %} disabled{% endifequal %}">
|
||||||
|
<a class="page-link" href="/page/{{ current-page|inc }}">Weiter</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div id="iamges">
|
<div id="iamges">
|
||||||
{% for image in images %}
|
{% for image in images %}
|
||||||
<div class="thumbnail-image pull-left">
|
|
||||||
<a href="/show/{{ image.hash }}">
|
<a href="/show/{{ image.hash }}">
|
||||||
<img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">
|
<img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">
|
||||||
<p>{{ image.title }}
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,26 @@
|
||||||
<title>yenu -- the image sharing tool for friends</title>
|
<title>yenu -- the image sharing tool for friends</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="content" class="col-md-12">
|
<nav class="navbar navbar-inverse bg-faded">
|
||||||
<h1>yenu</h1>
|
<a class="navbar-brand" href="/">yenu</a>
|
||||||
<a href="/" class="">Images</a>,
|
|
||||||
<a href="/upload" class="">Upload a new image</a>
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
|
<ul class="nav navbar-nav mr-auto pull-right">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/upload">Hochladen</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/comments">Kommentarstream</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/stats">Statistik</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="/logout">Ausloggen</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div id="content" class="col-md-12">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
(ns yenu.layout
|
(ns yenu.layout
|
||||||
(:require [selmer.parser :as parser]
|
(:require [selmer.parser :as parser]
|
||||||
|
[selmer.filters :as filter]
|
||||||
[ring.util.http-response :refer [content-type ok]]
|
[ring.util.http-response :refer [content-type ok]]
|
||||||
[ring.util.anti-forgery :refer [anti-forgery-field]]
|
[ring.util.anti-forgery :refer [anti-forgery-field]]
|
||||||
[yenu.helpers.images :as image-helper]
|
[yenu.helpers.images :as image-helper]
|
||||||
|
|
@ -8,6 +9,8 @@
|
||||||
(declare ^:dynamic *app-context*)
|
(declare ^:dynamic *app-context*)
|
||||||
(parser/set-resource-path! (clojure.java.io/resource "templates"))
|
(parser/set-resource-path! (clojure.java.io/resource "templates"))
|
||||||
(parser/add-tag! :csrf-field (fn [_ _] (anti-forgery-field)))
|
(parser/add-tag! :csrf-field (fn [_ _] (anti-forgery-field)))
|
||||||
|
(filter/add-filter! :inc inc)
|
||||||
|
(filter/add-filter! :dec dec)
|
||||||
|
|
||||||
(defn render
|
(defn render
|
||||||
"renders the HTML template located relative to resources/templates"
|
"renders the HTML template located relative to resources/templates"
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,19 @@
|
||||||
[yenu.helpers.images :as images]
|
[yenu.helpers.images :as images]
|
||||||
[yenu.db.core :as db]))
|
[yenu.db.core :as db]))
|
||||||
|
|
||||||
(defn index-page []
|
(defn number-of-pages [images-on-page]
|
||||||
(layout/render "index.html"
|
(int (Math/ceil
|
||||||
{:images (db/get-all-images {:offset 0 :count 10})}))
|
(/ (:count (db/get-image-count)) images-on-page))))
|
||||||
|
|
||||||
|
(defn index-page [current-page]
|
||||||
|
(let [image-count 5
|
||||||
|
offset (* (dec current-page) image-count)
|
||||||
|
pages (number-of-pages image-count)
|
||||||
|
images (db/get-all-images {:offset offset :count image-count})]
|
||||||
|
(layout/render "index.html"
|
||||||
|
{:images images
|
||||||
|
:current-page current-page
|
||||||
|
:pages (range 1 (inc pages))})))
|
||||||
|
|
||||||
(defn image-file [type hash ext]
|
(defn image-file [type hash ext]
|
||||||
(let [filename (str hash "." ext)]
|
(let [filename (str hash "." ext)]
|
||||||
|
|
@ -16,7 +26,9 @@
|
||||||
|
|
||||||
(defroutes core-routes
|
(defroutes core-routes
|
||||||
(GET "/" []
|
(GET "/" []
|
||||||
(index-page))
|
(redirect "/page/1"))
|
||||||
|
(GET "/page/:page-number" [page-number]
|
||||||
|
(index-page (Integer. page-number)))
|
||||||
(GET ["/images/:type/:hash.:ext"
|
(GET ["/images/:type/:hash.:ext"
|
||||||
;;:type #"(normal|raw|thumbnails)"
|
;;:type #"(normal|raw|thumbnails)"
|
||||||
;;:hash #"[0-9]+-[^.]+"
|
;;:hash #"[0-9]+-[^.]+"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue