fknoch/weihnachtsquiz-2020
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix mobile styles

Browse Source
This commit is contained in:
Knoch 2020-11-29 11:31:32 +01:00
parent c8683108ef
commit d6a4b2fe7a
6 changed files with 187 additions and 142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
css/style.css
View File

@ -39,105 +39,105 @@ body {
.start-screen .score, .end-screen .score { .start-screen .score, .end-screen .score {
text-align: center; } text-align: center; }
.ingame-screen { .ingame-screen .score.focus {
display: grid; animation: 1s attention; }
grid-template-rows: 2fr 6fr 2fr; } .ingame-screen .header {
.ingame-screen .score.focus { display: flex;
animation: 1s attention; } padding: 1rem 2rem;
.ingame-screen header, .ingame-screen footer { justify-content: space-between;
padding: 1rem 2rem; } align-items: center;
.ingame-screen .header { background-color: black;
display: flex; color: white; }
justify-content: space-between; .ingame-screen .header h1 {
align-items: center; margin: 0;
background-color: black; padding: 0; }
color: white; } .ingame-screen .question {
.ingame-screen .header h1 { padding: 2rem; }
margin: 0; .ingame-screen .question.revealed .answer {
padding: 0; } background-color: lightgray; }
.ingame-screen .question { .ingame-screen .question.revealed .answer.chosen {
padding: 2rem; } background-color: #b34040;
.ingame-screen .question.revealed .answer { color: white; }
background-color: lightgray; } .ingame-screen .question.revealed .answer.correct {
.ingame-screen .question.revealed .answer.chosen { background-color: #8fb340;
background-color: #b34040; color: white; }
color: white; } .ingame-screen .question.revealed .answer.correct.chosen {
.ingame-screen .question.revealed .answer.correct {
background-color: #8fb340; background-color: #8fb340;
color: white; } color: white; }
.ingame-screen .question.revealed .answer.correct.chosen { .ingame-screen .question .question-answers .answer {
background-color: #8fb340;
color: white; }
.ingame-screen .question .question-answers .answer {
display: block;
padding: 0.5rem;
width: 100%;
margin-bottom: 2px;
border: 1px solid lightgray;
border-radius: 0;
text-align: left;
counter-increment: answer; }
.ingame-screen .question .question-answers .answer::before {
content: counter(answer);
color: lightgray;
padding: 0.5em; }
.ingame-screen .question .question-estimate {
display: grid;
grid-template-columns: 7fr 3fr; }
.ingame-screen .question .question-estimate .input-estimate {
margin: 0;
box-sizing: border-box; }
.ingame-screen .question .question-estimate .btn-submit-estimate {
padding: auto 0.25rem;
margin: 0;
box-sizing: border-box; }
.ingame-screen .question .question-result-wrapper {
padding-top: 1px;
margin-top: 2rem;
display: none;
background-color: rgba(21, 45, 59, 0.7);
border-radius: 5px;
color: white; }
.ingame-screen .question .question-result-wrapper.visible {
display: block; }
.ingame-screen .question .question-result {
position: relative;
height: 100px;
width: 80%;
margin: 0 auto;
margin-top: 7rem;
border-top: 2px solid #ddd; }
.ingame-screen .question .question-result .correct-result, .ingame-screen .question .question-result .estimate {
position: absolute;
transform: translateX(-50%) translateY(20px);
text-align: center; }
.ingame-screen .question .question-result .correct-result strong, .ingame-screen .question .question-result .estimate strong {
font-size: 150%; }
.ingame-screen .question .question-result .correct-result::before, .ingame-screen .question .question-result .estimate::before {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 50%;
transform: translateX(-50%) translateY(-37px); }
.ingame-screen .question .question-result .correct-result {
z-index: 5;
transform: translateX(-50%) translateY(-75px); }
.ingame-screen .question .question-result .correct-result::before {
background-image: url(../img/star.png);
background-size: contain;
transform: translateX(-50%) translateY(55px); }
.ingame-screen .question .question-result .estimate::before {
background-image: url(../img/snowflake.png);
background-size: contain; }
.ingame-screen .btn-continue {
display: block; display: block;
margin-top: 1rem; padding: 0.5rem;
width: 100%; width: 100%;
border-radius: 0; margin-bottom: 2px;
border: 1px solid lightgray; border: 1px solid lightgray;
padding: 0.5rem; } border-radius: 0;
text-align: left;
counter-increment: answer; }
.ingame-screen .question .question-answers .answer::before {
content: counter(answer);
color: lightgray;
padding: 0.5em; }
.ingame-screen .question .question-estimate {
display: grid;
grid-template-columns: 7fr 3fr; }
.ingame-screen .question .question-estimate .input-estimate {
padding: 0.25rem;
margin: 0;
box-sizing: border-box;
border-radius: 0;
border: 1px solid lightgray; }
.ingame-screen .question .question-estimate .btn-submit-estimate {
padding: auto 0.25rem;
margin: 0;
box-sizing: border-box;
border-radius: 0;
border: 1px solid lightgray; }
.ingame-screen .question .question-result-wrapper {
padding-top: 1px;
margin-top: 2rem;
display: none;
background-color: rgba(21, 45, 59, 0.7);
color: white; }
.ingame-screen .question .question-result-wrapper.visible {
display: block; }
.ingame-screen .question .question-result {
position: relative;
height: 100px;
width: 80%;
margin: 0 auto;
margin-top: 7rem;
border-top: 2px solid #ddd; }
.ingame-screen .question .question-result .correct-result, .ingame-screen .question .question-result .estimate {
position: absolute;
transform: translateX(-50%) translateY(20px);
text-align: center; }
.ingame-screen .question .question-result .correct-result strong, .ingame-screen .question .question-result .estimate strong {
font-size: 150%; }
.ingame-screen .question .question-result .correct-result::before, .ingame-screen .question .question-result .estimate::before {
content: "";
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 50%;
transform: translateX(-50%) translateY(-37px); }
.ingame-screen .question .question-result .correct-result {
z-index: 5;
transform: translateX(-50%) translateY(-75px); }
.ingame-screen .question .question-result .correct-result::before {
background-image: url(../img/star.png);
background-size: contain;
transform: translateX(-50%) translateY(55px); }
.ingame-screen .question .question-result .estimate::before {
background-image: url(../img/snowflake.png);
background-size: contain; }
.ingame-screen .btn-continue {
display: block;
margin-top: 1rem;
width: 100%;
border-radius: 0;
border: 1px solid lightgray;
padding: 0.5rem; }
@keyframes attention { @keyframes attention {
0% { 0% {
@ -153,33 +153,44 @@ body {
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
body { body {
margin: 0; margin: 0;
padding: 0; } padding: 0;
display: block;
height: auto; }
body .screen { body .screen {
width: 100vw; width: 100vw;
height: 100vh; height: auto;
max-width: 100vw; max-width: 100vw;
min-height: 100vh; min-height: 100vh; }
overflow-y: scroll; }
body .screen .headline { body .screen .headline {
text-align: center; } text-align: center; }
body .screen .btn-start { body .screen .btn-start {
padding: 1rem 2rem; padding: 1rem 2rem;
width: auto; } width: auto; }
body .screen.ingame-screen {
display: block;
height: auto; }
body .header { body .header {
width: 100vw;
flex-direction: column; } flex-direction: column; }
body .question-text { body .question {
font-size: 14pt; } display: block;
body .question.estimate { width: 100vw; }
max-width: 95vw; body .question .question-text {
height: auto; font-size: 14pt;
box-sizing: border-box; } margin-top: 0; }
body .question.estimate .question-estimate { body .question.estimate {
display: block; } height: auto;
body .question.estimate .input-estimate, box-sizing: border-box; }
body .question.estimate .btn-submit-estimate { body .question.estimate .question-estimate {
width: 100%; display: block; }
padding: 0.5rem 1rem; } body .question.estimate .input-estimate,
body .question.estimate .question-result { body .question.estimate .btn-submit-estimate {
width: 60%; } } width: 100%;
display: block;
padding: 0.5rem 1rem; }
body .question.estimate .question-result {
width: 70%;
margin-top: 5rem;
height: 5rem; } }
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

2
css/style.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "version": 3,
"mappings": "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", "mappings": "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",
"sources": ["style.sass"], "sources": ["style.sass"],
"names": [], "names": [],
"file": "style.css" "file": "style.css"

60
css/style.sass
View File

@ -47,17 +47,13 @@ body
text-align: center text-align: center
.ingame-screen .ingame-screen
display: grid
grid-template-rows: 2fr 6fr 2fr
.score.focus .score.focus
animation: 1s attention animation: 1s attention
header, footer
padding: 1rem 2rem
.header .header
display: flex display: flex
padding: 1rem 2rem
justify-content: space-between justify-content: space-between
align-items: center align-items: center
background-color: black background-color: black
@ -108,21 +104,24 @@ body
grid-template-columns: 7fr 3fr grid-template-columns: 7fr 3fr
.input-estimate .input-estimate
padding: .25rem
margin: 0 margin: 0
box-sizing: border-box box-sizing: border-box
border-radius: 0
border: 1px solid lightgray
.btn-submit-estimate .btn-submit-estimate
padding: auto .25rem padding: auto .25rem
margin: 0 margin: 0
box-sizing: border-box box-sizing: border-box
border-radius: 0
border: 1px solid lightgray
.question-result-wrapper .question-result-wrapper
padding-top: 1px padding-top: 1px
margin-top: 2rem margin-top: 2rem
display: none display: none
background-color: rgba(21, 45, 59, .7) background-color: rgba(21, 45, 59, .7)
// box-shadow: 0 0 5px 10px rgba(0,0,0,.1) inset
border-radius: 5px
color: white color: white
&.visible &.visible
@ -190,13 +189,14 @@ body
body body
margin: 0 margin: 0
padding: 0 padding: 0
display: block
height: auto
.screen .screen
width: 100vw width: 100vw
height: 100vh height: auto
max-width: 100vw max-width: 100vw
min-height: 100vh min-height: 100vh
overflow-y: scroll
.headline .headline
text-align: center text-align: center
@ -205,24 +205,36 @@ body
padding: 1rem 2rem padding: 1rem 2rem
width: auto width: auto
&.ingame-screen
display: block
height: auto
.header .header
width: 100vw
flex-direction: column flex-direction: column
.question-text .question
font-size: 14pt display: block
width: 100vw
.question.estimate .question-text
max-width: 95vw font-size: 14pt
height: auto margin-top: 0
box-sizing: border-box
.question-estimate &.estimate
display: block height: auto
box-sizing: border-box
.input-estimate, .question-estimate
.btn-submit-estimate display: block
width: 100%
padding: .5rem 1rem
.question-result .input-estimate,
width: 60% .btn-submit-estimate
width: 100%
display: block
padding: .5rem 1rem
.question-result
width: 70%
margin-top: 5rem
height: 5rem

6
index.html
View File

@ -39,6 +39,7 @@
{{answer.text}} {{answer.text}}
</button> </button>
</div> </div>
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
</article> </article>
<article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}"> <article v-if="isEstimate" class="question estimate" v-bind:class="{revealed: currentQuestionAnswered}">
@ -55,11 +56,8 @@
<div class="estimate"></div> <div class="estimate"></div>
</div> </div>
</div> </div>
</article>
<footer class="footer">
<button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button> <button v-if="currentQuestionAnswered" @click="showNextQuestion" class="btn-continue">Weiter</button>
</footer> </article>
</section> </section>
<section v-if="mode === ENDSCREEN" class="end-screen screen"> <section v-if="mode === ENDSCREEN" class="end-screen screen">

1
js/app.js
View File

@ -58,7 +58,6 @@ const app = new Vue({
this.evaluateEstimate() this.evaluateEstimate()
} }
default: default:
console.log(e.key)
return return
} }
}) })

25
style.css Normal file
View File

@ -0,0 +1,25 @@
/*
Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass
Backtrace:
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:454:in `read'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:454:in `update_stylesheet'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:209:in `each'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin/compiler.rb:294:in `watch'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/plugin.rb:109:in `method_missing'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/sass_scss.rb:358:in `watch_or_update'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/sass_scss.rb:51:in `process_result'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/base.rb:50:in `parse'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/lib/sass/exec/base.rb:18:in `parse!'
/home/florian/.rvm/gems/ruby-2.5.1/gems/sass-3.7.2/bin/sass:13:in `<top (required)>'
/home/florian/.rvm/gems/ruby-2.5.1/bin/sass:23:in `load'
/home/florian/.rvm/gems/ruby-2.5.1/bin/sass:23:in `<main>'
/home/florian/.rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `eval'
/home/florian/.rvm/gems/ruby-2.5.1/bin/ruby_executable_hooks:24:in `<main>'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass"; }