little better

Makefile

@@ -1,5 +1,12 @@
 BUILDDIR?=../ungleich-staticcms-build
-DESTINATION=ungleichstatic@staticweb.ungleich.ch:/home/services/www/ungleichstatic/staticcms.ungleich.ch/www/u/
+BRANCH := $(shell git rev-parse --abbrev-ref HEAD)
+
+ifeq ($(BRANCH), "master")
+	DESTINATION=ungleichstatic@staticweb.ungleich.ch:/home/services/www/ungleichstatic/staticcms.ungleich.ch/www/u/
+else
+	DESTINATION=ungleichstatic@staticweb.ungleich.ch:/home/services/www/ungleichstatic/staticcms-staging.ungleich.ch/www/u/
+endif
+
 
 all: publish
 

content/u/products/video-conference/contents.lr

@@ -4,13 +4,17 @@ _hidden: no
 ---
 title: Video Conference Call
 ---
-subtitle: Free, Open Source and sustainable Video Conference 
+subtitle:
+
+Free, Open Source and sustainable Video Conference 
 ---
 image: /u/image/cards/videoconf.jpg
 ---
 headline1: Secure & Free
 ---
-headline2: Video Conference 
+headline2:
+
+Video Conference 
 ---
 header_background_color: #095fce
 ---
@@ -35,4 +39,42 @@ Use our free video conference to call the ones you need to talk to. Wherever you
 
 ---
 content1_image: /u/image/jitsi-ungleich.jpg
----
+---
+slide:
+
+#### slide ####
+title: Online Video Conferencing
+----
+description: We would provide you excellent open source tools that would help you get started with online video conferencing
+----
+button_text: Click Me
+----
+button_link: https://www.google.com
+----
+background_image: 
+----
+video_mp4: video-chat.mp4
+#### slide ####
+title: Online Video Conferencing For Education
+----
+description: Whether, you are a Student or a Teacher, with our remote video conferencing you can collaborate easily
+----
+button_text: Click Me
+----
+button_link: http://www.google.com
+----
+background_image: video-call.jpg
+----
+video_mp4: 
+#### slide ####
+title: Jitsi
+----
+description: A very reasonable open source video conferencing tool
+----
+button_text: Click Me
+----
+button_link: https://google.com
+----
+background_image: jitsi.jpg
+----
+video_mp4: 

flowblocks/slide.ini

@@ -0,0 +1,27 @@
+[block]
+name = Slide
+button_label = Slide
+
+[fields.title]
+label = Title
+type = string
+
+[fields.description]
+label = Description
+type = string
+
+[fields.button_text]
+label = Button Text
+type = string
+
+[fields.button_link]
+label = Button Link
+type = url
+
+[fields.background_image]
+label = Background Image
+type = text
+
+[fields.video_mp4]
+label = Video MP4
+type = text

models/page-2020.ini

@@ -18,6 +18,3 @@ type = markdown
 label = Image
 type = url
 
-[fields.slider]
-type = flow
-flow_blocks = slider

models/product.ini

@@ -181,3 +181,7 @@ type = url
 [fields.image]
 label = Index Image
 type = url
+
+[fields.slide]
+type = flow
+flow_blocks = slide

templates/blocks/slide.html

@@ -0,0 +1,23 @@
+<!-- active -->
+<div class="carousel-item">
+  {% if this.video_mp4 %}
+  <video autoplay muted loop>
+    <source src="{{ this.video_mp4 }}" type="video/mp4">
+  </video>
+  {% elif this.background_image %}
+  <img src="{{ this.background_image }}" class="d-block w-100" alt="...">
+  {% endif %}
+  <div class="container">
+    <div class="carousel-caption">
+      <h3 class="display-4">{{ this.title }}</h3>
+      <p class="lead">
+        {{ this.description }}
+        <br>
+        <a href="{{ this.button_link }}" class="btn btn-primary btn-lg" role="button" aria-pressed="true">
+          {{ this.button_text }}
+        </a>
+      </p>
+    </div>
+  </div>
+</div>
+

templates/blocks/slider.html

@@ -1,3 +0,0 @@
-<div class="text-block text-block-{{ this.class }}">
-  {{ this.text }}
-</div>

templates/layout-2020.html

@@ -41,6 +41,56 @@
     </script>
     <!-- End Google Analytics -->
 
+    <style>
+      video{
+        width:100%;
+        object-fit: cover;
+      }
+
+    .carousel-caption {
+        right: 5%;
+        text-align: right;
+        left: auto;
+        padding:5px;
+    }
+
+    /* Extra small devices (portrait phones, less than 576px) */
+    @media (max-width: 575.98px) {
+      .carousel-item img, video {
+        height: 280px;
+      }
+    }
+
+    /* Small devices (landscape phones, 576px and up) */
+    @media (min-width: 576px) and (max-width: 767.98px) {
+      .carousel-item img, video {
+        height: 300px;
+      }
+    }
+
+    /* Medium devices (tablets, 768px and up) */
+    @media (min-width: 768px) and (max-width: 991.98px) {
+      .carousel-item img, video {
+        height: 400px;
+      }
+    }
+
+    /* Large devices (desktops, 992px and up) */
+    @media (min-width: 992px) and (max-width: 1199.98px) {
+      .carousel-item img, video {
+        height: 450px;
+      }
+    }
+
+    /* Extra large devices (large desktops, 1200px and up) */
+    
+    @media (min-width: 1200px) {
+      .carousel-item img, video {
+        height: 900px;
+      }
+    }
+
+    </style>
   </head>
   <body>
     {% if this.header_background_color %}
@@ -104,8 +154,33 @@
     If headline1/2/3 given, take the headline.
     Else default to boxed title + subtitle
     #}
+    
+    {% if this.slide %}
+    <!-- Start of Slider -->
+    <div id="head-carousel" class="carousel slide" data-ride="carousel">
+      <ol class="carousel-indicators">
+        {% for slide in this.slide.blocks %}
+          {% if loop.index0 == 0 %}<li data-target="#head-carousel" data-slide-to="0" class="active"></li>{% else %}<li data-target="#head-carousel" data-slide-to="{{ loop.index0 }}"></li>{% endif %}
+        {% endfor %}
+      </ol>
+      <div class="carousel-inner">
+        {{ this.slide }}
+      </div>
+      <div class="d-none d-sm-none d-md-block">
+        <a class="carousel-control-prev" href="#head-carousel" role="button" data-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="sr-only">Previous</span>
+        </a>
+        <a class="carousel-control-next" href="#head-carousel" role="button" data-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="sr-only">Next</span>
+        </a>
+      </div>
+      
+    </div>
+    <!-- End of Slider-->
 
-    {% if this.headline1 or this.headline2 or this.headline3 %}
+    {% elif this.headline1 or this.headline2 or this.headline3 %}
     <div class="jumbotron jumbotron-fluid" style="background-color: {{this.header_background_color}};">
       <div class="container-fluid">
           <h1 class="display-1 generic-header {{this.header_text_color}}" style="font-weight: bolder;">
@@ -154,5 +229,8 @@
             src="/u/static/popper.js-1.16.0/dist/esm/popper.min.js"></script>
     <script type="text/javascript"
             src="/u/static/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
+    <script type="text/javascript">
+      $("div.carousel-item")[0].classList += " active";
+    </script>
   </body>
 </html>