ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

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 2018-08-16 16:52:21 +02:00
parent 3f159b0473 08527a7575
commit 46a13cc2c8
14 changed files with 2484 additions and 2396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/build/webpack.dev.conf.js
View File

@ -60,7 +60,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
// copy custom static assets // copy custom static assets
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ {
from: path.resolve(__dirname, '../static'), from: path.resolve(__dirname, '../vstatic'),
to: config.dev.assetsSubDirectory, to: config.dev.assetsSubDirectory,
ignore: ['.*'] ignore: ['.*']
} }

4
client/build/webpack.prod.conf.js
View File

@ -46,7 +46,7 @@ const webpackConfig = merge(baseWebpackConfig, {
filename: utils.assetsPath('css/[name].[contenthash].css'), filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks. // 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. // 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 // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true, allChunks: true,
}), }),
@ -111,7 +111,7 @@ const webpackConfig = merge(baseWebpackConfig, {
// copy custom static assets // copy custom static assets
new CopyWebpackPlugin([ new CopyWebpackPlugin([
{ {
from: path.resolve(__dirname, '../static'), from: path.resolve(__dirname, '../vstatic'),
to: config.build.assetsSubDirectory, to: config.build.assetsSubDirectory,
ignore: ['.*'] ignore: ['.*']
} }

4
client/config/index.js
View File

@ -8,7 +8,7 @@ module.exports = {
dev: { dev: {
// Paths // Paths
assetsSubDirectory: 'static', assetsSubDirectory: 'vstatic',
assetsPublicPath: '/', assetsPublicPath: '/',
proxyTable: {}, proxyTable: {},
@ -48,7 +48,7 @@ module.exports = {
index: path.resolve(__dirname, '../dist/index.html'), index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'), assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static', assetsSubDirectory: 'vstatic',
assetsPublicPath: '/', assetsPublicPath: '/',
/** /**

2
client/index.html
View File

@ -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=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:500,800" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:500,800" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet"> <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/vstatic/favicon.ico"/>
</head> </head>
<body> <body>
<div id="app"> <div id="app">

4725
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
client/package.json
View File

@ -71,6 +71,7 @@
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.17", "vue-template-compiler": "^2.5.17",
"vue-vimeo-player": "0.0.6", "vue-vimeo-player": "0.0.6",
"vue2-dropzone": "^3.2.2",
"vuetify": "^1.1.8", "vuetify": "^1.1.8",
"vuex": "^3.0.1", "vuex": "^3.0.1",
"webpack": "^3.6.0", "webpack": "^3.6.0",

43
client/src/App.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="container"> <div class="container skillbox">
<header class="header"> <header class="header skillbox__header">
<router-link to="/" class="header__logo">skillBOX</router-link> <router-link to="/" class="header__logo">skillBOX</router-link>
</header> </header>
<router-view></router-view> <router-view></router-view>
<footer>Footer</footer> <footer skillbox__footer>Footer</footer>
</div> </div>
</template> </template>
@ -23,4 +23,41 @@
<style lang="scss"> <style lang="scss">
@import "styles/main.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> </style>

63
client/src/components/content-blocks/StudentEntry.vue
View File

@ -1,9 +1,68 @@
<template> <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> </template>
<script> <script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
export default { 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> </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>

6
client/src/styles/_typography.scss
View File

@ -35,3 +35,9 @@ h4 {
font-size: 1.3125rem; // 21px font-size: 1.3125rem; // 21px
margin-bottom: 24px; margin-bottom: 24px;
} }
input, textarea, select, button {
font-family: $sans-serif-font-family;
font-weight: 500;
}

30
client/src/styles/main.scss
View File

@ -8,36 +8,6 @@
@import "variables"; @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;
}
}

0
client/static/.gitkeep → client/vstatic/.gitkeep
View File

BIN
client/vstatic/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 B

BIN
client/vstatic/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
client/vstatic/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB