From f5d178d3101a2ec88966d06029dbacdc342caac3 Mon Sep 17 00:00:00 2001 From: Tony Air Date: Mon, 15 Mar 2021 03:46:04 +0700 Subject: [PATCH] IMPR: Namespaces refactoring --- src/scss/_components/_ui.main.base.scss | 187 +++++++++++++----------- webpack.configuration.js | 33 +++-- webpack.yml | 2 +- 3 files changed, 117 insertions(+), 105 deletions(-) diff --git a/src/scss/_components/_ui.main.base.scss b/src/scss/_components/_ui.main.base.scss index 1790ea3..c5f1856 100644 --- a/src/scss/_components/_ui.main.base.scss +++ b/src/scss/_components/_ui.main.base.scss @@ -7,36 +7,42 @@ html, body { - min-height: 100%; - min-height: 100vh; + min-height: 100%; + min-height: 100vh; } // sticky footer body { - display: flex; - flex-direction: column; - --body-gutter-x: #{inspect($body-gutter-x)}; - --body-gutter-y: #{inspect($body-gutter-y)}; - --body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)}; - --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)}; + display: flex; + flex-direction: column; + --body-bg: #{inspect($body-bg)}; + --body-color: #{inspect($body-color)}; + --body-gutter-x: #{inspect($body-gutter-x)}; + --body-gutter-y: #{inspect($body-gutter-y)}; + --body-gutter-reduced-x: #{inspect($body-gutter-reduced-x)}; + --body-gutter-reduced-y: #{inspect($body-gutter-reduced-y)}; - .wrapper { - flex: 1 0 auto; - margin-bottom: $element-spacer-y; - } - .footer { - flex-shrink: 0; - margin-top: $element-spacer-y; - } + .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; - } + + html, + body { + font-size: .9vw !important; + } + + .container { + max-width: 80vw; + } } // don't let images be wider than the parent layer @@ -45,55 +51,57 @@ a, span, button, i { - background-repeat: no-repeat; - background-size: contain; + background-repeat: no-repeat; + background-size: contain; } iframe, img { - max-width: 100%; + max-width: 100%; } ul, table, p { - &:first-child { - margin-top: 0; - } + &:first-child { + margin-top: 0; + } - &:last-child { - margin-bottom: 0; - } + &:last-child { + margin-bottom: 0; + } } .a { - cursor: pointer; - color: $link-color; - text-decoration: $link-decoration; - &:hover, - &:focus { - text-decoration: $link-hover-decoration; - color: $link-hover-color; - } + cursor: pointer; + color: $link-color; + text-decoration: $link-decoration; + + &:hover, + &:focus { + text-decoration: $link-hover-decoration; + color: $link-hover-color; + } } // exclude bootstrap-table [data-toggle='table'] { - &:hover, - &.active, - &:focus { - opacity: 1; - } + + &:hover, + &.active, + &:focus { + opacity: 1; + } } [data-toggle='collapse'] { - &[aria-expanded='true'] { - .accordion-icon { - &:before { - content: '\f068'; - } - } - } + &[aria-expanded='true'] { + .accordion-icon { + &:before { + content: '\f068'; + } + } + } } // transactions @@ -116,7 +124,7 @@ textarea, .message, [data-toggle], [data-toggle] * { - transition: all 0.4s ease; + transition: all 0.4s ease; } .a, @@ -124,43 +132,46 @@ a, [data-toggle], button, .btn { - &:hover, - &.active, - &[aria-expanded='true'] { - > .fa, - > .far, - > .fas, - > .fab, - &.fa, - &.far, - &.fas, - &.fab { - transform: rotate(-180deg); - } - } - &:hover, - &[aria-expanded='true'] { - opacity: 0.8; - } + &:hover, + &.active, + &[aria-expanded='true'] { - &.disabled { - opacity: 0.5; - cursor: default; + >.fa, + >.far, + >.fas, + >.fab, + &.fa, + &.far, + &.fas, + &.fab { + transform: rotate(-180deg); + } + } - &:hover, - &.active, - &[aria-expanded='true'] { - > .fa, - > .far, - > .fas, - > .fab, - &.fa, - &.far, - &.fas, - &.fab { - transform: rotate(0deg); - } - } - } + &:hover, + &[aria-expanded='true'] { + opacity: 0.8; + } + + &.disabled { + opacity: 0.5; + cursor: default; + + &:hover, + &.active, + &[aria-expanded='true'] { + + >.fa, + >.far, + >.fas, + >.fab, + &.fa, + &.far, + &.fas, + &.fab { + transform: rotate(0deg); + } + } + } } diff --git a/webpack.configuration.js b/webpack.configuration.js index ea623df..394ff57 100644 --- a/webpack.configuration.js +++ b/webpack.configuration.js @@ -2,7 +2,8 @@ * Load webpack configuration from app/_config/webpack.yml */ -const YML_PATH = '/webpack.yml'; +const YML_PATH = '/app/_config/webpack.yml'; +const CONF_VAR = 'App\\Templates\\WebpackTemplateProvider'; const path = require('path'); const filesystem = require('fs'); @@ -10,28 +11,28 @@ const fs = require('fs'); const yaml = require('js-yaml'); const conf = yaml.safeLoad( - fs.readFileSync(path.join(__dirname, YML_PATH), 'utf8'), + fs.readFileSync(path.join(__dirname, YML_PATH), 'utf8'), ); let themes = []; // add themes -if (conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR) { - const themeDir = conf['Site\\Templates\\WebpackTemplateProvider'].THEMESDIR; - const dir = path.resolve(__dirname, themeDir); +if (conf[CONF_VAR].THEMESDIR) { + const themeDir = conf[CONF_VAR].THEMESDIR; + const dir = path.resolve(__dirname, themeDir); - if (filesystem.existsSync(dir)) { - filesystem.readdirSync(dir).forEach((file) => { - filePath = path.join(themeDir, file); - const stat = filesystem.statSync(filePath); + if (filesystem.existsSync(dir)) { + filesystem.readdirSync(dir).forEach((file) => { + filePath = path.join(themeDir, file); + const stat = filesystem.statSync(filePath); - if (stat && stat.isDirectory()) { - themes.push(filePath); - } - }); - } + if (stat && stat.isDirectory()) { + themes.push(filePath); + } + }); + } } module.exports = { - configuration: conf['Site\\Templates\\WebpackTemplateProvider'], - themes: themes, + configuration: conf[CONF_VAR], + themes: themes, }; diff --git a/webpack.yml b/webpack.yml index 12086b3..be99b51 100644 --- a/webpack.yml +++ b/webpack.yml @@ -2,7 +2,7 @@ # with all configuration variables presented # Cuz WebPack compiling script use it to set configuration -Site\Templates\WebpackTemplateProvider: +App\Templates\WebpackTemplateProvider: APPDIR: ./ THEMESDIR: themes HOSTNAME: 127.0.0.1