mirror of
https://github.com/KevinMidboe/planetposen.git
synced 2025-10-29 09:40:31 +00:00
Created header and the start of a shopping cart.
This commit is contained in:
3
config/env/dev.env.js
vendored
Normal file
3
config/env/dev.env.js
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
NODE_ENV: "development"
|
||||||
|
};
|
||||||
3
config/env/prod.env.js
vendored
Normal file
3
config/env/prod.env.js
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
NODE_ENV: "production"
|
||||||
|
};
|
||||||
3
config/env/staging.env.js
vendored
Normal file
3
config/env/staging.env.js
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
NODE_ENV: "staging"
|
||||||
|
};
|
||||||
15
config/helpers.js
Normal file
15
config/helpers.js
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const path = require("path");
|
||||||
|
|
||||||
|
const _root = path.resolve(__dirname, "..");
|
||||||
|
|
||||||
|
exports.root = function(args) {
|
||||||
|
args = Array.prototype.slice.call(arguments, 0);
|
||||||
|
|
||||||
|
return path.join.apply(path, [_root].concat(args));
|
||||||
|
};
|
||||||
|
|
||||||
|
exports.assetsPath = function(_path) {
|
||||||
|
return path.posix.join("static", _path);
|
||||||
|
};
|
||||||
93
config/webpack.config.common.js
Normal file
93
config/webpack.config.common.js
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const VueLoaderPlugin = require("vue-loader/lib/plugin");
|
||||||
|
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const helpers = require("./helpers");
|
||||||
|
const isDev = process.env.NODE_ENV === "development";
|
||||||
|
|
||||||
|
const webpackConfig = function(isDev) {
|
||||||
|
return {
|
||||||
|
entry: {
|
||||||
|
main: ["@babel/polyfill", helpers.root("frontend", "main")]
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: [".js", ".vue"],
|
||||||
|
alias: {
|
||||||
|
vue$: isDev ? "vue/dist/vue.runtime.js" : "vue/dist/vue.runtime.min.js",
|
||||||
|
"@": helpers.root("frontend")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: "vue-loader",
|
||||||
|
include: [helpers.root("frontend")]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: "babel-loader",
|
||||||
|
include: [helpers.root("frontend")]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
|
||||||
|
{ loader: "css-loader", options: { sourceMap: isDev } }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
|
||||||
|
{ loader: "css-loader", options: { sourceMap: isDev } },
|
||||||
|
{ loader: "sass-loader", options: { sourceMap: isDev } }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.sass$/,
|
||||||
|
use: [
|
||||||
|
isDev ? "vue-style-loader" : MiniCSSExtractPlugin.loader,
|
||||||
|
{ loader: "css-loader", options: { sourceMap: isDev } },
|
||||||
|
{ loader: "sass-loader", options: { sourceMap: isDev } }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// test: /\.s(c|a)ss$/,
|
||||||
|
// use: [
|
||||||
|
// 'vue-style-loader',
|
||||||
|
// 'css-loader',
|
||||||
|
// {
|
||||||
|
// loader: 'sass-loader',
|
||||||
|
// // Requires sass-loader@^7.0.0
|
||||||
|
// options: {
|
||||||
|
// implementation: require('sass'),
|
||||||
|
// fiber: require('fibers'),
|
||||||
|
// indentedSyntax: true // optional
|
||||||
|
// },
|
||||||
|
// // Requires sass-loader@^8.0.0
|
||||||
|
// options: {
|
||||||
|
// implementation: require('sass'),
|
||||||
|
// sassOptions: {
|
||||||
|
// fiber: require('fibers'),
|
||||||
|
// indentedSyntax: true // optional
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
test: /\.woff(2)?(\?[a-z0-9]+)?$/,
|
||||||
|
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(ttf|eot|svg)(\?[a-z0-9]+)?$/,
|
||||||
|
loader: 'file-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [new VueLoaderPlugin()]
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = webpackConfig;
|
||||||
44
config/webpack.config.dev.js
Normal file
44
config/webpack.config.dev.js
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const webpack = require("webpack");
|
||||||
|
const merge = require("webpack-merge");
|
||||||
|
const FriendlyErrorsPlugin = require("friendly-errors-webpack-plugin");
|
||||||
|
const HtmlPlugin = require("html-webpack-plugin");
|
||||||
|
const helpers = require("./helpers");
|
||||||
|
const commonConfig = require("./webpack.config.common");
|
||||||
|
const environment = require("./env/dev.env");
|
||||||
|
|
||||||
|
const webpackConfig = merge(commonConfig(true), {
|
||||||
|
mode: "development",
|
||||||
|
devtool: "cheap-module-eval-source-map",
|
||||||
|
output: {
|
||||||
|
path: helpers.root("dist"),
|
||||||
|
publicPath: "/",
|
||||||
|
filename: "js/[name].bundle.js",
|
||||||
|
chunkFilename: "js/[id].chunk.js"
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
runtimeChunk: "single",
|
||||||
|
splitChunks: {
|
||||||
|
chunks: "all"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.EnvironmentPlugin(environment),
|
||||||
|
new webpack.HotModuleReplacementPlugin(),
|
||||||
|
new FriendlyErrorsPlugin(),
|
||||||
|
new HtmlPlugin({ template: "frontend/index.html", chunksSortMode: "dependency" })
|
||||||
|
],
|
||||||
|
devServer: {
|
||||||
|
compress: true,
|
||||||
|
historyApiFallback: true,
|
||||||
|
hot: true,
|
||||||
|
overlay: true,
|
||||||
|
port: 8080,
|
||||||
|
stats: {
|
||||||
|
normal: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = webpackConfig;
|
||||||
55
config/webpack.config.prod.js
Normal file
55
config/webpack.config.prod.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const webpack = require("webpack");
|
||||||
|
const merge = require("webpack-merge");
|
||||||
|
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
||||||
|
const MiniCSSExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
|
||||||
|
const CompressionPlugin = require("compression-webpack-plugin");
|
||||||
|
const helpers = require("./helpers");
|
||||||
|
const commonConfig = require("./webpack.config.common");
|
||||||
|
const isProd = process.env.NODE_ENV === "production";
|
||||||
|
const environment = isProd
|
||||||
|
? require("./env/prod.env")
|
||||||
|
: require("./env/staging.env");
|
||||||
|
|
||||||
|
const webpackConfig = merge(commonConfig(false), {
|
||||||
|
mode: "production",
|
||||||
|
output: {
|
||||||
|
path: helpers.root("dist"),
|
||||||
|
publicPath: "/",
|
||||||
|
filename: "js/[name].bundle.js"
|
||||||
|
},
|
||||||
|
optimization: {
|
||||||
|
minimizer: [
|
||||||
|
new OptimizeCSSAssetsPlugin({
|
||||||
|
cssProcessorPluginOptions: {
|
||||||
|
preset: ["default", { discardComments: { removeAll: true } }]
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
new UglifyJSPlugin({
|
||||||
|
cache: true,
|
||||||
|
parallel: false,
|
||||||
|
sourceMap: !isProd
|
||||||
|
})
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.EnvironmentPlugin(environment),
|
||||||
|
new MiniCSSExtractPlugin({
|
||||||
|
filename: "css/[name].css"
|
||||||
|
})
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!isProd) {
|
||||||
|
webpackConfig.devtool = "source-map";
|
||||||
|
|
||||||
|
if (process.env.npm_config_report) {
|
||||||
|
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
|
||||||
|
.BundleAnalyzerPlugin;
|
||||||
|
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = webpackConfig;
|
||||||
BIN
frontend/.DS_Store
vendored
Normal file
BIN
frontend/.DS_Store
vendored
Normal file
Binary file not shown.
22
frontend/App.vue
Normal file
22
frontend/App.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Header></Header>
|
||||||
|
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Header from '@/components/Header';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
components: { Header }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './styles/normalize';
|
||||||
|
@import './styles/icons';
|
||||||
|
@import './styles/global';
|
||||||
|
</style>
|
||||||
BIN
frontend/assets/.DS_Store
vendored
Normal file
BIN
frontend/assets/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
frontend/assets/fonts/.DS_Store
vendored
Normal file
BIN
frontend/assets/fonts/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
frontend/assets/fonts/planetposen-icons/.DS_Store
vendored
Normal file
BIN
frontend/assets/fonts/planetposen-icons/.DS_Store
vendored
Normal file
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,28 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<metadata>Generated by IcoMoon</metadata>
|
||||||
|
<defs>
|
||||||
|
<font id="planetposen-icons" horiz-adv-x="1024">
|
||||||
|
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||||
|
<missing-glyph horiz-adv-x="1024" />
|
||||||
|
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||||
|
<glyph unicode="" glyph-name="basket-outline" d="M800 512v192c0 70.4-57.6 128-128 128h-320c-70.4 0-128-57.6-128-128v-192h-160l105-388.6c9.4-34 40.8-59.4 78.2-59.4h529.4c37.4 0 68.8 25 78.6 59l104.8 389h-160zM918 480h0.2l-25.8-96h-156.4v96h182zM140.4 352h147.6v-128h-113l-34.6 128zM320 352h176v-128h-176v128zM704 384h-176v96h176v-96zM496 384h-176v96h176v-96zM496 192v-96h-176v96h176zM528 192h176v-96h-176v96zM528 224v128h176v-128h-176zM736 352h147.8l-34.4-128h-113.4v128zM256 704c0 25.6 10 49.6 28.2 67.8s42.2 28.2 67.8 28.2h320c25.6 0 49.6-10 67.8-28.2s28.2-42.2 28.2-67.8v-192h-512v192zM288 480v-96h-156.2l-26 96h182.2zM200 131.8l-16.4 60.2h104.4v-96h-40.8c-22 0-41.4 14.6-47.2 35.8zM824.6 131.6c-6.2-21-25.8-35.6-47.8-35.6h-40.8v96h104.8l-16.2-60.4z" />
|
||||||
|
<glyph unicode="" glyph-name="basket" d="M800 512v192c0 70.4-57.6 128-128 128h-320c-70.4 0-128-57.6-128-128v-192h-160l105-388.6c9.4-34 40.8-59.4 78.2-59.4h529.4c37.4 0 68.8 25 78.6 59l104.8 389h-160zM256 704c0 25.6 10 49.6 28.2 67.8s42.2 28.2 67.8 28.2h320c25.6 0 49.6-10 67.8-28.2s28.2-42.2 28.2-67.8v-192h-512v192zM883.8 352h-147.8v-128h113.4l-8.6-32h-104.8v-96h-32v96h-176v-96h-32v96h-176v-96h-32v96h-104.4l-8.6 32h113v128h-147.6l-8.6 32h156.2v96h32v-96h176v96h32v-96h176v96h32v-96h156.4l-8.6-32zM528 352h176v-128h-176zM320 352h176v-128h-176z" />
|
||||||
|
<glyph unicode="" glyph-name="card-outline" d="M864 736h-704c-35.2 0-64-28.8-64-64v-448c0-35.2 28.8-64 64-64h704c35.2 0 64 28.8 64 64v448c0 35.2-28.8 64-64 64zM160 704h704c17.6 0 32-14.4 32-32v-64h-768v64c0 17.6 14.4 32 32 32zM896 576v-96h-768v96h768zM864 192h-704c-17.6 0-32 14.4-32 32v224h768v-224c0-17.6-14.4-32-32-32zM192 320h64v-32h-64zM320 320h384v-32h-384z" />
|
||||||
|
<glyph unicode="" glyph-name="card" d="M864 736h-704c-35.2 0-64-28.8-64-64v-448c0-35.2 28.8-64 64-64h704c35.2 0 64 28.8 64 64v448c0 35.2-28.8 64-64 64zM160 704h704c17.6 0 32-14.4 32-32v-64h-768v64c0 17.6 14.4 32 32 32zM864 192h-704c-17.6 0-32 14.4-32 32v224h768v-224c0-17.6-14.4-32-32-32zM192 320h64v-32h-64zM320 320h384v-32h-384z" />
|
||||||
|
<glyph unicode="" glyph-name="cart-outline" d="M320 160c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48-21.504 48-48 48zM320 96c-8.82 0-16 7.18-16 16s7.18 16 16 16 16-7.18 16-16-7.18-16-16-16zM769 160c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48-21.504 48-48 48zM769 96c-8.82 0-16 7.18-16 16s7.18 16 16 16 16-7.18 16-16-7.18-16-16-16zM896 704l-649.646 64.708c-3.256 13.944-8.74 29.32-23.676 41.334-18.63 14.978-48.718 21.958-94.678 21.958v-32c37.228 0 62.334-5.014 74.624-14.896 8.916-7.17 11.288-16.846 14.33-31.98l-0.048-0.006 84.104-467.28c4.826-28.84 14.388-50.416 26.58-65.97 14.498-18.492 33.478-27.868 56.41-27.868h480v32h-480c-9.454 0-38.272-0.246-51.5 67.51l-10.856 60.32 542.356 96.17 32 256zM837.18 475.304l-521.2-91.98-63.466 352.6 607.74-61.216-23.074-199.404z" />
|
||||||
|
<glyph unicode="" glyph-name="cart" d="M320 160c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48-21.504 48-48 48zM769 160c-26.496 0-48-21.504-48-48s21.504-48 48-48 48 21.504 48 48-21.504 48-48 48zM896 704l-649.646 64.708c-3.256 13.944-8.74 29.32-23.676 41.334-18.63 14.978-48.718 21.958-94.678 21.958v-32c37.228 0 62.334-5.014 74.624-14.896 8.916-7.17 11.288-16.846 14.33-31.98l-0.048-0.006 84.104-467.28c4.826-28.84 14.388-50.416 26.58-65.97 14.498-18.492 33.478-27.868 56.41-27.868h480v32h-480c-9.454 0-38.272-0.246-51.5 67.51l-10.856 60.32 542.356 96.17 32 256z" />
|
||||||
|
<glyph unicode="" glyph-name="cash-outline" d="M80 224h864v-32h-864zM96 160h832v-32h-832zM64 768v-512h896v512h-896zM928 288h-832v448h832v-448zM768 704h128v-32h-128zM768 352h128v-32h-128zM128 704h128v-32h-128zM128 352h128v-32h-128zM512 368c-79.4 0-144 64.6-144 144s64.6 144 144 144 144-64.6 144-144-64.6-144-144-144zM512 624c-61.8 0-112-50.2-112-112s50.2-112 112-112 112 50.2 112 112-50.2 112-112 112z" />
|
||||||
|
<glyph unicode="" glyph-name="cash" d="M80 224h864v-32h-864zM96 160h832v-32h-832zM512 624c-61.8 0-112-50.2-112-112s50.2-112 112-112 112 50.2 112 112-50.2 112-112 112zM64 768v-512h896v512h-896zM256 320h-128v32h128v-32zM256 672h-128v32h128v-32zM512 368c-79.4 0-144 64.6-144 144s64.6 144 144 144 144-64.6 144-144-64.6-144-144-144zM896 320h-128v32h128v-32zM896 672h-128v32h128v-32z" />
|
||||||
|
<glyph unicode="" glyph-name="close-circle-outline" d="M806.2 742.2c-162.4 162.4-425.8 162.4-588.4 0s-162.4-425.8 0-588.4c162.4-162.4 425.8-162.4 588.4 0s162.4 426 0 588.4zM781.6 178.4c-148.6-148.6-390.6-148.6-539.2 0s-148.6 390.6 0 539.2 390.6 148.6 539.2 0c148.8-148.6 148.8-390.6 0-539.2zM680.4 640l-168.8-168.4-168 167.6-23.6-23.6 168-167.6-168-167.6 23.6-23.6 168 167.6 168.8-168.4 23.6 23.6-168.8 168.4 168.8 168.4z" />
|
||||||
|
<glyph unicode="" glyph-name="close-circle" d="M806.2 742.2c-162.4 162.4-425.8 162.4-588.4 0s-162.4-425.8 0-588.4c162.4-162.4 425.8-162.4 588.4 0s162.4 426 0 588.4zM704 279.6l-23.6-23.6-168.8 168.4-168-167.6-23.6 23.6 168 167.6-168 167.6 23.6 23.6 168-167.6 168.8 168.4 23.6-23.6-168.8-168.4 168.8-168.4z" />
|
||||||
|
<glyph unicode="" glyph-name="at-outline" d="M867.8 270.8c-65.8-127.6-195.2-206.8-337.6-206.8-101 0-194.6 39.8-263.8 112.2-68.8 72-106.6 168.4-106.6 271.8s37.8 199.8 106.6 271.8c69.2 72.4 163 112.2 263.8 112.2 101.8 0 187.8-38.6 242.2-108.4 52.6-67.6 69-156.2 46.4-249.8-21.8-90.2-67-131.6-101-150.4-35-19.4-83.6-26.8-104.8-8.8-0.6 0.6-1.2 1.2-1.6 1.8-3 3.8-4.6 10.8-4.8 17s0.4 13.4 2 21.4c1.6 8 3.8 16.8 6.4 25.4l77.2 233.8h-42.6l-20-53c-9.2 24.2-21.2 41.6-36.2 52-15 10.6-31.4 15.8-49 15.8-28.4 0-54.4-7-77.8-20.8-23.6-13.8-43.6-31.8-60.2-54.2s-29.4-47.6-38.6-75.4c-9.2-27.8-13.6-55.8-13.6-83.8 0-16.2 2.4-31.4 7.2-45.4s11.8-26.4 20.8-37.2c9-10.8 20.2-19.4 33.4-25.6s28-9.4 44.6-9.4c20.4 0 39.4 5.4 57 16.8s32.6 24.2 45 36.2h1.6c1.6-18 9.4-31 19.6-40.2 5.2-4.6 12.6-9 22.2-12.2v-0.2c42.2-14.4 84.2-6 127.6 18 39.6 22 92.2 69.4 116.6 171 25 103.2 6.4 201.6-52.4 277.2-60.4 77.6-155.4 120.4-267.2 120.4-109.6 0-211.4-43.4-286.6-122-74.6-78-115.6-182.4-115.6-294s41-216 115.6-294c75.2-78.8 177.2-122 286.6-122 154.2 0 294.4 85.8 365.8 224l-28.2 14.8zM567 387.2c-12.2-19.6-26.6-36-43-49.6-16.4-13.4-34-20.2-53.2-20.2-19.6 0-35.8 7.2-48.6 21.4-12.8 14.4-19.2 33.8-19.2 58.6 0 19.2 3.2 40 9.8 62.4 6.6 22.2 16 43 28.2 62s27 34.8 44.2 47.4c17.2 12.6 36.2 19 56.8 19 8.2 0 16-2.2 23.8-6.6 7.6-4.4 14.4-10.2 20.4-17.4s11-15.2 14.8-24.4c3.8-9 5.8-18.6 5.8-28.4 0-18.2-3.6-38.6-10.6-61.2-7.2-22.4-17-43.4-29.2-63z" />
|
||||||
|
<glyph unicode="" glyph-name="at" d="M768 775.8c10.6-10 20.4-21 29.4-32.6 58.8-75.4 77.4-173.8 52.4-277.2-24.6-101.4-77-149-116.6-171-43.4-24-85.4-32.4-127.6-18v0.2c-9.6 3.2-17 7.6-22.2 12.2-10.2 9.2-18 22.2-19.6 40.2h-1.6c-12.4-12-27.2-24.8-45-36.2s-36.6-16.8-57-16.8c-16.6 0-31.4 3-44.6 9.4-13.2 6.2-24.2 14.8-33.4 25.6s-16 23.2-20.8 37.2c-4.8 14-7.2 29.2-7.2 45.4 0 28 4.6 56 13.6 83.8s22 53 38.6 75.4c16.6 22.4 36.6 40.6 60.2 54.2 23.6 13.8 49.4 20.8 77.8 20.8 17.6 0 34-5.2 49-15.8s27-27.8 36.2-52l20 53h42.6l-77-233.6c-2.6-8.6-4.8-17.4-6.4-25.4s-2.2-15.2-2-21.4c0.2-6.2 1.8-13.2 4.8-17 0.4-0.6 1-1.2 1.6-1.8 21.2-18.2 69.8-10.6 104.8 8.8 34.2 18.8 79.4 60.2 101 150.4 22.6 93.6 6 182.2-46.4 249.8-45.6 58.4-109.2 117.6-193.6 133-27.8 5-44.2 7.6-67 7.6-229.8 0-416-186.2-416-416s186.2-416 416-416 416 186.2 416 416c0 133.2-62.6 251.8-160 327.8zM422.2 338.8c12.8-14.2 29-21.4 48.6-21.4 19.2 0 36.8 6.8 53.2 20.2 16.4 13.6 30.8 30 43 49.6s22 40.6 29 63.2 10.6 43 10.8 61c0 9.8-2 19.4-5.8 28.4-2 4.6-4.2 9-6.6 13.2-2.4 4-5.2 7.8-8.2 11.4-6 7.2-12.8 13-20.4 17.4s-15.6 6.6-23.8 6.6c-20.8 0-39.6-6.4-56.8-19s-32-28.4-44.2-47.4c-12.2-19-21.6-39.6-28.2-62-6.6-22.2-9.8-43-9.8-62.4v-0.2c0-24.8 6.4-44.2 19.2-58.6z" />
|
||||||
|
<glyph unicode="" glyph-name="checkmark-circle-outline" d="M680.2 605.4l-249.6-251.4-94.4 94.4-35.6-35.6 112-112c5-5 11.8-9 17.8-9s12.6 4 17.6 8.8l267.4 268.8-35.2 36zM512 864c-229.8 0-416-186.2-416-416s186.2-416 416-416 416 186.2 416 416-186.2 416-416 416zM512 66.6c-210.2 0-381.4 171-381.4 381.4 0 210.2 171 381.4 381.4 381.4 210.2 0 381.4-171 381.4-381.4 0-210.2-171.2-381.4-381.4-381.4z" />
|
||||||
|
<glyph unicode="" glyph-name="checkmark-circle" d="M512 864c-229.8 0-416-186.2-416-416s186.2-416 416-416 416 186.2 416 416-186.2 416-416 416zM447.8 300.6c-4.8-4.8-11.6-8.8-17.6-8.8s-12.8 4.2-17.8 9l-112 112 35.6 35.6 94.4-94.4 249.6 251.4 35-36.2-267.2-268.6z" />
|
||||||
|
<glyph unicode="" glyph-name="key-outline" d="M685.2 523.8c-26.6 0-52.2 0-76.2-8.2-103.2 86.2-375.6 313.8-396.4 335-9.6 9.8-20.2 13.4-30.6 13.4-17.4 0-34-10.4-43.4-19.2-14-13.2-51.2-53.6-41-64 30.6-30.8 54.8-53 67.4-65.6 9.6-9.6 26.8 1.6 39.2-6.6 11-7.2 20-19.8 29.2-29 10.6-10.8 18-15.6 17.8-31.4-0.2-16.6 1-27.6 12.6-40 9.4-10 18.2-15.2 31.8-15.4 18.4-0.4 29.8-4.8 41.8-19.8 11.4-14.2 4.2-28.4 9.8-44 3.6-10.2 32-36.2 36-40.2s22 0 26.6-4.6 34.4-31.6 36.4-40.8-6-18-4-27.2c2.4-11.2 14.4-24.2 21.2-34.8-13.6-31-21.2-65.2-21.2-101.4 0-137 108.8-248 242.8-248s243 111 243 248-108.8 243.8-242.8 243.8zM685.2 64c-116.4 0-211 97-211 216 0 30.8 6.2 60.6 18.4 88.4l7 15.8s-15.4 26.8-20.8 32.4c-5.4 5.4 4.4 26.2-1.2 33.2-5.8 7-39.2 50.4-49.4 60.6s-28 3.6-33.4 9c-5.4 5.4-14.6 15.8-17.4 20.8-0.4 1.6-0.4 4.8-0.6 7.6-0.2 10.4-0.6 28-14.2 44.8-17.2 21.6-37 31-65.8 31.8-3.2 0-4.4 0.2-9.4 5.4-3.2 3.4-4 4.4-4 17.8 0.2 27.4-13.4 40.8-23.2 50.4l-38.2 37.2c-15.4 10.2-30.2 10.4-39.8 10.4-2.6 0-5.2 0-6.8 0.4l-43.6 45.4c2 6 15.4 17.8 21.2 23 2.8 2.4 5.2 4.8 7.8 7 5.6 5.2 14.8 10.6 21.6 10.6 2 0 4.2-0.2 7.8-3.8 20.8-21.2 258.8-220.4 398.8-337.2l13.6-11.4 16.8 5.6c19.2 6.4 41.8 6.4 66 6.4 56.6 0 109.6-21.8 149.2-61.2 39.8-39.6 61.6-93.2 61.6-150.6 0-118.8-94.6-215.8-211-215.8zM768 256c-35.4 0-64-28.6-64-64s28.6-64 64-64 64 28.6 64 64-28.6 64-64 64zM768 160c-17.6 0-32 14.4-32 32s14.4 32 32 32 32-14.4 32-32-14.4-32-32-32z" />
|
||||||
|
<glyph unicode="" glyph-name="key" d="M768 224c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32zM685.2 523.8c-26.6 0-52.2 0-76.2-8.2-103.2 86.2-375.6 313.8-396.4 335-9.6 9.8-20.2 13.4-30.6 13.4-17.4 0-34-10.4-43.4-19.2-14-13.2-51.2-53.6-41-64 30.6-30.8 54.8-53 67.4-65.6 9.6-9.6 26.8 1.6 39.2-6.6 11-7.2 20-19.8 29.2-29 10.6-10.8 18-15.6 17.8-31.4-0.2-16.6 1-27.6 12.6-40 9.4-10 18.2-15.2 31.8-15.4 18.4-0.4 29.8-4.8 41.8-19.8 11.4-14.2 4.2-28.4 9.8-44 3.6-10.2 32-36.2 36-40.2s22 0 26.6-4.6 34.4-31.6 36.4-40.8-6-18-4-27.2c2.4-11.2 14.4-24.2 21.2-34.8-13.6-31-21.2-65.2-21.2-101.4 0-137 108.8-248 242.8-248s243 111 243 248-108.8 243.8-242.8 243.8zM768 128c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64z" />
|
||||||
|
<glyph unicode="" glyph-name="lock-outline" d="M720 512v144c0 114.86-93.124 208-207.968 208-114.908 0-208.032-93.14-208.032-208v-144h-112v-480h640v480h-112zM336 656c0 97.046 78.968 176 176.032 176 97.028 0 175.968-78.954 175.968-176v-144h-352v144zM800 64h-576v416h576v-416zM512 384c-35.346 0-64-28.654-64-64 0-29.82 20.396-54.88 48-61.984v-66.016h32v66.016c27.604 7.106 48 32.164 48 61.984 0 35.346-28.654 64-64 64zM512 288c-17.644 0-32 14.356-32 32s14.356 32 32 32 32-14.356 32-32-14.356-32-32-32z" />
|
||||||
|
<glyph unicode="" glyph-name="lock" d="M720 512v144c0 114.86-93.124 208-207.968 208-114.908 0-208.032-93.14-208.032-208v-144h-112v-480h640v480h-112zM528 258.016v-66.016h-32v66.016c-27.604 7.106-48 32.164-48 61.984 0 35.346 28.654 64 64 64s64-28.654 64-64c0-29.82-20.396-54.88-48-61.984zM688 512h-352v144c0 97.046 78.968 176 176.032 176 97.028 0 175.968-78.954 175.968-176v-144zM512 352c-17.644 0-32-14.356-32-32s14.356-32 32-32 32 14.356 32 32-14.356 32-32 32z" />
|
||||||
|
</font></defs></svg>
|
||||||
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
Binary file not shown.
1
frontend/assets/fonts/planetposen-icons/selection.json
Normal file
1
frontend/assets/fonts/planetposen-icons/selection.json
Normal file
File diff suppressed because one or more lines are too long
81
frontend/assets/fonts/planetposen-icons/style.css
Normal file
81
frontend/assets/fonts/planetposen-icons/style.css
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'planetposen-icons';
|
||||||
|
src: url('fonts/planetposen-icons.eot?11e7i0');
|
||||||
|
src: url('fonts/planetposen-icons.eot?11e7i0#iefix') format('embedded-opentype'),
|
||||||
|
url('fonts/planetposen-icons.ttf?11e7i0') format('truetype'),
|
||||||
|
url('fonts/planetposen-icons.woff?11e7i0') format('woff'),
|
||||||
|
url('fonts/planetposen-icons.svg?11e7i0#planetposen-icons') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
|
font-family: 'planetposen-icons' !important;
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--at-outline:before {
|
||||||
|
content: "\e90b";
|
||||||
|
}
|
||||||
|
.icon--at:before {
|
||||||
|
content: "\e90c";
|
||||||
|
}
|
||||||
|
.icon--basket-outline:before {
|
||||||
|
content: "\e900";
|
||||||
|
}
|
||||||
|
.icon--basket:before {
|
||||||
|
content: "\e901";
|
||||||
|
}
|
||||||
|
.icon--card-outline:before {
|
||||||
|
content: "\e902";
|
||||||
|
}
|
||||||
|
.icon--card:before {
|
||||||
|
content: "\e903";
|
||||||
|
}
|
||||||
|
.icon--cart-outline:before {
|
||||||
|
content: "\e904";
|
||||||
|
}
|
||||||
|
.icon--cart:before {
|
||||||
|
content: "\e905";
|
||||||
|
}
|
||||||
|
.icon--cash-outline:before {
|
||||||
|
content: "\e906";
|
||||||
|
}
|
||||||
|
.icon--cash:before {
|
||||||
|
content: "\e907";
|
||||||
|
}
|
||||||
|
.icon--checkmark-circle-outline:before {
|
||||||
|
content: "\e913";
|
||||||
|
}
|
||||||
|
.icon--checkmark-circle:before {
|
||||||
|
content: "\e914";
|
||||||
|
}
|
||||||
|
.icon--close-circle-outline:before {
|
||||||
|
content: "\e908";
|
||||||
|
}
|
||||||
|
.icon--close-circle:before {
|
||||||
|
content: "\e909";
|
||||||
|
}
|
||||||
|
.icon--key-outline:before {
|
||||||
|
content: "\e92c";
|
||||||
|
}
|
||||||
|
.icon--key:before {
|
||||||
|
content: "\e92d";
|
||||||
|
}
|
||||||
|
.icon--lock-outline:before {
|
||||||
|
content: "\e92e";
|
||||||
|
}
|
||||||
|
.icon--lock:before {
|
||||||
|
content: "\e92f";
|
||||||
|
}
|
||||||
120
frontend/assets/fonts/planetposen-icons/style.scss
Normal file
120
frontend/assets/fonts/planetposen-icons/style.scss
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: '#{$icomoon-font-family}';
|
||||||
|
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?11e7i0');
|
||||||
|
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?11e7i0#iefix') format('embedded-opentype'),
|
||||||
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?11e7i0') format('truetype'),
|
||||||
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?11e7i0') format('woff'),
|
||||||
|
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?11e7i0##{$icomoon-font-family}') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
/* use !important to prevent issues with browser extensions that change fonts */
|
||||||
|
font-family: '#{$icomoon-font-family}' !important;
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon--at-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--at-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--at {
|
||||||
|
&:before {
|
||||||
|
content: $icon--at;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--basket-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--basket-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--basket {
|
||||||
|
&:before {
|
||||||
|
content: $icon--basket;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--card-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--card-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--card {
|
||||||
|
&:before {
|
||||||
|
content: $icon--card;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--cart-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--cart-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--cart {
|
||||||
|
&:before {
|
||||||
|
content: $icon--cart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--cash-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--cash-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--cash {
|
||||||
|
&:before {
|
||||||
|
content: $icon--cash;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--checkmark-circle-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--checkmark-circle-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--checkmark-circle {
|
||||||
|
&:before {
|
||||||
|
content: $icon--checkmark-circle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--close-circle-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--close-circle-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--close-circle {
|
||||||
|
&:before {
|
||||||
|
content: $icon--close-circle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--key-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--key-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--key {
|
||||||
|
&:before {
|
||||||
|
content: $icon--key;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--lock-outline {
|
||||||
|
&:before {
|
||||||
|
content: $icon--lock-outline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon--lock {
|
||||||
|
&:before {
|
||||||
|
content: $icon--lock;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
23
frontend/assets/fonts/planetposen-icons/variables.scss
Normal file
23
frontend/assets/fonts/planetposen-icons/variables.scss
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
$icomoon-font-family: "planetposen-icons" !default;
|
||||||
|
// @import './frontend/assets/fonts/planetposen-icons/style.scss';
|
||||||
|
$icomoon-font-path: "assets/fonts/planetposen-icons/fonts" !default;
|
||||||
|
|
||||||
|
$icon--at-outline: "\e90b";
|
||||||
|
$icon--at: "\e90c";
|
||||||
|
$icon--basket-outline: "\e900";
|
||||||
|
$icon--basket: "\e901";
|
||||||
|
$icon--card-outline: "\e902";
|
||||||
|
$icon--card: "\e903";
|
||||||
|
$icon--cart-outline: "\e904";
|
||||||
|
$icon--cart: "\e905";
|
||||||
|
$icon--cash-outline: "\e906";
|
||||||
|
$icon--cash: "\e907";
|
||||||
|
$icon--checkmark-circle-outline: "\e913";
|
||||||
|
$icon--checkmark-circle: "\e914";
|
||||||
|
$icon--close-circle-outline: "\e908";
|
||||||
|
$icon--close-circle: "\e909";
|
||||||
|
$icon--key-outline: "\e92c";
|
||||||
|
$icon--key: "\e92d";
|
||||||
|
$icon--lock-outline: "\e92e";
|
||||||
|
$icon--lock: "\e92f";
|
||||||
|
|
||||||
BIN
frontend/assets/images/IMG_1122.jpeg
Normal file
BIN
frontend/assets/images/IMG_1122.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 MiB |
91
frontend/components/Cart.vue
Normal file
91
frontend/components/Cart.vue
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container cart">
|
||||||
|
<div class="row header">
|
||||||
|
<div class="product">
|
||||||
|
<h2>Product</h2>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<h2>Quantity</h2>
|
||||||
|
<h2>Price</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="product">
|
||||||
|
<img src="https://planetposen.no/Planetposen/Kjp_na_files/Media/IMG_1244/IMG_1244.jpg" />
|
||||||
|
|
||||||
|
<div class="flex-direction-column">
|
||||||
|
<h3>Christmas joy</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Cart'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
.cart {
|
||||||
|
width: 95%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 150px;
|
||||||
|
|
||||||
|
&.header {
|
||||||
|
height: min-content;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.product {
|
||||||
|
width: 60%;
|
||||||
|
height: 100%;
|
||||||
|
display: inherit;
|
||||||
|
flex-direction: inherit;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3, p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
width: 40%;
|
||||||
|
display: inherit;
|
||||||
|
flex-direction: inherit;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
102
frontend/components/Header.vue
Normal file
102
frontend/components/Header.vue
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<header class="flex space-between">
|
||||||
|
<div>
|
||||||
|
<img class="logo" src="https://planetposen.no/Planetposen/Hjem_files/shapeimage_1.png" />
|
||||||
|
|
||||||
|
<router-link to="/" class="header-element">
|
||||||
|
<span>Hjem</span>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/" class="header-element">
|
||||||
|
<span>Om oss</span>
|
||||||
|
</router-link>
|
||||||
|
<router-link to="/" class="header-element">
|
||||||
|
<span>Produkter</span>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- <i class="icon icon--profile"></i> -->
|
||||||
|
<router-link to="/cart">
|
||||||
|
<i class="icon icon--cart-outline header-element"></i>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Header'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "./frontend/styles/variables";
|
||||||
|
|
||||||
|
$header-height: 80px;
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #3b945e; // 3
|
||||||
|
height: $header-height;
|
||||||
|
color: #f2f2f2; // 3
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: $header-height;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: unset;
|
||||||
|
color: inherit;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// background-color: $green; // 1
|
||||||
|
// background-color: #3aafa9; // 2
|
||||||
|
// background-color: #3b945e; // 3
|
||||||
|
// color: $text-color; // 1
|
||||||
|
// color: white; // 2
|
||||||
|
// color: #f2f2f2; // 3
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-element {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 0.7rem;
|
||||||
|
height: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
// background-color: #379683; // 1
|
||||||
|
background-color: #def2f1; // 2
|
||||||
|
// background-color: #57ba98; // 3
|
||||||
|
color: white; // 1
|
||||||
|
color: $text-color; // 2
|
||||||
|
color: #182628; // 3
|
||||||
|
// background-color: #8ee4af;
|
||||||
|
}
|
||||||
|
|
||||||
|
// &:first-of-type {
|
||||||
|
// margin-left: 5rem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
span {
|
||||||
|
letter-spacing: 2.5px;
|
||||||
|
text-transform: lowercase;
|
||||||
|
font-weight: 300;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
frontend/components/Home.vue
Normal file
34
frontend/components/Home.vue
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<!-- <div class="img" :style="{'background-image': 'url(https://i.imgur.com/GTPZgje.jpg)'}"></div> -->
|
||||||
|
<div class="img" :style="{'background-image': 'url(./frontend/assets/images/IMG_1122.jpeg)'}"></div>
|
||||||
|
|
||||||
|
<h1>Welcome home</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Home',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.container {
|
||||||
|
height: 200vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
height: calc(80vh - 80px);
|
||||||
|
width: 100vw;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
11
frontend/index.html
Normal file
11
frontend/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Planetposen</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
frontend/main.js
Normal file
16
frontend/main.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import router from './routes'
|
||||||
|
// import store from './store'
|
||||||
|
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
router,
|
||||||
|
// store,
|
||||||
|
components: { App },
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
117
frontend/modules/playerModule.js
Normal file
117
frontend/modules/playerModule.js
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
state: {
|
||||||
|
player: undefined,
|
||||||
|
playlist: [],
|
||||||
|
authenticatedAdmin: false,
|
||||||
|
channelSettings: null,
|
||||||
|
clientSettings: null,
|
||||||
|
nowPlaying: null,
|
||||||
|
userSuggested: [],
|
||||||
|
externalSuggested: [],
|
||||||
|
PLAYER_STATES: {
|
||||||
|
BUFFERING: 3,
|
||||||
|
CUED: 5,
|
||||||
|
ENDED: 0,
|
||||||
|
PAUSED: 2,
|
||||||
|
PLAYING: 1,
|
||||||
|
UNSTARTED: -1
|
||||||
|
},
|
||||||
|
socket: null,
|
||||||
|
channel: "summér"
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
channel: state => {
|
||||||
|
return state.channel;
|
||||||
|
},
|
||||||
|
socket: state => {
|
||||||
|
return state.socket
|
||||||
|
},
|
||||||
|
PLAYER_STATES: state => {
|
||||||
|
return state.PLAYER_STATES;
|
||||||
|
},
|
||||||
|
authenticatedAdmin: state => {
|
||||||
|
return state.authenticatedAdmin;
|
||||||
|
},
|
||||||
|
playlist: state => {
|
||||||
|
return state.playlist;
|
||||||
|
},
|
||||||
|
channelSettings: state => {
|
||||||
|
return state.channelSettings;
|
||||||
|
},
|
||||||
|
clientSettings: state => {
|
||||||
|
return state.clientSettings;
|
||||||
|
},
|
||||||
|
nowPlaying: state => {
|
||||||
|
return state.nowPlaying;
|
||||||
|
},
|
||||||
|
userSuggested: state => {
|
||||||
|
return state.userSuggested;
|
||||||
|
},
|
||||||
|
externalSuggested: state => {
|
||||||
|
return state.externalSuggested;
|
||||||
|
},
|
||||||
|
player: state => {
|
||||||
|
return state.player;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
SET_CHANNEL: (state, channel) => {
|
||||||
|
state.channel = channel;
|
||||||
|
},
|
||||||
|
SET_AUTHENTICATED_ADMIN: (state, authenticatedAdmin) => {
|
||||||
|
state.authenticatedAdmin = authenticatedAdmin;
|
||||||
|
},
|
||||||
|
SET_PLAYLIST: (state, playlist) => {
|
||||||
|
state.playlist = playlist;
|
||||||
|
},
|
||||||
|
SET_CHANNEL_SETTINGS: (state, channelSettings) => {
|
||||||
|
state.channelSettings = channelSettings;
|
||||||
|
},
|
||||||
|
SET_CLIENT_SETTINGS: (state, clientSettings) => {
|
||||||
|
state.clientSettings = clientSettings;
|
||||||
|
},
|
||||||
|
SET_NOW_PLAYING: (state, nowPlaying) => {
|
||||||
|
state.nowPlaying = nowPlaying;
|
||||||
|
},
|
||||||
|
SET_USER_SUGGESTED: (state, userSuggested) => {
|
||||||
|
state.userSuggested = userSuggested;
|
||||||
|
},
|
||||||
|
SET_EXTERNAL_SUGGESTED: (state, externalSuggested) => {
|
||||||
|
state.externalSuggested = externalSuggested;
|
||||||
|
},
|
||||||
|
SET_PLAYER: (state, player) => {
|
||||||
|
state.player = player;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
setChannel({ commit }, channel) {
|
||||||
|
commit("SET_CHANNEL", channel.toLowerCase());
|
||||||
|
},
|
||||||
|
setAuthenticatedAdmin({ commit }, authenticatedAdmin) {
|
||||||
|
commit("SET_AUTHENTICATED_ADMIN", authenticatedAdmin);
|
||||||
|
},
|
||||||
|
setPlaylist({ commit }, playlist) {
|
||||||
|
commit("SET_PLAYLIST", playlist);
|
||||||
|
},
|
||||||
|
setChannelSettings({ commit }, channelSettings) {
|
||||||
|
commit("SET_CHANNEL_SETTINGS", channelSettings);
|
||||||
|
},
|
||||||
|
setClientSettings({ commit }, clientSettings) {
|
||||||
|
commit("SET_CLIENT_SETTINGS", clientSettings);
|
||||||
|
},
|
||||||
|
setNowPlaying({ commit }, nowPlaying) {
|
||||||
|
commit("SET_NOW_PLAYING", nowPlaying);
|
||||||
|
},
|
||||||
|
setUserSuggested({ commit }, userSuggested) {
|
||||||
|
commit("SET_USER_SUGGESTED", userSuggested);
|
||||||
|
},
|
||||||
|
setExternalSuggested({ commit }, externalSuggested) {
|
||||||
|
commit("SET_EXTERNAL_SUGGESTED", externalSuggested);
|
||||||
|
},
|
||||||
|
setPlayer({ commit }, player) {
|
||||||
|
commit("SET_PLAYER", player);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
36
frontend/routes.js
Normal file
36
frontend/routes.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router';
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
let routes = [
|
||||||
|
{
|
||||||
|
name: 'Home',
|
||||||
|
path: '/',
|
||||||
|
component: (resolve) => require(['./components/Home.vue'], resolve)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cart',
|
||||||
|
path: '/cart',
|
||||||
|
component: (resolve) => require(['./components/Cart.vue'], resolve)
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// name: 'styleguide',
|
||||||
|
// path: '/styleguide',
|
||||||
|
// component: (resolve) => require(['./components/Styleguide.vue'], resolve)
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: '404',
|
||||||
|
// path: '/404',
|
||||||
|
// component: (resolve) => require(['./components/404.vue'], resolve)
|
||||||
|
// }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'hash',
|
||||||
|
base: '/',
|
||||||
|
routes,
|
||||||
|
linkActiveClass: 'is-active'
|
||||||
|
});
|
||||||
|
|
||||||
|
export default router;
|
||||||
14
frontend/store.js
Normal file
14
frontend/store.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import Vuex from 'vuex';
|
||||||
|
|
||||||
|
import playerModule from '@/modules/playerModule';
|
||||||
|
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
const store = new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
playerModule
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default store;
|
||||||
17
frontend/styles/global.scss
Normal file
17
frontend/styles/global.scss
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-content-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-direction-column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
1
frontend/styles/icons.scss
Normal file
1
frontend/styles/icons.scss
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import './frontend/assets/fonts/planetposen-icons/style.scss';
|
||||||
6
frontend/styles/normalize.scss
vendored
Normal file
6
frontend/styles/normalize.scss
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
3
frontend/styles/variables.scss
Normal file
3
frontend/styles/variables.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
$green: #5cdb95;
|
||||||
|
$text-color: #05386B;
|
||||||
53
package.json
Normal file
53
package.json
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"name": "planetposen",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "homepage for planetposen - selling sustialable giftbags",
|
||||||
|
"main": "server.js",
|
||||||
|
"repository": "git@github.com:kevinmidboe/planetposen.git",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "cross-env NODE_ENV=development webpack-dev-server --progress"
|
||||||
|
},
|
||||||
|
"author": "KevinMidboe <kevin.midboe@gmail.com>",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/polyfill": "~7.2",
|
||||||
|
"clean-webpack-plugin": "^3.0.0",
|
||||||
|
"extract-text-webpack-plugin": "^3.0.2",
|
||||||
|
"moment": "^2.24.0",
|
||||||
|
"node-fetch": "^2.6.0",
|
||||||
|
"node-sass": "^4.13.0",
|
||||||
|
"vue": "~2.6",
|
||||||
|
"vue-router": "~3.0",
|
||||||
|
"vuex": "^3.1.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "~7.2",
|
||||||
|
"@babel/plugin-proposal-class-properties": "~7.3",
|
||||||
|
"@babel/plugin-proposal-decorators": "~7.3",
|
||||||
|
"@babel/plugin-proposal-json-strings": "~7.2",
|
||||||
|
"@babel/plugin-syntax-dynamic-import": "~7.2",
|
||||||
|
"@babel/plugin-syntax-import-meta": "~7.2",
|
||||||
|
"@babel/preset-env": "~7.3",
|
||||||
|
"babel-loader": "~8.0",
|
||||||
|
"compression-webpack-plugin": "~2.0",
|
||||||
|
"cross-env": "^6.0.3",
|
||||||
|
"css-loader": "^3.2.0",
|
||||||
|
"file-loader": "^4.2.0",
|
||||||
|
"friendly-errors-webpack-plugin": "~1.7",
|
||||||
|
"html-webpack-plugin": "~3.2",
|
||||||
|
"mini-css-extract-plugin": "~0.5",
|
||||||
|
"optimize-css-assets-webpack-plugin": "~3.2",
|
||||||
|
"sass-loader": "~7.1",
|
||||||
|
"uglifyjs-webpack-plugin": "~1.2",
|
||||||
|
"url-loader": "^2.2.0",
|
||||||
|
"vue-loader": "~15.6",
|
||||||
|
"vue-style-loader": "~4.1",
|
||||||
|
"vue-template-compiler": "~2.6",
|
||||||
|
"webpack": "~4.29",
|
||||||
|
"webpack-bundle-analyzer": "^3.6.0",
|
||||||
|
"webpack-cli": "~3.2",
|
||||||
|
"webpack-dev-server": "~3.1",
|
||||||
|
"webpack-hot-middleware": "~2.24",
|
||||||
|
"webpack-merge": "~4.2"
|
||||||
|
}
|
||||||
|
}
|
||||||
9
webpack.config.js
Normal file
9
webpack.config.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
const environment = (process.env.NODE_ENV || "development").trim();
|
||||||
|
|
||||||
|
if (environment === "development") {
|
||||||
|
module.exports = require("./config/webpack.config.dev");
|
||||||
|
} else {
|
||||||
|
module.exports = require("./config/webpack.config.prod");
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user