From a4fc1fbd78492f7fabca3ea921798822f250fce4 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Tue, 23 Feb 2021 20:51:02 +0700 Subject: [PATCH] IMPR: minor fixtures --- package.json | 2 +- src/html/_components/LoadingSpinner.html | 34 +++++--- src/js/_components/_main.links.js | 6 ++ src/js/_components/_main.online.js | 9 +- src/js/_components/_page.jsx | 38 ++------- src/scss/_components/_ui.bootstrap.scss | 3 + src/scss/_components/_ui.elemental.scss | 96 ++++++++++++++++++++++ src/scss/_components/_ui.main.base.scss | 11 +++ src/scss/_components/_ui.main.network.scss | 3 +- src/scss/_components/_ui.main.scss | 2 + src/scss/_layout.scss | 18 ++-- src/scss/_variables.scss | 10 +++ 12 files changed, 167 insertions(+), 65 deletions(-) diff --git a/package.json b/package.json index 2423eb1..c3ce4e1 100644 --- a/package.json +++ b/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 ", "license": "BSD-2-Clause", diff --git a/src/html/_components/LoadingSpinner.html b/src/html/_components/LoadingSpinner.html index 7f570dd..242256b 100644 --- a/src/html/_components/LoadingSpinner.html +++ b/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; - height: 64px; + width: 4.57rem; + height: 1rem; color: #fff; } .lds-ellipsis div { position: absolute; - top: 27px; - width: 11px; - height: 11px; + top: 0.15rem; + width: 0.78rem; + 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; + } + }
diff --git a/src/js/_components/_main.links.js b/src/js/_components/_main.links.js index a1281ba..0e2b36c 100644 --- a/src/js/_components/_main.links.js +++ b/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`); }); } diff --git a/src/js/_components/_main.online.js b/src/js/_components/_main.online.js index 470bda8..2a1034c 100644 --- a/src/js/_components/_main.online.js +++ b/src/js/_components/_main.online.js @@ -99,11 +99,6 @@ export default ((W) => { UPDATE_ONLINE_STATUS(true); }); - W.addEventListener(`${Events.LOADED}`, () => { - navigatorStateUpdate();//UPDATE_ONLINE_STATUS(true); - }); - - W.addEventListener(`${Events.AJAX}`, () => { - navigatorStateUpdate(); - }); + W.addEventListener(`${Events.LOADED}`, navigatorStateUpdate); + W.addEventListener(`${Events.AJAX}`, navigatorStateUpdate); })(window); diff --git a/src/js/_components/_page.jsx b/src/js/_components/_page.jsx index 491a6ff..c37b36f 100644 --- a/src/js/_components/_page.jsx +++ b/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(` - query Pages { - readPages(URLSegment: "${url_segment}", limit: 1, offset: 0) { + const query = gql(`query Pages { + readPages(Link: "${link}") { 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, }); diff --git a/src/scss/_components/_ui.bootstrap.scss b/src/scss/_components/_ui.bootstrap.scss index 93da679..9737903 100755 --- a/src/scss/_components/_ui.bootstrap.scss +++ b/src/scss/_components/_ui.bootstrap.scss @@ -43,3 +43,6 @@ @import '~bootstrap/scss/utilities/api'; @import '_ui.carousel'; +.navbar { + justify-content: flex-end; +} diff --git a/src/scss/_components/_ui.elemental.scss b/src/scss/_components/_ui.elemental.scss index 169d020..02a9a14 100755 --- a/src/scss/_components/_ui.elemental.scss +++ b/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; + } + } +} diff --git a/src/scss/_components/_ui.main.base.scss b/src/scss/_components/_ui.main.base.scss index d424aa8..1790ea3 100644 --- a/src/scss/_components/_ui.main.base.scss +++ b/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; } } diff --git a/src/scss/_components/_ui.main.network.scss b/src/scss/_components/_ui.main.network.scss index 2740350..a41dbbe 100644 --- a/src/scss/_components/_ui.main.network.scss +++ b/src/scss/_components/_ui.main.network.scss @@ -33,8 +33,7 @@ body.ajax-loading { overflow: hidden; height: 100vh; - #Header, - #Footer { + #Header { position: relative; z-index: 2001; } diff --git a/src/scss/_components/_ui.main.scss b/src/scss/_components/_ui.main.scss index 47fbbc6..27dbf7a 100755 --- a/src/scss/_components/_ui.main.scss +++ b/src/scss/_components/_ui.main.scss @@ -184,6 +184,8 @@ button.nav-link { #BetterNavigator { display: none; + top: 50%; + margin-top: -41px; a, button, diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss index 5c52ac4..81571d9 100755 --- a/src/scss/_layout.scss +++ b/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; -} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 4b811fd..932424d 100755 --- a/src/scss/_variables.scss +++ b/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;