kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade to bootstrap 4 for the public site

Browse source
This commit is contained in:
Kevin MacMartin 2018-01-09 22:00:45 -05:00
parent d25acd9027
commit b1ef53f845
7 changed files with 50 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
gulpfile.js vendored
View file

@ -45,7 +45,8 @@ const jsPublic = [
// Javascript libraries for the public site // Javascript libraries for the public site
const jsPublicLibs = [ const jsPublicLibs = [
"bower_components/jquery/dist/jquery.js", "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/gsap/src/uncompressed/TweenMax.js",
"node_modules/what-input/dist/what-input.js" "node_modules/what-input/dist/what-input.js"
]; ];

2
package.json
View file

@ -13,6 +13,7 @@
"babel-plugin-transform-runtime": "^6.23.0", "babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1", "babel-preset-env": "^1.6.1",
"babelify": "^8.0.0", "babelify": "^8.0.0",
"bootstrap": "^4.0.0-beta.3",
"browserify": "^14.5.0", "browserify": "^14.5.0",
"es6-promise": "^4.1.1", "es6-promise": "^4.1.1",
"gsap": "^1.20.3", "gsap": "^1.20.3",
@ -26,6 +27,7 @@
"gulp-strip-debug": "^1.1.0", "gulp-strip-debug": "^1.1.0",
"gulp-uglify": "^3.0.0", "gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8", "gulp-util": "^3.0.8",
"popper": "^1.0.1",
"vinyl-buffer": "^1.0.0", "vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0", "vinyl-source-stream": "^1.1.0",
"vue": "^2.5.8", "vue": "^2.5.8",

29
resources/assets/sass/_var.scss vendored
View file

@ -1,14 +1,25 @@
//
// Overrides
//
$grid-float-breakpoint: 768px;
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1px);
// //
// Custom Variables // 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 // Colours
$c-text: #111; // text $c-text: #111; // text
$c-text-light: #fff; // light text $c-text-light: #fff; // light text
@ -28,3 +39,7 @@ $nav-link-count: 2;
$nav-height-desktop: 60px; $nav-height-desktop: 60px;
$nav-height-mobile: 50px; $nav-height-mobile: 50px;
$nav-link-height-mobile: 50px; $nav-link-height-mobile: 50px;
// Breakpoints
$nav-desktop-min: 768px;
$nav-mobile-max: ($nav-desktop-min - 1px);

11
resources/assets/sass/app.scss vendored
View file

@ -3,7 +3,7 @@
@import "_fonts"; @import "_fonts";
// Libraries // Libraries
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss"; @import "bootstrap/scss/bootstrap.scss";
// Supplementary // Supplementary
@import "sections/**/*.scss"; @import "sections/**/*.scss";
@ -27,7 +27,10 @@
html { html {
width: 100%; width: 100%;
&.no-scroll { overflow-y: hidden; }
&.no-scroll {
overflow-y: hidden;
}
} }
body { body {
@ -42,11 +45,11 @@ body {
min-height: 100vh; min-height: 100vh;
flex-direction: column; flex-direction: column;
@media (max-width: $grid-float-breakpoint-max) { @media (max-width: $nav-mobile-max) {
padding-top: $nav-height-mobile; padding-top: $nav-height-mobile;
} }
@media (min-width: $grid-float-breakpoint) { @media (min-width: $nav-desktop-min) {
padding-top: $nav-height-desktop; padding-top: $nav-height-desktop;
} }

31
resources/assets/sass/sections/_nav.scss vendored
View file

@ -13,7 +13,7 @@
height: $nav-height-mobile; height: $nav-height-mobile;
background-color: $c-base; background-color: $c-base;
@media (min-width: $grid-float-breakpoint) { @media (min-width: $nav-desktop-min) {
display: none; display: none;
} }
@ -85,7 +85,7 @@
opacity: 1; opacity: 1;
transition: max-height 500ms; transition: max-height 500ms;
@media (max-width: $grid-float-breakpoint-max) { @media (max-width: $nav-mobile-max) {
overflow: hidden; overflow: hidden;
z-index: 100; z-index: 100;
position: relative; position: relative;
@ -96,7 +96,7 @@
} }
} }
@media (min-width: $grid-float-breakpoint) { @media (min-width: $nav-desktop-min) {
display: flex; display: flex;
width: 100%; width: 100%;
height: $nav-height-desktop; height: $nav-height-desktop;
@ -105,12 +105,12 @@
} }
&-wrapper { &-wrapper {
@media (max-width: $grid-float-breakpoint-max) { @media (max-width: $nav-mobile-max) {
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - #{$nav-height-mobile}); 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); padding: 0px $grid-gutter-width 0px (($grid-gutter-width / 2) + $desktop-logo-width + $logo-offset);
} }
@ -121,7 +121,7 @@
font-size: 14px; font-size: 14px;
text-transform: uppercase; text-transform: uppercase;
@media (max-width: $grid-float-breakpoint-max) { @media (max-width: $nav-mobile-max) {
display: block; display: block;
height: $nav-link-height-mobile; height: $nav-link-height-mobile;
padding: 0px 10px; padding: 0px 10px;
@ -134,7 +134,7 @@
} }
} }
@media (min-width: $grid-float-breakpoint) { @media (min-width: $nav-desktop-min) {
padding: 5px 20px; padding: 5px 20px;
transition: color 150ms; transition: color 150ms;
@ -147,9 +147,7 @@
} }
&:not(.active):hover { &: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 { &-logo {
position: absolute; position: absolute;
top: ($nav-height-mobile / 2);
left: $logo-offset; left: $logo-offset;
transform: translateY(-50%); transform: translateY(-50%);
display: inline-block; display: inline-block;
width: $desktop-logo-width; width: $mobile-logo-width;
@media (max-width: $grid-float-breakpoint-max) { @media (min-width: $nav-desktop-min) {
top: ($nav-height-mobile / 2);
width: $mobile-logo-width;
}
@media (min-width: $grid-float-breakpoint) {
top: ($nav-height-desktop / 2); top: ($nav-height-desktop / 2);
width: $desktop-logo-width;
} }
img { img {
@include img-responsive; @include img-fluid;
width: 100%; width: 100%;
} }
} }

4
resources/components/pages/contact.vue
View file

@ -2,13 +2,13 @@
<div class="contact-page-component"> <div class="contact-page-component">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="col col-md-8 offset-md-2">
<h1>Contact</h1> <h1>Contact</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="col col-md-8 offset-md-2">
<div id="contact-form"> <div id="contact-form">
<form action="#" method="POST" accept-charset="UTF-8" @submit.prevent="submit"> <form action="#" method="POST" accept-charset="UTF-8" @submit.prevent="submit">
<input type="text" v-model="form.name" name="name" placeholder="Name" /> <input type="text" v-model="form.name" name="name" placeholder="Name" />

4
resources/views/pages/contact.blade.php
View file

@ -4,13 +4,13 @@
<div class="contact-page-component"> <div class="contact-page-component">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="col col-md-8 offset-md-2">
<h1>Contact</h1> <h1>Contact</h1>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-12 col-md-8 col-md-offset-2"> <div class="col col-md-8 offset-md-2">
<form action="#" method="POST" accept-charset="UTF-8"> <form action="#" method="POST" accept-charset="UTF-8">
<input type="hidden" name="_token" value="{{ csrf_token() }}" /> <input type="hidden" name="_token" value="{{ csrf_token() }}" />
<input type="text" name="name" placeholder="Name" /> <input type="text" name="name" placeholder="Name" />