Adds bootstrap data to the sass imports. Adds update notification

parent 52ed7465
Pipeline #23887 passed with stages
in 12 minutes and 12 seconds
......@@ -39,10 +39,7 @@
],
"styles": [
"src/loader.scss",
"src/styles.scss",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
"src/styles.scss"
],
"scripts": []
},
......
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~intro.js/introjs.css";
@import "~intro.js/themes/introjs-nassim.css";
@import '~ngx-toastr/toastr-bs4-alert';
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
#quizSummaryHeader {
......
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
@mixin showFooterElements() {
opacity: 0.95;
......
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
.preview-frame {
......
@import "../../../../styles_vendor";
@import "../../../../assets/styles/vendor";
h3 {
text-align: center;
......
@import "../../../../styles_vendor";
@import "../../../../assets/styles/vendor";
h3 {
margin-bottom: 20px;
......
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
#landingPageContent {
......
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
.input-group {
.form-control {
......
@import "../../../styles_vendor";
@import "../../../assets/styles/vendor";
.container-fluid {
@include media-breakpoint-only(xs) {
......
......@@ -3,6 +3,7 @@ import { AfterViewInit, Component, Inject, OnInit, PLATFORM_ID } from '@angular/
import { ActivatedRoute, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router } from '@angular/router';
import { SwUpdate } from '@angular/service-worker';
import { TranslateService } from '@ngx-translate/core';
import { ActiveToast, ToastrService } from 'ngx-toastr';
import { DeprecatedDb, DeprecatedKeys } from '../../../lib/enums/enums';
import { INamedType } from '../../../lib/interfaces/interfaces';
// tslint:disable-next-line:max-line-length
......@@ -62,6 +63,7 @@ export class RootComponent implements OnInit, AfterViewInit {
private storageService: StorageService,
private userService: UserService,
private swUpdate: SwUpdate,
private toastService: ToastrService,
) {}
public ngOnInit(): void {
......@@ -78,6 +80,7 @@ export class RootComponent implements OnInit, AfterViewInit {
this.userService.loadConfig();
this.translateService.onLangChange.subscribe(() => {
this.initializeCookieConsent();
this.initializeUpdateToastr();
});
this.router.events.subscribe((event: any) => {
if (event instanceof RouteConfigLoadStart) {
......@@ -86,26 +89,6 @@ export class RootComponent implements OnInit, AfterViewInit {
this._isLoading = false;
}
});
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe((event) => {
console.log('service worker update available');
console.log('current version is', event.current);
console.log('available version is', event.available);
console.log('event type is', event.type);
this.swUpdate.activateUpdate().then(() => document.location.reload());
});
this.swUpdate.activated.subscribe(event => {
console.log('previous version was', event.previous);
console.log('current version is', event.current);
console.log('event type is', event.type);
});
this.swUpdate.checkForUpdate().then(() => {
// noop
}).catch((err) => {
console.error('error when checking for update', err);
});
}
}
public ngAfterViewInit(): void {
......@@ -156,4 +139,41 @@ export class RootComponent implements OnInit, AfterViewInit {
},
});
}
private initializeUpdateToastr(): void {
if (this.swUpdate.isEnabled) {
let swUpdateToast: ActiveToast<any>;
this.swUpdate.available.subscribe((event) => {
console.log('service worker update available');
console.log('current version is', event.current);
console.log('available version is', event.available);
console.log('event type is', event.type);
if (swUpdateToast) {
this.toastService.remove(swUpdateToast.toastId);
}
const message = this.translateService.instant('component.toasts.swupdate.message');
const title = this.translateService.instant('component.toasts.swupdate.title');
swUpdateToast = this.toastService.info(message, title, {
disableTimeOut: true,
toastClass: 'toast show',
});
swUpdateToast.onTap.subscribe(() => {
this.swUpdate.activateUpdate().then(() => document.location.reload());
});
});
this.swUpdate.activated.subscribe(event => {
console.log('previous version was', event.previous);
console.log('current version is', event.current);
console.log('event type is', event.type);
});
this.swUpdate.checkForUpdate().then(() => {
}).catch((err) => {
console.error('error when checking for update', err);
});
}
}
}
@import "../../styles_vendor";
@import "../../assets/styles/vendor";
.themePreview {
.imagePreviewFile {
......
@import "~bootstrap/scss/functions";
@import "variables";
*:focus, *:active {
outline: none !important;
box-shadow: none !important;
}
body {
font-family: $font;
height: 100%;
background-color: transparent;
}
* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
outline: none !important;
}
.qrCodeContent {
top: calc(50% - 25vh);
img {
height: 50vh !important;
width: 50vh !important;
}
}
#theme-wrapper {
z-index: 1000;
}
p {
margin: 0;
img {
max-width: 100%;
max-height: 50vh;
}
}
img[alt*="emoji_"] {
height: 24px;
width: 24px;
}
.responsive-table-row {
margin-top: 10px;
@include media-breakpoint-up(md) {
display: flex;
align-items: center;
margin: 0;
padding: 16px 0;
border: 0;
border-bottom: 1px solid #f0f0f0;
}
&.table-row-header {
@include media-breakpoint-down(sm) {
display: none;
}
}
.table-section {
white-space: nowrap;
.table-mobile-header {
flex: 0 0 40%;
max-width: 40%;
text-align: left;
white-space: normal;
@include media-breakpoint-up(md) {
display: none;
}
}
@include media-breakpoint-down(sm) {
.table-mobile-content {
flex: 0 0 60%;
max-width: 60%;
}
}
@include media-breakpoint-down(sm) {
display: flex;
align-self: stretch;
padding: 10px;
align-items: center;
min-height: 62px;
&:not(:first-child) {
border-top: 1px solid #f0f0f0
}
}
&.section-wrap {
white-space: normal;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
}
}
}
}
$step: 5;
$i: $step;
@while $i < 100 {
&.section-#{$i} {
flex: 0 0 #{$i}#{"%"};
@include media-breakpoint-up(md) {
max-width: #{$i}#{"%"};
}
}
$i: $i + $step;
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}
@mixin placeholder-align-center {
text-align: center;
padding: 1.5rem 0;
line-height: 1;
}
.placeholder-align-center {
&::-webkit-input-placeholder {
@include placeholder-align-center;
}
&:-moz-placeholder {
@include placeholder-align-center;
}
&::-moz-placeholder {
@include placeholder-align-center;
}
&:-ms-input-placeholder {
@include placeholder-align-center;
}
}
fa-icon {
&.cursor-pointer {
&:hover {
color: lighten(#000, 50%)
}
&:active {
color: lighten(#000, 40%)
}
}
}
.card.cursor-pointer {
&:hover {
.card-img-top {
color: lighten(#0a5561, 5%)
}
}
&:active {
.card-img-top {
color: lighten(#0a5561, 6%)
}
}
}
.break-word {
word-break: break-word;
}
.text-bold {
font-weight: bold;
}
.text-hyphen {
hyphens: auto;
}
.center-top {
height: 40vh;
align-content: center;
align-items: center;
}
.center-vertical {
height: 80vh;
align-content: center;
align-items: center;
}
.pointer {
cursor: pointer;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
button:disabled {
cursor: not-allowed !important;
}
.w-50px {
width: 50px;
}
.w-100px {
width: 100px;
}
\ No newline at end of file
$secondary: #ececec;
$light: #f5f5f5;
@import "~bootstrap/scss/variables";
$theme-colors: map-merge(
$theme-colors,
(
"secondary": $gray-100,
"light": $light
)
);
$colors: map-merge(
$colors,
(
)
);
// Links
$link-color: theme-color("dark");
$link-decoration: none;
$link-hover-color: theme-color("dark");
$link-hover-decoration: none;
$body-bg: transparent;
$font: Roboto, Roboto-Regular, Helvetica, Arial, sans-serif !important;
$corner-radius: 10px;
$splash-screen-corner-radius: 10px;
\ No newline at end of file
@import "~bootstrap/scss/functions";
@import "variables";
@import "~bootstrap/scss/mixins";
@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/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/utilities";
@import "utilities";
@import "~bootstrap/scss/print";
@import "responsive-table";
@import "custom";
@import "~intro.js/introjs.css";
@import "~intro.js/themes/introjs-nassim.css";
@import '~ngx-toastr/toastr-bs4-alert';
@import "styles_vendor";
$font: Roboto, Roboto-Regular, Helvetica, Arial, sans-serif !important;
$corner-radius: 10px;
$splash-screen-corner-radius: 10px;
@import "assets/styles/vendor";
@import "assets/themes/themeSwitcher";
body {
font-family: $font;
height: 100%;
background-color: transparent;
}
* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
outline: none !important;
}
.qrCodeContent {
top: calc(50% - 25vh);
img {
height: 50vh !important;
width: 50vh !important;
}
}
#theme-wrapper {
z-index: 1000;
}
.w-50px {
width: 50px;
}
.w-100px {
width: 100px;
}
p {
margin: 0;
img {
max-width: 100%;
max-height: 50vh;
}
}
.text-bold {
font-weight: bold;
}
.text-hyphen {
hyphens: auto;
}
.center-top {
height: 40vh;
align-content: center;
align-items: center;
}
.center-vertical {
height: 80vh;
align-content: center;
align-items: center;
}
.pointer {
cursor: pointer;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
button:disabled {
cursor: not-allowed !important;
}
img[alt*="emoji_"] {
height: 24px;
width: 24px;
}
@mixin placeholder-align-center {
text-align: center;
padding: 1.5rem 0;
line-height: 1;
}
.placeholder-align-center {
&::-webkit-input-placeholder {
@include placeholder-align-center;
}
&:-moz-placeholder {
@include placeholder-align-center;
}
&::-moz-placeholder {
@include placeholder-align-center;
}
&:-ms-input-placeholder {
@include placeholder-align-center;
}
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}
fa-icon {
&.cursor-pointer {
&:hover {
color: lighten(#000, 50%)
}
&:active {
color: lighten(#000, 40%)
}
}
}
.card.cursor-pointer {
&:hover {
.card-img-top {
color: lighten(#0a5561, 5%)
}
}
&:active {
.card-img-top {
color: lighten(#0a5561, 6%)
}
}
}
.break-word {
word-break: break-word;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment