update templates, fixed docker-compose build

.gitignore

@@ -16,9 +16,9 @@ resources/js/*
 !resources/js/README.md
 src/sass/custom_chromakeying.css
 src/sass/custom_live_chromakeying.css
-src/sass/custom_style.scss
+# src/sass/custom_style.scss
 stats
-template/custom.template.php
+# template/custom.template.php
 trash
 vendor/simple-translator/
 .sass-cache

Dockerfile

@@ -14,6 +14,7 @@ WORKDIR /app
 COPY . .
 
 # Install and build
+RUN git config --global --add safe.directory /app 
 RUN git submodule update --init
 RUN yarn install
 RUN yarn build

config/config.inc.php

@@ -13,7 +13,7 @@
 $config['dev']['enabled'] = true;
 $config['dev']['demo_images'] = false;
 $config['dev']['advanced_log'] = false;
-$config['start_screen']['title'] = 'Photobooth';
+$config['start_screen']['title'] = 'Lachlachs';
 $config['start_screen']['title_visible'] = true;
 $config['start_screen']['subtitle'] = NULL;
 $config['start_screen']['subtitle_visible'] = true;
@@ -130,14 +130,14 @@
 $config['pswp']['counterEl'] = true;
 $config['pswp']['history'] = true;
 // show_date only works if picture naming  = 'dateformatted'
-$config['gallery']['show_date'] = true;
+$config['gallery']['show_date'] = false;
 $config['gallery']['date_format'] = 'd.m.Y - G:i';
 $config['gallery']['db_check_enabled'] = true;
 $config['gallery']['db_check_time'] = '10';
 $config['gallery']['allow_delete'] = true;
 $config['gallery']['scrollbar'] = false;
 $config['gallery']['bottom_bar'] = true;
-$config['gallery']['figcaption'] = true;
+$config['gallery']['figcaption'] = false;
 $config['pswp']['clickToCloseNonZoomable'] = false;
 $config['pswp']['closeOnScroll'] = false;
 $config['pswp']['closeOnOutsideClick'] = false;
@@ -311,15 +311,15 @@
 $config['ui']['result_buttons'] = true;
 $config['ui']['font_size'] = '16px';
 $config['colors']['countdown'] = '#ffffff';
-$config['colors']['background_countdown'] = '#214852';
+$config['colors']['background_countdown'] = '#2e2e2e';
 $config['colors']['cheese'] = '#ffffff';
 $config['background']['defaults'] = null;
 $config['background']['admin'] = null;
 $config['background']['chroma'] = null;
 $config['ui']['decore_lines'] = true;
 $config['ui']['rounded_corners'] = false;
-$config['colors']['primary'] = '#0a6071';
-$config['colors']['secondary'] = '#214852';
+$config['colors']['primary'] = '#2e2e2e';
+$config['colors']['secondary'] = '#0a6071';
 $config['colors']['font'] = '#79bad9';
 $config['colors']['button_font'] = '#ffffff';
 $config['colors']['start_font'] = '#ffffff';

docker-compose.yml

@@ -3,6 +3,9 @@ version: "3.9"
 services:
   photobooth:
     build: .
+    # privileged: true
+    devices:
+      - '/dev/bus/usb/005:/dev/bus/usb/005'
     volumes:
       - ./:/app
       - /app/resources/css/

src/js/core.js

@@ -1151,7 +1151,7 @@ const photoBooth = (function () {
         } else {
             api.thrill(PhotoStyle.PHOTO);
         }
-        $('.newpic').blur();
+        $('.newpic').trigger("blur");
     });
 
     $('.takeCollage, .newcollage').on('click', function (e) {
@@ -1163,7 +1163,7 @@ const photoBooth = (function () {
             api.thrill(PhotoStyle.COLLAGE);
         }
 
-        $('.newcollage').blur();
+        $('.newcollage').trigger("blur");
     });
 
     $('#mySidenav .closebtn').on('click', function (e) {

src/sass/custom_chromakeying.scss

@@ -0,0 +1,2 @@
+@import 'classic_chromakeying';
+@import 'partials/modern_button';

src/sass/custom_live_chromakeying.scss

@@ -0,0 +1,56 @@
+@import 'classic_live_chromakeying';
+@import 'partials/modern_button';
+
+.backgrounds {
+  border-radius: 4%;
+}
+
+.round-btn {
+  width: 4em;
+  height: 4em;
+}
+
+.gallerybtn {
+  position: fixed;
+  top: 1em;
+  left: 0;
+  z-index: 10;
+  margin: 10px;
+}
+
+.closebtn {
+  position: fixed;
+  top: 1em;
+  right: 0;
+  z-index: 10;
+  margin: 10px;
+}
+
+@media (max-width: 1280px) and (orientation: landscape) {
+  .takeChroma,
+  .reloadPage,
+  .deletebtn {
+    margin: auto;
+    display: inline-block;
+  }
+
+  .home,
+  .gallerybtn,
+  .closebtn {
+    position: relative;
+    top: 0;
+    max-width: 150px;
+  }
+}
+
+@media (max-height: 740px) and (orientation: landscape) {
+  .backgrounds {
+    &.shrinked {
+      height: 350px;
+    }
+  }
+}
+
+.pswp-rotary-focus {
+  background: radial-gradient(grey, $mainColor, $hoverColor) !important;
+}

src/sass/custom_style.scss

@@ -0,0 +1,154 @@
+@import 'classic_style';
+@import 'partials/modern_button';
+
+html,
+body {
+  height: 100%;
+  background: #ffffff;
+  margin: 0px;
+}
+
+#start {
+  .startInner {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    background: none;
+    .btn {
+      margin-top: 3px;
+      width: auto;
+    }
+  }
+
+  .fs-button {
+    position: relative;
+    top: auto;
+    bottom: 0px;
+    left: 0px;
+  }
+
+  .gallery-button {
+    position: relative;
+    top: auto;
+    bottom: 0px;
+    left: auto;
+  }
+
+  .cups-button {
+    &.round-btn {
+      position: fixed;
+      left: 0;
+      top: 0;
+      bottom: auto;
+      margin: 20px;
+    }
+  }
+}
+
+.homebtn {
+  &.round-btn {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: auto;
+    margin: 20px;
+  }
+}
+
+.resultInner {
+  display: block;
+  width: auto;
+  max-width: 90%;
+  position: fixed;
+  right: 0;
+  left: auto;
+  bottom: -15em;
+  top: auto;
+  justify-content: center;
+  transition: bottom 0.5s;
+  z-index: 100;
+  margin: 20px;
+  .round-btn {
+    display: inline-block;
+  }
+  &.show {
+    position: fixed;
+    bottom: 0;
+  }
+}
+
+.sidenav {
+  .closebtn {
+    width: 1.625em;
+    height: 1.625em;
+    margin: 0.3em;
+    background: radial-gradient(grey, $mainColor, $hoverColor);
+    color: $buttonFontColor;
+    .fa {
+      font-size: 0.8em;
+    }
+  }
+}
+
+.round-btn:active,
+.round-btn:focus,
+.round-btn:hover,
+.round-btn.focused,
+.gallery__close:active,
+.gallery__close:hover,
+.gallery__close:focus,
+.gallery__close.focused,
+.gallery__img:active > figure,
+.gallery__img:focus > figure,
+.gallery__img:hover > figure,
+.gallery__img.focused > figure,
+.gallery__img:active > img,
+.gallery__img:focus > img,
+.gallery__img:hover > img,
+.gallery__img.focused > img {
+  opacity: 0.6 !important;
+}
+
+.divaussen {
+  height: 100%;
+  position: relative;
+}
+
+.divinnen {
+  float: none;
+  width: 100%;
+}
+
+.divinnen2 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  padding: 10px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (orientation: portrait) {
+  .divinnen2 {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .round-btn {
+    width: 4em;
+    height: 4em;
+  }
+}
+
+.transparenz {
+  opacity: 0.4;
+}
+
+hr,
+hr.small {
+  display: none;
+}
+
+.pswp-rotary-focus {
+  background: radial-gradient(grey, $mainColor, $hoverColor) !important;
+}

src/sass/partials/_gallery.scss

@@ -47,11 +47,22 @@
     }
   }
 
+  &__footer {
+    width: 100%;
+    // position: absolute;
+    align-self: flex-end;
+    bottom: 0;
+    margin-top: auto;
+    display: flex;
+    justify-content: center;
+    background: $mainColor;
+  }
+
   &__body {
     display: flex;
     flex-wrap: wrap;
-    overflow-y: auto;
-    justify-content: center;
+    overflow-y: scroll;
+    justify-content: left;
 
     a {
       display: block;