pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination on files and lists page

Browse Source
This commit is contained in:
Wim Brand
2019-02-07 23:09:54 +01:00
parent 63c1e09f8e
commit 95405e76d1
10 changed files with 128 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
res/static/style/layout.css
View File

@@ -86,7 +86,7 @@ body{
.navigation .icon {
display: none;
}
@media screen and (max-width: 500px) {
@media screen and (max-width: 35em) {
.navigation a:not(:first-child) {display: none;}
.navigation a.icon {
float: right;
@@ -163,7 +163,7 @@ a:hover {color: var(--highlight_color); text-decoration: underline;}
table:not(.form) {border-collapse: collapse; width: 100%;}
tr:not(.form) {border-bottom: 1px var(--accent_color_medium_border) solid;}
tr > td {padding: 0.5em;}
@media(max-width: 28em) {
@media(max-width: 30em) {
tr > td {
box-sizing: border-box;
float: left;

6
res/template/account/login.html
View File

@@ -14,12 +14,12 @@
<form onSubmit="return submitForm();" class="highlight_dark border_top border_bottom">
<table class="form">
<tr class="form">
<td>Username</td>
<td><input id="username" name="username" type="text" autocomplete="username" value=""/></td>
<td>Username / e-mail</td>
<td><input id="username" name="username" type="text" autocomplete="username" value="" class="form_input"/></td>
</tr>
<tr class="form">
<td>Password</td>
<td><input id="password" name="password" type="password" autocomplete="current-password"/></td>
<td><input id="password" name="password" type="password" autocomplete="current-password" class="form_input"/></td>
</tr>
<tr class="form">
<td colspan=2 style="text-align: right;"><input type="submit" value="Login" class="button_highlight"/></td>

35
res/template/account/user_files.html
View File

@@ -7,14 +7,30 @@
<body>
{{template "menu" .}}
<div class="highlight_dark border_bottom">
<div class="highlight_middle border_bottom">
These files were uploaded while logged in to your pixeldrain account,
<a href="/history">click here</a> to view files uploaded anonymously
in this browser.
</div>
{{$limit := 100}}
{{$page := .URLQuery.Get "page" | pageNr}}
{{$files := .PixelAPI.UserFiles $page $limit}}
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $files.Files | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
<br/>
{{$files := .PixelAPI.UserFiles 0 1000}}
{{range $files.Files}}
<a class="file_button" href="/u/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.Name}}" />
@@ -24,6 +40,21 @@
</a>
{{end}}
<br/>
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $files.Files | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
{{template "analytics"}}
</body>
</html>

3
res/template/account/user_home.html
View File

@@ -22,7 +22,7 @@
</a>
{{end}}
<br/>
<a href="/user/files">...All my files</a>
<a href="/user/files" class="button">...All my files</a>
</div>
<br/>
<h2>Your most recently created lists:</h2>
@@ -38,6 +38,7 @@
</a>
{{end}}
<br/>
<a href="/user/lists" class="button">...All my lists</a>
</div>
<hr/>

56
res/template/account/user_lists.html Normal file
View File

@@ -0,0 +1,56 @@
{{define "user_lists"}}<!DOCTYPE html>
<html>
<head>
{{template "meta_tags" "Lists"}}
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
</head>
<body>
{{template "menu" .}}
{{$limit := 100}}
{{$page := .URLQuery.Get "page" | pageNr}}
{{$lists := .PixelAPI.UserLists $page $limit}}
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $lists.Lists | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
<br/>
{{range $lists.Lists}}
<a class="file_button" href="/l/{{.ID}}" target="_blank">
<img src="{{$.APIEndpoint}}/list/{{.ID}}/thumbnail" alt="{{.Title}}" />
<span style="color: var(--highlight_color);">{{.Title}}</span>
({{.FileCount}} Files)
<br/>
{{.DateCreated.Format "2006-01-02 15:04:05"}}
</a>
{{end}}
<br/>
<div class="highlight_dark">
{{if ne $page 0}}
<a href="?page={{sub $page 4}}" class="button">🡄 4 Pages</a>
<a href="?page={{sub $page 2}}" class="button">⬅ 2 Pages</a>
<a href="?page={{sub $page 1}}" class="button button_highlight" style="margin-right: 2em;">← Last Page</a>
{{end}}
Page {{$page}}
{{if len $lists.Lists | eq $limit}}
<a href="?page={{add $page 1}}" class="button button_highlight" style="margin-left: 2em;">Next Page →</a>
<a href="?page={{add $page 2}}" class="button">2 Pages ⮕</a>
<a href="?page={{add $page 4}}" class="button">4 Pages 🡆</a>
{{end}}
</div>
{{template "analytics"}}
</body>
</html>
{{end}}

1
res/template/fragments/menu.html
View File

@@ -2,6 +2,7 @@
<div id="navigation" class="highlight_light border_top border_bottom navigation">
<a href="/">Home</a>
<a href="{{if .Authenticated}}/user/files{{else}}/history{{end}}">My&nbsp;Files</a>
{{if .Authenticated}}<a href="/user/lists">My&nbsp;Lists</a>{{end}}
<a href="/api">API</a>
{{if .Authenticated}}<a href="/user">{{.Username}}</a>
<a href="/logout" style="vertical-align: 0.6em; font-size: 0.9em; padding: 1px;">(Log out)</a>{{else}}