WIP: Added image slider template

Author: thorsten

CHANGELOG

@@ -11,6 +11,7 @@ Version 2.10.0-alpha - 2017-05-
 - added configuration for enable/disable XML sitemap (Thorsten)
 - added support for category images (Thorsten)
 - added support for categories on startpage (Thorsten)
+- added image slider template (Thorsten)
 - improved REST/JSON API including login (Thorsten)
 - improved sticky records (Thorsten)
 - updated bundled Symfony ClassLoader to version 2.7.16 (Thorsten)
@@ -24,6 +25,7 @@ Version 2.10.0-alpha - 2017-05-
 - updated bundled HighlightJS to version 8.9.1 (Thorsten)
 - updated bundled Mermaid to version 6.0.0 (Thorsten)
 - updated bundled jQuery Sparklines to version 2.3.2 (Thorsten)
+- updated bundled TinyMCE to version 4.6.3 (Thorsten)
 - removed Bower, now using NPM only (Thorsten)
 
 Version 2.9.7 - 2017-04-02

package.json

@@ -13,7 +13,7 @@
     "jquery": "^3.1.0",
     "jquery-sparkline": "^2.3.2",
     "mermaid": "^6.0.0",
-    "tinymce": "^4.4.1",
+    "tinymce": "^4.6.3",
     "typeahead.js": "^0.11.1"
   },
   "devDependencies": {

phpmyfaq/admin/assets/templates/image-slider.html

@@ -0,0 +1,22 @@
+<div class="slider-container">
+  <div class="menu">
+    <label for="slide-dot-1"></label>
+    <label for="slide-dot-2"></label>
+    <label for="slide-dot-3"></label>
+  </div>
+
+  <input id="slide-dot-1" type="radio" name="slides" checked>
+  <div class="slide">
+    IMAGE
+  </div>
+
+  <input id="slide-dot-2" type="radio" name="slides">
+  <div class="slide">
+    IMAGE
+  </div>
+
+  <input id="slide-dot-3" type="radio" name="slides">
+  <div class="slide">
+    IMAGE
+  </div>
+</div>

phpmyfaq/admin/footer.php

@@ -142,6 +142,10 @@
             user_id: '<?php echo $user->userdata->get('user_id') ?>'
         },
 
+        templates: [
+            { title: 'Slider', description: 'phpMyFAQ Image Slider', url: 'assets/templates/image-slider.html' }
+        ],
+
         // File browser
         file_browser_callback: function(fieldName, url, type, win){
             var fileBrowser = 'image.browser.php';

phpmyfaq/assets/template/default/less/style.less

@@ -50,8 +50,9 @@
 //
 // Basic layout definition
 //
-body {
+html, body {
   font-size: 16px;
+  height: 100%;
   line-height: 27px;
   font-family: @font-family;
   color: @text;
@@ -674,7 +675,7 @@ hr {
   }
 
   .pmf-faq-body {
-    margin-top:20px;
+    margin-top: 20px;
     @media @large { padding-right: 30px; }
     .pmf-private-notes {
       background-color: lighten(@pmf-background, 10%);
@@ -884,3 +885,53 @@ aside.pmf-comments {
 // Mermaid CSS
 //
 @import (less)"../../../../../node_modules/mermaid/dist/mermaid.forest.css";
+
+//
+// Slider templates
+//
+.slider-container{
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+}
+
+.menu {
+  position: absolute;
+  left: 0;
+  z-index: 900;
+  width: 100%;
+  bottom: 0;
+}
+
+.menu label {
+  cursor: pointer;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border-radius: 50px;
+  margin: 0 .2em 1em;
+  &:hover {
+    background: red;
+  }
+}
+
+.slide {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  z-index: 10;
+  background-size: cover;
+  background-position: 50% 50%;
+  transition: left 0s .75s;
+}
+
+[id^="slide"]:checked + .slide {
+  left: 0;
+  z-index: 100;
+  transition: left .65s ease-out;
+}