mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2025-02-20 12:19:03 +00:00
Updates
* Better thumbnails view in album page (it's now using the same styling as the one in dashboard, minus the on-hover effects and uploader/album names). * Fixed unenclosed p tag in thumbs view at dashboard.js. It did not cause any issue because it's optional to enclose it, but oh well.
This commit is contained in:
Bobby Wibowo
parent
21bf3b59c2
commit
d5bb5a5bac
79
public/css/album.css
Normal file
79
public/css/album.css
Normal file
@ -0,0 +1,79 @@
|
||||
/*
|
||||
This is the same sheets used in dashboard.css, minus the on-hover ones.
|
||||
I should probably put this in a file named _thumbs.css, remove the ones in dashboard.css,
|
||||
and use it for both album and dashboard (which means dashboard will have to load an extra css).
|
||||
But oh well, that's something for the future me to think further about.
|
||||
*/
|
||||
|
||||
.image-container {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 9px;
|
||||
background-color: #31363b;
|
||||
overflow: hidden;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
||||
box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
|
||||
}
|
||||
|
||||
.image-container .title {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.image-container .image {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-container .file-checkbox {
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
left: .75rem;
|
||||
}
|
||||
|
||||
.image-container .controls {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .75rem;
|
||||
}
|
||||
|
||||
.image-container .controls .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.image-container .controls .button:not(:active):not(:hover) {
|
||||
color: #fff;
|
||||
background-color: rgba(49, 54, 59, .75);
|
||||
}
|
||||
|
||||
.image-container .details {
|
||||
position: absolute;
|
||||
left: .75rem;
|
||||
bottom: .75rem;
|
||||
right: .75rem;
|
||||
background-color: rgba(49, 54, 59, .75);
|
||||
color: #eff0f1;
|
||||
padding: .25rem;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.image-container .details p {
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.image-container .details p span {
|
||||
font-weight: 800;
|
||||
}
|
||||
@ -172,7 +172,7 @@ panel.getUploads = (album, page, element) => {
|
||||
${pagination}
|
||||
<hr>
|
||||
${controls}
|
||||
<div class="columns is-multiline is-mobile is-centered" id="table">
|
||||
<div id="table" class="columns is-multiline is-mobile is-centered">
|
||||
|
||||
</div>
|
||||
${pagination}
|
||||
@ -219,7 +219,8 @@ panel.getUploads = (album, page, element) => {
|
||||
</div>
|
||||
<div class="details">
|
||||
<p><span class="name" title="${file.file}">${file.name}</span></p>
|
||||
<p>${displayAlbumOrUser ? `<span>${displayAlbumOrUser}</span> – ` : ''}${file.size}</div>
|
||||
<p>${displayAlbumOrUser ? `<span>${displayAlbumOrUser}</span> – ` : ''}${file.size}</p>
|
||||
</div>
|
||||
`
|
||||
table.appendChild(div)
|
||||
panel.checkboxes = Array.from(table.getElementsByClassName('file-checkbox'))
|
||||
|
||||
@ -9,24 +9,35 @@ const homeDomain = config.homeDomain || config.domain
|
||||
routes.get('/a/:identifier', async (req, res, next) => {
|
||||
const identifier = req.params.identifier
|
||||
if (identifier === undefined) {
|
||||
return res.status(401).json({ success: false, description: 'No identifier provided' })
|
||||
return res.status(401).json({
|
||||
success: false,
|
||||
description: 'No identifier provided'
|
||||
})
|
||||
}
|
||||
|
||||
const album = await db.table('albums').where({ identifier, enabled: 1 }).first()
|
||||
const album = await db.table('albums')
|
||||
.where({ identifier, enabled: 1 })
|
||||
.first()
|
||||
|
||||
if (!album) {
|
||||
return res.status(404).sendFile('404.html', { root: './pages/error/' })
|
||||
}
|
||||
|
||||
const files = await db.table('files').select('name').where('albumid', album.id).orderBy('id', 'DESC')
|
||||
const files = await db.table('files')
|
||||
.select('name', 'size')
|
||||
.where('albumid', album.id)
|
||||
.orderBy('id', 'DESC')
|
||||
|
||||
let thumb = ''
|
||||
const basedomain = config.domain
|
||||
|
||||
for (const file of files) {
|
||||
file.file = `${basedomain}/${file.name}`
|
||||
file.size = utils.getPrettyBytes(parseInt(file.size))
|
||||
|
||||
const ext = path.extname(file.name).toLowerCase()
|
||||
if ((config.uploads.generateThumbnails.image && utils.imageExtensions.includes(ext)) || (config.uploads.generateThumbnails.video && utils.videoExtensions.includes(ext))) {
|
||||
file.thumb = `${basedomain}/thumbs/${file.name.slice(0, -ext.length)}.png`
|
||||
const extname = path.extname(file.name).toLowerCase()
|
||||
if ((config.uploads.generateThumbnails.image && utils.imageExtensions.includes(extname)) || (config.uploads.generateThumbnails.video && utils.videoExtensions.includes(extname))) {
|
||||
file.thumb = `${basedomain}/thumbs/${file.name.slice(0, -extname.length)}.png`
|
||||
|
||||
/*
|
||||
If thumbnail for album is still not set, do it.
|
||||
@ -40,20 +51,17 @@ routes.get('/a/:identifier', async (req, res, next) => {
|
||||
|
||||
file.thumb = `<img alt="${file.thumb}" src="${file.thumb}"/>`
|
||||
} else {
|
||||
file.thumb = `<h1 class="title">${ext}</h1>`
|
||||
file.thumb = `<h1 class="title">${extname || 'N/A'}</h1>`
|
||||
}
|
||||
}
|
||||
|
||||
let enableDownload = false
|
||||
if (config.uploads.generateZips) { enableDownload = true }
|
||||
|
||||
return res.render('album', {
|
||||
title: album.name,
|
||||
count: files.length,
|
||||
thumb,
|
||||
files,
|
||||
identifier,
|
||||
enableDownload,
|
||||
enableDownload: Boolean(config.uploads.generateZips),
|
||||
url: `${homeDomain}/a/${album.identifier}`
|
||||
})
|
||||
})
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" type="text/css" href="../libs/bulma/bulma.min.css?v={{ globals.v1 }}">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css?v={{ globals.v1 }}">
|
||||
<link rel="stylesheet" type="text/css" href="../css/album.css?v={{ globals.v1 }}">
|
||||
<style>
|
||||
html {
|
||||
background-color: #232629;
|
||||
@ -45,10 +46,14 @@
|
||||
<a class="button is-primary is-outlined" title="Download album" href="../api/album/zip/{{ identifier }}">Download Album</a>
|
||||
{% endif %}
|
||||
<hr>
|
||||
<div id="table" class="columns is-multiline is-mobile is-centered">
|
||||
{% for item in files %}
|
||||
<div class="column is-narrow">
|
||||
<a href="{{ item.file }}" target="_blank" rel="noopener">{{ item.thumb | safe }}</a>
|
||||
<div id="table" class="columns is-multiline is-mobile is-centered has-text-centered">
|
||||
{% for file in files %}
|
||||
<div class="image-container column is-narrow">
|
||||
<a class="image" href="{{ file.file }}" target="_blank" rel="noopener">{{ file.thumb | safe }}</a>
|
||||
<div class="details">
|
||||
<p><span class="name" title="{{ file.file }}">{{ file.name }}</span></p>
|
||||
<p>{{ file.size }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -48,16 +48,16 @@
|
||||
|
||||
{% if files -%}
|
||||
<div id="uploads" style="display: block">
|
||||
{% for item in files -%}
|
||||
{% for file in files -%}
|
||||
<div class="columns">
|
||||
<div class="column is-hidden-mobile"></div>
|
||||
<div class="column">
|
||||
{% if errorMessage -%}
|
||||
<p class="error">{{ errorMessage | safe }}</p>
|
||||
{%- endif %}
|
||||
{% if item.url -%}
|
||||
{% if file.url -%}
|
||||
<p class="link">
|
||||
<a href="{{ item.url }}" target="_blank" rel="noopener">{{ item.url | safe }}</a>
|
||||
<a href="{{ file.url }}" target="_blank" rel="noopener">{{ file.url | safe }}</a>
|
||||
</p>
|
||||
{%- endif %}
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user