IMPR: Fluent Module

app/_config/elements.yml

@@ -15,7 +15,9 @@ Page:
   searchable_objects:
     - Site\Models\TeamMember
   extensions:
+    - DNADesign\Elemental\TopPage\SiteTreeExtension
     - DNADesign\Elemental\Extensions\ElementalPageExtension
+    - Site\Extensions\PageFluentExtension
 
 SilverStripe\CMS\Controllers\ContentController:
   extensions:
@@ -26,11 +28,15 @@ SilverStripe\CMS\Controllers\ContentController:
 
 DNADesign\Elemental\Models\ElementalArea:
   extensions:
+    #- DNADesign\Elemental\TopPage\DataExtension
+    - DNADesign\Elemental\TopPage\FluentExtension
     - Site\Extensions\ElementalArea
 
 DNADesign\Elemental\Models\BaseElement:
   default_global_elements: true
   extensions:
+    #- DNADesign\Elemental\TopPage\DataExtension
+    - DNADesign\Elemental\TopPage\FluentExtension
     - Site\Extensions\ElementRows
 
 SilverStripe\CMS\Model\SiteTree:

app/_config/locale.yml

@@ -1,6 +1,24 @@
 ---
-Name: 'webapp-us-locale'
+Name: 'webapp-locale'
 ---
+TractorCow\Fluent\Model\Locale:
+  default_records:
+    en:
+      Title: 'EN'
+      Locale: en_US
+      URLSegment: en
+      IsGlobalDefault: 1
+  us:
+    Locale: en_US
+    Title: 'EN'
+    URLSegment: en
+  ru:
+    Locale: ru_RU
+    Title: 'RU'
+    URLSegment: ru
+    Fallbacks:
+      - =>TractorCow\Fluent\Model\Locale.us
+
 Symbiote\Addressable\Addressable:
   allowed_countries:
     'us': 'United States'

app/_config/themes.yml

@@ -1,9 +1,8 @@
 ---
 Name: 'webapp-themes'
 ---
-
 SilverStripe\View\SSViewer:
-  source_file_comments: true
+  source_file_comments: false
   themes:
     - '$public'
     - '$default'

app/client/dist/extras/_copy_these_files_to_dist

@@ -0,0 +1 @@
+Example file

app/client/dist/records.json

@@ -206,7 +206,7 @@
       }
     }
   ],
-  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/silverstripe-webpack/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.2/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_components/_ui.map.scss": [
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/silverstripe-webpack/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.3/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_components/_ui.map.scss": [
     {
       "chunks": {
         "byName": {
@@ -222,11 +222,11 @@
       "modules": {
         "byIdentifier": {
           "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/runtime/api.js": 254,
-          "./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.2/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_components/_ui.map.scss": 109
+          "./node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.1/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.1/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.3/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_components/_ui.map.scss": 484
         },
         "usedIds": [
-          109,
+          254,
-          254
+          484
         ]
       }
     }
@@ -286,12 +286,12 @@
   "modules": {
     "byIdentifier": {
       "./app/client/src/img|sync|nonrecursive|../../../../../../\\.(png|jpe?g|svg)$/": 999,
-      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/app.js|12ba133539e5a97ee1c6253ee761c85f": 401,
+      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/app.js|b47792d60c875699b3f73fb20b894390": 389,
-      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/SilverShop.Page.CheckoutPageController.js|ea562067df3845ea23acd84e7767946a": 664,
+      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/SilverShop.Page.CheckoutPageController.js|590e6b263ae1c9626a9d22b16145ea07": 475,
-      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/Site.Controllers.MapElementController.js|c6f2777262dc00aee36cfffb1e72eb91": 624,
+      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/Site.Controllers.MapElementController.js|4066efbe434248f31e1ce7dd8089f5dc": 332,
       "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/cms.js": 557,
-      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/dev.js|b3fb7760b754f47116b050171b27ced1": 821,
+      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./app/client/src/js/types/dev.js|15a49840680381ba071735fb96ce7692": 979,
-      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.2/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/js/_components/drivers/_google.track.external.links.js": 573,
+      "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/@a2nt/ss-bootstrap-ui-webpack-boilerplate@2.7.3/node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/js/_components/drivers/_google.track.external.links.js": 139,
       "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/aos@2.3.4/node_modules/aos/dist/aos.js": 73,
       "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/bootstrap@4.5.3_jquery@3.5.1+popper.js@1.16.1/node_modules/bootstrap/js/dist/alert.js": 6,
       "./node_modules/.pnpm/babel-loader@8.2.2_3ea652ad0eeb1c91bd4bd943f4964921/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/bootstrap@4.5.3_jquery@3.5.1+popper.js@1.16.1/node_modules/bootstrap/js/dist/button.js": 276,
@@ -328,6 +328,7 @@
       31,
       73,
       78,
+      139,
       192,
       195,
       226,
@@ -337,28 +338,27 @@
       286,
       296,
       302,
+      332,
       356,
       359,
       368,
       373,
       384,
+      389,
       400,
-      401,
       454,
+      475,
       542,
       557,
       559,
-      573,
       603,
       609,
-      624,
       643,
-      664,
       717,
       761,
       770,
-      821,
       879,
+      979,
       983,
       999
     ]

app/client/src/extras/_copy_these_files_to_dist

@@ -0,0 +1 @@
+Example file

app/client/src/scss/_elements.scss

@@ -1,12 +1,39 @@
 /* style elements here */
+.element {
+	background-size: cover;
+	background-repeat: no-repeat;
+}
+
+.element.page-header-element + .element {
+	margin-top: -$grid-gutter-element-height;
+}
+
+.element.page-header-element {
+	padding-top: $grid-gutter-element-height;
+	.page-header {
+		margin: 0;
+	}
+}
+
+.site__elements__sliderelement {
+	.element-container {
+		width: 100%;
+		padding: 0;
+		max-width: none;
+	}
+	&:first-child {
+		margin-top: -(2 * $grid-gutter-element-height);
+	}
+}
+
 .carousel-item-Image,
 .carousel-item-Video {
 	.carousel-slide {
 		flex-direction: column;
 		max-height: 70vh;
-		max-height: calc(100vh - 8.5rem);
+		max-height: calc(100vh - 10.5rem);
-		height: 80vh;
+		height: 70vh;
-		height: calc(100vh - 8.5rem);
+		height: calc(100vh - 10.5rem);
 		align-items: center;
 		justify-content: center;
 		.img {
@@ -119,24 +146,40 @@
 	}
 }
 
-.element {
-	background-size: cover;
-	background-repeat: no-repeat;
-}
-
-.site__elements__sliderelement {
-	.element-container {
-		width: 100%;
-		padding: 0;
-		max-width: none;
-	}
-	&:first-child {
-		margin-top: -$grid-gutter-element-height;
-	}
-}
-
 .dynamic__elements__image__elements__elementimage {
 	text-align: center;
+
+	img {
+		min-width: 100%;
+	}
+
+	.image-element__image {
+		background: $black;
+	}
+
+	.image-element__caption {
+		position: absolute;
+		bottom: 1rem;
+		left: 1rem;
+		right: 1rem;
+		background: $black;
+		color: $white;
+	}
+
+	.image-element__title {
+		margin-bottom: 0;
+		line-height: 2em;
+	}
+
+	&:hover,
+	&:focus {
+		img {
+			filter: grayscale(1);
+		}
+		.image-element__caption {
+			color: $primary;
+		}
+	}
 }
 
 .site__elements__accordion {

app/client/src/scss/_layout.scss

@@ -1,6 +1,33 @@
 /**
  * Your custom style
  */
+.a.active,
+.a:focus,
+.a:hover,
+.a[aria-expanded='true'],
+.btn.active,
+.btn:focus,
+.btn:hover,
+.btn[aria-expanded='true'],
+[data-toggle].active,
+[data-toggle]:focus,
+[data-toggle]:hover,
+[data-toggle][aria-expanded='true'],
+a.active,
+a:focus,
+a:hover,
+a[aria-expanded='true'],
+button.active,
+button:focus,
+button:hover,
+button[aria-expanded='true'] {
+	opacity: 1;
+	img,
+	.img {
+		filter: grayscale(1);
+	}
+}
+
 body {
 	position: relative;
 }
@@ -10,6 +37,11 @@ body {
 		display: none;
 	}
 }
+
+.breadcrumb {
+	margin-bottom: 0;
+}
+
 .form-control,
 .select2-container--default .select2-selection,
 .select2-dropdown .select2-search__field {
@@ -53,11 +85,54 @@ $full-body-min-width: map-get($grid-breakpoints, 'sm') !default;
 	}
 }
 
+.nav-link {
+	&:focus,
+	&:hover,
+	&.active {
+		background: $nav-link-hover-bg;
+		color: $nav-link-hover-color;
+	}
+}
+
+.active {
+	.nav-link {
+		background: $nav-link-hover-bg;
+		color: $nav-link-hover-color;
+	}
+}
+
 // shrink elements on scroll
 body.shrink {
+	@media (max-width: map-get($grid-breakpoints, 'lg') - 1) {
+		padding-top: 100px;
+
+		#Header {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 2;
+		}
+	}
+
+	@media (min-width: map-get($grid-breakpoints, 'lg')) and (max-width: map-get($grid-breakpoints, 'xl') - 1) {
+		padding-top: 146px;
+
+		#Header {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 2;
+		}
+	}
 }
 
 // sticky footer
+body > .wrapper {
+	min-height: 100%;
+	min-height: 100vh;
+}
 @media (min-width: $full-body-min-width) {
 	/*body {
         height: 100%;
@@ -71,11 +146,6 @@ body.shrink {
 		//padding-top: $grid-gutter-height;
 	}
 
-    body > .wrapper {
-        min-height: 100%;
-        min-height: 100vh;
-    }
-
 	.footer {
 		height: $footer-size + $footer-bar-size + $grid-gutter-height / 2;
 		margin-top: -($footer-size + $footer-bar-size + $grid-gutter-height / 2);
@@ -84,6 +154,7 @@ body.shrink {
 
 .sidebar__col {
 	position: relative;
+	margin-top: $grid-gutter-element-height;
 	margin-bottom: $grid-gutter-element-height * 2;
 }
 .content-holder__sidebar {
@@ -139,7 +210,8 @@ body.shrink {
 	.nav-container {
 		display: flex;
 		justify-content: flex-end;
-        align-items: center;
+		align-items: flex-end;
+		position: static;
 	}
 
 	.logo {
@@ -158,18 +230,101 @@ body.shrink {
 	padding: 0;
 	text-transform: uppercase;
 	letter-spacing: 0.25rem;
+	position: fixed;
+	top: 0;
+	right: 0;
+	z-index: 4;
+	width: 100%;
+	background: $header-bg;
 
 	@media (min-width: map-get($grid-breakpoints, 'md')) {
-        .navbar-nav .nav-link {
+		position: static;
+		width: auto;
+		background: none;
+	}
+
+	.navbar-toggler {
+		color: $main-nav-link-color;
+		position: absolute;
+		top: 0;
+		right: 0;
+		font-size: $main-nav-toggler-size;
+	}
+
+	.nav-item,
+	.nav-link {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.nav-link {
+		color: $main-nav-link-color;
+		background: $main-nav-link-bg;
+
+		&:focus,
+		&:hover,
+		&.active {
+			background: $main-nav-link-hover-bg;
+			color: $main-nav-link-hover-color;
+		}
+	}
+
+	.active {
+		.nav-link {
+			background: $main-nav-link-hover-bg;
+			color: $main-nav-link-hover-color;
+		}
+	}
+
+	.nav-item .nav-dropdown {
+		.fa-chevron-right
+		//&:after
+		{
+			display: none;
+		}
+	}
+
+	.dropdown-menu {
+		background: $main-nav-dropdown-bg;
+		margin-top: 0;
+		border-top: 0;
+		width: 100%;
+		.nav-item-link {
+			color: $main-nav-dropdown-color;
+		}
+	}
+
+	.dropdown-item {
+		padding: 0;
+		&:focus,
+		&:hover {
+			background: $main-nav-dropdown-hover-bg;
+			.nav-item-link {
+				color: $main-nav-dropdown-hover-color;
+			}
+		}
+		.nav-item-link {
+			width: 100%;
+			justify-content: flex-start;
+		}
+	}
+
+	@media (min-width: map-get($grid-breakpoints, 'md')) {
+		.navbar-nav > .nav-item {
 			padding-right: 2rem;
 			padding-left: 2rem;
 		}
+		.dropdown-item .nav-item-link {
+			padding-left: 1rem;
+			padding-right: 1rem;
+		}
 	}
 }
 
 #MainContent {
-    padding-top: $grid-gutter-element-height;
+	padding-top: 2 * $grid-gutter-element-height;
-    padding-bottom: $grid-gutter-element-height;
+	padding-bottom: 2 * $grid-gutter-element-height;
 }
 
 #PageBreadcumbs {
@@ -192,6 +347,10 @@ body.shrink {
 		margin-bottom: 0;
 	}
 
+	.field:first-child {
+		margin-top: 0;
+	}
+
 	.footer {
 		background-color: $footer-footer-bg;
 

app/client/src/scss/_variables.scss

@@ -9,9 +9,6 @@ $grid-breakpoints: (
 	md: 768px,
 	lg: 992px,
 	xl: 1168px,
-	xxl: 1368px,
-	xxxl: 1568px,
-	xxxxl: 1868px,
 );
 // screen size - (32px * 2) (ex. 1400 - 64 = 1336)
 $container-max-widths: (
@@ -19,9 +16,6 @@ $container-max-widths: (
 	md: 720px,
 	lg: 960px,
 	xl: 1136px,
-	xxl: 1336px,
-	xxxl: 1536px,
-	xxxxl: 1836px,
 );
 
 $full-body-min-width: map-get($grid-breakpoints, 'lg');
@@ -52,12 +46,28 @@ $h6-font-size: $font-size-base;
 @import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate/src/scss/_variables';
 
 // Add your site-wide + content editor typography styling
+$nav-link-hover-bg: darken($body-bg, 10%);
+$nav-link-hover-color: lighten($body-color, 10%);
+
 $full-body-min-width: map-get($grid-breakpoints, 'md');
 
 $header-bg: $dark;
 $header-color: darken($white, 5%);
 $header-link: $white;
 
+$main-nav-link-color: $white;
+$main-nav-link-bg: none;
+
+$main-nav-toggler-size: 2rem;
+
+$main-nav-link-hover-bg: none;
+$main-nav-link-hover-color: $primary;
+
+$main-nav-dropdown-bg: $header-bg;
+$main-nav-dropdown-color: $header-link;
+$main-nav-dropdown-hover-bg: darken($header-bg, 10%);
+$main-nav-dropdown-hover-color: $primary;
+
 $footer-size: 7rem;
 $footer-bar-size: 2rem;
 

app/src/Extensions/ElementImageWidget.php

@@ -13,6 +13,7 @@ use Sheadawson\Linkable\Forms\LinkField;
 use Sheadawson\Linkable\Models\Link;
 use SilverStripe\Core\Config\Config;
 use SilverStripe\Forms\CheckboxField;
+use SilverStripe\Forms\CompositeField;
 use SilverStripe\Forms\DropdownField;
 use SilverStripe\Forms\FieldList;
 use SilverStripe\ORM\DataExtension;
@@ -25,9 +26,17 @@ class ElementImageWidget extends DataExtension
         '600' => 'Big (600px)',
     ];
 
+    private static $available_widths = [
+    	'300' => 'Small (300px)',
+        '400' => 'Medium (400px)',
+        '600' => 'Big (600px)',
+    ];
+
     private static $db = [
         'Resize' => 'Boolean(1)',
+	    'ManualWidth' => 'Boolean(0)',
         'ImageHeight' => 'Float',
+	    'ImageWidth' => 'Float',
         'Content' => 'HTMLText',
     ];
 
@@ -39,31 +48,42 @@ class ElementImageWidget extends DataExtension
     {
         parent::updateCMSFields($fields);
 
-        $fields->insertBefore(
+        $fields->removeByName(['ImageLinkID', 'Resize']);
-            'Image',
+
-            LinkField::create('ImageLinkID', 'Link')
+        $fields->push(LinkField::create('ImageLinkID', 'Link'));
-        );
 
         $this->owner->ImageHeight = $this->getHeight();
 
         $heights = Config::inst()->get(__CLASS__, 'available_heights');
+        $widths = Config::inst()->get(__CLASS__, 'available_widths');
 
-        $fields->replaceField('Resize', CheckboxField::create(
+        $fields->push(CheckboxField::create(
             'Resize',
             'Would you like to scale image?'
         ));
 
         if (count($heights)) {
-            $fields->replaceField(
+        	$fields->removeByName(['ManualWidth','ImageWidth', 'ImageHeight']);
-                'ImageHeight',
+            $fields->push(
+                CompositeField::create(
 	                DropdownField::create(
 	                    'ImageHeight',
 	                    'Image Height',
 	                    $heights,
 	                    $this->getHeight()
 	                )
-                    ->setEmptyString('(unspecified)')
+	                    ->setEmptyString('(auto)')
-                    ->displayIf('Resize')->isChecked()->end()
+                        ->displayIf('Resize')->isChecked()->end(),
+	                CheckboxField::create('ManualWidth', 'Set Width Manually')
+                        ->displayIf('Resize')->isChecked()->end(),
+	                DropdownField::create(
+	                    'ImageWidth',
+	                    'Image Width',
+	                    $widths
+	                )
+	                    ->setEmptyString('(auto)')
+	                    ->displayIf('ManualWidth')->isChecked()->end()
+                )
             );
         } else {
             $fields->dataFieldByName('ImageHeight')
@@ -95,7 +115,10 @@ class ElementImageWidget extends DataExtension
 
     public function getWidth()
     {
-        return $this->owner->getColumnWidthRecursive();
+    	$obj = $this->owner;
+        return $obj->getField('ManualWidth') && $obj->getField('ImageWidth')
+	        ? $obj->getField('ImageWidth')
+	        : $obj->getColumnWidthRecursive();
     }
 
     public function getHeight()

app/src/Extensions/ElementRows.php

@@ -38,10 +38,10 @@ class ElementRows extends DataExtension
     {
         parent::updateCMSFields($fields);
 
-        // move available globaly to main tab
+        $fields->removeByName(['AvailableGlobally', 'TopPageLocale', 'TopPageID']);
-        $fields->removeByName('AvailableGlobally');
         //$fields->removeByName('SidebarOnly');
 
+	    // move available globaly to main tab
         $tab = $fields->findOrMakeTab('Root.Main');
         $tab->push(CheckboxField::create('AvailableGlobally'));
         //$tab->push(CheckboxField::create('SidebarOnly', 'Hidden (Sidebar Only)'));

app/src/Extensions/PageFluentExtension.php

@@ -0,0 +1,28 @@
+<?php
+
+
+namespace Site\Extensions;
+
+use SilverStripe\Blog\Forms\GridField\GridFieldConfigBlogPost;
+use SilverStripe\Forms\FieldList;
+use SilverStripe\ORM\DataExtension;
+use TractorCow\Fluent\Model\Locale;
+
+class PageFluentExtension extends DataExtension
+{
+    /**
+     * Override default Fluent fallback
+     *
+     * @param string $query
+     * @param string $table
+     * @param string $field
+     * @param Locale $locale
+     */
+    public function updateLocaliseSelect(&$query, $table, $field, Locale $locale)
+    {
+        // disallow elemental data inheritance in the case that published localised page instance already exists
+        if ($field == 'ElementalAreaID' && $this->owner->isPublishedInLocale()) {
+            $query = '"' . $table . '_Localised_' . $locale->getLocale() . '"."' . $field . '"';
+        }
+    }
+}

app/src/Models/TeamMember.php

@@ -28,7 +28,6 @@ class TeamMember extends DataObject
 
     private static $has_one = [
         'Photo' => Image::class,
-        'Page' => TeamPage::class,
     ];
 
     private static $extensions = [

app/src/Pages/CatalogueCategoryPage.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Site\Pages;
+
+use Page;
+use SilverStripe\AssetAdmin\Forms\UploadField;
+use SilverStripe\Assets\Image;
+
+class CatalogueCategoryPage extends Page
+{
+	private static $table_name = 'CatalogueCategoryPage';
+    private static $icon_class = 'fas fa-th-large';
+    private static $can_be_root = false;
+    private static $allowed_children = [
+    	CatalogueItemPage::class,
+    ];
+
+    private static $has_one = [
+        'Icon' => Image::class,
+    ];
+
+    public function getCMSFields()
+    {
+	    $fields = parent::getCMSFields();
+
+	    $fields->addFieldsToTab('Root.Main', [
+	    	UploadField::create('Icon')
+	    ]);
+
+	    return $fields;
+    }
+}

app/src/Pages/CatalogueItemPage.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Site\Pages;
+
+use Page;
+use SilverStripe\AssetAdmin\Forms\UploadField;
+use SilverStripe\Assets\Image;
+
+class CatalogueItemPage extends Page
+{
+	private static $table_name = 'CatalogueItemPage';
+    private static $icon_class = 'fas fa-box';
+    private static $allowed_children = [];
+    private static $can_be_root = false;
+
+    private static $has_one = [
+        'Icon' => Image::class,
+    ];
+
+    public function getCMSFields()
+    {
+	    $fields = parent::getCMSFields();
+
+	    $fields->addFieldsToTab('Root.Main', [
+	    	UploadField::create('Icon')
+	    ]);
+
+	    return $fields;
+    }
+}

app/src/Pages/CataloguePage.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace Site\Pages;
+
+use Page;
+
+class CataloguePage extends Page
+{
+	private static $table_name = 'CataloguePage';
+    private static $icon_class = 'fas fa-boxes';
+    private static $allowed_children = [
+    	CatalogueCategoryPage::class,
+    ];
+}

app/src/Pages/Page.php

@@ -8,6 +8,7 @@ use Sheadawson\Linkable\Forms\LinkField;
 use SilverStripe\CMS\Model\SiteTree;
 use DNADesign\Elemental\Models\ElementContent;
 use SilverStripe\FontAwesome\FontAwesomeField;
+use TractorCow\Fluent\Extension\FluentSiteTreeExtension;
 
 class Page extends SiteTree
 {
@@ -17,6 +18,11 @@ class Page extends SiteTree
         'BlockIcon' => 'Varchar(255)',
     ];
 
+    private static $field_include = [
+        'ElementalAreaID',
+    ];
+
+
     public static function DefaultContainer()
     {
         return self::config()->get('default_container_class');
@@ -73,4 +79,16 @@ class Page extends SiteTree
     {
         return str_replace(['\\'], '-', $this->getField('ClassName'));
     }
+
+    protected function onBeforeWrite()
+    {
+        parent::onBeforeWrite();
+
+        if (class_exists(FluentSiteTreeExtension::class) && !$this->isDraftedInLocale() && $this->isInDB()) {
+            $elementalArea = $this->ElementalArea();
+
+            $elementalAreaNew = $elementalArea->duplicate();
+            $this->setField('ElementalAreaID', $elementalAreaNew->ID);
+        }
+    }
 }

app/src/Pages/TeamPage.php

@@ -1,43 +0,0 @@
-<?php
-/**
- * Created by PhpStorm.
- * User: tony
- * Date: 6/30/18
- * Time: 11:46 PM
- */
-
-namespace Site\Pages;
-
-use SilverStripe\Forms\GridField\GridField;
-use SilverStripe\Forms\GridField\GridFieldConfig_RecordEditor;
-use Site\Models\TeamMember;
-
-class TeamPage extends \Page
-{
-    private static $icon_class = 'font-icon-p-profile';
-
-    private static $has_many = [
-        'Members' => TeamMember::class,
-    ];
-
-    private static $owns = [
-        'Members',
-    ];
-
-    public function getCMSFields()
-    {
-        $fields = parent::getCMSFields();
-
-        $fields->addFieldToTab(
-            'Root.Members',
-            GridField::create(
-                'Members',
-                '',
-                $this->Members(),
-                GridFieldConfig_RecordEditor::create()
-            )
-        );
-
-        return $fields;
-    }
-}

app/src/Pages/TeamPageController.php

@@ -1,15 +0,0 @@
-<?php
-/**
- * Created by PhpStorm.
- * User: tony
- * Date: 6/30/18
- * Time: 11:49 PM
- */
-
-namespace Site\Pages;
-
-
-class TeamPageController extends \PageController
-{
-
-}

app/src/Tasks/BrokenFilesTask.php

@@ -5,17 +5,27 @@ namespace Site\Tasks;
 
 use SilverStripe\Assets\File;
 use SilverStripe\Dev\BuildTask;
+use SilverStripe\ORM\DB;
 
 class BrokenFilesTask extends BuildTask
 {
-    protected $title = 'Broken Files Task';
+    protected $title = 'Fix Broken Task';
 
-    protected $description = 'Broken files report';
+    protected $description = 'Fix missing PRIMARY keys and Broken files';
 
     protected $enabled = true;
 
     public function run($request)
     {
+    	$q = DB::query('show tables');
+    	$tables = array_keys($q->map());
+
+    	foreach ($tables as $t) {
+		    try {
+			    DB::query('ALTER TABLE `'.$t.'` ADD PRIMARY KEY (`ID`)');
+		    }catch (\Exception $e) {}
+	    }
+
         $files = File::get();
         $i = 0;
         foreach ($files as $file) {

app/src/Templates/DeferredRequirements.php

@@ -88,7 +88,12 @@ class DeferredRequirements implements TemplateGlobalProvider
         self::loadJS($mainTheme.'.js');
 
         // Custom controller requirements
-        $curr_class = $class ?: get_class(Controller::curr());
+	    $curr = Controller::curr();
+	    if(isset($curr->record, $curr->record['ClassName']) && !$class) {
+	    	$class = $curr->record['ClassName'];
+	    }
+        $curr_class = $class ?: get_class($curr);
+	    
         if (isset($config['custom_requirements'][$curr_class])) {
             foreach ($config['custom_requirements'][$curr_class] as $file) {
                 if (strpos($file, '.css')) {

app/src/Widgets/BannerWidget.php

@@ -3,11 +3,10 @@
 
 namespace Site\Widgets;
 
-use Sheadawson\Linkable\Forms\LinkField;
-use Sheadawson\Linkable\Models\Link;
 use SilverStripe\AssetAdmin\Forms\UploadField;
 use SilverStripe\Assets\Image;
 use SilverStripe\Widgets\Model\Widget;
+use Site\Extensions\ElementImageWidget;
 
 if (!class_exists(Widget::class)) {
     return;
@@ -23,23 +22,28 @@ class BannerWidget extends Widget
 
     private static $has_one = [
         'Image' => Image::class,
-        'Link' => Link::class,
     ];
 
     private static $owns = [
         'Image',
-        'Link',
+    ];
+
+    private static $extensions = [
+        ElementImageWidget::class,
     ];
 
     public function getCMSFields()
     {
         $fields = parent::getCMSFields();
 
-        $fields->push(UploadField::create('Image', 'Image (minimal width 301px)')
+        $fields->push(UploadField::create('Image', 'Image')
                 ->setAllowedFileCategories(['image/supported']));
 
-        $fields->push(LinkField::create('LinkID', 'Link'));
-
         return $fields;
     }
+
+    public function getSibling()
+    {
+    	return false;
+    }
 }

app/templates/Dynamic/Elements/Image/Elements/ElementImage.ss

@@ -1,11 +1,9 @@
 <% if $ImageResized %>
     <div class="image-element__image<% if $Resize %><% if $Height %> height{$Height}<% end_if %><% if $Width %> width{$Width}<% end_if %><% end_if %>">
-        <% if $ImageLink %><a href="$ImageLink.LinkURL"><% end_if %>
         <img
             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             data-lazy-src="$ImageResized.URL" class="img-responsive" alt="$Title.ATT"
         />
-        <% if $ImageLink %></a><% end_if %>
     </div>
 <% end_if %>
 
@@ -16,12 +14,11 @@
     <% if $Content %>
         <div class="image-element__content typography">$Content</div>
     <% end_if %>
-
-    <% if $ImageLink %>
-        <a href="$ImageLink.LinkURL" class="image-element__btn btn btn-default">
-            $ImageLink.Title
-            <i class="fas fa-caret-right"></i>
-        </a>
-    <% end_if %>
 </div>
 <% end_if %>
+
+<% if $ImageLink %>
+    <a href="$ImageLink.LinkURL" class="stretched-link">
+        <b class="sr-only">$ImageLink.Title</b>
+    </a>
+<% end_if %>

app/templates/Includes/First.ss

@@ -7,7 +7,7 @@
 <%-- Loading Spinner --%>
 <div id="PageLoading">
     <div class="loading-spinner">
-        <img src="{$ResourcesURL('logo.svg')}" width="200" alt="{$SiteConfig.Title}" /><br/>
+        <img class="logo" src="{$ResourcesURL('logo.svg')}" width="200" alt="{$SiteConfig.Title}" /><br/>
         <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
         <br/><%t Page.LOADINGTEXT 'LOADING ..' %>
     </div>

app/templates/Includes/Footer.ss

@@ -1,9 +1,7 @@
-<% with $SiteConfig %>
 <div class="wrapper">
     <div class="element">
-        <div class="footer__container $Top.DefaultContainer">
+        <div class="footer__container $DefaultContainer">
-            <div class="row">
+            <% with $SiteConfig %>
-                <div class="col-sm-6">
                 <div class="field">
                     <div class="fn">$Title</div>
                     <% if $Address %>
@@ -27,15 +25,14 @@
                 <% end_if %>
 
                 <% include Objects\SocialLinks %>
-                </div>
+            <% end_with %>
-                <div class="col-sm-6 text-right">
             
-                </div>
+            <% include LocaleMenu %>
-            </div>
         </div>
     </div>
 </div>
 
+<% with $SiteConfig %>
 <div class="copyright footer">
     <div class="container">
         <div class="row">

app/templates/Includes/Header.ss

@@ -1,7 +1,7 @@
 <div class="element">
     <div class="element__container $DefaultContainer">
         <div class="row">
-            <div class="col-sm-4">
+            <div class="col-xl-4">
                 <a id="Logo" class="logo" href="/">
                     <img src="{$ResourcesURL('logo.svg')}" width="100" alt="{$SiteConfig.Title}" />
                 </a>
@@ -11,7 +11,7 @@
                     <% end_if %>
                 <% end_with %>
             </div>
-            <div class="col-sm-8 nav-container">
+            <div class="col-xl-8 nav-container">
                 <% if $Menu(1) %>
                     <% include Navigation Navigation=$Menu(1), NavID="Navigation" %>
                 <% end_if %>

app/templates/Includes/LocaleMenu.ss

@@ -0,0 +1,16 @@
+<% cached 'LocalesNavigationFooter', List(Page).max(LastEdited), $CurrentLocale, $ID %>
+<% if $Locales %>
+<div id="LocaleMenu">
+    <nav class="primary">
+        <ul class="list-inline">
+            <% loop $Locales %>
+                <li class="list-inline-item $LinkingMode<% if $LinkingMode = 'current' %> active<% end_if %>">
+                    <a href="$Link.ATT" <% if $LinkingMode != 'invalid' %>rel="alternate"
+                       hreflang="$HrefLang"<% end_if %>>$Title.XML</a>
+                </li>
+            <% end_loop %>
+        </ul>
+    </nav>
+</div>
+<% end_if %>
+<% end_cached %>

app/templates/Includes/MainContent.ss

@@ -1,4 +1,4 @@
-<div class="mainContent-page-{$CSSClass}">
+<div class="maincontent maincontent-{$CSSClass} maincontent-{$URLSegment}<% if $URLSegment != 'home' %> maincontent-inner-page<% end_if %>">
 	<% if $HeroImageRecursive %>
 	    <div class="element element__hero-image">
 	        <div class="element-container">
@@ -37,6 +37,7 @@
 	                    $Layout
 	                </div>
 	                <div class="col-md-3 sidebar__col">
+	                	<div class="{$DefaultContainer}">
 		                    <div class="page-content-sidebar page-content jsSidebarUI">
 		                        <div class="jsSidebarUI__inner">
 		                            $SideBarContent
@@ -47,6 +48,7 @@
 	                </div>
 	            </div>
 	        </div>
+	    </div>
 	<% else %>
 	    <div class="content-holder">
 	        $Layout

app/templates/SilverStripe/Forms/CompositeField_holder.ss

@@ -1,6 +1,6 @@
 <$Tag $AttributesHTML>
 	<% if $Tag == 'fieldset' && $Legend %>
-		<legend>$Legend</legend>
+		<legend class="form__legend">$Legend</legend>
 	<% end_if %>
 
 	$Field

app/templates/SilverStripe/Forms/FormField_holder.ss

@@ -1,16 +1,16 @@
-<div id="$HolderID" class="field<% if $extraClass %> $extraClass<% end_if %>">
+<div id="$HolderID" class="form__field field<% if $extraClass %> $extraClass<% end_if %>">
-	<% if $Title %><label class="left" for="$ID">$Title</label><% end_if %>
+	<% if $Title %><label class="field__label field__label-left left" for="$ID">$Title</label><% end_if %>
 
-	<div class="middleColumn">
+	<div class="field__content middleColumn">
 		$Field
 	</div>
 
 	<% if $Title && $RightTitle %>
-		<div class="right">$RightTitle</div>
+		<div class="field__label field__label-right right">$RightTitle</div>
 	<% else_if $RightTitle %>
-		<label class="right" for="$ID">$RightTitle</label>
+		<label class="field__label field__label-right right" for="$ID">$RightTitle</label>
 	<% end_if %>
 
-	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
+	<% if $Message %><span class="field__alert alert alert-{$MessageType} message $MessageType">$Message</span><% end_if %>
-	<% if $Description %><span class="description">$Description</span><% end_if %>
+	<% if $Description %><span class="field__description description">$Description</span><% end_if %>
 </div>

app/templates/SilverStripe/Forms/Includes/Form.ss

@@ -2,13 +2,13 @@
 <form $AttributesHTML>
 <% end_if %>
 	<% if $Message %>
-	<p id="{$FormName}_error" class="message $MessageType">$Message.RAW</p>
+	<div id="{$FormName}_error" class="form__message alert alert-{$MessageType} message $MessageType">$Message.RAW</div>
 	<% else %>
-	<p id="{$FormName}_error" class="message $MessageType" style="display: none"></p>
+	<div id="{$FormName}_error" class="form__message alert alert-{$MessageType} message {$MessageType}" style="display: none"></div>
 	<% end_if %>
 
-	<fieldset>
+	<fieldset class="form__fieldset">
-		<% if $Legend %><legend>$Legend</legend><% end_if %>
+		<% if $Legend %><legend class="form__legend">$Legend</legend><% end_if %>
 		<% loop $Fields %>
 			$FieldHolder
 		<% end_loop %>
@@ -16,7 +16,7 @@
 	</fieldset>
 
 	<% if $Actions %>
-	<div class="btn-toolbar">
+	<div class="form__actions btn-toolbar">
 		<% loop $Actions %>
 			$Field
 		<% end_loop %>

app/templates/SilverStripe/Forms/OptionsetField_holder.ss

@@ -1,9 +1,9 @@
-<div id="$HolderID" class="field<% if $extraClass %> $extraClass<% end_if %>">
+<div id="$HolderID" class="form__field field<% if $extraClass %> $extraClass<% end_if %>">
-	<% if $Title %><div class="left">$Title</div><% end_if %>
+	<% if $Title %><div class="field__label field__label-left left">$Title</div><% end_if %>
-	<div class="middleColumn">
+	<div class="field__content middleColumn">
 		$Field
 	</div>
-	<% if $RightTitle %><div class="right">$RightTitle</div><% end_if %>
+	<% if $RightTitle %><div class="field__label field__label-right right">$RightTitle</div><% end_if %>
-	<% if $Message %><span class="message $MessageType">$Message</span><% end_if %>
+	<% if $Message %><span class="field__alert alert alert-{$MessageType} message $MessageType">$Message</span><% end_if %>
-	<% if $Description %><span class="description">$Description</span><% end_if %>
+	<% if $Description %><span class="field__description description">$Description</span><% end_if %>
 </div>

app/templates/Site/Widgets/BannerWidget.ss

@@ -1,6 +1,16 @@
-<img src="$Image.FocusFill(432,315).URL" alt="$Title" />
+<% if $ImageResized %>
-<% if $Link %>
+    <div class="image-element__image<% if $Resize %><% if $Height %> height{$Height}<% end_if %><% if $Width %> width{$Width}<% end_if %><% end_if %>">
-    <% with $Link %>
+        <% if $ImageLink %><a href="$ImageLink.LinkURL"><% end_if %>
+        <img
+            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            data-lazy-src="$ImageResized.URL" class="img-responsive" alt="$Title.ATT"
+        />
+        <% if $ImageLink %></a><% end_if %>
+    </div>
+<% end_if %>
+
+<% if $ImageLink %>
+    <% with $ImageLink %>
     <a href="$URL"<% if $OpenInNewWindow %> target="_blank"<% end_if %> class="stretched-link">
         <span class="sr-only">$Up.Title</span>
     </a>

composer.json

@@ -47,7 +47,8 @@
         "ezyang/htmlpurifier": "^4.13",
         "showpro/silverstripe-seo-images": "^1.0",
         "endroid/qr-code": "^3.9",
-        "jonom/focuspoint": "^3.1"
+        "jonom/focuspoint": "^3.1",
+        "restruct/silverstripe-security-baseline": "*"
     },
     "require-dev": {
         "phpunit/phpunit": "^5.7",

package.json

@@ -32,7 +32,7 @@
 	],
 	"dependencies": {
 		"@a2nt/meta-lightbox": "^2.7.1",
-		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.7.2",
+		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.7.3",
 		"aos": "^2.3.4",
 		"bootbox": "^5.5.2",
 		"bootstrap": "^4.5.3",

webpack.config.js

@@ -20,6 +20,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const ImageminPlugin = require('image-minimizer-webpack-plugin');
 const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
 const UIInfo = require('./node_modules/@a2nt/ss-bootstrap-ui-webpack-boilerplate/package.json');
 const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox/package.json');
@@ -117,6 +118,15 @@ let plugins = [
 		outputFilename: 'img/sprite-[hash].png',
 		padding: 0,
 	}),
+	new CopyPlugin({
+		patterns: [
+			{
+				from: path.join(__dirname, conf.APPDIR, conf.SRC, 'extras'),
+				to: path.join(__dirname, conf.APPDIR, conf.DIST, 'extras'),
+				noErrorOnMissing: true,
+			},
+		],
+	}),
 ];
 
 const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');