diff --git a/package-lock.json b/package-lock.json index 78062ee..2d4c672 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,6 +6,7 @@ "": { "devDependencies": { "axios": "^0.21.1", + "bootstrap": "^5.0.2", "cross-env": "^7.0", "fslightbox": "^3.2.3", "laravel-mix": "^6.0.16", @@ -1714,6 +1715,17 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "dev": true, + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@trysound/sax": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz", @@ -2724,6 +2736,19 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "node_modules/bootstrap": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz", + "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.9.2" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -11112,6 +11137,13 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "dev": true, + "peer": true + }, "@trysound/sax": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz", @@ -11977,6 +12009,13 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.2.tgz", + "integrity": "sha512-1Ge963tyEQWJJ+8qtXFU6wgmAVj9gweEjibUdbmcCEYsn38tVwRk8107rk2vzt6cfQcRr3SlZ8aQBqaD8aqf+Q==", + "dev": true, + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", diff --git a/package.json b/package.json index 7a09662..b03e1af 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "devDependencies": { "axios": "^0.21.1", + "bootstrap": "^5.0.2", "cross-env": "^7.0", "fslightbox": "^3.2.3", "laravel-mix": "^6.0.16", diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..7daa444 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..8e4b3dc Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon-120x120.png b/public/apple-touch-icon-120x120.png new file mode 100644 index 0000000..b523397 Binary files /dev/null and b/public/apple-touch-icon-120x120.png differ diff --git a/public/apple-touch-icon-152x152.png b/public/apple-touch-icon-152x152.png new file mode 100644 index 0000000..d372615 Binary files /dev/null and b/public/apple-touch-icon-152x152.png differ diff --git a/public/apple-touch-icon-180x180.png b/public/apple-touch-icon-180x180.png new file mode 100644 index 0000000..9d8e301 Binary files /dev/null and b/public/apple-touch-icon-180x180.png differ diff --git a/public/apple-touch-icon-60x60.png b/public/apple-touch-icon-60x60.png new file mode 100644 index 0000000..0c8549a Binary files /dev/null and b/public/apple-touch-icon-60x60.png differ diff --git a/public/apple-touch-icon-76x76.png b/public/apple-touch-icon-76x76.png new file mode 100644 index 0000000..e4577cc Binary files /dev/null and b/public/apple-touch-icon-76x76.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..9d8e301 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..5efca53 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..2a190d7 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index e69de29..fcd0d21 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png new file mode 100644 index 0000000..b9bf3f3 Binary files /dev/null and b/public/mstile-144x144.png differ diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png new file mode 100644 index 0000000..322c5a9 Binary files /dev/null and b/public/mstile-150x150.png differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 0000000..2429f6c --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,18 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..4d8df64 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Support Web", + "short_name": "Support Web", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/resources/images/supportweb.png b/resources/images/supportweb.png new file mode 100644 index 0000000..9641d1f Binary files /dev/null and b/resources/images/supportweb.png differ diff --git a/resources/images/supportweb.xcf b/resources/images/supportweb.xcf new file mode 100644 index 0000000..f3adda5 Binary files /dev/null and b/resources/images/supportweb.xcf differ diff --git a/resources/images/supportweb_128.png b/resources/images/supportweb_128.png new file mode 100644 index 0000000..6e6d38a Binary files /dev/null and b/resources/images/supportweb_128.png differ diff --git a/resources/images/supportweb_favico.png b/resources/images/supportweb_favico.png new file mode 100644 index 0000000..5d70c73 Binary files /dev/null and b/resources/images/supportweb_favico.png differ diff --git a/resources/sass/_bootswatch.scss b/resources/sass/_bootswatch.scss new file mode 100644 index 0000000..a8748ac --- /dev/null +++ b/resources/sass/_bootswatch.scss @@ -0,0 +1,331 @@ +// Lumen 5.0.2 +// Bootswatch + + +// Variables +@import 'variables'; + +$web-font-path: "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" !default; +@if $web-font-path { + @import url($web-font-path); +} + +// Mixins + +@mixin shadow($width: 4px){ + border-style: solid; + border-width: 0 1px $width 1px; +} + +// Navbar + +.navbar { + @include shadow(); + + @each $color, $value in $theme-colors { + &.bg-#{$color} { + border-color: shade-color($value, 10%); + } + } +} + +// Buttons + +.btn { + @include shadow(); + text-transform: uppercase; + + &:not(.disabled):hover { + margin-top: 1px; + border-bottom-width: 3px; + } + + &:not(.disabled):active { + margin-top: 2px; + border-bottom-width: 2px; + @include box-shadow(none); + } + + @each $color, $value in $theme-colors { + &-#{$color} { + &:hover, + &:active, + &:focus { + background-color: $value; + } + + &, + &:not(.disabled):hover, + &:not(.disabled):active, + &:focus { + border-color: shade-color($value, 10%); + } + } + } +} + +[class*="btn-outline"] { + border-top-width: 1px; +} + +.btn-group-vertical { + .btn + .btn { + &:hover { + margin-top: -1px; + border-top-width: 1px; + } + + &:active { + margin-top: -1px; + border-top-width: 2px; + } + } +} + +// Typography + +.text-secondary { + color: $gray-700 !important; +} + +.blockquote-footer { + color: $gray-600; +} + +// Forms + +.form-control { + box-shadow: inset 0 2px 0 rgba(0, 0, 0, .075); +} + +.input-group-sm { + > .input-group-prepend, + > .input-group-append { + .btn { + font-size: $btn-font-size-sm; + } + } +} + +// Navs + +.nav { + .open > a, + .open > a:hover, + .open > a:focus { + border-color: transparent; + } +} + +.nav-tabs { + .nav-link { + color: $body-color; + + &, + &.disabled, + &.disabled:hover, + &.disabled:focus { + margin-top: 6px; + border-color: $nav-tabs-border-color; + transition: padding-bottom .2s ease-in-out, margin-top .2s ease-in-out, border-bottom .2s ease-in-out; + } + + &:not(.disabled):hover, + &:not(.disabled):focus, + &.active { + padding-bottom: add(.5rem, 6px); + border-bottom-color: transparent; + margin-top: 0; + } + } + + &.nav-justified > li { + vertical-align: bottom; + } +} + +.dropdown-menu { + margin-top: 0; + @include shadow(); + border-top-width: 1px; + @include box-shadow(none); +} + +.breadcrumb { + border-color: shade-color($breadcrumb-bg, 10%); + @include shadow(); +} + +.pagination { + > li > a, + > li > span { + position: relative; + top: 0; + @include shadow(); + color: $pagination-color; + font-weight: 700; + text-transform: uppercase; + + &:hover, + &:focus { + top: 1px; + border-bottom-width: 3px; + text-decoration: none; + } + + &:active { + top: 2px; + border-bottom-width: 2px; + } + } + + > .disabled > a, + > .disabled > span { + &:hover { + top: 0; + @include shadow(); + } + + &:active { + top: 0; + @include shadow(); + } + } +} + +.pager { + > li > a, + > li > span, + > .disabled > a, + > .disabled > span { + &, + &:hover, + &:active { + border-left-width: 2px; + border-right-width: 2px; + } + } +} + +// Indicators + +.btn-close { + text-decoration: none; + opacity: .4; + + &:hover, + &:focus { + opacity: 1; + } +} + +.alert { + color: $white; + @include shadow(); + + &-primary { + background-color: $primary; + border-color: shade-color($primary, 10%); + } + + &-secondary { + background-color: $secondary; + border-color: shade-color($secondary, 10%); + } + + &-success { + background-color: $success; + border-color: shade-color($success, 10%); + } + + &-info { + background-color: $info; + border-color: shade-color($info, 10%); + } + + &-danger { + background-color: $danger; + border-color: shade-color($danger, 10%); + } + + &-warning { + background-color: $warning; + border-color: shade-color($warning, 10%); + } + + &-dark { + background-color: $dark; + border-color: shade-color($dark, 10%); + } + + &-light { + background-color: $light; + border-color: shade-color($light, 10%); + } + + .alert-link { + font-weight: 400; + color: $white; + text-decoration: underline; + } + + &-secondary, + &-light { + &, + a, + .alert-link { + color: $body-color; + } + } +} + +.badge { + &.bg-secondary, + &.bg-light { + color: $dark; + } +} + +// Containers + +a.list-group-item { + &-success { + &.active { + background-color: $success; + } + + &.active:hover, + &.active:focus { + background-color: shade-color($success, 10%); + } + } + + &-warning { + &.active { + background-color: $warning; + } + + &.active:hover, + &.active:focus { + background-color: shade-color($warning, 10%); + } + } + + &-danger { + &.active { + background-color: $danger; + } + + &.active:hover, + &.active:focus { + background-color: shade-color($danger, 10%); + } + } +} + +.modal, +.toast { + .btn-close { + background-image: url("data:image/svg+xml,"); + } +} diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index 0407ab5..807b2e4 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -1,19 +1,106 @@ -// Body -$body-bg: #f8fafc; +@use "sass:color"; -// Typography -$font-family-sans-serif: 'Nunito', sans-serif; -$font-size-base: 0.9rem; -$line-height-base: 1.6; +// Lumen 5.0.2 +// Bootswatch -// Colors -$blue: #3490dc; -$indigo: #6574cd; -$purple: #9561e2; -$pink: #f66d9b; -$red: #e3342f; -$orange: #f6993f; -$yellow: #ffed4a; -$green: #38c172; -$teal: #4dc0b5; -$cyan: #6cb2eb; +$theme: "lumen" !default; + + +// +// Color system +// +$lightness: -30%; +$saturation: -9%; + +@function lowerColor($color) { + @return color.scale($color, $lightness: $lightness, $saturation: $saturation); +} +@function lowerBrightness($color) { + @return color.scale($color, $lightness: $lightness - 20%); +} + + +$white: #fff !default; +$gray-100: lowerBrightness(#f6f6f6) !default; +$gray-200: lowerBrightness(#f0f0f0) !default; +$gray-300: lowerBrightness(#dee2e6) !default; +$gray-400: lowerBrightness(#ced4da) !default; +$gray-500: lowerBrightness(#adb5bd) !default; +$gray-600: lowerBrightness(#999) !default; +$gray-700: lowerBrightness(#555) !default; +$gray-800: lowerBrightness(#333) !default; +$gray-900: lowerBrightness(#222) !default; +$black: #000 !default; + +$blue: lowerColor(#158cba) !default; +$indigo: lowerColor(#6610f2) !default; +$purple: lowerColor(#6f42c1) !default; +$pink: lowerColor(#e83e8c) !default; +$red: lowerColor(#ff4136) !default; +$orange: lowerColor(#fd7e14) !default; +$yellow: lowerColor(#ff851b) !default; +$green: lowerColor(#28b62c) !default; +$teal: lowerColor(#20c997) !default; +$cyan: lowerColor(#75caeb) !default; + +$primary: $blue !default; +$secondary: $gray-200 !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-100 !default; +$dark: $gray-700 !default; + +$min-contrast-ratio: 1.95 !default; + +// Fonts + +// stylelint-disable-next-line value-keyword-case +$font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; + +// Tables + +$table-bg-scale: 0 !default; + +// Buttons + +$btn-font-weight: 700 !default; + +// Dropdowns + +$dropdown-link-color: rgba(0, 0, 0, .5) !default; + +// Navs + +$nav-tabs-border-color: $gray-200 !default; +$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $gray-900 !default; +$nav-tabs-link-active-border-color: $nav-tabs-border-color !default; + +// Pagination + +$pagination-color: $gray-700 !default; +$pagination-bg: $white !default; +$pagination-hover-color: $pagination-color !default; +$pagination-hover-bg: $pagination-bg !default; +$pagination-active-border-color: darken($primary, 5%) !default; +$pagination-disabled-color: $gray-600 !default; +$pagination-disabled-bg: $pagination-bg !default; + +// Breadcrumbs + +$breadcrumb-padding-y: .375rem !default; +$breadcrumb-padding-x: .75rem !default; +$breadcrumb-bg: $pagination-bg !default; +$breadcrumb-border-radius: .25rem !default; + +// Modals + +$modal-content-border-color: rgba($black, .1) !default; + +// Close + +$btn-close-color: $white !default; +$btn-close-opacity: .4 !default; +$btn-close-hover-opacity: 1 !default; diff --git a/resources/sass/app.scss b/resources/sass/app.scss index 760c58f..b6c2081 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -16,26 +16,17 @@ a.col_sort { max-width: 1340px !important; } - -.alert-success .text-muted { - //color : #176319 !important; - color : color.adjust(#28b62c, $lightness: -20%) !important; +// FOOTER +body { + position: relative; + min-height: calc(100vh); } - -.alert-primary { - .text-muted { - //color : #0b4a63 !important; - color : color.adjust(#158cba, $lightness: -20%) !important; - } - .text-primary { - color : color.adjust(#158cba, $lightness: -20%) !important; - } +#app { + padding-bottom: 8.5rem; } - -.alert-secondary .text-muted { - color : color.adjust(#f0f0f0, $lightness: -20%) !important; -} - -.alert-danger .text-muted { - color : color.adjust(#ff4136, $lightness: -20%) !important; +#footer { + position: absolute; + bottom: 0; + height: 4.5rem; + width: 100%; } diff --git a/resources/sass/bootstrap.scss b/resources/sass/bootstrap.scss new file mode 100644 index 0000000..ced57e6 --- /dev/null +++ b/resources/sass/bootstrap.scss @@ -0,0 +1,3 @@ +@import "variables"; +@import "~bootstrap/scss/bootstrap"; +@import "bootswatch"; diff --git a/resources/views/layout/app.blade.php b/resources/views/layout/app.blade.php index 7298697..04f4bb5 100644 --- a/resources/views/layout/app.blade.php +++ b/resources/views/layout/app.blade.php @@ -4,11 +4,23 @@ Support LDCWEB + + + + + + + + + + + + + - @crudPoliciesCSS @@ -19,6 +31,7 @@ @yield('content') + @include('layout.footer') @stack('scriptsConstants') diff --git a/resources/views/layout/footer.blade.php b/resources/views/layout/footer.blade.php new file mode 100644 index 0000000..5409f98 --- /dev/null +++ b/resources/views/layout/footer.blade.php @@ -0,0 +1,7 @@ + diff --git a/resources/views/layout/nav.blade.php b/resources/views/layout/nav.blade.php index 6ed18ea..36482f6 100644 --- a/resources/views/layout/nav.blade.php +++ b/resources/views/layout/nav.blade.php @@ -1,4 +1,4 @@ -