Add navigation and pagination
This commit is contained in:
parent
9e8af48b88
commit
b570e2af7c
|
|
@ -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 :? :*
|
||||
SELECT * FROM images
|
||||
ORDER BY created_at DESC
|
||||
LIMIT :count OFFSET :offset
|
||||
|
||||
-- :name get-image-count :? :1
|
||||
SELECT COUNT(id) as count FROM images
|
||||
|
||||
|
||||
-- :name create-tag! :i!
|
||||
INSERT OR IGNORE INTO tags (tagname)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% 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
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,34 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% 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">
|
||||
{% for image in images %}
|
||||
<div class="thumbnail-image pull-left">
|
||||
<a href="/show/{{ image.hash }}">
|
||||
<img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">
|
||||
<p>{{ image.title }}
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,26 @@
|
|||
<title>yenu -- the image sharing tool for friends</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content" class="col-md-12">
|
||||
<h1>yenu</h1>
|
||||
<a href="/" class="">Images</a>,
|
||||
<a href="/upload" class="">Upload a new image</a>
|
||||
<hr>
|
||||
<nav class="navbar navbar-inverse bg-faded">
|
||||
<a class="navbar-brand" href="/">yenu</a>
|
||||
|
||||
<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 %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
(ns yenu.layout
|
||||
(:require [selmer.parser :as parser]
|
||||
[selmer.filters :as filter]
|
||||
[ring.util.http-response :refer [content-type ok]]
|
||||
[ring.util.anti-forgery :refer [anti-forgery-field]]
|
||||
[yenu.helpers.images :as image-helper]
|
||||
|
|
@ -8,6 +9,8 @@
|
|||
(declare ^:dynamic *app-context*)
|
||||
(parser/set-resource-path! (clojure.java.io/resource "templates"))
|
||||
(parser/add-tag! :csrf-field (fn [_ _] (anti-forgery-field)))
|
||||
(filter/add-filter! :inc inc)
|
||||
(filter/add-filter! :dec dec)
|
||||
|
||||
(defn render
|
||||
"renders the HTML template located relative to resources/templates"
|
||||
|
|
|
|||
|
|
@ -6,9 +6,19 @@
|
|||
[yenu.helpers.images :as images]
|
||||
[yenu.db.core :as db]))
|
||||
|
||||
(defn index-page []
|
||||
(layout/render "index.html"
|
||||
{:images (db/get-all-images {:offset 0 :count 10})}))
|
||||
(defn number-of-pages [images-on-page]
|
||||
(int (Math/ceil
|
||||
(/ (: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]
|
||||
(let [filename (str hash "." ext)]
|
||||
|
|
@ -16,7 +26,9 @@
|
|||
|
||||
(defroutes core-routes
|
||||
(GET "/" []
|
||||
(index-page))
|
||||
(redirect "/page/1"))
|
||||
(GET "/page/:page-number" [page-number]
|
||||
(index-page (Integer. page-number)))
|
||||
(GET ["/images/:type/:hash.:ext"
|
||||
;;:type #"(normal|raw|thumbnails)"
|
||||
;;:hash #"[0-9]+-[^.]+"
|
||||
|
|
|
|||
Loading…
Reference in a new issue