Mirrors/tinypin
1
0
Fork 0
mirror of https://github.com/slynn1324/tinypin.git synced 2026-01-23 02:25:08 +00:00
Code Issues Projects Releases Wiki Activity

updates

Browse source
This commit is contained in:
slynn1324 2021-01-22 16:33:04 -06:00
parent 94a562fdf5
commit 82c7b447bd
4 changed files with 34 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

1
static/client.css
View file

@ -196,6 +196,7 @@
bottom: 0px;
background-color: #eeeeee;
padding: 20px;
width: 100%;
}

3
static/components/about.js
View file

@ -40,6 +40,9 @@ app.addComponent('aboutModal', (store) => { return new Reef("#aboutModal", {
<br />
&nbsp;trash icon &raquo; <a href="https://thenounproject.com/term/trash/2449397/">Trash by ICONZ from the Noun Project</a>
<br />
&nbsp;missing icon &raquo; <a href="https://materialdesignicons.com/icon/dots-square">dots-square by Jeff Hilnbrand</a>
<br />
<br />
server
<br />
&nbsp;language &amp; runtime &raquo; <a href="https://nodejs.org/en/">node.js</a>

13
static/components/brickwall.js
View file

@ -22,10 +22,21 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', {
}
function createBrickForBoard(board){
// https://materialdesignicons.com/icon/dots-square
let missingThumbnailSrc = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(40, 40) scale(5 5)'%3E%3Cpath fill='currentColor' d='M12 16C13.1 16 14 16.9 14 18S13.1 20 12 20 10 19.1 10 18 10.9 16 12 16M12 4C13.1 4 14 4.9 14 6S13.1 8 12 8 10 7.1 10 6 10.9 4 12 4M6 16C7.1 16 8 16.9 8 18S7.1 20 6 20 4 19.1 4 18 4.9 16 6 16M6 10C7.1 10 8 10.9 8 12S7.1 14 6 14 4 13.1 4 12 4.9 10 6 10M6 4C7.1 4 8 4.9 8 6S7.1 8 6 8 4 7.1 4 6 4.9 4 6 4M18 16C19.1 16 20 16.9 20 18S19.1 20 18 20 16 19.1 16 18 16.9 16 18 16M18 10C19.1 10 20 10.9 20 12S19.1 14 18 14 16 13.1 16 12 16.9 10 18 10M18 4C19.1 4 20 4.9 20 6S19.1 8 18 8 16 7.1 16 6 16.9 4 18 4Z' /%3E%3C/g%3E%3C/svg%3E";
let boardImage = null;
if ( board.titlePinId > 0 ){
boardImage = `<img src="${getThumbnailImagePath(board.titlePinId)}" />`;
} else {
boardImage = `<div class="board-brick-missing-thumbnail"><img src="${missingThumbnailSrc}" /></div>`;
}
return /*html*/`
<div class="brick board-brick">
<a href="#board=${board.id}">
<img src="${board.titlePinId > 0 ? getThumbnailImagePath(board.titlePinId) : ''}" />
${boardImage}
<div class="board-brick-name">${board.name}</div>
</a>
</div>

28
static/components/pinzoom.js
View file

@ -110,6 +110,23 @@ app.addComponent('pinZoomModal', (store) => { return new Reef("#pinZoomModal", {
siteLink = `<a class="pinZoomModal-site-link" href="${data.pinZoomModal.pin.siteUrl}"></a>`;
}
let pinZoomDescription = '';
if ( data.pinZoomModal.pin && data.pinZoomModal.pin.description && data.pinZoomModal.pin.description.length > 0 ){
pinZoomDescription = `
<div class="pinZoomModal-description" data-onclick="pinZoomModal.showFullDescription">${data.pinZoomModal.pin.description}</div>
<div class="pinZoomModal-full-description ${data.pinZoomModal.fullDescriptionOpen ? 'pinZoomModal-full-description-open' : ''}">
<div>
<a class="pinZoomModal-hide-full-description" data-onclick="pinZoomModal.hideFullDescription">&nbsp;</a>
</div>
<div class="content">
${data.pinZoomModal.pin.description}
</div>
</div>
`;
}
return /*html*/`
<div class="modal ${data.pinZoomModal.active ? 'is-active' : ''}">
<div class="modal-background" data-onclick="pinZoomModal.close"></div>
@ -123,16 +140,7 @@ app.addComponent('pinZoomModal', (store) => { return new Reef("#pinZoomModal", {
<a class="pinZoomModal-edit" data-onclick="pinZoomModal.editPin"></a>
<a class="pinZoomModal-delete" data-onclick="pinZoomModal.deletePin"></a>
<div class="pinZoomModal-description" data-onclick="pinZoomModal.showFullDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="pinZoomModal-full-description ${data.pinZoomModal.fullDescriptionOpen ? 'pinZoomModal-full-description-open' : ''}">
<div>
<a class="pinZoomModal-hide-full-description" data-onclick="pinZoomModal.hideFullDescription">&nbsp;</a>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
${pinZoomDescription}
</div>
`;