From b1ef53f845ebe9800a34f925320a7eda52807347 Mon Sep 17 00:00:00 2001 From: Kevin MacMartin Date: Tue, 9 Jan 2018 22:00:45 -0500 Subject: [PATCH] Upgrade to bootstrap 4 for the public site --- gulpfile.js | 3 ++- package.json | 2 ++ resources/assets/sass/_var.scss | 29 ++++++++++++++++------ resources/assets/sass/app.scss | 11 ++++++--- resources/assets/sass/sections/_nav.scss | 31 ++++++++++-------------- resources/components/pages/contact.vue | 4 +-- resources/views/pages/contact.blade.php | 4 +-- 7 files changed, 50 insertions(+), 34 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 29ecec2..f2d8bd1 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -45,7 +45,8 @@ const jsPublic = [ // Javascript libraries for the public site const jsPublicLibs = [ "bower_components/jquery/dist/jquery.js", - "bower_components/bootstrap-sass/assets/javascripts/bootstrap.js", + "node_modules/popper.js/dist/umd/popper.js", + "node_modules/bootstrap/dist/js/bootstrap.js", "node_modules/gsap/src/uncompressed/TweenMax.js", "node_modules/what-input/dist/what-input.js" ]; diff --git a/package.json b/package.json index 842697d..04eed28 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babelify": "^8.0.0", + "bootstrap": "^4.0.0-beta.3", "browserify": "^14.5.0", "es6-promise": "^4.1.1", "gsap": "^1.20.3", @@ -26,6 +27,7 @@ "gulp-strip-debug": "^1.1.0", "gulp-uglify": "^3.0.0", "gulp-util": "^3.0.8", + "popper": "^1.0.1", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "vue": "^2.5.8", diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss index 90d17ea..86ea6eb 100644 --- a/resources/assets/sass/_var.scss +++ b/resources/assets/sass/_var.scss @@ -1,14 +1,25 @@ -// -// Overrides -// - -$grid-float-breakpoint: 768px; -$grid-float-breakpoint-max: ($grid-float-breakpoint - 1px); - // // Custom Variables // +// Overrides +$grid-breakpoints: ( + xs: 0px, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1600px +); + +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1540px +); + // Colours $c-text: #111; // text $c-text-light: #fff; // light text @@ -28,3 +39,7 @@ $nav-link-count: 2; $nav-height-desktop: 60px; $nav-height-mobile: 50px; $nav-link-height-mobile: 50px; + +// Breakpoints +$nav-desktop-min: 768px; +$nav-mobile-max: ($nav-desktop-min - 1px); diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 4a28842..8cdb139 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -3,7 +3,7 @@ @import "_fonts"; // Libraries -@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; +@import "bootstrap/scss/bootstrap.scss"; // Supplementary @import "sections/**/*.scss"; @@ -27,7 +27,10 @@ html { width: 100%; - &.no-scroll { overflow-y: hidden; } + + &.no-scroll { + overflow-y: hidden; + } } body { @@ -42,11 +45,11 @@ body { min-height: 100vh; flex-direction: column; - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: $nav-mobile-max) { padding-top: $nav-height-mobile; } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { padding-top: $nav-height-desktop; } diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss index 70d9a8c..c8bc4d3 100644 --- a/resources/assets/sass/sections/_nav.scss +++ b/resources/assets/sass/sections/_nav.scss @@ -13,7 +13,7 @@ height: $nav-height-mobile; background-color: $c-base; - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { display: none; } @@ -85,7 +85,7 @@ opacity: 1; transition: max-height 500ms; - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: $nav-mobile-max) { overflow: hidden; z-index: 100; position: relative; @@ -96,7 +96,7 @@ } } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { display: flex; width: 100%; height: $nav-height-desktop; @@ -105,12 +105,12 @@ } &-wrapper { - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: $nav-mobile-max) { overflow-y: auto; max-height: calc(100vh - #{$nav-height-mobile}); } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { padding: 0px $grid-gutter-width 0px (($grid-gutter-width / 2) + $desktop-logo-width + $logo-offset); } @@ -121,7 +121,7 @@ font-size: 14px; text-transform: uppercase; - @media (max-width: $grid-float-breakpoint-max) { + @media (max-width: $nav-mobile-max) { display: block; height: $nav-link-height-mobile; padding: 0px 10px; @@ -134,7 +134,7 @@ } } - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { padding: 5px 20px; transition: color 150ms; @@ -147,9 +147,7 @@ } &:not(.active):hover { - @media (min-width: $grid-float-breakpoint) { - color: darken($c-text-light, 5%); - } + color: darken($c-text-light, 5%); } } @@ -187,22 +185,19 @@ &-logo { position: absolute; + top: ($nav-height-mobile / 2); left: $logo-offset; transform: translateY(-50%); display: inline-block; - width: $desktop-logo-width; + width: $mobile-logo-width; - @media (max-width: $grid-float-breakpoint-max) { - top: ($nav-height-mobile / 2); - width: $mobile-logo-width; - } - - @media (min-width: $grid-float-breakpoint) { + @media (min-width: $nav-desktop-min) { top: ($nav-height-desktop / 2); + width: $desktop-logo-width; } img { - @include img-responsive; + @include img-fluid; width: 100%; } } diff --git a/resources/components/pages/contact.vue b/resources/components/pages/contact.vue index b054b78..db4b447 100644 --- a/resources/components/pages/contact.vue +++ b/resources/components/pages/contact.vue @@ -2,13 +2,13 @@
-
+

Contact

-
+
diff --git a/resources/views/pages/contact.blade.php b/resources/views/pages/contact.blade.php index 36c190f..8eaa083 100644 --- a/resources/views/pages/contact.blade.php +++ b/resources/views/pages/contact.blade.php @@ -4,13 +4,13 @@
-
+

Contact

-
+