MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

REMOVE material-dashboard and bootstrap from angular json, add boostrap overwrite files to styles.scss, relevant fixes

This commit is contained in:
mchouliara 2024-10-01 14:30:29 +03:00
parent b165d867f5
commit 9cedd91309
11 changed files with 266 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/angular.json
View File

@ -25,8 +25,6 @@
{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" }
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/assets/scss/material-dashboard.scss",
"src/styles.scss",
"node_modules/cookieconsent/build/cookieconsent.min.css"
],
@ -113,7 +111,6 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/assets/scss/material-dashboard.scss",
"src/styles.scss",
"node_modules/tinymce/tinymce.min.js"
],

1
frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
View File

@ -1,5 +1,4 @@
@use 'sass:math';
@import "assets/scss/core/_variables.scss";
.full-width{
width: 100%;

4
frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -31,8 +31,6 @@
.card-content {
text-align: left;
font-weight: 300;
font-size: 1rem;
letter-spacing: 0px;
color: var(--dark-gray);
padding-left: 40px;
@ -56,7 +54,6 @@
.personal-usage {
text-align: left;
font-weight: 300;
font-size: 1.25rem;
letter-spacing: 0px;
color: #000000;
@ -348,7 +345,6 @@ mat-tab-group.my-mat-tab .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-m
.new-releases-content {
text-align: left;
font-weight: 300;
font-size: 1rem;
letter-spacing: 0px;
color: var(--dark-gray);
padding-left: 40px;

2
frontend/src/app/ui/description/editor/description-base-fields-editor/description-base-fields-editor.component.scss
View File

@ -6,7 +6,7 @@
letter-spacing: 0px;
color: var(--dark-gray);
opacity: 1;
margin: 3rem 0rem 3rem 0rem;
margin: 2rem 0rem 1.5rem 0rem;
}
.heading {

6
frontend/src/app/ui/navbar/navbar.component.html
View File

@ -1,6 +1,6 @@
<ng-container>
<nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid h-100">
<nav class="fixed-navbar">
<div class="container-fluid d-flex align-items-center h-100">
<button class="hamburger change" id="hamburger" (click)="toggleMyNav($event)" [attr.aria-label]="'ALT-TEXT.HAMBURGER' | translate">
<div class="icon-bar1"></div>
<div class="icon-bar2"></div>
@ -74,7 +74,7 @@
<ng-template #userSettingsTemplate>
@if(this.isAuthenticated()) {
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent;">
<button (click)="openProfile()" [matTooltip]="userName" style="border: none; background-color: transparent; min-width: 48px; min-height: 48px">
<img alt="{{('ALT-TEXT.USER-OPTIONS' | translate) ?? 'user options'}}" mat-card-avatar class="my-mat-card-avatar" [src]="getPrincipalAvatar() ?? getDefaultAvatar()" (error)="this.applyFallbackAvatar($event)">
</button>
}@else {

1
frontend/src/app/ui/navbar/navbar.component.scss
View File

@ -17,6 +17,7 @@ $mat-card-header-size: 40px !default;
display: block;
}
}
.my-mat-card-avatar {
height: $mat-card-header-size;
width: $mat-card-header-size;

2
frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.scss
View File

@ -253,7 +253,7 @@ a:hover {
letter-spacing: 0px;
color: var(--dark-gray);
opacity: 1;
margin: 3rem 0rem 3rem 0rem;
margin: 2rem 0rem 1.5rem 0rem;
}
.link-icon {

98
frontend/src/app/ui/sidebar/sidebar.component.scss
View File

@ -1,38 +1,41 @@
$mat-card-header-size: 30px !default;
.logo-img {
.sidebar-wrapper {
height: 100%;
display: flex;
flex-direction: column;
.logo-img {
width: 60px;
display: block;
max-height: none;
margin-left: 50px;
}
}
.logo-img img {
.logo-img img {
width: 155px;
top: 0px;
position: inherit;
}
}
.sidebarSubtitle p {
.sidebarSubtitle p {
margin-left: 20px;
color: rgb(166, 166, 166);
}
}
.nav hr {
.nav hr {
border-top: 1px solid #fff;
border-bottom: 1px solid #E1E1E1;
}
}
.sidebar-footer {
.sidebar-footer {
margin-top: auto;
}
}
.sidebar-nav {
.sidebar-nav {
background: white;
height: 70px;
}
}
.nav-row {
.nav-row {
display: flex;
flex-direction: row;
align-items: center;
@ -43,9 +46,9 @@ $mat-card-header-size: 30px !default;
color: #000000;
opacity: 1;
font-size:0.93rem;
}
}
.nav-subrow {
.nav-subrow {
display: flex;
flex-direction: row;
align-items: center;
@ -55,89 +58,90 @@ $mat-card-header-size: 30px !default;
color: #000000;
opacity: 1;
font-size:0.93rem;
}
}
.nav-row:hover, .nav-row:focus {
.nav-row:hover, .nav-row:focus {
background-color: #ececec;
border-radius: 6px;
}
}
.icon {
.icon {
width: 24px;
height: 24px;
vertical-align: middle;
color: #6B6B6B;
}
}
.nav-row span {
.nav-row span {
padding-left: 1.5rem;
}
}
.mat-list {
.mat-list {
padding-top: 0px !important;
display: flex !important;
}
}
.mat-list div {
.mat-list div {
width: 100%;
}
}
.my-mat-card-avatar {
.my-mat-card-avatar {
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
flex-shrink: 0;
margin-right: 7px;
}
}
.nav-list-item-hidden {
.nav-list-item-hidden {
display: none !important;
}
.login {
.login {
margin-top: 15px !important;
}
}
.login-label {
.login-label {
text-transform: uppercase;
}
}
.firstSubtitle {
.firstSubtitle {
margin-top: 20px;
}
}
.icon-mask {
.icon-mask {
color: #6b6b6b;
transform: translate(-8px, 8px);
}
}
.active a {
.active a {
font-weight: 700;
}
}
.active a i {
.active a i {
color: var(--primary-color);
}
}
.inner-line {
.inner-line {
margin-left: 12px;
margin-right: 10px;
width: 20px;
height: 13px;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
}
.icon-external {
.icon-external {
font-size: 1rem;
padding-left: 0.4rem !important;
color: #6b6b6b;
}
}
mat-list-item {
mat-list-item {
display: flex !important;
height: auto !important;
}
}
::ng-deep .mat-list-item-content {

101
frontend/src/assets/scss/core/_type.scss
View File

@ -12,7 +12,7 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
h1, .h1 {
font-size: $font-size-h1;
line-height: 1.15em;
line-height: 1.5em;
}
h2, .h2{
font-size: $font-size-h2;
@ -34,59 +34,62 @@ h5, .h5 {
}
h6, .h6{
font-size: $font-size-h6;
text-transform: uppercase;
font-weight: $font-weight-bold;
}
.title,
.card-title,
.info-title,
.footer-brand,
.footer-big h5,
.footer-big h4,
.media .media-heading{
//font-weight: $font-weight-extra-bold;
// font-family: $font-family-serif;
&,
a{
color: $black-color;
text-decoration: none;
}
small {
font-size: $font-size-small;
}
.card-blog .card-title{
font-weight: $font-weight-extra-bold;
}
// .title,
// .card-title,
// .info-title,
// .footer-brand,
// .footer-big h5,
// .footer-big h4,
// .media .media-heading{
// //font-weight: $font-weight-extra-bold;
// // font-family: $font-family-serif;
h2.title{
margin-bottom: $margin-base * 2;
}
// &,
// a{
// color: $black-color;
// text-decoration: none;
// }
// }
.description,
.card-description,
.footer-big p{
color: $gray-light;
}
// .card-blog .card-title{
// font-weight: $font-weight-extra-bold;
// }
.text-warning {
color: $brand-warning !important;
}
.text-primary {
color: $brand-primary !important;
}
.text-danger {
color: $brand-danger !important;
}
.text-success {
color: $brand-success !important;
}
.text-info {
color: $brand-info !important;
}
.text-rose{
color: $brand-rose !important;
}
.text-gray{
color: $gray-color !important;
}
// h2.title{
// margin-bottom: $margin-base * 2;
// }
// .description,
// .card-description,
// .footer-big p{
// color: $gray-light;
// }
// .text-warning {
// color: $brand-warning !important;
// }
// .text-primary {
// color: $brand-primary !important;
// }
// .text-danger {
// color: $brand-danger !important;
// }
// .text-success {
// color: $brand-success !important;
// }
// .text-info {
// color: $brand-info !important;
// }
// .text-rose{
// color: $brand-rose !important;
// }
// .text-gray{
// color: $gray-color !important;
// }

85
frontend/src/assets/scss/core/variables/_type.scss
View File

@ -5,6 +5,7 @@
// https://www.google.com/design/spec/style/typography.html#typography-styles
// http://www.getmdl.io/styles/index.html
$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
$font-family-serif: 'Roboto Slab', 'Times New Roman', serif !default;
//$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
@ -19,89 +20,19 @@ $font-size-sm: .875rem !default;
$font-size-xs: .75rem !default;
$font-size-h1: 3.3125rem;
$font-size-h1: 2.5rem;
$font-size-h2: 2.25rem !default;
$font-size-h3: 1.5625rem;
$font-size-h4: 1.125rem !default;
$font-size-h5: 1.0625rem !default;
$font-size-h6: 0.75rem !default;
$font-size-h6: 1rem !default;
$font-paragraph: 14px !default;
$font-size-navbar: 16px !default;
$font-size-small: 12px !default;
$font-size-small: 13px !default;
//
$display1-size: 7rem !default; // md display-4 112px was 6rem;
$display2-size: 3.5rem !default; // md display-3 56px was 5.5rem
$display3-size: 2.8125rem !default; // md display-2 45px was 4.5rem
$display4-size: 2.125rem !default; // md display-1 34px was 3.5rem
//
//$display1-weight: 300 !default;
//$display2-weight: 300 !default;
//$display3-weight: 300 !default;
//$display4-weight: 300 !default;
//
$line-height-base: 1.5 !default;
//
$headings-margin-bottom: math.div($spacer, 2) !default;
//$headings-font-family: inherit !default;
$headings-font-weight: 400 !default; // was 500
$font-weight-light: 300 !default;
$font-weight-default: 400 !default;
$font-weight-bold: 500 !default;
$font-weight-extra-bold: 700 !default;
$font-size-large: 1em !default;
$font-size-large-navbar: 20px !default;
//$headings-line-height: 1.1 !default;
//$headings-color: inherit !default;
//
//$lead-font-size: 1.25rem !default;
//$lead-font-weight: 300 !default;
//
//$text-muted: $gray-light !default;
//
//$abbr-border-color: $gray-light !default;
//
//$blockquote-small-color: $gray-light !default;
//$blockquote-font-size: ($font-size-base * 1.25) !default;
//$blockquote-border-color: $gray-lighter !default;
//
//$hr-border-color: rgba(0,0,0,.1) !default;
//$hr-border-width: $border-width !default;
//
//$list-inline-padding: 5px !default;
//
//$dt-font-weight: bold !default;
//
//$nested-kbd-font-weight: bold !default;
$padding-input-vertical: 11px !default;
$padding-input-horizontal: 19px !default;
$padding-btn-vertical: 11px !default;
$padding-btn-horizontal: 22px !default;
$padding-base-vertical: .5rem !default;
$padding-base-horizontal: .7rem !default;
$padding-round-horizontal: 23px !default;
$padding-simple-vertical: 10px !default;
$padding-simple-horizontal: 17px !default;
$padding-large-vertical: 15px !default;
$padding-large-horizontal: 48px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 15px !default;
$padding-label-vertical: 2px !default;
$padding-label-horizontal: 12px !default;
$margin-large-vertical: 30px !default;
$margin-base-vertical: 15px !default;
$margin-base-horizontal: 15px !default;
$font-weight-light: 200 !default;
$font-weight-default: 300 !default;
$font-weight-bold: 400 !default;
$font-weight-extra-bold: 500 !default;

86
frontend/src/styles.scss
View File

@ -1,13 +1,12 @@
@use '@angular/material'as mat;
// @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
// @import "src/assets/scss/material-dashboard.scss";
//Material-Bootstrap configuration
@import '../node_modules/bootstrap/scss/bootstrap.scss';
@import "assets/scss/bootstrap-material";
// @import "/node_modules/bootstrap/scss/bootstrap";
// @import "@covalent/core/theming/all-theme";
// @import "@angular/material/theming"; // @import '../node_modules/@angular/material/theming';
@ -19,9 +18,14 @@
// Guided Tour style
@import '../node_modules/ngx-guided-tour/scss/guided-tour-base-theme.scss';
// Be sure that you only ever include this mixin once!
@include mat.core();
// styles moved from material-dashboard.scss -> overwrite bootstrap default styles
@import "assets/scss/core/variables/type";
@import "assets/scss/core/type";
:root {
--primary-color: #18488F;
@ -82,30 +86,35 @@ $mat-dark-theme-warn: mat.m2-define-palette($mat-dark-theme-warn-palette,
$darker: A700,
$text: 100);
//including the typography rules from _type.scss here
$mat-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
// $display-4: mat.m2-define-typography-level($font-size: 96px, $font-weight: 300, $font-family: 'Roboto, sans-serif;'),
// $display-3: mat.m2-define-typography-level($font-size: 60px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $display-2: mat.m2-define-typography-level($font-size: 48px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $display-1: mat.m2-define-typography-level($font-size: 34px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $headline: mat.m2-define-typography-level($font-size: 24px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $title: mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $subheading-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $subheading-1: mat.m2-define-typography-level($font-size: 20px, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
$body-2: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
// $caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: Medium, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 0.87rem, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
$headline-2: mat.m2-define-typography-level($font-size: 2.25rem),
$headline-3: mat.m2-define-typography-level($font-size: 1.5625rem),
$headline-4: mat.m2-define-typography-level($font-size: 1.125rem),
$headline-5: mat.m2-define-typography-level($font-size: 1.0625rem),
$headline-6: mat.m2-define-typography-level($font-size: 1rem ),
$body-1: mat.m2-define-typography-level($font-size: 1.125rem),
$body-2: mat.m2-define-typography-level($font-size: 0.9rem),
$button: mat.m2-define-typography-level($font-size: 0.87rem),
$caption: mat.m2-define-typography-level($font-size: 0.77rem),
// Line-height must be unit-less fraction of the font-size.
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125, $font-weight: 500, $font-family: 'Roboto, sans-serif;'),
// $input: mat.m2-define-typography-level($font-size: inherit, $line-height: 1.125),
);
$mat-accessibility-typography: mat.m2-define-typography-config($font-family: 'Roboto, sans-serif;',
$body-1: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$body-2: mat.m2-define-typography-level($font-size: 18px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$button: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$caption: mat.m2-define-typography-level($font-size: 16px, $font-weight: 400, $font-family: 'Roboto, sans-serif;'),
$headline-1: mat.m2-define-typography-level($font-size: 2.5rem),
$headline-2: mat.m2-define-typography-level($font-size: 2.38rem),
$headline-3: mat.m2-define-typography-level($font-size: 1.6925rem),
$headline-4: mat.m2-define-typography-level($font-size: 1.255rem),
$headline-5: mat.m2-define-typography-level($font-size: 1.1925rem),
$headline-6: mat.m2-define-typography-level($font-size: 1.13rem ),
$body-1: mat.m2-define-typography-level($font-size: 1.255rem),
$body-2: mat.m2-define-typography-level($font-size: 1.15rem),
$button: mat.m2-define-typography-level($font-size: 1rem),
);
$mat-density: 0;
@ -140,24 +149,31 @@ $mat-accessibility-theme: mat.m2-define-light-theme((color: (primary: $mat-theme
.accessibility-theme {
@include mat.all-component-themes($mat-accessibility-theme);
// change individual classes set in components' scss
.frame-txt, .action-list-text, .stepper-back, .nav-row, .nav-subrow, .center-content, .form-check,
.nav-row, .nav-subrow, .sidebar-footer .option, label.mdc-label,.description-label {
font-size: max(1rem, 16px) !important;
.nav-row, .nav-subrow, .sidebar-footer .option {
font-size: 1rem !important;
}
.action-list-label, .actions-list, small {
font-size: max(1rem, 13px) !important;
font-size: 0.8em !important;
}
.status-chip {
font-size: 14px;
font-size: 14px !important;
}
.plan-title, .plan-title-draft, .description-title, .description-title-draft {
font-size: 1.2rem !important;
}
.plan-subtitle, .description-subtitle {
font-size: 1rem !important;
}
.heading {
font-size: 1.255rem !important;
}
}
// styles moved from material-dashboard.scss
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: Roboto, sans-serif;
font-weight: 300;
}
a {
@ -169,12 +185,15 @@ a {
&.color-unset {
color: #000000;
}
& .material-icons { //_misc.scss
vertical-align: middle;
}
}
.required-text {
font-size: 13px;
.card {
border: 0;
}
//TODO: angular update @import '../node_modules/dragula/dist/dragula.css';
/* in-flight clone */
.gu-mirror {
@ -326,10 +345,6 @@ a {
}
}
// .gray-container {
// background: linear-gradient(180deg, #f6f6f6, #fff);
// margin: 5px 0px;
// }
.main-content {
background-color: #f5f5f5;
@ -675,6 +690,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
////////*////////
///
///
///
ul.horizontal-list {
list-style-type: none;
margin: 0;