Bladeren bron

functionnal env with styling

master
Adrien 4 jaren geleden
bovenliggende
commit
e934669ded
4 gewijzigde bestanden met toevoegingen van 106 en 68 verwijderingen
  1. +1
    -1
      package.json
  2. +41
    -33
      src/App.vue
  3. +48
    -15
      src/components/MapSelector.vue
  4. +16
    -19
      yarn.lock

+ 1
- 1
package.json Bestand weergeven

@@ -49,7 +49,7 @@
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^8.0.2",
"sass-loader": "7.3.1",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sw-precache-webpack-plugin": "^0.11.4",


+ 41
- 33
src/App.vue Bestand weergeven

@@ -1,10 +1,9 @@
<template>
<div id="app">
<header>
<span>Vue.js PWA</span>
<span>Nexus Timers</span>
</header>
<main>
<img src="./assets/logo.png" alt="Vue.js PWA">
<router-view></router-view>
</main>
</div>
@@ -16,39 +15,48 @@ export default {
}
</script>

<style>
body {
margin: 0;
}

#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
<style lang="sass">
$blizzard-background-color: #0A020F
$blizzard-font-color: #66CCFF

main {
text-align: center;
margin-top: 40px;
}
=blizzard-header-gradient
background: #0d39a0 /* Old browsers */
background: -moz-linear-gradient(left, #0d39a0 0%, #2f099b 100%) /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0d39a0 0%,#2f099b 100%) /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0d39a0 0%,#2f099b 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

header {
margin: 0;
height: 56px;
padding: 0 16px 0 24px;
background-color: #35495E;
color: #ffffff;
}

header span {
display: block;
position: relative;
font-size: 20px;
line-height: 1;
letter-spacing: .02em;
font-weight: 400;
box-sizing: border-box;
padding-top: 16px;
}
body
margin: 0

#app
font-family: 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
color: $blizzard-font-color
text-shadow: 0 0 1rem #009cff
background-color: $blizzard-background-color

main

margin-top: 40px

header
margin: 0
height: 56px
padding: 0 16px 0 24px
+blizzard-header-gradient
text-shadow: 0 0 1rem #009cff
color: #fff
span
display: block
position: relative
font-size: 20px
line-height: 1
letter-spacing: .02em
font-weight: 400
box-sizing: border-box
padding-top: 16px

</style>

+ 48
- 15
src/components/MapSelector.vue Bestand weergeven

@@ -1,8 +1,8 @@
<template>
<div class="map-selector">
<h1 class="map-selector__title">Map Selector</h1>
<ul>
<li v-for="map in maps"><a>{{ map.name }}</a></li>
<h1 class="map-selector__title">Battleground Selector</h1>
<ul class="map-selector__map-list">
<li class="map-selector__map-list-item" v-for="map in maps"><a>{{ map.name }}</a></li>
</ul>
</div>
</template>
@@ -18,18 +18,42 @@
blackheartSBay: {
name: "Blackheart's Bay"
},
gardenOfTerror: {},
HanamuraTemple: {},
VolskayaFoundry: {},
HauntedMines: {},
TowerOfDoom: {},
InfernalShrines: {},
TombOfTheSpiderQueen: {},
SkyTemple: {},
DragonShire: {},
CursedHollow: {},
BraxisHoldout: {},
WarheadJunction: {}
gardenOfTerror: {
name: 'Garden of Terror'
},
HanamuraTemple: {
name: 'Hanamura Temple'
},
VolskayaFoundry: {
name: 'Volskaya Foundry'
},
HauntedMines: {
name: 'Haunted Mines'
},
TowersOfDoom: {
name: 'Towers of Doom'
},
InfernalShrines: {
name: 'Infernal Shrines'
},
TombOfTheSpiderQueen: {
name: 'Tomb of the Spider Queen'
},
SkyTemple: {
name: 'Sky Temple'
},
DragonShire: {
name: 'Dragon Shire'
},
CursedHollow: {
name: 'Cursed Hollow'
},
BraxisHoldout: {
name: 'Braxis Holdout'
},
WarheadJunction: {
name: 'Warhead Junction'
}
}

module.exports = {
@@ -41,3 +65,12 @@
}
}
</script>

<style lang="sass">
.map-selector
&__map-list
list-style-type: none
&-item
font-size: 2rem
padding: 10px 0 10px 5px
</style>

+ 16
- 19
yarn.lock Bestand weergeven

@@ -139,7 +139,7 @@ ajv-keywords@^2.1.0:
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=

ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
ajv-keywords@^3.1.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
@@ -154,7 +154,7 @@ ajv@^5.0.0, ajv@^5.2.3, ajv@^5.3.0:
fast-json-stable-stringify "^2.0.0"
json-schema-traverse "^0.3.0"

ajv@^6.1.0, ajv@^6.10.2, ajv@^6.5.5:
ajv@^6.1.0, ajv@^6.5.5:
version "6.11.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.11.0.tgz#c3607cbc8ae392d8a5a536f25b21f8e5f3f87fe9"
integrity sha512-nCprB/0syFYy9fVYU1ox1l2KN8S9I+tziH8D4zdZuLT3N6RMlGSGt5FSTpAiHB/Whv8Qs1cWHma1aMKZyaHRKA==
@@ -4496,7 +4496,7 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"

loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -4887,7 +4887,7 @@ negotiator@0.6.2:
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==

neo-async@^2.5.0, neo-async@^2.6.1:
neo-async@^2.5.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
@@ -5460,6 +5460,11 @@ pify@^3.0.0:
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=

pify@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==

pinkie-promise@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -6691,15 +6696,15 @@ sass-graph@^2.2.4:
scss-tokenizer "^0.2.3"
yargs "^7.0.0"

sass-loader@^8.0.2:
version "8.0.2"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
sass-loader@7.1.3:
version "7.3.1"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f"
integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA==
dependencies:
clone-deep "^4.0.1"
loader-utils "^1.2.3"
neo-async "^2.6.1"
schema-utils "^2.6.1"
loader-utils "^1.0.1"
neo-async "^2.5.0"
pify "^4.0.1"
semver "^6.3.0"

sax@~1.2.1, sax@~1.2.4:
@@ -6722,14 +6727,6 @@ schema-utils@^0.4.5:
ajv "^6.1.0"
ajv-keywords "^3.1.0"

schema-utils@^2.6.1:
version "2.6.4"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.4.tgz#a27efbf6e4e78689d91872ee3ccfa57d7bdd0f53"
integrity sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==
dependencies:
ajv "^6.10.2"
ajv-keywords "^3.4.1"

scss-tokenizer@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"


Laden…
Annuleren
Opslaan