From ca9072b5b140d1a78f4c38f0751a9256fdc8f28d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Paul=20H=C3=A4nsch?= Date: Sat, 7 Jul 2018 20:18:32 +0200 Subject: [PATCH] list styling --- helpers/genall.sh | 56 --------------------------------------------- helpers/genmeta.sh | 39 ------------------------------- helpers/genthumb.sh | 44 ----------------------------------- list.sh | 25 ++++++++++---------- style.css | 33 ++++++++++++++++++++------ 5 files changed, 38 insertions(+), 159 deletions(-) delete mode 100755 helpers/genall.sh delete mode 100755 helpers/genmeta.sh delete mode 100755 helpers/genthumb.sh diff --git a/helpers/genall.sh b/helpers/genall.sh deleted file mode 100755 index 78e0794..0000000 --- a/helpers/genall.sh +++ /dev/null @@ -1,56 +0,0 @@ -#!/bin/zsh -# Copyright 2014 - 2016 Paul Hänsch -# -# This file is part of Serve0 -# -# Serve0 is free software: you can redistribute it and/or modify -# it under the terms of the GNU Affero General Public License as published by -# the Free Software Foundation, either version 3 of the License, or -# (at your option) any later version. -# -# Serve0 is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU Affero General Public License for more details. -# -# You should have received a copy of the GNU Affero General Public License -# along with Serve0 If not, see . - -dir="$(dirname $0)" -genmeta="$dir/genmeta.sh" -genthumb="$dir/genthumb.sh" -. "$dir/../constants.sh" - -addtag(){ - meta="$1" - tag="$2" - - length=0; width=0; height=0; - if [ -r "$meta" ]; then - head -n1 "$meta" |read length width height info - tags="$(sed -n 2p "$meta" |sed -r 's:^\|(.*)$:\1:')" - description="$(sed -n '3,$p' "$meta")" - fi - - egrep -q "(^|.*\|)$tag(\|.*|$)" <<<"$tags" || tags="$tag|$tags" - - cat >"$meta" </dev/null 2>/dev/null - printf %s ' Meta ...' - $genmeta "$each" "${each}.meta" >/dev/null 2>/dev/null - printf %s ' Tags ...' - for tag in $*; do - addtag "${each}.meta" "$tag" - done - printf 'Done!\n' -fi; done diff --git a/helpers/genmeta.sh b/helpers/genmeta.sh deleted file mode 100755 index ca0fe7f..0000000 --- a/helpers/genmeta.sh +++ /dev/null @@ -1,39 +0,0 @@ -#!/bin/zsh -# Copyright 2014 - 2016 Paul Hänsch -# -# This file is part of Serve0 -# -# Serve0 is free software: you can redistribute it and/or modify -# it under the terms of the GNU Affero General Public License as published by -# the Free Software Foundation, either version 3 of the License, or -# (at your option) any later version. -# -# Serve0 is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU Affero General Public License for more details. -# -# You should have received a copy of the GNU Affero General Public License -# along with Serve0 If not, see . - -video="$1" -meta="$2" - -if [ -r "$meta" ]; then - tags="$(sed -n 2p "$meta")" - description="$(sed -n '3,$p' "$meta")" -fi - -printf '' |mplayer -input nodefault-bindings -nosound -vo null -identify -frames 0 "$video" \ -| sort \ -| sed -rn 's:ID_LENGTH=(.*)(\..*)$:\1:p; - s:ID_VIDEO_HEIGHT=(.*):\1:p; - s:ID_VIDEO_WIDTH=(.*):\1:p;' \ -| tr '\n' ' ' \ -| read length height width 2>/dev/null - -cat <"$meta" -${length:-0} ${width:-0} ${height:-0} ${video##*/} -${tags:-|} -${description} -EOF diff --git a/helpers/genthumb.sh b/helpers/genthumb.sh deleted file mode 100755 index 2119d85..0000000 --- a/helpers/genthumb.sh +++ /dev/null @@ -1,44 +0,0 @@ -#!/bin/zsh -# Copyright 2014 - 2017 Paul Hänsch -# -# This file is part of Serve0 -# -# Serve0 is free software: you can redistribute it and/or modify -# it under the terms of the GNU Affero General Public License as published by -# the Free Software Foundation, either version 3 of the License, or -# (at your option) any later version. -# -# Serve0 is distributed in the hope that it will be useful, -# but WITHOUT ANY WARRANTY; without even the implied warranty of -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -# GNU Affero General Public License for more details. -# -# You should have received a copy of the GNU Affero General Public License -# along with Serve0 If not, see . - -video="$1" -thumb="$2" - -if [ -e "$video" -a \! -e "$thumb" ]; then - printf '' |mplayer -input nodefault-bindings -nosound -vo null -frames 0 -identify "$video" \ - | sort \ - | sed -rn 's:^.*ID_LENGTH=(.*)(\..*)$:\1:p; - s:^.*ID_VIDEO_HEIGHT=(.*)$:\1:p; - s:^.*ID_VIDEO_WIDTH=(.*)$:\1:p;' \ - | tr '\n' ' ' \ - | read length height width 2>/dev/null - - [ "$(($height * 1000 / $width))" -gt "750" ] && width="$((75 * $width / $height))" \ - || width=100 - [ -z $width ] && width=100 - chunk="$((${length:-0} / 5))" - - tmp="$(mktemp -d)" - for cnt in 1 2 3 4; do - printf '' |mplayer -input nodefault-bindings -nosound -vo jpeg:outdir="$tmp" -frames 1 \ - -benchmark -vf framestep=I,scale="$width":-2 -ss "$(($cnt*$chunk))" "$video" >/dev/null 2>/dev/null - mv "$tmp/00000001.jpg" "${tmp}/_${cnt}.jpg" - done - montage "${tmp}"/_[1234].jpg -tile 2x2+0+0 -geometry 100x75+3+3 -background '#000000' -quality 50 "${thumb}" 2>/dev/null - rm -r "${tmp}" -fi diff --git a/list.sh b/list.sh index 9abf0e9..ddf1111 100644 --- a/list.sh +++ b/list.sh @@ -1,6 +1,6 @@ #!/bin/sh -list_item(){ +list_item() { name="$(HTML "$1")" path="$(HTML "$ITEM/$1")" meta="$_DATA/$ITEM/.index/meta" @@ -12,21 +12,21 @@ list_item(){ read -r length width height tags comment n <<-EOF $(grep -m1 -F " $1" "$meta") EOF - printf '[div .list .file - [a href="%s" [img src="%s?a=thumbnail"] %s] - [span .time %i:%imin] [span .dim %ix%i] %s - ]' \ - "$path" "$path" "$name" \ - "$((length / 60))" "$((length % 60))" \ - "$width" "$height" \ - "$(printf %s\\n "${tags#tags=}" |tr , ' ' |xargs printf '[span .tag %s]')" + printf '[div .list .file + [a href="%s" [img src="%s?a=thumbnail"][label %s]] + [span .time %i:%imin] [span .dim %ix%i] %s + ]' \ + "$path" "$path" "$name" \ + "$((length / 60))" "$((length % 60))" \ + "$width" "$height" \ + "$(printf %s\\n "${tags#tags=}" |tr , ' ' |xargs printf '[span .tag %s]')" else - printf '[div .list .file [a href="%s" [img src="%s?a=thumbnail"] %s]]' \ + printf '[div .list .file [a href="%s" [img src="%s?a=thumbnail"][label %s]]]' \ "$path" "$path" "$name" fi } -list_items(){ +list_items() { mode="$(COOKIE mode |grep -m1 -xE 'index|browse' || printf browse )" [ "$mode" = browse -a "$ITEM" ] && printf '..\n' @@ -55,10 +55,9 @@ list_items(){ Name) sort -k 2;; esac \ | cut -d/ -f2- - } -list_paginate(){ +list_paginate() { page="$(GET p |grep -xE '[0-9]+' || printf 1)" printf '[div .itemlist ' diff --git a/style.css b/style.css index c668365..dd5a231 100644 --- a/style.css +++ b/style.css @@ -6,6 +6,7 @@ button { padding: .125em .5em; } a { color: inherit; text-decoration: none;} body { + position: relative; color: white; background-color: black; } @@ -90,18 +91,22 @@ a[href="#advsearch"]:before { max-width: 85%; } -.itemlist { overflow: hidden; } +.itemlist { display: block; overflow: hidden; } .list { position: relative; - display: block; float: left; + display: inline-block; width: 25%; min-width: 250px; - padding: .5em 1em; + padding: .25em; overflow: none; word-wrap: break-word; vertical-align: top; + color: black; } -.list, .list a { color: black; } +.list.dir { + padding: .5em 1em; +} + .list:before { position: absolute; top: .25em; left: .25em; @@ -109,14 +114,29 @@ a[href="#advsearch"]:before { z-index: -2; content: ''; } -.list.file:first-of-type { clear: left; } .list.dir:before { background-color: #CCF; } .list.file:before { background-color: #FDD; } +.list.file:first-of-type { clear: left; } -.list.file img { +.list.file a img{ display: block; width: 100%; + min-height: 4em; } +.list.file a label{ + position: absolute; + top: 0; padding: .25em .5em; + color: white; + background-color: rgba(0,0,0,.625); +} + +.list.file .time, +.list.file .dim { + color: white; + background-color: #004; + padding: .125em .5em; +} + .pagination { display: block; text-align: center; @@ -132,7 +152,6 @@ a[href="#advsearch"]:before { } #editing { - position: absolute; width: 100%; bottom: 0; background-color: #333; border-top: 1px solid; -- 2.39.2