From 1b9565fa2eeb2635f2233161f920963bf514b524 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Sat, 4 Dec 2021 18:55:49 +0100
Subject: Use img srcset for cover images of differing resolutions.
---
.gitignore | 6 +++---
public/style.css | 3 +--
tools/gencovers.sh | 13 +++++++++++++
views/create.pug | 3 ++-
views/head.pug | 4 ++++
views/index.pug | 6 +++---
views/info.pug | 2 +-
views/join.pug | 3 ++-
8 files changed, 29 insertions(+), 11 deletions(-)
create mode 100644 tools/gencovers.sh
diff --git a/.gitignore b/.gitignore
index 97fef51..e8f12c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,9 +3,9 @@ node_modules
db
db-wal
db-shm
-sessions
-sessions-wal
-sessions-shm
+login
+login-wal
+login-shm
log
.env
*.pem
diff --git a/public/style.css b/public/style.css
index cfeacd6..c28939d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -43,9 +43,8 @@ div.logo {
min-width: 150px;
height: 200px;
}
-img.logo {
+div.logo img {
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
- height: 100%;
}
table {
diff --git a/tools/gencovers.sh b/tools/gencovers.sh
new file mode 100644
index 0000000..911a050
--- /dev/null
+++ b/tools/gencovers.sh
@@ -0,0 +1,13 @@
+for F in public/*/cover.jpg
+do
+ echo Processing: $F
+ B=$(echo $F | sed s/.jpg//)
+
+ convert -scale 200x200 $F $B.1x.png
+ mozjpeg -q 95 -outfile $B.1x.jpg $B.1x.png
+ rm -f $B.1x.png
+
+ convert -scale 400x400 $F $B.2x.png
+ mozjpeg -q 90 -outfile $B.2x.jpg $B.2x.png
+ rm -f $B.2x.png
+done
diff --git a/views/create.pug b/views/create.pug
index 7aa53f3..84f950a 100644
--- a/views/create.pug
+++ b/views/create.pug
@@ -11,7 +11,8 @@ html
article
h1= title.title_name
- a(href="/info/"+title.title_id): img.logo(src="/"+title.title_id+"/cover.jpg")
+ div.logo
+ +gamecover(title.title_id)
form(method="post" action="/create/"+title.title_id)
if scenarios.length > 1
diff --git a/views/head.pug b/views/head.pug
index 294a911..d5350ac 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -12,6 +12,10 @@ link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/SourceSa
//- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Dingbats.woff2")
//- link(rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/NotoEmoji.woff2")
+mixin gamecover(title_id)
+ a(href="/info/"+title_id)
+ img(src=`/${title_id}/cover.1x.jpg` srcset=`/${title_id}/cover.2x.jpg 2x`)
+
mixin forumpost(row,show_buttons)
.post
.head
diff --git a/views/index.pug b/views/index.pug
index ba915b0..0a2262b 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -38,10 +38,10 @@ html
div.list
each title in titles
unless title.is_hidden
+ - let cover = "/" + title.title_id + "/cover"
div
- a(href="/info/"+title.title_id)
- img(src="/"+title.title_id+"/cover.jpg")
- | #{title.title_name}
+ +gamecover(title.title_id)
+ | #{title.title_name}
p: a(href="/games") List of all open and active games.
diff --git a/views/info.pug b/views/info.pug
index f73e6ef..b579f64 100644
--- a/views/info.pug
+++ b/views/info.pug
@@ -12,7 +12,7 @@ html
h1= title.title_name
div.logo
- img.logo(src="/"+title.title_id+"/cover.jpg")
+ +gamecover(title.title_id)
| !{ about_html }
diff --git a/views/join.pug b/views/join.pug
index 101afdf..ff15624 100644
--- a/views/join.pug
+++ b/views/join.pug
@@ -22,7 +22,8 @@ html
article
h1= game.title_name
- a(href="/info/"+game.title_id): img.logo(src="/"+game.title_id+"/cover.jpg")
+ div.logo
+ +gamecover(game.title_id)
p
if game.is_private
--
cgit v1.2.3