Merge pull request #32 from matmair/feature-carousel

Feature carousel

_includes/app_carousel.html

@@ -1,26 +0,0 @@
-<section id='image-carousel' class='splide'>
-    <div class='splide__track'>
-        <ul class='splide__list' style='list-style-type: none; list-style: none;'>
-        {% for image in site.static_files %}
-            {% if image.path contains 'appgallery/' %}
-            <li class='splide__slide'>
-                <img src="{{ image.path | relative_url }}" alt="" />
-            </li>
-            {% endif %}
-        {% endfor %}
-        </ul>
-    </div>
-</section>
-
-<script>
-document.addEventListener( 'DOMContentLoaded', function () {
-    new Splide('#image-carousel', {
-        type: 'loop',
-        perPage: 3,
-        autoPlay: true,
-        pagination: false,
-        // pagination: false,
-        // focus: 'center',
-    }).mount();
-});
-</script>

_includes/block/hero.html

@@ -26,6 +26,35 @@
         {% if include.image %}
         <img class="object-cover object-center rounded" alt="hero" src="{{ include.image }}">
         {% endif %}
+        {% if include.gallery %}
+        <section id='image-carousel' class='splide'>
+          <div class='splide__track'>
+              <ul class='splide__list' style='list-style-type: none; list-style: none;'>
+              {% for image in site.static_files %}
+                  {% if image.path contains include.gallery %}
+                  <li class='splide__slide'>
+                      <img src="{{ image.path | relative_url }}" alt="" />
+                  </li>
+                  {% endif %}
+              {% endfor %}
+              </ul>
+          </div>
+      </section>
+      {% endif %}
       </div>
     </div>
-</section>
+</section>
+
+{% if include.gallery %}
+<script>
+  document.addEventListener( 'DOMContentLoaded', function () {
+      new Splide('#image-carousel', {
+          type: 'loop',
+          perMove: 1,
+          perPage: {% if include.perPage %}{{ include.perPage }}{% else %}1{% endif %},
+          autoPlay: true,
+          pagination: false,
+      }).mount();
+  });
+  </script>
+{% endif %}

extend/app.md

@@ -1,14 +1,12 @@
 ---
+layout: default
 title: InvenTree Mobile App
 ---
 
-
-The InvenTree Mobile App brings stock control to your pocket. Integrating seamlessly with the [InvenTree API](../extend/api.md), the app provides immediate access to inventory data without requiring physical access to a computer.
+{% include block/hero.html title='Mobile stock control' title_2='in the' color='palm of your hand' gallery='appgallery/' perPage=3 detail='The InvenTree Mobile App brings stock control to your pocket. Integrating seamlessly with the InvenTree API, the app provides immediate access to inventory data wherever you are.' %}
 
 Native barcode support provides a multitude of context-sensitive stock control actions, allowing streamlined inventory management at your fingertips. The app has been optimized for speed, providing instant access to stock knowledge and handy on-site functionality.
 
-{% include app_carousel.html %}
-
 ### Features
 
 Core app features include:

functions.md

@@ -3,8 +3,7 @@ layout: default
 permalink: /functions
 ---
 
-{% include block/hero.html title='A wealth of functions' title_2='is provided' image='https://dummyimage.com/860x600' color='by default with InvenTree' detail='By default InvenTree ships with a lot of functions in the area of part, inventory, supplier, manufacturer, machine and BOM managment.
-It also enables reports, is extendible and can be extended with plugins.' %}
+{% include block/hero.html title='A wealth of functions' title_2='provided' gallery='webgallery/' color='out of the box' detail='InvenTree ships with a wide range of functions for managing parts, inventory, supplier and manufacturer data, machine and BOM managment <em>and so much more</em>!<br>It also enables reports, can be integrated with external applications and can be extended with plugins.' %}
 
 {% include block/functions.html data=site.data.functions.general extend=true no_link=true padding=false %}
 {% include block/functions.html data=site.data.functions.extras extend=true padding=false %}