Added Floating panel to switch data

This commit is contained in:
2022-04-22 20:36:39 +03:00
parent ef6fb7344a
commit 968d4e79f6
16 changed files with 148 additions and 50 deletions
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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);"]}
+3 -1
View File
@@ -1,5 +1,7 @@
(function ($) {
console.log('Ready!', $);
console.log('Ready!');
console.log('jQuery =', $);
console.log('Swiper =', window.Swiper);
})(window.jQuery);
+6 -2
View File
@@ -5,9 +5,13 @@
* Use BEM naming system for class names: http://getbem.com/naming/
*
* Use Mobile First approach.
* Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).
*
*/
.clients {
background-color: red;
.template {
padding: 1rem;
}
.template__header {
border-bottom: 2px solid green;
}
/*# sourceMappingURL=template.min.css.map */
+1 -1
View File
@@ -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}"]}
+1 -1
View File
@@ -35,7 +35,7 @@
}
&__header {
border-bottom: 2px solid red;
border-bottom: 2px solid green;
&-heading {
// Heading
+5 -1
View File
@@ -4,6 +4,10 @@
</header>
<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>
</section>