Merge pull request #2 from Safelite/mauger-initial-setup

Mauger merging PR.
This commit is contained in:
bmauger 2021-09-21 09:09:29 -04:00 committed by GitHub
commit 41da40589e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 28804 additions and 0 deletions

27
.gitignore vendored Normal file
View file

@ -0,0 +1,27 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Misc
coverage/*
junit.xml

19
README.md Normal file
View file

@ -0,0 +1,19 @@
# fmg-funnel-2021
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

28264
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

52
package.json Normal file
View file

@ -0,0 +1,52 @@
{
"name": "Safelite",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^5.1.1",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

17
public/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

26
src/App.vue Normal file
View file

@ -0,0 +1,26 @@
<template>
<HeaderNav/>
<div class="container">
<div class="row">
<div class="col">
<HelloWorld msg="VueJS with Bootstrap"/>
</div>
</div>
</div>
<Colors/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';
import HeaderNav from './components/HeaderNav';
import Colors from './components/Colors';
export default {
name: 'App',
components: {
HelloWorld,
HeaderNav,
Colors
}
}
</script>

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -0,0 +1,109 @@
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 15, 2021 */
@font-face {
font-family: 'robotoblack';
src: url('roboto-black-safelite.woff2') format('woff2'),
url('roboto-black-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoblack_italic';
src: url('roboto-blackitalic-safelite.woff2') format('woff2'),
url('roboto-blackitalic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold';
src: url('roboto-bold-safelite.woff2') format('woff2'),
url('roboto-bold-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold_italic';
src: url('roboto-bolditalic-safelite.woff2') format('woff2'),
url('roboto-bolditalic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoitalic';
src: url('roboto-italic-safelite.woff2') format('woff2'),
url('roboto-italic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotolight';
src: url('roboto-light-safelite.woff2') format('woff2'),
url('roboto-light-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotolight_italic';
src: url('roboto-lightitalic-safelite.woff2') format('woff2'),
url('roboto-lightitalic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotomedium';
src: url('roboto-medium-safelite.woff2') format('woff2'),
url('roboto-medium-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotomedium_italic';
src: url('roboto-mediumitalic-safelite.woff2') format('woff2'),
url('roboto-mediumitalic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoregular';
src: url('roboto-regular-safelite.woff2') format('woff2'),
url('roboto-regular-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotothin';
src: url('roboto-thin-safelite.woff2') format('woff2'),
url('roboto-thin-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotothin_italic';
src: url('roboto-thinitalic-safelite.woff2') format('woff2'),
url('roboto-thinitalic-safelite.woff') format('woff');
font-weight: normal;
font-style: normal;
}

BIN
src/assets/img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

8
src/assets/img/logo.svg Normal file
View file

@ -0,0 +1,8 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 231.2 71" xml:space="preserve">
<style>
.st0{fill:#d92d27}
</style>
<path class="st0" d="M159.7 0c-20 .5-42.5 11.7-53.1 20 0 0 13.8-2.6 33.2 1.9 0 0 .3-6.2 5-13.1 3.5-5 14.9-8.8 14.9-8.8"/>
<path d="M94.2 20.8s21-14.3 49.4-20.3c0 0-19.6.5-39.8 7.9-26.7 9.8-33.2 17.2-33.2 17.2 17.2-5.1 23.6-4.8 23.6-4.8" fill="#020202"/>
<path class="st0" d="M219.5 65.1c0-3.2 2.6-5.8 5.9-5.8 3.2 0 5.8 2.6 5.8 5.8 0 3.3-2.6 5.9-5.8 5.9-3.3 0-5.9-2.7-5.9-5.9m10.7 0c0-2.6-2.1-4.8-4.8-4.8-2.7 0-4.8 2.2-4.8 4.8 0 2.7 2.2 4.8 4.8 4.8 2.6 0 4.8-2.1 4.8-4.8m-6.1.4v3H223v-6.9h2.2c1.3 0 2.6.3 2.6 1.9 0 .8-.5 1.4-1.4 1.6.9.2 1.1.6 1.2 1.4.1.7.2 1.4.4 2h-1.4c-.1-.4-.2-.8-.2-1.2-.1-.6-.1-1.1-.4-1.5-.3-.3-.6-.2-1-.3h-.9zm1.1-1.1c1 0 1.2-.5 1.2-1s-.2-.8-1.1-.8H224v1.8h1.2zM25.8 44.3l.3-1.4c.4-2-.5-3.6-3.2-3.6-3 0-4.8 2.1-5.1 3.6-1.4 6.7 21.9 3.4 19.3 15.8-1.5 7.2-8.8 10.4-21 10.4C4.6 69-1.3 66.5.2 59.5l.3-1.2h13.4l-.3 1.4c-.6 2.9 1 3.9 3.7 3.9 2.8 0 4.9-2.1 5.3-3.9C24 53 1.6 56.3 4.1 44.4c1.4-6.8 8-10.6 19.7-10.6 12.1 0 16.5 3.2 15 10.4h-13zM60.9 50.4c.3-1.5-.5-2.2-2.7-2.2-2.4 0-3.8 1.3-4.4 3.8H43c1.5-6.9 10.4-8.1 16.1-8.1 8.8 0 14.6 1.5 13.3 7.7l-2.5 11.7c-.5 2.2-.7 3.9.1 5.2H57.9c-.2-.8-.2-1.7-.2-2.7h-.1c-1.8 2.1-5.4 3.3-9.2 3.3-7.5 0-9.8-2.9-8.9-7 .9-4.4 3.8-6.5 12.1-7.7l5.1-.8c2.4-.3 3.1-.4 3.8-.5l.4-2.7zm-6 7.7c-1.9.5-2.9 1.5-3.2 3.1-.3 1.6.5 3.2 2.4 3.2 2.8 0 4.2-1.3 4.7-3.9l.7-3.2s-2.6.3-4.6.8M78.9 49.9h-4.3l1.1-5.4H80l.8-3.7c1-4.8 4.3-6.6 13-6.6 1.8 0 4 .1 5.9.3l-.9 4.4c-.6-.1-1.2-.1-2.1-.1-1.5 0-3.1.5-3.4 1.7l-.9 4.1h5.1L96.4 50h-5.1l-4 18.6H75l3.9-18.7zM107.9 57.9l-.8 3.8c-.5 2.6 1 3.2 2.7 3.2 2.2 0 3.9-1.5 4.6-4.8h11.3c-1.4 5.8-6.3 9-16.7 9-12.1 0-15.3-3.5-13.3-12.6 1.9-9.2 7.4-12.6 18.7-12.6 10 0 14.5 2.8 12.7 11.5l-.5 2.4h-18.7zm8.2-6c.5-2.5-.1-3.7-2.7-3.7s-3.7 1.1-4.2 3.7l-.4 1.7h6.9l.4-1.7zM136.2 33.2h12.6l-7.5 35.3h-12.6zM151.8 44.6h12.5l-5.1 23.9h-12.5l5.1-23.9zm2.4-11.4h12.5l-1.5 7.2h-12.5l1.5-7.2zM167.1 44.6h4.2l.6-3.1 14.6-10-2.7 13.1h4.9l-1.1 5.4h-4.9l-2.6 12c-.3 1.4.6 1.9 2.6 1.9h1.9l-1 4.7c-2.3.2-4.8.3-6.9.3-7.7 0-10.5-.8-9.4-6.1l2.7-12.7h-4l1.1-5.5zM200 57.9l-.8 3.8c-.5 2.6 1 3.2 2.7 3.2 2.2 0 3.9-1.5 4.6-4.8h11.3c-1.4 5.8-6.3 9-16.7 9-12.1 0-15.3-3.5-13.3-12.6 1.9-9.2 7.4-12.6 18.7-12.6 10 0 14.5 2.8 12.7 11.5l-.5 2.4H200zm8.2-6c.5-2.5-.1-3.7-2.7-3.7s-3.7 1.1-4.2 3.7l-.4 1.7h6.9l.4-1.7z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,94 @@
// Color system
// scss-docs-start gray-color-variables
$white: #FFFFFF;
$gray-100: #F4F4F4;
$gray-200: #CACBCC;
$gray-300: #B3B4B5;
$gray-400: #525656;//Default Gray (Gray 400)
$black: #000;
// scss-docs-end gray-color-variables
// fusv-disable
// scss-docs-start gray-colors-map
$grays: (
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
);
// scss-docs-end gray-colors-map
// fusv-enable
// scss-docs-start color-variables
$blue-200: #E7F1F6;
$blue-300: #B9D7E6;
$blue-400: #125B7E;
$blue: #167CAC;//Default Blue (Blue 500)
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red-200: #FBE9E8;
$red-300: #F3BEBA;
$red: #DA291C;//Default Red (Red 400)
$red-500: #AF2117;
$orange: #fd7e14;
$yellow-200: #FEF6E8;
$yellow-300: #FCE6BA;
$yellow: #F88F1C;//Default Yellow (Yellow 400)
$green-200: #E6F2EC;
$green-300: #B5DAC8;
$green: #098649;//Default Green (Green 400)
$green-500: #075F35;
$teal: #20c997;
$cyan: #0dcaf0;
// scss-docs-end color-variables
// scss-docs-start colors-map
$colors: (
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-400,
"gray-dark": $gray-400
);
// scss-docs-end colors-map
// scss-docs-start theme-color-variables
$primary: $red;
$secondary: $gray-400;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red-500;
$light: $gray-100;
$dark: $gray-400;
// scss-docs-end theme-color-variables
// scss-docs-start theme-colors-map
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
);
// scss-docs-end theme-colors-map
//Fonts
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: $font-family-sans-serif;
$font-family-code: $font-family-monospace;

View file

@ -0,0 +1,3 @@
body {
background-color: #fff;
}

View file

@ -0,0 +1,6 @@
.navbar {
.logo {
width: 114px;
height: auto;
}
}

View file

@ -0,0 +1,23 @@
//Import files. Order matters!
//Bootstrap Functions
@import "./node_modules/bootstrap/scss/functions";
//Variable Overrides
@import "_CustomVariables";
//Bootstrap Default Variables and Mixins
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/mixins";
//Bootstrap Defaults
@import "./node_modules/bootstrap/scss/bootstrap";
//Fonts
@import "../fonts/stylesheet.css";
//Custom Global CSS
@import "_GlobalStyles";
//Custom Components CSS
@import "./components/_navbar";

37
src/components/Colors.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<div class="container my-4">
<div class="row">
<h4>Colors</h4>
<div class="col-md-3">
<div class="p-3 mb-3 bg-primary text-white">Primary #DA291C</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-secondary text-white">Secondary #525656</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-success text-white">Success #098649</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-danger text-white">Danger #AF2117</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-warning text-dark">Warning #F88F1C</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-info text-dark">Info #0DCAF0</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-light text-dark">Light #F4F4F4</div>
</div>
<div class="col-md-3">
<div class="p-3 mb-3 bg-dark text-white">Dark #525656</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Colors'
}
</script>

View file

@ -0,0 +1,47 @@
<template>
<div class="container my-4">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<div class="container-fluid d-flex align-items-end px-0">
<a href="#">
<img class="logo" src="@/assets/img/logo.svg" alt="Safelite" aria-current="page">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav d-flex align-items-lg-end ms-3">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle px-0 px-lg-4 py-2 py-lg-0 link-secondary lh-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Service 1</a></li>
<li><a class="dropdown-item" href="#">Service 2</a></li>
<li><a class="dropdown-item" href="#">Service 3</a></li>
</ul>
</li>
<li class="nav-item lh-1">
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">Locations</a>
</li>
<li class="nav-item lh-1">
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">We're Hiring</a>
</li>
<li class="nav-item lh-1">
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">My Appointment</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HeaderNav'
}
</script>

View file

@ -0,0 +1,57 @@
<template>
<h2>{{ msg }}</h2>
<h4 class="mt-3">Grid</h4>
<div class="row mt-3">
<div class="col">
One
</div>
<div class="col">
Two
</div>
<div class="col">
Three
</div>
</div>
<h4 class="mt-3">Buttons</h4>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

10
src/main.js Normal file
View file

@ -0,0 +1,10 @@
import { createApp } from "vue";
import App from "./App.vue";
//Bootstrap JavaScript
import "../node_modules/bootstrap/dist/js/bootstrap.js";
//Get Bootstrap and Custom Styles
import "./assets/scss/custom.scss";
createApp(App).mount("#app")