mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
IMPR: minor fixtures
This commit is contained in:
Tony Air
parent
99a32961df
commit
a4fc1fbd78
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="PageLoading">
|
||||
|
||||
@ -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`);
|
||||
});
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
|
||||
@ -43,3 +43,6 @@
|
||||
@import '~bootstrap/scss/utilities/api';
|
||||
|
||||
@import '_ui.carousel';
|
||||
.navbar {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -33,8 +33,7 @@
|
||||
body.ajax-loading {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
#Header,
|
||||
#Footer {
|
||||
#Header {
|
||||
position: relative;
|
||||
z-index: 2001;
|
||||
}
|
||||
|
||||
@ -184,6 +184,8 @@ button.nav-link {
|
||||
|
||||
#BetterNavigator {
|
||||
display: none;
|
||||
top: 50%;
|
||||
margin-top: -41px;
|
||||
|
||||
a,
|
||||
button,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user