IMPR: minor fixtures

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react",
-	"version": "3.0.4",
+	"version": "3.0.5",
 	"description": "This UI Kit allows you to build Bootstrap 5 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
 	"author": "Tony Air <tony@twma.pro>",
 	"license": "BSD-2-Clause",

src/html/_components/LoadingSpinner.html

@@ -20,7 +20,7 @@
 			transform: translate(0, 0);
 		}
 		100% {
-			transform: translate(19px, 0);
+			transform: translate(1.35rem, 0);
 		}
 	}
 	body,
@@ -32,6 +32,12 @@
 		color: #333;
 		overflow-x: hidden;
 	}
+	@media (min-width: 2000px) {
+		html,
+		body {
+			font-size: 0.9vw;
+		}
+	}
 	#PageLoading {
 		position: fixed;
 		left: 0;
@@ -53,6 +59,9 @@
 	#PageLoading .logo {
 		filter: invert(1);
 		margin-left: 20px;
+		margin-left: 2vw;
+		width: 100px;
+		width: 12.5vw;
 	}
 	.main-bn {
 		position: fixed;
@@ -75,33 +84,33 @@
 	.lds-ellipsis {
 		display: inline-block;
 		position: relative;
-		width: 64px;
+		width: 4.57rem;
-		height: 64px;
+		height: 1rem;
 		color: #fff;
 	}
 	.lds-ellipsis div {
 		position: absolute;
-		top: 27px;
+		top: 0.15rem;
-		width: 11px;
+		width: 0.78rem;
-		height: 11px;
+		height: 0.78rem;
 		border-radius: 50%;
 		background: #888;
 		animation-timing-function: cubic-bezier(0, 1, 1, 0);
 	}
 	.lds-ellipsis div:nth-child(1) {
-		left: 6px;
+		left: 0.42rem;
 		animation: lds-ellipsis1 0.6s infinite;
 	}
 	.lds-ellipsis div:nth-child(2) {
-		left: 6px;
+		left: 0.9rem;
 		animation: lds-ellipsis2 0.6s infinite;
 	}
 	.lds-ellipsis div:nth-child(3) {
-		left: 26px;
+		left: 1.85rem;
 		animation: lds-ellipsis2 0.6s infinite;
 	}
 	.lds-ellipsis div:nth-child(4) {
-		left: 45px;
+		left: 3.21rem;
 		animation: lds-ellipsis3 0.6s infinite;
 	}
 	@keyframes lds-text {
@@ -156,6 +165,11 @@
 	.lds-text b:nth-child(10) {
 		animation-delay: 5s;
 	}
+	@media (orientation: portrait) {
+		#PageLoading .logo {
+			width: 50vw;
+		}
+	}
 </style>
 
 <div id="PageLoading">

src/js/_components/_main.links.js

@@ -82,6 +82,8 @@ const MainUILinks = ((W) => {
 
         ui.GraphPage.setState(state);
         SpinnerUI.hide();
+
+        window.dispatchEvent(new Event(Events.AJAX));
       } else if (e.state && e.state.landing) {
         console.log(`${NAME}: [popstate] go to landing`);
         W.location.href = e.state.landing;
@@ -158,6 +160,8 @@ const MainUILinks = ((W) => {
 
           BODY.classList.remove('ajax-loading');
           SpinnerUI.hide();
+
+          window.dispatchEvent(new Event(Events.AJAX));
           console.groupEnd(`${NAME}: load on click`);
         })
         .catch((e) => {
@@ -176,6 +180,8 @@ const MainUILinks = ((W) => {
 
           BODY.classList.remove('ajax-loading');
           SpinnerUI.hide();
+
+          window.dispatchEvent(new Event(Events.AJAX));
           console.groupEnd(`${NAME}: load on click`);
         });
     }

src/js/_components/_main.online.js

@@ -99,11 +99,6 @@ export default ((W) => {
     UPDATE_ONLINE_STATUS(true);
   });
 
-  W.addEventListener(`${Events.LOADED}`, () => {
+  W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate);
-    navigatorStateUpdate();//UPDATE_ONLINE_STATUS(true);
+  W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate);
-  });
-
-  W.addEventListener(`${Events.AJAX}`, () => {
-    navigatorStateUpdate();
-  });
 })(window);

src/js/_components/_page.jsx

@@ -2,7 +2,6 @@
  * page #MainContent area
  */
 import { Component } from 'react';
-import Events from '../_events';
 
 import { useQuery, gql } from '@apollo/client';
 import { client } from './_apollo';
@@ -37,10 +36,6 @@ class Page extends Component {
 		if (ui.state.Title) {
 			document.title = ui.state.Title;
 		}
-
-		if (ui.state.Elements.length) {
-			window.dispatchEvent(new Event(Events.AJAX));
-		}
 	}
 
 	constructor(props) {
@@ -58,13 +53,12 @@ class Page extends Component {
 		return BODY.classList.contains('is-online');
 	};
 
-	load = (url_segment) => {
+	load = (link) => {
 		const ui = this;
 
 		return new Promise((resolve, reject) => {
-			const query = gql(`
+			const query = gql(`query Pages {
-			query Pages {
+			  readPages(Link: "${link}") {
-			  readPages(URLSegment: "${url_segment}", limit: 1, offset: 0) {
 			    edges {
 			      node {
 			        __typename
@@ -77,32 +71,10 @@ class Page extends Component {
 			        Link
 			        URLSegment
 			        HTML
-			        Elements {
-			          edges {
-			            node {
-			              __typename
-			        	 _id
-			              ID
-			              Title
-			              Render
-			            }
-			          }
-			          pageInfo {
-			            hasNextPage
-			            hasPreviousPage
-			            totalCount
-			          }
-			        }
 			      }
 			    }
-			    pageInfo {
-			      hasNextPage
-			      hasPreviousPage
-			      totalCount
-			    }
 			  }
-			}
+			}`);
-		`);
 
 			if (!ui.isOnline()) {
 				const data = client.readQuery({ query });
@@ -180,7 +152,7 @@ class Page extends Component {
 			Summary: page.Summary,
 			Link: page.Link,
 			HTML: page.HTML,
-			Elements: page.Elements.edges,
+			Elements: [],//page.Elements.edges,
 			loading: false,
 		});
 

src/scss/_components/_ui.bootstrap.scss

@@ -43,3 +43,6 @@
 @import '~bootstrap/scss/utilities/api';
 
 @import '_ui.carousel';
+.navbar {
+	justify-content: flex-end;
+}

src/scss/_components/_ui.elemental.scss

@@ -33,6 +33,30 @@
 .site__elements__sliderelement {
 	padding-top: 0;
 	padding-bottom: 0;
+
+	.element-container{
+		max-width: none;
+		padding: 0;
+	}
+
+	.carousel-slide {
+		background: $sliderelement-carousel-slide-bg;
+		max-height: $sliderelement-carousel-slide-max-y;
+		align-items: center;
+		.video {
+			position: relative;
+			height: 100%;
+			@include responsive-ratio($sliderelement-carousel-slide-ratio-x, $sliderelement-carousel-slide-ratio-y, true);
+			iframe {
+				position: absolute;
+				top:0;
+				height: 100%!important;
+				width: 100vw!important;
+				max-width: none;
+				height: unquote(($sliderelement-carousel-slide-ratio-y / $sliderelement-carousel-slide-ratio-x) * 100 + 'vw')!important;
+			}
+		}
+	}
 }
 
 // remove paddings for elemental list cuz inner elements will have paddings
@@ -67,6 +91,15 @@
 	}
 }
 
+.dynamic__elements__image__elements__elementimage {
+	.image-element__title {
+		margin-bottom: 0;
+	}
+	.image-element__caption {
+		margin: $element-reduced-spacer-y 0;
+	}
+}
+
 // remove container paddings for the slideshow
 .dynamic__elements__image__elements__elementimage,
 .site__elements__sliderelement {
@@ -82,14 +115,56 @@
 }
 
 // hide default page title cuz elemental object will be used to display titles
+.element__breadcrumbs {
+	margin-bottom: calc(-2 * #{inspect($element-spacer-y)});
+	.container {
+
+	}
+	.breadcrumb-link {
+		text-decoration: none;
+		&:hover,
+		&:focus,
+		&:active,
+		&.active {
+			color:$sidebar-nav-link-hover-color;
+		}
+	}
+
+	.active {
+		.breadcrumb-link {
+			color:$sidebar-nav-link-hover-color;
+		}
+	}
+}
+
 .page-header-element {
 	display: none;
+	margin-bottom: calc(-1 * #{inspect($element-spacer-y)});
+	.page-header {
+		line-height: 1em;
+		margin-bottom: 0;
+	}
 }
 .page-header-element:not(.d-block) + .element {
 	margin-top: 0;
 }
 
 // remove containers for child elements
+.sidebar__col {
+	position: relative;
+	margin-top: $element-reduced-spacer-y;
+	margin-bottom: $element-reduced-spacer-y;
+}
+.content-holder__sidebar {
+	.row {
+		.container,
+		.container-fluid {
+			padding: 0;
+			width: auto;
+		}
+	}
+}
+
 .element {
 	.elemental-area {
 		.element {
@@ -101,3 +176,24 @@
 		}
 	}
 }
+
+.element__widget {}
+
+.widget__Site_Widgets_SubmenuWidget {
+	.nav-link {
+		width: 100%;
+		&:hover,
+		&:focus,
+		&:active,
+		&.active {
+			font-weight: bold;
+			color:$sidebar-nav-link-hover-color;
+		}
+	}
+	.active {
+		.nav-link {
+			font-weight: bold;
+			color:$sidebar-nav-link-hover-color;
+		}
+	}
+}

src/scss/_components/_ui.main.base.scss

@@ -22,9 +22,20 @@ body {
 
 	.wrapper {
 		flex: 1 0 auto;
+		margin-bottom: $element-spacer-y;
 	}
 	.footer {
 		flex-shrink: 0;
+		margin-top: $element-spacer-y;
+	}
+}
+
+@media (min-width: $extra-large-screen) {
+	html, body {
+		font-size: .9vw!important;
+	}
+	.container {
+		max-width: 80vw;
 	}
 }
 

src/scss/_components/_ui.main.network.scss

@@ -33,8 +33,7 @@
 body.ajax-loading {
 	overflow: hidden;
 	height: 100vh;
-	#Header,
+	#Header {
-	#Footer {
 		position: relative;
 		z-index: 2001;
 	}

src/scss/_components/_ui.main.scss

@@ -184,6 +184,8 @@ button.nav-link {
 
 #BetterNavigator {
 	display: none;
+	top: 50%;
+    margin-top: -41px;
 
 	a,
 	button,

src/scss/_layout.scss

@@ -1,7 +1,3 @@
-/**
- * Your custom style
- */
-
 .sidebar__col {
 	position: relative;
 	margin-top: $element-reduced-spacer-y;
@@ -65,11 +61,11 @@
 	.nav-item,
 	.nav-link {
 		flex-direction: column;
-		@media (min-width: $full-body-min-width) {
+		/*@media (min-width: $full-body-min-width) {
 			align-items: center;
 			justify-content: center;
 			text-align: center;
-		}
+		}*/
 	}
 
 	.nav-link {
@@ -85,7 +81,7 @@
 	}
 
 	.active {
-		.nav-link {
+		> .nav-link {
 			background: $main-nav-link-hover-bg;
 			color: $main-nav-link-hover-color;
 		}
@@ -104,13 +100,15 @@
 		background: $main-nav-dropdown-bg;
 		margin-top: 0;
 		border-top: 0;
-		width: 100%;
+		min-width: 100%;
 		.nav-item-link {
 			color: $main-nav-dropdown-color;
 		}
 	}
 
 	.dropdown-item {
+		&.active,
+		&:active,
 		&:focus,
 		&:hover {
 			background: $main-nav-dropdown-hover-bg;
@@ -177,7 +175,3 @@
 		}
 	}
 }
-
-.flyout-FlyoutUI {
-	display: none;
-}

src/scss/_variables.scss

@@ -54,6 +54,7 @@ $enable-negative-margins: true !default;
 $enable-deprecation-messages: true !default;
 
 $enable-important-utilities: true !default;
+$breadcrumb-divider: quote('/') !default;
 
 // ui framework settings
 $body-gutter-x: $spacer !default;
@@ -110,6 +111,8 @@ $nav-link-hover-color: lighten($body-color, 10%);
 @import '~bootstrap/scss/mixins';
 
 // site specific variables
+$extra-large-screen: 2000px;
+
 $full-body-min-width: map-get($grid-breakpoints, 'lg') !default;
 $typography-breakpoint: map-get($grid-breakpoints, 'sm') - 1 !default;
 
@@ -130,8 +133,15 @@ $main-nav-dropdown-color: $header-link;
 $main-nav-dropdown-hover-bg: var(--bs-black);
 $main-nav-dropdown-hover-color: $main-nav-link-hover-color;
 
+$sidebar-nav-link-hover-color: var(--bs-indigo);
+
 $footer-bg: $header-bg;
 $footer-color: $header-color;
 $footer-link: $header-link;
 
 $footer-footer-bg: $main-nav-dropdown-hover-bg;
+
+$sliderelement-carousel-slide-max-y: 70vh;
+$sliderelement-carousel-slide-bg: $header-bg;
+$sliderelement-carousel-slide-ratio-x: 16;
+$sliderelement-carousel-slide-ratio-y: 9;