devol
/
teddit-reddit-frontend-alternativa
mirror of https://codeberg.org/teddit/teddit
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request 'Posts with thumbnails have full size previews' (#134) from takatalk/teddit:expandable-image-previews into main 

Reviewed-on: https://codeberg.org/teddit/teddit/pulls/134
This commit is contained in:
teddit 2021-01-24 15:04:49 +01:00
parent 44fd039961 e3c4ea0e3c
commit 666a4bdd01
4 changed files with 48 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
inc/processJsonSubreddit.js
View File

@ -52,7 +52,8 @@ module.exports = function() {
} else {
if(data.preview.images[0].resolutions[0]) {
images = {
thumb: await downloadAndSave(data.preview.images[0].resolutions[0].url, 'thumb_')
thumb: await downloadAndSave(data.preview.images[0].resolutions[0].url, 'thumb_'),
preview: await downloadAndSave(data.preview.images[0].source.url, 'preview_')
}
}
}

2
static/css/styles.css
View File

@ -1051,8 +1051,10 @@ footer a {
}
/* SIDEBAR */
#sidebar {
box-sizing: border-box;
float: left;
width: 25%;
padding-left: 20px;
}
#sidebar .content {
float: left;

21
views/index.pug
View File

@ -110,6 +110,27 @@ html
.line
.selftext
!= unescape(link.selftext_html)
if (link.images && link.images.preview)
style.
details.preview-container img {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
opacity: 0;
}
details.preview-container[open][data-url="#{link.images.preview}"] .preview {
width: 100%;
height: auto;
background-image: url('#{link.images.preview}');
background-repeat: no-repeat;
background-size: contain;
}
details.preview-container(data-url="" + link.images.preview + "")
summary
span ▶
.preview
img(src=""+ link.images.thumb +"", alt="")
a(href="" + link.permalink + "", class="comments")
| #{link.num_comments} comments
if json.info.before || json.info.after

21
views/subreddit.pug
View File

@ -136,6 +136,27 @@ html
.line
.selftext
!= unescape(link.selftext_html)
if (link.images && link.images.preview)
style.
details.preview-container img {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
opacity: 0;
}
details.preview-container[open][data-url="#{link.images.preview}"] .preview {
width: 100%;
height: auto;
background-image: url('#{link.images.preview}');
background-repeat: no-repeat;
background-size: contain;
}
details.preview-container(data-url="" + link.images.preview + "")
summary
span ▶
.preview
img(src=""+ link.images.thumb +"", alt="")
a(href="" + link.permalink + "", class="comments")
| #{link.num_comments} comments
if json.info.before || json.info.after