mirror/spacedeck-open
1
0
Fork 0
mirror of https://github.com/spacedeck/spacedeck-open.git synced 2025-12-15 17:37:30 +01:00
Code Issues Projects Releases Wiki Activity

Upgrade puppeteer to version 8.0.0

Browse Source 
space thumbnails background-size: cover
This commit is contained in:
dm
2021-03-24 00:03:07 +01:00
parent 6bd7130597
commit 63d70c498a
4 changed files with 87 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
helpers/exporter.js
View File

@@ -36,7 +36,7 @@ module.exports = {
page.setDefaultTimeout(timeout); page.setDefaultTimeout(timeout);
await page.setJavaScriptEnabled(false); await page.setJavaScriptEnabled(false);
await page.goto(space_url, {waitUntil: 'networkidle2'}); await page.goto(space_url, {waitUntil: 'networkidle2'});
await page.emulateMedia('screen'); await page.emulateMediaType('screen');
if (type=="pdf") { if (type=="pdf") {
await page.pdf({path: export_path, printBackground: true, width: space.width+'px', height: space.height+'px' }); await page.pdf({path: export_path, printBackground: true, width: space.width+'px', height: space.height+'px' });

2
package.json
View File

@@ -31,7 +31,7 @@
"moment": "^2.19.3", "moment": "^2.19.3",
"morgan": "^1.9.1", "morgan": "^1.9.1",
"nodemailer": "^4.6.7", "nodemailer": "^4.6.7",
"puppeteer": "3.0.0", "puppeteer": "8.0.0",
"read-chunk": "^2.1.0", "read-chunk": "^2.1.0",
"request": "^2.88.0", "request": "^2.88.0",
"sanitize-html": "^1.11.1", "sanitize-html": "^1.11.1",

2
public/stylesheets/style.css
View File

File diff suppressed because one or more lines are too long

143
styles/folder.scss
View File

@@ -3,12 +3,17 @@
@import "unicode"; @import "unicode";
@-webkit-keyframes appear { @-webkit-keyframes appear {
0% { opacity: 0;} 0% {
30% { opacity: 0;} opacity: 0;
100% { opacity: 1; } }
30% {
opacity: 0;
}
100% {
opacity: 1;
}
} }
.avatar { .avatar {
background-color: $blue; background-color: $blue;
font-family: $main-font; font-family: $main-font;
@@ -26,7 +31,9 @@
#user-root { #user-root {
margin-left: 5px !important; margin-left: 5px !important;
padding: 0px !important; padding: 0px !important;
.btn {margin-right: 10px; } .btn {
margin-right: 10px;
}
} }
#sidebar.folder-sidebar { #sidebar.folder-sidebar {
@@ -70,7 +77,9 @@
li { li {
display: inline-block; display: inline-block;
line-height: 44px; line-height: 44px;
&.active span {color: $light; } &.active span {
color: $light;
}
span { span {
color: $medium; color: $medium;
display: inline-block; display: inline-block;
@@ -82,8 +91,6 @@
} }
} }
#folder { #folder {
position: absolute; position: absolute;
height: 100%; height: 100%;
@@ -137,7 +144,7 @@
z-index: initial; z-index: initial;
} }
.folder .icon { .folder .icon {
color: $yellow; color: $yellow;
opacity: 1; opacity: 1;
} }
@@ -150,7 +157,7 @@
width: 100%; width: 100%;
} }
> .icon { > .icon {
margin-left: -15px margin-left: -15px;
} }
} }
@@ -176,30 +183,30 @@
// margin-top: -18px; // margin-top: -18px;
margin-right: -60px; margin-right: -60px;
// margin-bottom: -18px; // margin-bottom: -18px;
@include transition( all 0.125s ease-in-out); @include transition(all 0.125s ease-in-out);
.icon { .icon {
left: 0px; left: 0px;
top: 0px; top: 0px;
line-height: 60px; line-height: 60px;
font-size: 13px; font-size: 13px;
position: absolute; position: absolute;
@include scale(0,0); @include scale(0, 0);
@include transition( all 0.125s ease-in-out); @include transition(all 0.125s ease-in-out);
@include opacity(0.25); @include opacity(0.25);
} }
&:hover { &:hover {
margin-right: -12px; margin-right: -12px;
.icon { .icon {
@include scale(1,1); @include scale(1, 1);
} }
} }
} }
} }
#folder-header { #folder-header {
background-color: rgba(41,41,41,0.95); background-color: rgba(41, 41, 41, 0.95);
background-color: rgba(245,245,245,0.95); background-color: rgba(245, 245, 245, 0.95);
} }
#folder-wrapper { #folder-wrapper {
@@ -212,15 +219,22 @@
margin: auto; margin: auto;
} }
#folder-grid .item { #folder-grid .item {
float: left; float: left;
width: 100%; width: 100%;
@media screen and (min-width: 640px) {width: 50%; } @media screen and (min-width: 640px) {
@media screen and (min-width: 800px) {width: 33.333333%; } width: 50%;
@media screen and (min-width: 1000px) {width: 25%; } }
@media screen and (min-width: 1200px) {width: 20%; } @media screen and (min-width: 800px) {
width: 33.333333%;
}
@media screen and (min-width: 1000px) {
width: 25%;
}
@media screen and (min-width: 1200px) {
width: 20%;
}
} }
.compact-hidden { .compact-hidden {
@@ -256,8 +270,8 @@
.item { .item {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
padding-right: $folder-gutter*2; padding-right: $folder-gutter * 2;
padding-bottom: $folder-gutter*2; padding-bottom: $folder-gutter * 2;
margin-bottom: $folder-gutter; margin-bottom: $folder-gutter;
position: relative; position: relative;
@@ -265,36 +279,38 @@
cursor: pointer; cursor: pointer;
.folder-drop {display:none; } .folder-drop {
display: none;
}
&.appear > a, &.appear > a,
&.creating > a { &.creating > a {
opacity: 0; opacity: 0;
-webkit-animation: appear 0.25s ease-out 0.05s; -webkit-animation: appear 0.25s ease-out 0.05s;
-moz-animation: appear 0.25s ease-out 0.05s; -moz-animation: appear 0.25s ease-out 0.05s;
-ms-animation: appear 0.25s ease-out 0.05s; -ms-animation: appear 0.25s ease-out 0.05s;
-o-animation: appear 0.25s ease-out 0.05s; -o-animation: appear 0.25s ease-out 0.05s;
animation: appear 0.25s ease-out 0.05s; animation: appear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
&.deleting > a { &.deleting > a {
-webkit-animation: disappear 0.25s ease-out 0.05s; -webkit-animation: disappear 0.25s ease-out 0.05s;
-moz-animation: disappear 0.25s ease-out 0.05s; -moz-animation: disappear 0.25s ease-out 0.05s;
-ms-animation: disappear 0.25s ease-out 0.05s; -ms-animation: disappear 0.25s ease-out 0.05s;
-o-animation: disappear 0.25s ease-out 0.05s; -o-animation: disappear 0.25s ease-out 0.05s;
animation: disappear 0.25s ease-out 0.05s; animation: disappear 0.25s ease-out 0.05s;
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards; -o-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
&.tag-important > a { &.tag-important > a {
@@ -308,7 +324,7 @@
&.dropping { &.dropping {
.folder-drop { .folder-drop {
display:block; display: block;
} }
} }
@@ -349,7 +365,13 @@
background-color: $darker; background-color: $darker;
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.1))); -webkit-mask-image: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0.1))
);
background-color: black; background-color: black;
pointer-events: none; pointer-events: none;
} }
@@ -360,7 +382,7 @@
.fav-toggle { .fav-toggle {
margin-right: -12px; margin-right: -12px;
.icon { .icon {
@include scale(1,1); @include scale(1, 1);
@include opacity(1); @include opacity(1);
} }
} }
@@ -384,7 +406,7 @@
> a { > a {
/* aspect ratio without spacer image */ /* aspect ratio without spacer image */
&:before{ &:before {
content: ""; content: "";
display: block; display: block;
padding-top: 100%; /* initial ratio of 1:1*/ padding-top: 100%; /* initial ratio of 1:1*/
@@ -392,9 +414,11 @@
} }
background-color: white; background-color: white;
border-radius: $radius*2; border-radius: $radius * 2;
&:active { opacity: 0.95 !important; } &:active {
opacity: 0.95 !important;
}
box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px 1px rgba(0, 0, 0, 0.15);
border: 1px solid black; border: 1px solid black;
@@ -406,7 +430,7 @@
font-weight: 400; font-weight: 400;
display: block; display: block;
text-decoration: none; text-decoration: none;
border-radius: $radius*2; border-radius: $radius * 2;
position: relative; position: relative;
.item-thumbnail { .item-thumbnail {
@@ -420,8 +444,9 @@
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
border-top-left-radius: $radius*2; background-size: cover;
border-top-right-radius: $radius*2; border-top-left-radius: $radius * 2;
border-top-right-radius: $radius * 2;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
@@ -431,7 +456,7 @@
.item-title { .item-title {
display: block; display: block;
border-top: 1px solid rgba(0,0,0,0.05); border-top: 1px solid rgba(0, 0, 0, 0.05);
background-color: white; background-color: white;
font-size: 18px; font-size: 18px;
width: 100%; width: 100%;
@@ -439,15 +464,15 @@
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
border-bottom-left-radius: $radius*2; border-bottom-left-radius: $radius * 2;
border-bottom-right-radius: $radius*2; border-bottom-right-radius: $radius * 2;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: $dark; color: $dark;
text-align: left; text-align: left;
} }
.thumbnail-loading { .thumbnail-loading {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@@ -464,11 +489,11 @@
} }
.item-meta { .item-meta {
border-top: 2px solid rgba(0,0,0,0.025); border-top: 2px solid rgba(0, 0, 0, 0.025);
border-radius: 2*$radius; border-radius: 2 * $radius;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
@include clearfix; @include clearfix;
color: $medium; color: $medium;
position: absolute; position: absolute;
@@ -493,8 +518,8 @@
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
position: relative; position: relative;
border-bottom-left-radius: $radius*2; border-bottom-left-radius: $radius * 2;
border-bottom-right-radius: $radius*2; border-bottom-right-radius: $radius * 2;
//white-space: nowrap; //white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -509,7 +534,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: $folder-gutter*2; right: $folder-gutter * 2;
color: $medium; color: $medium;
font-size: 11px; font-size: 11px;
font-family: $main-font; font-family: $main-font;