From d597379096c51c658f4605e7965137fcd0e15c85 Mon Sep 17 00:00:00 2001 From: Benjamin Auder Date: Thu, 20 Dec 2018 16:35:24 +0100 Subject: [PATCH] Some styles improvement attempts (how to uniformize modals?) --- public/images/index/unicorn.svg | 20 +++++++++++++ public/images/index/wildebeest.svg | 1 + .../javascripts/components/variantSummary.js | 5 ++-- public/javascripts/index.js | 6 +++- public/stylesheets/index.sass | 28 +++++++++++++++---- public/stylesheets/layout.sass | 11 +++----- public/stylesheets/variant.sass | 2 ++ views/index.pug | 22 ++++++++------- views/variant.pug | 8 ++++++ 9 files changed, 77 insertions(+), 26 deletions(-) create mode 100644 public/images/index/unicorn.svg create mode 100644 public/images/index/wildebeest.svg diff --git a/public/images/index/unicorn.svg b/public/images/index/unicorn.svg new file mode 100644 index 00000000..c9e930bd --- /dev/null +++ b/public/images/index/unicorn.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + Nikita Golubev + + + + + diff --git a/public/images/index/wildebeest.svg b/public/images/index/wildebeest.svg new file mode 100644 index 00000000..21a3c9a2 --- /dev/null +++ b/public/images/index/wildebeest.svg @@ -0,0 +1 @@ +Madeby Grids \ No newline at end of file diff --git a/public/javascripts/components/variantSummary.js b/public/javascripts/components/variantSummary.js index 620f810f..e6ec03aa 100644 --- a/public/javascripts/components/variantSummary.js +++ b/public/javascripts/components/variantSummary.js @@ -1,8 +1,9 @@ // Show a variant summary on index Vue.component('my-variant-summary', { - props: ['vobj'], + props: ['vobj','index'], template: ` -
+

{{ vobj.name }} diff --git a/public/javascripts/index.js b/public/javascripts/index.js index 29e48f74..54c296ba 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -8,7 +8,11 @@ new Vue({ }, computed: { sortedCounts: function () { - const variantsCounts = variantArray.map( v => { + const variantsCounts = variantArray + .filter( v => { + return v.name.startsWith(this.curPrefix); + }) + .map( v => { return { name: v.name, desc: v.description, diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass index f67ed08b..07f965fe 100644 --- a/public/stylesheets/index.sass +++ b/public/stylesheets/index.sass @@ -3,26 +3,42 @@ .variant color: black - margin-top: 20px + //margin-top: 20px + border: 1px solid brown + box-sizing: border-box + background-color: lightyellow a color: #663300 -.help - cursor: pointer - .card > h3.section.blue color: #0033cc .card > h3.section.red color: #cc3300 -.main-title +#main-title font-style: italic + background: linear-gradient(#e66465, #9198e5) + margin-top: 0 + margin-left: 0 + margin-right: 0 + img + height: 30px + span + padding-left: 10px + padding-right: 15px + +#needHelp + cursor: pointer -#welcome, #help +#welcome max-height: 100vh max-width: 90vw +#help + max-height: 100vh + max-width: 600px + .conditional-jump display: block diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass index b6458590..647a78bf 100644 --- a/public/stylesheets/layout.sass +++ b/public/stylesheets/layout.sass @@ -1,19 +1,16 @@ html, * - font-size: 18px font-family: "Open Sans", Arial, sans-serif + --back-color: #f2f2f2 + --a-link-color: #0039e6 body padding: 0 - background-color: #f2f2f2 - //min-width: 240px + min-width: 320px -@media screen and (min-width: 800px) +//@media screen and (min-width: 767px) .card max-width: 600px -a - color: #00B7FF - .text-center text-align: center diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index c7af125c..be0dbc8e 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -225,6 +225,8 @@ ul:not(.browser-default) > li font-weight: bold cursor: pointer padding: 3px + margin-left: 0 + margin-right: 0 background-color: lightgrey #fen-string diff --git a/views/index.pug b/views/index.pug index 62690a3c..78473c0e 100644 --- a/views/index.pug +++ b/views/index.pug @@ -6,17 +6,20 @@ block css block content .container#indexPage .row - .col-sm-12 - h1.text-center.main-title Welcome to v[ariant] chess club ! - h2.text-center - span.help(onClick="document.getElementById('modal-help').checked=true") - | Help ? - a(href="/demo.webm") Demo ! + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + h1#main-title.text-center + img(src="/images/index/unicorn.svg") + span vchess.club + img(src="/images/index/wildebeest.svg") + h2#needHelp.text-center( + onClick="document.getElementById('modal-help').checked=true") + | Need help ? input#modal-help.modal(type="checkbox") div(role="dialog") #help.card label.modal-close(for="modal-help") - p.section First: watch #[a(href="/demo.webm") demo video] :) + h3.section.emphasis Welcome to v[ariant] chess club + p.section First: watch #[a(href="/demo.webm") demo video] ! h3.blue.section Comments p.section. All games start with a random assymetric position. #[br] @@ -91,9 +94,8 @@ block content p.smallfont Image credit: #[a(href=wikipediaUrl) Wikipedia] .row my-variant-summary( - v-for="(v,idx) in sortedCounts", - v-show="v.name.startsWith(curPrefix)", - v-bind:vobj="v", + v-for="(v,idx) in sortedCounts" + v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name") block javascripts diff --git a/views/variant.pug b/views/variant.pug index d3581ae3..803c7de4 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -6,6 +6,14 @@ block css block content .container#variantPage + .row + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 + label.drawer-toggle(for="drawer-control") + input#drawer-control.drawer(type="checkbox") + div + label.drawer-close(for="drawer-control") + a(href="#") Home + a(href="#") Home222 .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 h4.variantpage-title.text-center(v-on:click="toggleDisplay('rules')") -- 2.44.0