Added Floating panel to switch data
This commit is contained in:
@@ -43,10 +43,10 @@ All the template layout must be in a single `*.hbs` file that located in `/src`
|
|||||||
|
|
||||||
### Data
|
### Data
|
||||||
|
|
||||||
In `/data` folder, you can find multiple `*.json` files.
|
You will find multiple `*.json` files in `/data` folder after the first run of `npm start`.
|
||||||
|
|
||||||
These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
|
These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
|
||||||
how the data is stored.
|
how the data is stored. Don't change or edit these files - use the data as it is.
|
||||||
|
|
||||||
There are multiple data sources since the block can be reused in different situations with different data. We have to
|
There are multiple data sources since the block can be reused in different situations with different data. We have to
|
||||||
make sure that the block is always rendered properly.
|
make sure that the block is always rendered properly.
|
||||||
@@ -73,10 +73,32 @@ aspect ratio.
|
|||||||
|
|
||||||
### Global Styling
|
### Global Styling
|
||||||
|
|
||||||
The development environment includes CSS rules of the original project. The CSS file is embedded in served HTML.
|
The development environment includes CSS rules of the original project. This is including fonts, CSS variables,
|
||||||
|
container logic etc...
|
||||||
|
|
||||||
|
The CSS file is embedded in served HTML.
|
||||||
|
|
||||||
|
# JavaScript
|
||||||
|
|
||||||
|
## Sliders
|
||||||
|
|
||||||
|
For any kind of slides animations - use [SwiperJS](https://swiperjs.com/get-started).
|
||||||
|
|
||||||
|
The lib is included in the project and ready for use. Test with `window.Swiper` in browser console.
|
||||||
|
|
||||||
# Testing
|
# Testing
|
||||||
|
|
||||||
## Development Toolbar
|
## Development Toolbar
|
||||||
|
|
||||||
Use development toolbar to switch between data sources and test responsiveness of block.
|
Use development toolbar to switch between data sources and test responsiveness of block.
|
||||||
|
|
||||||
|
## Pixel Perfect Test
|
||||||
|
|
||||||
|
Compare the final result with provided screenshots.
|
||||||
|
|
||||||
|
You can use
|
||||||
|
available [Browser Extensions](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)
|
||||||
|
or any other tool/approach that you're familiar with.
|
||||||
|
|
||||||
|
The idea is to have "pretty close" result to requested design.
|
||||||
|
|
||||||
|
|||||||
+10
-11
@@ -1,19 +1,18 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ config.cssUrl }}">
|
{{> layouts/partials/head }}
|
||||||
<link rel="stylesheet" href="styles/template.min.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="container">
|
{{> layouts/partials/toolbar }}
|
||||||
{{> src/template }}
|
|
||||||
</div>
|
<main>
|
||||||
|
<div class="container">
|
||||||
|
{{> src/template }}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{> layouts/partials/scripts }}
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
|
||||||
<script src="scripts/template.min.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+8
-9
@@ -1,17 +1,16 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ config.cssUrl }}">
|
{{> layouts/partials/head }}
|
||||||
<link rel="stylesheet" href="styles/template.min.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
{{> src/template }}
|
{{> layouts/partials/toolbar }}
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{{> src/template }}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{{> layouts/partials/scripts }}
|
||||||
|
|
||||||
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
|
||||||
<script src="scripts/template.min.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="{{ config.cssUrl }}">
|
||||||
|
<link rel="stylesheet" href="styles/page--main.css">
|
||||||
|
<link rel="stylesheet" href="styles/template.min.css">
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
|
||||||
|
</head>
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
|
||||||
|
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
|
||||||
|
<script src="scripts/page--toolbar.js"></script>
|
||||||
|
<script src="scripts/template.min.js"></script>
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
<header class="page_toolbar">
|
||||||
|
<div>
|
||||||
|
<label for="data-options">Data Options: </label>
|
||||||
|
|
||||||
|
<select name="data" id="data-options">
|
||||||
|
{{#each config.dataFiles }}
|
||||||
|
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
|
||||||
|
{{/each}}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
(function () {
|
||||||
|
|
||||||
|
const dataOptionsSelect = document.getElementById('data-options');
|
||||||
|
if (!dataOptionsSelect) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
dataOptionsSelect.addEventListener('change', function () {
|
||||||
|
console.log(this.value)
|
||||||
|
window.location = '?data=' + this.value;
|
||||||
|
})
|
||||||
|
|
||||||
|
})();
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.page_toolbar {
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
background-color: #ccc;
|
||||||
|
padding: 1rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header.page_toolbar select {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
import express from 'express';
|
import express from 'express';
|
||||||
import {create} from 'express-handlebars';
|
import {create} from 'express-handlebars';
|
||||||
import fs from 'fs-extra';
|
import fsExtra from 'fs-extra';
|
||||||
import browserSync from 'browser-sync';
|
import browserSync from 'browser-sync';
|
||||||
import config from 'config';
|
import config from 'config';
|
||||||
import gulp from 'gulp';
|
import gulp from 'gulp';
|
||||||
@@ -12,13 +12,15 @@ import rename from "gulp-rename";
|
|||||||
import dartSass from 'sass';
|
import dartSass from 'sass';
|
||||||
import gulpSass from 'gulp-sass';
|
import gulpSass from 'gulp-sass';
|
||||||
import sourcemaps from "gulp-sourcemaps";
|
import sourcemaps from "gulp-sourcemaps";
|
||||||
|
import fs from "fs/promises";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constants
|
* Constants
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const isDev = config.get('mode') === 'development';
|
const isDev = config.get('mode') === 'development';
|
||||||
const projectDir = isDev ? '.' : './node_modules/axe-web-component';
|
const modulePath = './node_modules/axe-web-component';
|
||||||
|
const projectDir = isDev ? '.' : modulePath;
|
||||||
console.log('Development Mode:', isDev);
|
console.log('Development Mode:', isDev);
|
||||||
|
|
||||||
const sass = gulpSass(dartSass);
|
const sass = gulpSass(dartSass);
|
||||||
@@ -30,8 +32,7 @@ const sass = gulpSass(dartSass);
|
|||||||
const app = express();
|
const app = express();
|
||||||
|
|
||||||
const hbs = create({
|
const hbs = create({
|
||||||
extname: '.hbs', defaultLayout: false,
|
extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
|
||||||
partialsDir: ['.'],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
app.engine('.hbs', hbs.engine);
|
app.engine('.hbs', hbs.engine);
|
||||||
@@ -39,15 +40,29 @@ app.set('view engine', '.hbs');
|
|||||||
app.set('views', projectDir + '/layouts');
|
app.set('views', projectDir + '/layouts');
|
||||||
|
|
||||||
app.get('/', async (req, res) => {
|
app.get('/', async (req, res) => {
|
||||||
const jsonFileName = (req.query.data) ? req.query.data : 'default';
|
let dataFiles = await fs.readdir('./data');
|
||||||
const data = await fs.readJson(`./data/${jsonFileName}.json`);
|
dataFiles = dataFiles
|
||||||
|
.filter((fileName) => fileName.split('.').pop() === 'json')
|
||||||
|
.map((fileName) => {
|
||||||
|
const splitName = fileName.split('.');
|
||||||
|
splitName.pop();
|
||||||
|
const name = splitName.join('');
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
active: (req.query.data) && req.query.data === name,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
Object.assign(data, {config});
|
const jsonFileName = (req.query.data) ? req.query.data : 'default';
|
||||||
|
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
|
||||||
|
|
||||||
|
Object.assign(data, {config}, {config: {projectDir, dataFiles}});
|
||||||
|
|
||||||
res.render('page-container', data);
|
res.render('page-container', data);
|
||||||
});
|
});
|
||||||
|
|
||||||
app.use(express.static('src'));
|
app.use(express.static('src'));
|
||||||
|
app.use(express.static('layouts'));
|
||||||
|
|
||||||
const listener = app.listen(0, () => {
|
const listener = app.listen(0, () => {
|
||||||
const PORT = listener.address().port;
|
const PORT = listener.address().port;
|
||||||
@@ -56,16 +71,12 @@ const listener = app.listen(0, () => {
|
|||||||
|
|
||||||
const bs = browserSync.create();
|
const bs = browserSync.create();
|
||||||
|
|
||||||
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'],
|
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
|
||||||
{delay: 400},
|
|
||||||
gulp.series([buildScriptFiles, function (cb) {
|
|
||||||
browserSyncReload(bs, 'js', 'Script Files Change');
|
browserSyncReload(bs, 'js', 'Script Files Change');
|
||||||
return cb();
|
return cb();
|
||||||
}]));
|
}]));
|
||||||
|
|
||||||
gulp.watch('src/**/*.scss',
|
gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
|
||||||
{delay: 400},
|
|
||||||
gulp.series([buildStyleFiles, function (cb) {
|
|
||||||
browserSyncReload(bs, 'css', 'Style Files Change');
|
browserSyncReload(bs, 'css', 'Style Files Change');
|
||||||
return cb();
|
return cb();
|
||||||
}]));
|
}]));
|
||||||
|
|||||||
Vendored
+1
-1
@@ -1,2 +1,2 @@
|
|||||||
!function(o){console.log("Ready!",o)}(window.jQuery);
|
!function(o){console.log("Ready!"),console.log("jQuery =",o),console.log("Swiper =",window.Swiper)}(window.jQuery);
|
||||||
//# sourceMappingURL=template.min.js.map
|
//# sourceMappingURL=template.min.js.map
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,SAAUF,GAF1B,CAIGG,OAAOC","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!', $);\n\n})(window.jQuery);"]}
|
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJnC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!');\n console.log('jQuery =', $);\n console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);"]}
|
||||||
@@ -1,5 +1,7 @@
|
|||||||
(function ($) {
|
(function ($) {
|
||||||
|
|
||||||
console.log('Ready!', $);
|
console.log('Ready!');
|
||||||
|
console.log('jQuery =', $);
|
||||||
|
console.log('Swiper =', window.Swiper);
|
||||||
|
|
||||||
})(window.jQuery);
|
})(window.jQuery);
|
||||||
Vendored
+6
-2
@@ -5,9 +5,13 @@
|
|||||||
* Use BEM naming system for class names: http://getbem.com/naming/
|
* Use BEM naming system for class names: http://getbem.com/naming/
|
||||||
*
|
*
|
||||||
* Use Mobile First approach.
|
* Use Mobile First approach.
|
||||||
|
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
.clients {
|
.template {
|
||||||
background-color: red;
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.template__header {
|
||||||
|
border-bottom: 2px solid green;
|
||||||
}
|
}
|
||||||
/*# sourceMappingURL=template.min.css.map */
|
/*# sourceMappingURL=template.min.css.map */
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n *\n */\n\n.clients {\n background-color: red;\n //color: white;\n\n &__sub_level {\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n }\n\n &__sub_level_two {\n //\n }\n}"]}
|
{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;AAwBA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n * Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).\n *\n */\n\n.template {\n padding: 1rem;\n\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n &__header {\n border-bottom: 2px solid green;\n\n &-heading {\n // Heading\n }\n }\n\n &__content {\n // Content\n }\n}"]}
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
border-bottom: 2px solid red;
|
border-bottom: 2px solid green;
|
||||||
|
|
||||||
&-heading {
|
&-heading {
|
||||||
// Heading
|
// Heading
|
||||||
|
|||||||
+5
-1
@@ -4,6 +4,10 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="template__content">
|
<div class="template__content">
|
||||||
<p>Review the `/data` folder with JSON data files.</p>
|
<p>
|
||||||
|
Review the `/data` folder with JSON data files.<br>
|
||||||
|
Don't change data JSON files - use the data as it is.
|
||||||
|
</p>
|
||||||
|
<p>Build the layout based on provided data structure.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
Reference in New Issue
Block a user