Add gallery layout for feeds

myfreeweb · Jul 9, 2017 · da8cb2ca78602f70b43041b23fe1a8acabcadb76 · da8cb2c
1 parent 37c5c89
commit da8cb2ca78602f70b43041b23fe1a8acabcadb76
Unified Split

Showing with 108 additions and 37 deletions.

+24 −0 sweetroll-fe/assets/style.css

+20 −0 sweetroll-fe/lib/helpers.js

+1 −18 sweetroll-fe/views/_entry.pug

+22 −2 sweetroll-fe/views/_media.pug

+41 −17 sweetroll-fe/views/feed.pug
diff --git a/sweetroll-fe/assets/style.css b/sweetroll-fe/assets/style.css
@@ -604,6 +604,30 @@ simple-live, .offline-popup {
 	}
 }

+.gallery-row {
+	display: flex;
+	flex-flow: row wrap;
+
+	& .h-entry {
+		flex: 1;
+		margin: 4px;
+		transition: transform 2s ease-out;
+
+		&:first-child {
+			margin-left: 0;
+		}
+
+		&:last-child {
+			margin-right: 0;
+		}
+
+		&:hover, &:focus {
+			transform: scale(1.15);
+			z-index: 2;
+		}
+	}
+}
+
 @media screen and (max-width: 900px) {
 	.site-author {
 		margin-top: 5rem;
diff --git a/sweetroll-fe/lib/helpers.js b/sweetroll-fe/lib/helpers.js
@@ -279,6 +279,26 @@ module.exports = {
 			}),
 			require('postcss-color-function'),
 		]).process(colorCss, { from: 'color.css', to: 'color.css' }).then(x => x.css)
+	},
+
+	galleryRows (entries) {
+		const result = []
+		let cur = []
+		let cur_slots = 0
+		for (const entry of entries) {
+			cur.push(entry)
+			const media = get(entry, 'properties.photo[0]', get(entry, 'properties.video[0]', {}))
+			cur_slots += media.width > media.height ? 2 : 1
+			if (cur_slots >= 4) {
+				result.push(cur)
+				cur = []
+				cur_slots = 0
+			}
+		}
+		if (cur.length !== 0) {
+			result.push(cur)
+		}
+		return result
 	}

 }
diff --git a/sweetroll-fe/views/_entry.pug b/sweetroll-fe/views/_entry.pug
@@ -29,24 +29,7 @@ mixin showContent(properties, { preferSummary, stronglyPreferSummary, showRels,
 	each repost in properties['repost-of'] || []
 		+showRefContext(repost, { prop: 'u-repost-of', reasonIcon: 'megaphone', reasonIconClass: 'repost', reason: 'reposted a post by', rel: showRels ? 'repost-of' : '' })
 	if isUntitled || !onlySummary
-		each photo in properties.photo || []
-			if _.isString(photo)
-				if !(_.includes(textContent, photo.replace('&', '&amp;')) || _.includes(textContent, photo))
-					img.u-photo.entry-photo(src=photo alt="")
-			else if _.isObject(photo)
-				+showPhoto(photo)
-		each video in properties.video || []
-			if _.isString(video)
-				if !(_.includes(textContent, video.replace('&', '&amp;')) || _.includes(textContent, video))
-					video.u-video.entry-video(controls=true src=video)
-			else if _.isObject(video)
-				+showVideo(video)
-		each audio in properties.audio || []
-			if _.isString(audio)
-				if !(_.includes(textContent, audio.replace('&', '&amp;')) || _.includes(textContent, audio))
-					audio.u-audio.entry-audio(controls=true src=audio)
-			else if _.isObject(audio)
-				+showAudio(audio)
+		+showMedia(properties, textContent)
 	if !isUntitled
 		h1.p-name.entry-core
 			if showRels
diff --git a/sweetroll-fe/views/_media.pug b/sweetroll-fe/views/_media.pug
@@ -1,4 +1,4 @@
-mixin showPhoto(photo)
+mixin showPhoto(photo, showMeta=true)
 	figure.entry-photo
 		div(style=helpers.containerStyle(photo) class=photo.width && photo.height ? 'responsive-container' : '')
 			if _.isString(photo.value)
@@ -10,7 +10,7 @@ mixin showPhoto(photo)
 						if source !== defaultSource && !source.original
 							source(srcset=(source.srcset || source.src) media=source.media sizes=source.sizes type=source.type)
 					img.u-photo(src=(defaultSource.srcset || defaultSource.src) alt=(defaultSource.alt || photo.alt) width=photo.width height=photo.height)
-		if _.isObject(photo.meta)
+		if showMeta && _.isObject(photo.meta)
 			-
 				const meta = photo.meta
 				const make = meta['Exif.Image.Make']
@@ -88,3 +88,23 @@ mixin showAudio(audio)
 					source(src=source.src type=source.type)
 				each track in audio.track || []
 					track(src=track.src kind=track.kind label=track.label srclang=track.srclang default=(track.default || false))
+
+mixin showMedia(properties, textContent, showMeta=true)
+	each photo in properties.photo || []
+		if _.isString(photo)
+			if !(_.includes(textContent, photo.replace('&', '&amp;')) || _.includes(textContent, photo))
+				img.u-photo.entry-photo(src=photo alt="")
+		else if _.isObject(photo)
+			+showPhoto(photo, showMeta)
+	each video in properties.video || []
+		if _.isString(video)
+			if !(_.includes(textContent, video.replace('&', '&amp;')) || _.includes(textContent, video))
+				video.u-video.entry-video(controls=true src=video)
+		else if _.isObject(video)
+			+showVideo(video)
+	each audio in properties.audio || []
+		if _.isString(audio)
+			if !(_.includes(textContent, audio.replace('&', '&amp;')) || _.includes(textContent, audio))
+				audio.u-audio.entry-audio(controls=true src=audio)
+		else if _.isObject(audio)
+			+showAudio(audio)
diff --git a/sweetroll-fe/views/feed.pug b/sweetroll-fe/views/feed.pug
@@ -1,27 +1,51 @@
 extends /_layout.pug

+mixin showTombstone(entry)
+	article.h-entry(hidden)
+		.p-name Gone
+		data.dt-deleted(value="1970-01-01T00:00:00")
+		for url in entry.properties.url || []
+			data.u-url(value=url)
+
+mixin showGalleryEntry(entry)
+	-
+		const properties = entry.properties || {}
+		const permalink = relativeUrl(_.get(properties, 'url[0]'))
+	a.h-entry(href=permalink style=`flex:${_.get(properties, 'photo[0].width', _.get(properties, 'video[0].width', 1)) / _.get(properties, 'photo[0].height', _.get(properties, 'video[0].width', 1))}`)
+		+showMedia(properties, '', false)
+
 block append main
 	//- Some pagination info: https://wiki.postgresql.org/images/3/35/Pagination_Done_the_PostgreSQL_Way.pdf
 	simple-live(hidden src="/live")
 		| This feed has been updated. 
 		a.do-reload(href="#") Reload?
-	section.index-category
-		-
-			obj.children = obj.children || []
-			const qq = reqUriFull.search(true)
-		each entry in obj.children.slice(firstI)
-			if entry.deleted
-				article.h-entry(hidden)
-					.p-name Gone
-					data.dt-deleted(value="1970-01-01T00:00:00")
-					for url in entry.properties.url || []
-						data.u-url(value=url)
-			else
-				try
-					article.entry('class'=entry.type.join(' '))
-						+showEntry(entry, true)
-				catch
-					div.tpl-error Error: could not render the entry
+	-
+		obj.children = obj.children || []
+		const settings = _.get(obj, 'properties.feed-settings[0]', {})
+		const entries = obj.children.slice(firstI)
+		const qq = reqUriFull.search(true)
+	section.index-category(class=`layout-${settings.layout || 'default'}`)
+		if settings.layout === 'gallery'
+			each row in helpers.galleryRows(entries)
+				.gallery-row
+					each entry in row
+						if entry.deleted
+							+showTombstone(entry)
+						else
+							try
+								+showGalleryEntry(entry)
+							catch
+								div.tpl-error Error: could not render the entry
+		else
+			each entry in entries
+				if entry.deleted
+					+showTombstone(entry)
+				else
+					try
+						article.entry('class'=entry.type.join(' '))
+							+showEntry(entry, true)
+					catch
+						div.tpl-error Error: could not render the entry
 	nav.category-nav
 		if obj.children.length >= 0
 			-