showcase site template for V4.0.x

.gitignore

@@ -4,3 +4,14 @@
 */config/deploy.yml
 */TODO
 */dragonfly.log
+*/node_modules/*
+*/bundle/*
+*/public/fonts/*
+*/public/images/*
+*/public/javascripts/*
+*/public/stylesheets/*
+*/yarn.lock
+*/docky.yml
+*/dev.docker-compose.yml
+
+

README.md

@@ -61,4 +61,27 @@ Clean blog is a carefully styled Bootstrap blog theme that is perfect for person
 - fully responsive
 - build with the [Zurb foundation](http://foundation.zurb.com) framework
 
+## landing page
+
+### Source
+
+[https://github.com/EBII/site-templates/](https://github.com/EBII/site-templates/)
+
+### Description
+
+ One page site build with sections has in locomotivecms V4 and bootstrap4. 
+ All is editable in back office with section add to get more. 
+ Header & footer is global section present in all pages. 
+ Tree other sections available with some editable content: slider informations and activities. 
+ One content form for newsleter registration.
+
+ Use WebPack and need Wagon v3 
+        bundle install
+        wagon serve
+        yarn
+        yarn start (for dev) see guide in documentation https://doc.locomotivecms.com/v4.0/docs/manage-js-and-css-with-webpack
+### License & Author Details
+
+- [A-Gplv3] 
+- Designer: Eleonore Ampuy => eleonoreampuy dot com
 

landing-v4/Gemfile

@@ -0,0 +1,22 @@
+source 'https://rubygems.org'
+
+gem 'locomotivecms_wagon', '~> 3.0.0.rc0'
+
+group :development do
+  # Mac OS X
+  gem 'rb-fsevent', '~> 0.9.1', require: 'rb-fsevent' if RUBY_PLATFORM.include?('darwin')
+
+  # Unix
+  gem 'therubyracer', require: 'v8', platforms: :ruby unless RUBY_PLATFORM.include?('darwin')
+
+  gem 'rb-inotify', '~> 0.9', require: 'rb-inotify' if RUBY_PLATFORM.include?('linux')
+
+  # Windows
+  gem 'wdm', '~> 0.1.1', require: 'wdm' if RUBY_PLATFORM =~ /mswin|mingw/i
+end
+
+group :misc do
+  # Add your extra gems here
+  # gem 'susy', require: 'susy'
+  # gem 'bourbon', require: 'bourbon'
+end

landing-v4/Guardfile

@@ -0,0 +1,22 @@
+# LiveReload installation
+#
+# 1. Add the guard-livereload gem to your Gemfile OR uncomment the line:
+#
+#   gem 'guard-livereload'
+#
+# 2. Install the gem on your machine
+#
+#   bundle install
+#
+# 3. Launch Guard
+#
+#   bundle exec guard
+#
+
+guard 'livereload', host: '0.0.0.0', port: ENV['WAGON_LIVERELOAD_PORT'] || 35729, grace_period: 0.5 do
+  watch(%r{app/content_types/.+\.yml$})
+  watch(%r{app/views/.+\.liquid})
+  watch(%r{config/.+\.yml$})
+  watch(%r{data/.+\.yml$})
+  watch(%r{public/((stylesheets|javascripts)/(.+\.(css|js))).*}) { |m| "/#{m[1]}" }
+end

landing-v4/app/assets/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

landing-v4/app/assets/javascripts/app.js

@@ -0,0 +1,42 @@
+// === Wagon main javascript file ===
+
+// Tell Webpack to load the style
+import '../stylesheets/app.scss';
+
+require('bootstrap');
+
+// Import the classes required to handle sections
+import SectionsManager from './sections/_manager';
+import * as Sections from './sections';
+
+document.addEventListener('DOMContentLoaded', event => {
+
+  // Load all the sections
+  const sectionsManager = new SectionsManager();
+
+  // Register sections here. DO NOT REMOVE OR UPDATE THIS LINE
+
+  sectionsManager.start();
+
+});
+
+
+/*-------------- ANIMATION MENU BURGER ------------- */
+
+function openNav() {
+  hamburger.classList.add("is-active");
+  document.getElementById("popUpNav").style.display = "block";
+}
+
+function closeNav() {
+  hamburger.classList.remove("is-active");
+  //document.getElementById("popUpNav").style.display = "none";
+}
+
+// Hamburger Menu Spin
+// var hamburger = document.querySelector(".hamburger");
+var hamburger = document.getElementById("button-menu");
+
+hamburger.addEventListener('click', () => hamburger.classList.contains('is-active') ? closeNav() : openNav());
+
+closeNav();

landing-v4/app/assets/javascripts/sections/_manager.js

@@ -0,0 +1,94 @@
+class Manager {
+
+  constructor() {
+    this.sections = {};
+  }
+
+  registerSection(type, actions) {
+    console.log(type, actions);
+    this.sections[type] = actions;
+  }
+
+  start() {
+    this.eachType((type, actions) => {
+      this.queryAll(`.locomotive-section[data-locomotive-section-type="${type}"]`).forEach((section, index) => {
+        this.runAction(actions, 'load', section);
+      });
+    });
+    this.registerEvents();
+
+    window._sectionsManager = this;
+  }
+
+  registerEvents() {
+    const events = {
+      section: ['load', 'unload', 'select', 'deselect', 'reorder'],
+      block: ['select', 'deselect']
+    }
+
+    for (var namespace in events) {
+      events[namespace].forEach(eventType => {
+        const eventName = `locomotive::${namespace}::${eventType}`;
+        const actionName = this.eventTypeToActionName(namespace, eventType);
+
+        document.addEventListener(eventName, event => {
+          this.applyRuleToEvent(actionName, event);
+        });
+      });
+    }
+  }
+
+  applyRuleToEvent(actionName, event) {
+    const { sectionId, blockId } = event.detail;
+    const section   = document.getElementById(`locomotive-section-${sectionId}`);
+    const type      = section.getAttribute('data-locomotive-section-type');
+    const block     = this.queryOne(`[data-locomotive-block="section-${sectionId}-block-${blockId}"]`, section);
+
+    this.runAction(this.sections[type], actionName, section, block)
+  }
+
+  eventTypeToActionName(namespace, eventType) {
+    if (namespace === 'section')
+      return eventType;
+    else
+      return namespace + eventType.charAt(0).toUpperCase() + eventType.slice(1);
+  }
+
+  runAction(actions, actionName, section, block) {
+    const action = actions[actionName];
+
+    if (action !== undefined)
+      action(section, block);
+  }
+
+  eachType(callback) {
+    for (var type in this.sections) {
+      const actions = this.sections[type];
+      callback(type, actions)
+    }
+  }
+
+  queryAll(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelectorAll(selector);
+  }
+
+  queryOne(selector, scope) {
+    scope = scope ? scope : document;
+    return scope.querySelector(selector);
+  }
+
+  testAction(eventType, section, block) {
+    const hasBlock  = block !== undefined && block !== null ;
+    const namespace = hasBlock ? 'block' : 'section';
+    const sectionId = section.getAttribute('id').replace('locomotive-section-', '');
+    const blockId   = hasBlock ? block.getAttribute('data-locomotive-block').replace(`section-${sectionId}-block-`, '') : null;
+    const detail    = { detail: { sectionId, blockId } };
+    const eventName = `locomotive::${namespace}::${eventType}`;
+
+    document.dispatchEvent(new CustomEvent(eventName, detail));
+  }
+
+}
+
+export default Manager;

landing-v4/app/assets/javascripts/sections/index.js

@@ -0,0 +1,5 @@
+// Import all the sections here
+//
+// Example:
+// export { default as MyAwesomeSection } from './my_awesome_section';
+//

landing-v4/app/assets/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "template_artisan_section",
+  "version": "1.0.0",
+  "description": "Assets source for the template_artisan_section website",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack --config webpack.dev.js --progress --colors --watch",
+    "build:dev": "webpack --config webpack.dev.js --progress",
+    "build:prod": "NODE_ENV=production webpack --config webpack.prod.js --progress",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Wagon",
+  "license": "ISC",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "css-loader": "^0.28.11",
+    "mini-css-extract-plugin": "^0.4.0",
+    "node-sass": "^4.9.0",
+    "optimize-css-assets-webpack-plugin": "^4.0.2",
+    "postcss-flexbugs-fixes": "^3.3.1",
+    "postcss-loader": "^2.1.5",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.1",
+    "webpack-merge": "^4.1.4",
+    "file-loader": "^1.1.11",
+    "image-webpack-loader": "^4.3.0"
+  }
+}

landing-v4/app/assets/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')
+  ]
+}

landing-v4/app/assets/stylesheets/app.scss

@@ -0,0 +1,47 @@
+/* IMPORT DES FONTS */
+@font-face {
+  font-family: 'Amatic SC';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../fonts/amatic-sc-v12-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Amatic SC Regular'), local('AmaticSC-Regular'),
+       url('../fonts/amatic-sc-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../fonts/amatic-sc-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('../fonts/amatic-sc-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('../fonts/amatic-sc-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('../fonts/amatic-sc-v12-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
+}
+@font-face {
+  font-family: 'DIN Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('DIN Pro Bold'), local('DINPro-Bold'),
+       url('../fonts/DinProBold.ttf') format('truetype'),
+       url('../fonts/DinProBold.woff') format('woff'),
+       url('../fonts/DINProBold.woff2') format('woff2');
+  src: local('DIN pro Regular'), local('DINPro-Regular'),
+       url('../fonts/DinProRegular.ttf') format('truetype'),
+       url('../fonts/DinProRegular.woff') format('woff'),
+       url('../fonts/din-pro-regular.woff2') format('woff2');
+}
+
+/* IMPORT DES DEPENDANCES */
+@import "~bootstrap/scss/bootstrap";
+@import "~hamburgers/_sass/hamburgers/hamburgers";
+
+/* IMPORT DU CSS */
+@import "components/nav";
+@import "components/footer";
+@import "components/image";
+@import "components/carousel";
+@import "components/informations";
+@import "components/activites";
+
+.container-fluid {
+  padding: 0 0 0 0;
+}
+
+/* Disable horizontal scroll */
+body {
+ overflow-x: hidden;
+}

landing-v4/app/assets/stylesheets/components/_activites.scss

@@ -0,0 +1,52 @@
+/* ----------------- CSS ACTIVITES ----------------*/
+
+/* ----------------- VERSION DESKTOP --------------- */
+.container-activites {
+	text-align: center;
+	margin-top: 50px;
+	margin-bottom: 50px;
+	padding: 50px 0 50px 0;
+
+	.bloc-activite {
+
+		.img-activites {
+			height: 220px;
+		}
+
+		.nom-activites {
+			margin: 20px 0 0 0;
+			font-family: DIN Pro;
+			font-weight: bold;
+			font-size: 30px;
+		}
+		.link {
+			padding: 10px 0 0 0;
+
+			.lien-je-decouvre {
+				color: #f46b16;
+				font-size: 18px;
+				padding: 10px 0 0 0;
+				text-decoration: none;
+			}
+
+		}
+	}
+}
+
+
+/* ----------------- VERSION MOBILE ---------------- */
+@media only screen and (max-width: 600px ) {
+
+	.img-activites {
+		height: 150px !important;
+	}
+
+	.nom-activites {
+		font-size: 25px !important;
+	}
+
+	#description-societe {
+		font-size: 14px !important;
+	}
+
+}