From d6a4b2fe7a816468abb7c9aab1d8860ed877fc37 Mon Sep 17 00:00:00 2001 From: Florian Knoch Date: Sun, 29 Nov 2020 11:31:32 +0100 Subject: [PATCH] Fix mobile styles --- css/style.css | 235 ++++++++++++++++++++++++---------------------- css/style.css.map | 2 +- css/style.sass | 60 +++++++----- index.html | 6 +- js/app.js | 1 - style.css | 25 +++++ 6 files changed, 187 insertions(+), 142 deletions(-) create mode 100644 style.css diff --git a/css/style.css b/css/style.css index 941b91a..4216ab0 100644 --- a/css/style.css +++ b/css/style.css @@ -39,105 +39,105 @@ body { .start-screen .score, .end-screen .score { text-align: center; } -.ingame-screen { - display: grid; - grid-template-rows: 2fr 6fr 2fr; } - .ingame-screen .score.focus { - animation: 1s attention; } - .ingame-screen header, .ingame-screen footer { - padding: 1rem 2rem; } - .ingame-screen .header { - display: flex; - justify-content: space-between; - align-items: center; - background-color: black; - color: white; } - .ingame-screen .header h1 { - margin: 0; - padding: 0; } - .ingame-screen .question { - padding: 2rem; } - .ingame-screen .question.revealed .answer { - background-color: lightgray; } - .ingame-screen .question.revealed .answer.chosen { - background-color: #b34040; - color: white; } - .ingame-screen .question.revealed .answer.correct { +.ingame-screen .score.focus { + animation: 1s attention; } +.ingame-screen .header { + display: flex; + padding: 1rem 2rem; + justify-content: space-between; + align-items: center; + background-color: black; + color: white; } + .ingame-screen .header h1 { + margin: 0; + padding: 0; } +.ingame-screen .question { + padding: 2rem; } + .ingame-screen .question.revealed .answer { + background-color: lightgray; } + .ingame-screen .question.revealed .answer.chosen { + background-color: #b34040; + color: white; } + .ingame-screen .question.revealed .answer.correct { + background-color: #8fb340; + color: white; } + .ingame-screen .question.revealed .answer.correct.chosen { background-color: #8fb340; color: white; } - .ingame-screen .question.revealed .answer.correct.chosen { - 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 { + .ingame-screen .question .question-answers .answer { display: block; - margin-top: 1rem; + padding: 0.5rem; width: 100%; - border-radius: 0; + margin-bottom: 2px; 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 { 0% { @@ -153,33 +153,44 @@ body { @media screen and (max-width: 600px) { body { margin: 0; - padding: 0; } + padding: 0; + display: block; + height: auto; } body .screen { width: 100vw; - height: 100vh; + height: auto; max-width: 100vw; - min-height: 100vh; - overflow-y: scroll; } + min-height: 100vh; } body .screen .headline { text-align: center; } body .screen .btn-start { padding: 1rem 2rem; width: auto; } + body .screen.ingame-screen { + display: block; + height: auto; } body .header { + width: 100vw; flex-direction: column; } - body .question-text { - font-size: 14pt; } - body .question.estimate { - max-width: 95vw; - height: auto; - box-sizing: border-box; } - body .question.estimate .question-estimate { - display: block; } - body .question.estimate .input-estimate, - body .question.estimate .btn-submit-estimate { - width: 100%; - padding: 0.5rem 1rem; } - body .question.estimate .question-result { - width: 60%; } } + body .question { + display: block; + width: 100vw; } + body .question .question-text { + font-size: 14pt; + margin-top: 0; } + body .question.estimate { + height: auto; + box-sizing: border-box; } + body .question.estimate .question-estimate { + display: block; } + body .question.estimate .input-estimate, + body .question.estimate .btn-submit-estimate { + width: 100%; + display: block; + padding: 0.5rem 1rem; } + body .question.estimate .question-result { + width: 70%; + margin-top: 5rem; + height: 5rem; } } /*# sourceMappingURL=style.css.map */ diff --git a/css/style.css.map b/css/style.css.map index 1370f21..c4842dc 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1,6 +1,6 @@ { "version": 3, -"mappings": "AAAA,CAAC;EACC,UAAU,EAAE,UAAU;;AAExB,IAAI;EACF,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE,0BAA0B;EAC5C,eAAe,EAAE,KAAK;EACtB,qBAAqB,EAAE,KAAK;EAE5B,YAAO;IACL,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,IAAI;IAChB,gBAAgB,EAAE,wBAAuB;EAE3C,OAAE;IACA,WAAW,EAAE,gBAAgB;IAC7B,SAAS,EAAE,IAAI;EAEjB,OAAE;IACA,WAAW,EAAE,MAAM;EAErB,iBAAY;IACV,gBAAgB,EAAE,IAAI;;AAE1B,0BAA0B;EACxB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;EACvB,cAAc,EAAE,MAAM;EAEtB,sCAAK;IACH,SAAS,EAAE,KAAK;EAElB,gDAAU;IACR,OAAO,EAAE,MAAK;IACd,MAAM,EAAE,mBAAmB;IAC3B,aAAa,EAAE,CAAC;IAChB,KAAK,EAAE,GAAG;EAEZ,wCAAM;IACJ,UAAU,EAAE,MAAM;;AAEtB,cAAc;EACZ,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,WAAW;EAE/B,2BAAY;IACV,SAAS,EAAE,YAAY;EAEzB,4CAAc;IACZ,OAAO,EAAE,SAAS;EAEpB,sBAAO;IACL,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,MAAM;IACnB,gBAAgB,EAAE,KAAK;IACvB,KAAK,EAAE,KAAK;IAEZ,yBAAE;MACA,MAAM,EAAE,CAAC;MACT,OAAO,EAAE,CAAC;EAEd,wBAAS;IACP,OAAO,EAAE,IAAI;IAIX,yCAAO;MACL,gBAAgB,EAAE,SAAS;MAE3B,gDAAQ;QACN,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;MAEd,iDAAS;QACP,gBAAgB,EAAE,OAAO;QACzB,KAAK,EAAE,KAAK;QAEZ,wDAAQ;UACN,gBAAgB,EAAE,OAAO;UACzB,KAAK,EAAE,KAAK;IAGlB,kDAAO;MACL,OAAO,EAAE,KAAK;MACd,OAAO,EAAE,MAAK;MACd,KAAK,EAAE,IAAI;MACX,aAAa,EAAE,GAAG;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,CAAC;MAChB,UAAU,EAAE,IAAI;MAChB,iBAAiB,EAAE,MAAM;MAEzB,0DAAS;QACP,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,KAAI;IAEnB,2CAAkB;MAChB,OAAO,EAAE,IAAI;MACb,qBAAqB,EAAE,OAAO;MAE9B,2DAAe;QACb,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,UAAU;MAExB,gEAAoB;QAClB,OAAO,EAAE,YAAW;QACpB,MAAM,EAAE,CAAC;QACT,UAAU,EAAE,UAAU;IAE1B,iDAAwB;MACtB,WAAW,EAAE,GAAG;MAChB,UAAU,EAAE,IAAI;MAChB,OAAO,EAAE,IAAI;MACb,gBAAgB,EAAE,qBAAoB;MAEtC,aAAa,EAAE,GAAG;MAClB,KAAK,EAAE,KAAK;MAEZ,yDAAS;QACP,OAAO,EAAE,KAAK;IAElB,yCAAgB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,MAAM;MACd,UAAU,EAAE,IAAI;MAChB,UAAU,EAAE,cAAc;MAE1B,8GAA0B;QACxB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,iCAAiC;QAC5C,UAAU,EAAE,MAAM;QAElB,4HAAM;UACJ,SAAS,EAAE,IAAI;QAEjB,8HAAS;UACP,OAAO,EAAE,EAAE;UACX,OAAO,EAAE,KAAK;UACd,QAAQ,EAAE,QAAQ;UAClB,KAAK,EAAE,IAAI;UACX,MAAM,EAAE,IAAI;UACZ,IAAI,EAAE,GAAG;UACT,SAAS,EAAE,kCAAkC;MAEjD,yDAAe;QACb,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,kCAAkC;MAE/C,iEAAuB;QACrB,gBAAgB,EAAE,oBAAoB;QACtC,eAAe,EAAE,OAAO;QACxB,SAAS,EAAE,iCAAiC;MAE9C,2DAAiB;QACf,gBAAgB,EAAE,yBAAyB;QAC3C,eAAe,EAAE,OAAO;EAE9B,4BAAa;IACX,OAAO,EAAE,KAAK;IACd,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,IAAI;IACX,aAAa,EAAE,CAAC;IAChB,MAAM,EAAE,mBAAmB;IAC3B,OAAO,EAAE,MAAK;;;;IAId,SAAS,EAAE,QAAQ;;IAEnB,SAAS,EAAE,UAAU;;IAErB,SAAS,EAAE,UAAS;;IAEpB,SAAS,EAAE,UAAU;;IAErB,SAAS,EAAE,QAAQ;AAEvB,oCAAoC;EAClC,IAAI;IACF,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;IAEV,YAAO;MACL,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE,KAAK;MACb,SAAS,EAAE,KAAK;MAChB,UAAU,EAAE,KAAK;MACjB,UAAU,EAAE,MAAM;MAElB,sBAAS;QACP,UAAU,EAAE,MAAM;MAEpB,uBAAU;QACR,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,IAAI;IAEf,YAAO;MACL,cAAc,EAAE,MAAM;IAExB,mBAAc;MACZ,SAAS,EAAE,IAAI;IAEjB,uBAAkB;MAChB,SAAS,EAAE,IAAI;MACf,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,UAAU;MAEtB,0CAAkB;QAChB,OAAO,EAAE,KAAK;MAEhB;kDAAgB;QAEd,KAAK,EAAE,IAAI;QACX,OAAO,EAAE,WAAU;MAErB,wCAAgB;QACd,KAAK,EAAE,GAAG", +"mappings": "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", "sources": ["style.sass"], "names": [], "file": "style.css" diff --git a/css/style.sass b/css/style.sass index 6dd3a5b..ff52631 100644 --- a/css/style.sass +++ b/css/style.sass @@ -47,17 +47,13 @@ body text-align: center .ingame-screen - display: grid - grid-template-rows: 2fr 6fr 2fr .score.focus animation: 1s attention - header, footer - padding: 1rem 2rem - .header display: flex + padding: 1rem 2rem justify-content: space-between align-items: center background-color: black @@ -108,21 +104,24 @@ body grid-template-columns: 7fr 3fr .input-estimate + padding: .25rem margin: 0 box-sizing: border-box + border-radius: 0 + border: 1px solid lightgray .btn-submit-estimate padding: auto .25rem margin: 0 box-sizing: border-box + border-radius: 0 + border: 1px solid lightgray .question-result-wrapper padding-top: 1px margin-top: 2rem display: none background-color: rgba(21, 45, 59, .7) - // box-shadow: 0 0 5px 10px rgba(0,0,0,.1) inset - border-radius: 5px color: white &.visible @@ -190,13 +189,14 @@ body body margin: 0 padding: 0 + display: block + height: auto - .screen + .screen width: 100vw - height: 100vh + height: auto max-width: 100vw min-height: 100vh - overflow-y: scroll .headline text-align: center @@ -205,24 +205,36 @@ body padding: 1rem 2rem width: auto + &.ingame-screen + display: block + height: auto + .header + width: 100vw flex-direction: column - .question-text - font-size: 14pt + .question + display: block + width: 100vw - .question.estimate - max-width: 95vw - height: auto - box-sizing: border-box + .question-text + font-size: 14pt + margin-top: 0 - .question-estimate - display: block + &.estimate + height: auto + box-sizing: border-box - .input-estimate, - .btn-submit-estimate - width: 100% - padding: .5rem 1rem + .question-estimate + display: block - .question-result - width: 60% \ No newline at end of file + .input-estimate, + .btn-submit-estimate + width: 100% + display: block + padding: .5rem 1rem + + .question-result + width: 70% + margin-top: 5rem + height: 5rem diff --git a/index.html b/index.html index a3d5420..becbaae 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,7 @@ {{answer.text}} +
@@ -55,11 +56,8 @@
-
- - +
diff --git a/js/app.js b/js/app.js index d0e572c..c23dc3c 100644 --- a/js/app.js +++ b/js/app.js @@ -58,7 +58,6 @@ const app = new Vue({ this.evaluateEstimate() } default: - console.log(e.key) return } }) diff --git a/style.css b/style.css new file mode 100644 index 0000000..d309833 --- /dev/null +++ b/style.css @@ -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 `' +/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 `
' +/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 `
' +*/ +body:before { + white-space: pre; + font-family: monospace; + content: "Errno::ENOENT: No such file or directory @ rb_sysopen - style.sass"; }