Minor updates

app/client/src/scss/_components/_ui.bootstrap.scss

@@ -0,0 +1,35 @@
+// Bootstrap
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+@import "_ui.carousel";

app/client/src/scss/_components/_ui.carousel.scss

@@ -1,8 +1,13 @@
+/*
+ * Bootstrap carousel improvement
+ */
+
 .carousel-control-prev,
 .carousel-control-next {
     z-index: 2;
     font-size: 3rem;
     text-shadow: 1px 1px #000;
+
     &:hover,
     &:focus {
         background: rgba(0, 0, 0, 0.6);

app/client/src/scss/_components/_ui.elemental.scss

@@ -0,0 +1,28 @@
+/*
+ * Basic styles for silverstripe-elemental
+ */
+
+// hide default page title cuz elemental object will be used to display titles
+h1 {
+    display: none;
+}
+
+// add top/bottom paddings for basic elements
+.page-content > .element {
+    position: relative;
+    padding: ($grid-gutter-height / 2) 0;
+
+    // remove paddings of the slideshow
+    &.dynamic__elements__image__elements__elementimage,
+    &.dynamic__elements__flexslider__elements__elementslideshow {
+        padding: 0;
+    }
+}
+
+// remove container paddings for the slideshow
+.dynamic__elements__image__elements__elementimage,
+.dynamic__elements__flexslider__elements__elementslideshow {
+    .container-fluid {
+        padding: 0;
+    }
+}

app/client/src/scss/_components/_ui.fontawesome.scss

@@ -0,0 +1,3 @@
+$fa-font-path: "~font-awesome/fonts";
+
+@import "~font-awesome/scss/font-awesome";

app/client/src/scss/_components/_ui.lightbox.scss

@@ -0,0 +1,5 @@
+$lightbox-breakpoint: map-get($grid-breakpoints, "sm");
+$lightbox-link-hover-color: $link-hover-color;
+
+@import "~meta-lightbox/scss/meta-lightbox";
+@import "~meta-lightbox/scss/meta-lightbox-theme";

app/client/src/scss/_components/_ui.main.scss

@@ -0,0 +1,63 @@
+/*
+ * some basic styles
+ */
+
+// don't let images be wider than the parent layer
+iframe,
+img {
+    max-width: 100%;
+}
+
+a:hover,
+a:focus {
+    opacity: .8;
+
+    .fas,
+    .fab,
+    &.fas,
+    &.fab {
+        transform: rotate(-180deg);
+    }
+}
+
+// transactions
+.transition,
+a, a img,
+a .fas, a .fab,
+a.fas, a.fab,
+button, input, optgroup, select, textarea,
+.btn,
+.alert,
+.dropdown,
+[data-target],
+.container,
+.container-fluid,
+.row,
+[class="col-*"] {
+    transition: all 0.4s ease;
+}
+
+// stick navbar to top using mobile layout
+#Header {
+    position: relative;
+    padding-top: $grid-gutter-height / 2;
+    padding-bottom: 1rem;
+
+    @media (min-width: map-get($grid-breakpoints, "lg")) {
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}
+
+#Navigation {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+
+    @media (min-width: map-get($grid-breakpoints, "lg")) {
+        position: relative;
+        margin-top: 1rem;
+    }
+}

app/client/src/scss/app.scss

@@ -1,141 +1,13 @@
 // Your custom variables
 @import "_variables";
 
-// Bootstrap
+@import "_components/_ui.bootstrap";
-@import "~bootstrap/scss/root";
+@import "_components/_ui.fontawesome";
-@import "~bootstrap/scss/reboot";
+@import "_components/_ui.lightbox";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/custom-forms";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/jumbotron";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/print";
 
-// Fontawesome
+@import "_components/_ui.main";
-$fa-font-path: "~font-awesome/fonts";
+@import "_components/_ui.elemental";
 
-@import "~font-awesome/scss/font-awesome";
+// Your custom styling
-
-// Extra modules
-$lightbox-breakpoint: map-get($grid-breakpoints, "sm");
-$lightbox-link-hover-color: $link-hover-color;
-
-@import "~meta-lightbox/scss/meta-lightbox";
-@import "~meta-lightbox/scss/meta-lightbox-theme";
-@import "_components/ui.carousel";
-
-/*
- * some basic styles
- */
-
-// hide default page title cuz elemental object will be used to display titles
-h1 {
-    display: none;
-}
-
-// don't let images be wider than the parent layer
-iframe,
-img {
-    max-width: 100%;
-}
-
-a:hover,
-a:focus {
-    opacity: .8;
-
-    .fas,
-    .fab,
-    &.fas,
-    &.fab {
-        transform: rotate(-180deg);
-    }
-}
-
-// transactions
-.transition,
-a, a img,
-a .fas, a .fab,
-a.fas, a.fab,
-button, input, optgroup, select, textarea,
-.btn,
-.alert,
-.dropdown,
-[data-target],
-.container,
-.container-fluid,
-.row,
-[class="col-*"] {
-    transition: all 0.4s ease;
-}
-
-// stick navbar to top using mobile layout
-#Header {
-    position: relative;
-    padding-top: $grid-gutter-height / 2;
-    padding-bottom: 1rem;
-
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-        padding-top: 1rem;
-        padding-bottom: 0;
-    }
-}
-
-#Navigation {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-
-    @media (min-width: map-get($grid-breakpoints, "lg")) {
-        position: relative;
-        margin-top: 1rem;
-    }
-}
-
-// add top/bottom paddings for basic elements
-.page-content > .element {
-    position: relative;
-    padding: ($grid-gutter-height / 2) 0;
-
-    // remove paddings of the slideshow
-    &.dynamic__elements__image__elements__elementimage,
-    &.dynamic__elements__flexslider__elements__elementslideshow {
-        padding: 0;
-    }
-}
-
-// remove container paddings for the slideshow
-.dynamic__elements__image__elements__elementimage,
-.dynamic__elements__flexslider__elements__elementslideshow {
-    .container-fluid {
-        padding: 0;
-    }
-}
-
-// Your custom UI
 @import "_typography";
 @import "_layout";

app/templates/Includes/FlexSlider.ss

@@ -1,5 +1,5 @@
 <% if $SlideShow %>
-    <div id="Carousel{$ID}" class="carousel slide js-carousel" data-indicators="true" data-arrows="true">
+    <div id="Carousel{$ID}" class="carousel slide js-carousel d-none d-sm-block" data-indicators="true" data-arrows="true">
         <div class="carousel-inner">
             <% loop $SlideShow %>
             <div class="carousel-item<% if $First %> active<% end_if %>">

package.json

@@ -17,10 +17,10 @@
         "dash": "cross-env NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.dev.js",
         "prebuild": "rimraf build",
         "build": "cross-env NODE_ENV=production webpack -p --config webpack.config.prod.js --progress",
-        "lint:check": "eslint ./site/src --config .eslintrc && sass-lint ./site/src --config .sasslintrc -v -q",
+        "lint:check": "eslint ./app/client/src --config .eslintrc && sass-lint ./app/client/src --config .sasslintrc -v -q",
-        "lint:fix": "eslint ./site/src --config .eslintrc --fix && sass-lint ./site/src --config .sasslintrc -v -q --fix",
+        "lint:fix": "eslint ./app/client/src --config .eslintrc --fix && sass-lint ./app/client/src --config .sasslintrc -v -q --fix",
-        "lint:js": "eslint ./site/src --config .eslintrc",
+        "lint:js": "eslint ./app/client/src --config .eslintrc",
-        "lint:sass": "sass-lint ./site/src --config .sasslintrc -v -q"
+        "lint:sass": "sass-lint ./app/client/src --config .sasslintrc -v -q"
     },
     "dependencies": {
         "bootbox": "^4.4.0",
@@ -97,8 +97,7 @@
             "block-no-empty": null,
             "color-no-invalid-hex": true,
             "comment-empty-line-before": [
-                "always",
+                "always", {
-                {
                     "ignore": [
                         "stylelint-commands",
                         "after-comment"
@@ -107,8 +106,7 @@
             ],
             "declaration-colon-space-after": "always",
             "indentation": [
-                4,
+                4, {
-                {
                     "except": [
                         "value"
                     ]
@@ -116,8 +114,7 @@
             ],
             "max-empty-lines": 2,
             "rule-empty-line-before": [
-                "always",
+                "always", {
-                {
                     "except": [
                         "first-nested"
                     ],