Merge branch 'master' of github.com:ramonwenger/skillbox
* 'master' of github.com:ramonwenger/skillbox: Add styling to user input fields Move styles Add favicon Add dropzone
This commit is contained in:
Pawel Kowalski
commit
46a13cc2c8
|
|
@ -60,7 +60,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
|
|||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
from: path.resolve(__dirname, '../vstatic'),
|
||||
to: config.dev.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const webpackConfig = merge(baseWebpackConfig, {
|
|||
filename: utils.assetsPath('css/[name].[contenthash].css'),
|
||||
// Setting the following option to `false` will not extract CSS from codesplit chunks.
|
||||
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
|
||||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
||||
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
|
||||
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
|
||||
allChunks: true,
|
||||
}),
|
||||
|
|
@ -111,7 +111,7 @@ const webpackConfig = merge(baseWebpackConfig, {
|
|||
// copy custom static assets
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: path.resolve(__dirname, '../static'),
|
||||
from: path.resolve(__dirname, '../vstatic'),
|
||||
to: config.build.assetsSubDirectory,
|
||||
ignore: ['.*']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ module.exports = {
|
|||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsSubDirectory: 'vstatic',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ module.exports = {
|
|||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
|
||||
assetsSubDirectory: 'static',
|
||||
assetsSubDirectory: 'vstatic',
|
||||
assetsPublicPath: '/',
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,800" rel="stylesheet">
|
||||
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
|
||||
<link rel="shortcut icon" type="image/png" href="/vstatic/favicon.ico"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -71,6 +71,7 @@
|
|||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"vue-vimeo-player": "0.0.6",
|
||||
"vue2-dropzone": "^3.2.2",
|
||||
"vuetify": "^1.1.8",
|
||||
"vuex": "^3.0.1",
|
||||
"webpack": "^3.6.0",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<div class="container skillbox">
|
||||
<header class="header skillbox__header">
|
||||
<router-link to="/" class="header__logo">skillBOX</router-link>
|
||||
</header>
|
||||
<router-view></router-view>
|
||||
<footer>Footer</footer>
|
||||
<footer skillbox__footer>Footer</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,4 +23,41 @@
|
|||
|
||||
<style lang="scss">
|
||||
@import "styles/main.scss";
|
||||
|
||||
.skillbox {
|
||||
&__header {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
//todo: move
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
//max-width: 1440px;
|
||||
display: grid;
|
||||
grid-template-rows: 72px auto 50px;
|
||||
grid-row-gap: 32px;
|
||||
min-height: 100vh;
|
||||
grid-template-areas: "h" "c" "f";
|
||||
|
||||
.header {
|
||||
grid-area: h;
|
||||
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&__logo {
|
||||
color: #17A887;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
grid-area: f;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,68 @@
|
|||
<template>
|
||||
<p v-html="value.task_text"></p>
|
||||
<div class="student-entry">
|
||||
<p v-html="value.task_text"></p>
|
||||
<textarea class="student-entry__input" placeholder="Text schreiben"></textarea>
|
||||
<div class="student-entry__dropzone-dummy">drag & drop | Dokument wählen</div>
|
||||
<button class="student-entry__submit">Ergebnis teilen</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vue2Dropzone from 'vue2-dropzone'
|
||||
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
|
||||
|
||||
export default {
|
||||
props: ['value']
|
||||
props: ['value'],
|
||||
|
||||
components: {
|
||||
vueDropzone: vue2Dropzone
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
dropzoneOptions: {
|
||||
url: 'https://httpbin.org/post',
|
||||
thumbnailWidth: 100,
|
||||
maxFilesize: 0.5,
|
||||
language: {
|
||||
dictDefaultMessage: 'Halo Dropzone'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
|
||||
.student-entry {
|
||||
margin-bottom: 2em;
|
||||
|
||||
&__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #DBDBDB;
|
||||
padding: 13px;
|
||||
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
box-sizing: border-box;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&__dropzone-dummy {
|
||||
padding: 15px;
|
||||
border: 1px dashed #C5C5C5;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
background: transparent;
|
||||
border: 2px solid $color-brand;
|
||||
padding: 5px 15px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,3 +35,9 @@ h4 {
|
|||
font-size: 1.3125rem; // 21px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
input, textarea, select, button {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-weight: 500;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,36 +8,6 @@
|
|||
@import "variables";
|
||||
|
||||
|
||||
//todo: move
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
//max-width: 1440px;
|
||||
display: grid;
|
||||
grid-template-rows: 72px auto 50px;
|
||||
grid-row-gap: 32px;
|
||||
min-height: 100vh;
|
||||
grid-template-areas: "h" "c" "f";
|
||||
|
||||
.header {
|
||||
grid-area: h;
|
||||
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
&__logo {
|
||||
color: #17A887;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
grid-area: f;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 600 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Loading…
Reference in New Issue