Upgrade puppeteer to version 8.0.0

space thumbnails background-size: cover

helpers/exporter.js

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

package.json

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

styles/folder.scss

@@ -3,11 +3,16 @@
 @import "unicode";
 
 @-webkit-keyframes appear {
-  0% { opacity: 0;}
-  30% { opacity: 0;}
-  100%   { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  30% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-
 
 .avatar {
   background-color: $blue;
@@ -26,7 +31,9 @@
 #user-root {
   margin-left: 5px !important;
   padding: 0px !important;
-  .btn {margin-right: 10px; }
+  .btn {
+    margin-right: 10px;
+  }
 }
 
 #sidebar.folder-sidebar {
@@ -70,7 +77,9 @@
   li {
     display: inline-block;
     line-height: 44px;
-    &.active span {color: $light; }
+    &.active span {
+      color: $light;
+    }
     span {
       color: $medium;
       display: inline-block;
@@ -82,8 +91,6 @@
   }
 }
 
-
-
 #folder {
   position: absolute;
   height: 100%;
@@ -150,7 +157,7 @@
       width: 100%;
     }
     > .icon {
-      margin-left: -15px
+      margin-left: -15px;
     }
   }
 
@@ -212,15 +219,22 @@
   margin: auto;
 }
 
-
 #folder-grid .item {
   float: left;
   width: 100%;
 
-  @media screen and (min-width: 640px)  {width: 50%; }
-  @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%; }
+  @media screen and (min-width: 640px) {
+    width: 50%;
+  }
+  @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 {
@@ -265,7 +279,9 @@
 
     cursor: pointer;
 
-   .folder-drop {display:none; }
+    .folder-drop {
+      display: none;
+    }
 
     &.appear > a,
     &.creating > a {
@@ -349,7 +365,13 @@
           background-color: $darker;
           position: absolute;
           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;
           pointer-events: none;
         }
@@ -394,7 +416,9 @@
       background-color: white;
       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);
       border: 1px solid black;
@@ -420,6 +444,7 @@
         overflow: hidden;
 
         background-color: transparent;
+        background-size: cover;
         border-top-left-radius: $radius * 2;
         border-top-right-radius: $radius * 2;