From d597379096c51c658f4605e7965137fcd0e15c85 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> 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 @@ +<?xml version="1.0" encoding="utf-8"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> +<g id="unicorn"> + <path d="M321.323,127.995c-5.906,0-10.672,4.773-10.672,10.664s4.766,10.672,10.672,10.672c5.891,0,10.656-4.781,10.656-10.672 S327.214,127.995,321.323,127.995z"/> + <path d="M458.385,214.017c-0.891-5.664-4.5-14.843-24.734-35.726c-11.078-11.445-26.172-25.422-44.844-41.531 c-8.358-7.211-16.718-14.226-24.499-20.656l61.968-99.656c0.016-0.023,0.031-0.039,0.047-0.062l0.047-0.094 c0.047-0.062,0.078-0.141,0.125-0.203c0.125-0.227,0.266-0.453,0.375-0.68c0.062-0.125,0.109-0.25,0.172-0.375 c0.078-0.188,0.156-0.375,0.234-0.57c0.062-0.172,0.125-0.336,0.172-0.508c0.047-0.156,0.109-0.305,0.156-0.461 c0.047-0.195,0.094-0.398,0.125-0.594c0.031-0.133,0.062-0.266,0.094-0.406c0.031-0.203,0.062-0.406,0.078-0.617 c0.016-0.133,0.031-0.266,0.047-0.406c0.016-0.195,0.016-0.391,0.031-0.586c0-0.148,0-0.305,0-0.453 c0-0.18-0.016-0.352-0.031-0.523s-0.031-0.352-0.047-0.523c-0.016-0.148-0.047-0.297-0.062-0.445 c-0.031-0.195-0.078-0.391-0.109-0.586c-0.031-0.133-0.062-0.258-0.109-0.391c-0.047-0.203-0.094-0.406-0.172-0.609 c-0.031-0.125-0.078-0.25-0.125-0.383c-0.078-0.188-0.156-0.383-0.234-0.57c-0.062-0.148-0.141-0.289-0.203-0.43 c-0.078-0.164-0.156-0.32-0.25-0.484c-0.094-0.18-0.203-0.352-0.312-0.531c-0.078-0.117-0.141-0.227-0.219-0.336 c-0.156-0.219-0.312-0.43-0.484-0.633c-0.047-0.062-0.078-0.125-0.125-0.18c-0.016-0.016-0.031-0.023-0.031-0.031 c-0.172-0.203-0.359-0.391-0.547-0.578c-0.062-0.07-0.125-0.148-0.203-0.219c-0.141-0.133-0.281-0.25-0.422-0.375 c-0.141-0.117-0.266-0.242-0.406-0.352c-0.094-0.062-0.188-0.125-0.266-0.188c-0.203-0.148-0.422-0.305-0.641-0.438 c0-0.008-0.016-0.016-0.031-0.023c-0.062-0.047-0.141-0.078-0.203-0.117c-0.234-0.133-0.453-0.258-0.688-0.375 c-0.125-0.062-0.25-0.109-0.359-0.172c-0.203-0.086-0.391-0.172-0.578-0.242c-0.172-0.062-0.344-0.117-0.516-0.172 c-0.141-0.047-0.297-0.102-0.453-0.141c-0.203-0.055-0.391-0.102-0.594-0.141c-0.141-0.031-0.266-0.062-0.406-0.086 c-0.203-0.039-0.406-0.062-0.609-0.086c-0.141-0.016-0.281-0.031-0.406-0.039c-0.203-0.016-0.391-0.023-0.594-0.023 c-0.156-0.008-0.297-0.016-0.453-0.008c-0.172,0-0.344,0.016-0.516,0.031c-0.188,0.008-0.359,0.023-0.531,0.039 c-0.156,0.023-0.297,0.047-0.453,0.07c-0.188,0.031-0.391,0.062-0.578,0.109c-0.125,0.031-0.266,0.062-0.391,0.102 c-0.203,0.047-0.406,0.102-0.609,0.172c-0.125,0.039-0.25,0.086-0.375,0.133c-0.203,0.07-0.391,0.141-0.578,0.227 c-0.141,0.062-0.281,0.133-0.438,0.203c-0.156,0.086-0.312,0.156-0.469,0.25c-0.188,0.094-0.359,0.211-0.531,0.32 c-0.125,0.07-0.234,0.141-0.344,0.219c-0.219,0.148-0.422,0.305-0.625,0.469c-0.062,0.055-0.125,0.094-0.188,0.141l-0.078,0.07 c-0.031,0.016-0.047,0.031-0.062,0.047l-84.218,70.648c-4.594-19.469-12.266-35.367-22.938-47.421 c-10.984-12.398-21.297-16.055-22.438-16.43c-2.906-0.953-6.094-0.617-8.734,0.93s-4.484,4.156-5.078,7.164l-9.922,50.953 c-5.188,0.609-12.297,1.867-20.625,4.406c-8.016,0.242-38.828,2.75-74.078,26.367c-23.188,15.539-43.656,37.093-60.843,64.078 c-21.156,33.219-37.359,74.828-48.203,123.688c-0.703,3.203,0.094,6.547,2.172,9.078s5.188,3.968,8.484,3.905 c4.953-0.125,20.016,0.422,30.094,4.219c0.141,0.047,0.297,0.094,0.438,0.141c0.078,0.031,0.172,0.062,0.25,0.094 c0.344,0.094,34.109,10.516,74.093,40.375c23.375,17.469,44.312,38.109,62.203,61.327c22.344,29.016,40.016,62.219,52.5,98.672 c1.297,3.766,4.578,6.5,8.516,7.094c0.531,0.078,1.062,0.109,1.578,0.109c3.391,0,6.609-1.609,8.641-4.406 c1.656-2.281,40.438-56.406,40.438-112.922c0-49.062-31.906-101.326-41.422-115.811l6.734-34.594 c15.312,4.102,30.219,4.812,39.578,4.734c0.812,3.586,1.906,7.875,3.297,12.258c5.516,17.539,12.797,27.398,22.266,30.133 c2.656,0.766,5.344,1.109,8.031,1.109c15.171,0,29.937-10.625,33.187-13.109c8.25,6.016,14.344,3.719,17.281,1.766 c4.984-3.328,12.547-13.367,17.969-23.891C455.01,246.697,460.963,230.611,458.385,214.017z M335.761,93.002l37.203-31.211 l-25.328,40.719C343.12,98.87,339.104,95.651,335.761,93.002z M118.824,175.744c13.187-20.922,28.421-38.203,45.39-51.546 c-31.531,43.476-63.046,128.327-73.234,157.023c-4.875-1.031-9.734-1.656-13.984-2.031 C87.058,238.611,101.105,203.861,118.824,175.744z M423.494,259.018c-3.109-3.227-7.188-8.141-10.547-12.813 c-2.953-4.102-8.359-5.578-12.984-3.531c-4.609,2.039-7.172,7.039-6.109,11.984l2.391,11.204 c-5.688,3.344-12.765,6.188-17.015,5.094c-1.188-0.781-4.75-5.172-8.406-17.282c-2.703-8.922-4.031-17.281-4.047-17.352 c-0.859-5.578-5.922-9.516-11.547-8.984c-0.156,0.016-15.703,1.445-33.547-1.852c-22.391-4.133-37.234-13.382-44.109-27.5 c-2.578-5.297-8.969-7.492-14.266-4.914c-5.297,2.586-7.5,8.969-4.922,14.266c6.688,13.703,17.391,22.968,29.344,29.195 l-8.281,42.579c-0.547,2.844,0.078,5.797,1.75,8.172c0.391,0.578,40.125,57.765,40.125,107.389c0,31.562-14.656,63.5-25.359,82.625 c-12.562-30.859-28.828-59.266-48.485-84.703c-19.188-24.812-41.64-46.843-66.734-65.468 c-29.516-21.922-55.578-33.89-69.421-39.374c4.609-12.922,13.484-37.047,24.5-63.141c21.141-50.085,40.375-84.625,55.641-99.882 c23.984-23.984,49.078-31.773,63.046-34.305l-0.984,16.945c-0.344,5.883,4.141,10.93,10.016,11.273 c0.219,0.016,0.422,0.016,0.641,0.016c5.609,0,10.297-4.367,10.641-10.039l1.688-28.742l8.266-42.468 c1.109,1.109,2.281,2.367,3.453,3.781c7.156,8.546,16.438,24.757,20.031,53.398c0,0.102,0.031,0.203,0.047,0.305 c0.031,0.219,0.062,0.438,0.109,0.648c0.031,0.125,0.062,0.242,0.094,0.367c0.062,0.219,0.109,0.438,0.188,0.648 c0.031,0.117,0.078,0.234,0.125,0.344c0.078,0.211,0.156,0.422,0.25,0.633c0.047,0.125,0.109,0.242,0.172,0.359 c0.078,0.188,0.172,0.383,0.281,0.57c0.078,0.141,0.172,0.266,0.25,0.406c0.094,0.156,0.188,0.32,0.297,0.477 s0.234,0.305,0.359,0.461c0.078,0.102,0.141,0.211,0.234,0.312c0.016,0.023,0.031,0.039,0.062,0.062 c0.203,0.25,0.438,0.492,0.672,0.719c0.062,0.062,0.109,0.117,0.172,0.172c0.234,0.219,0.484,0.43,0.734,0.633 c0.016,0,0.031,0.023,0.078,0.055c0.016,0.008,0.031,0.023,0.047,0.031c2.078,1.617,31.844,24.766,61.875,50.64 c58.655,50.539,62.733,63.585,62.999,64.875C439.682,232.587,429.885,250.439,423.494,259.018z"/> +</g> + + + <metadata> + <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/"> + <rdf:Description about="https://iconscout.com/legal#licenses" dc:title="Unicorn, Myth, Legend, Halloween, Fantasy" dc:description="Unicorn, Myth, Legend, Halloween, Fantasy" dc:publisher="Iconscout" dc:date="2016-12-14" dc:format="image/svg+xml" dc:language="en"> + <dc:creator> + <rdf:Bag> + <rdf:li>Nikita Golubev</rdf:li> + </rdf:Bag> + </dc:creator> + </rdf:Description> + </rdf:RDF> + </metadata></svg> 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 @@ +<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 62 64" xml:space="preserve"><g id="wildebeest__x5F_glyphs"><path d="M25 49c-.6 0-1 .4-1 1s.4 1 1 1h3c.6 0 1-.4 1-1s-.4-1-1-1h-3z"/><path d="M34 49c-.6 0-1 .4-1 1s.4 1 1 1h3c.6 0 1-.4 1-1s-.4-1-1-1h-3z"/><path d="M11 36V24.7c-.1.2-.2.3-.4.5-1.3 1.4-3.1 2.3-5 2.4H5v14.9C5 43.8 3.9 45 2.5 45S0 43.4 0 42v2.5c0 3.6 3 6.9 9 6.5 6.9-.5 7-4.4 7-6.4-3.1-1.4-5-5.6-5-8.6z"/><path d="M11 12c0-3.9 3.1-7 7-7h10.8c-2.2-3-5.9-5-11.3-5C10.6 0 5 5.6 5 12.5V19h6v-7z"/><path d="M5.5 25.6c1.4-.1 2.7-.7 3.6-1.7.7-.9 1.2-1.9 1.3-2.9H.2c.3 1.1.8 2.1 1.6 3 1.1 1.1 2.4 1.6 3.7 1.6z"/><path d="M51 12v7h6v-6.5C57 5.6 51.4 0 44.5 0c-5.4 0-9 2-11.3 5H44c3.9 0 7 3.1 7 7z"/><path d="M61.8 43c-.5 1.6-2.3 2.9-4 1.2-.5-.6-.8-1.4-.8-2.2V27.6h-.6c-1.9-.1-3.7-1-5-2.4-.1-.2-.3-.3-.4-.5V36c0 3-1.9 7.2-5 8.6 0 2 .1 5.9 7 6.4 6 .4 9-2.9 9-6.5V43h-.2z"/><path d="M52.9 23.8c.9 1 2.2 1.7 3.6 1.7 1.3.1 2.6-.5 3.7-1.6.8-.8 1.4-1.9 1.6-3H51.6c.1 1.1.6 2.1 1.3 2.9z"/><path d="M49 36V21h-6c-2.2 0-4 1.8-4 4v27.6L37.4 57h-13L23 53.6V25c0-2.2-1.8-4-4-4h-6v15c0 2.2 1.5 5.4 3.5 6.6l6.4 16.1c.1 3 2.7 5.3 6.1 5.3h4c3.3 0 5.8-2.2 5.9-5.3l5.9-15.8c2.3-.7 4.2-4.4 4.2-6.9zm-31-7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm15 33h-4c-1.9 0-3.8-1-4.1-3h11.9c-.2 1.8-1.7 3-3.8 3zm11-33c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/><path d="M43 19h6v-7c0-2.8-2.2-5-5-5H18c-2.8 0-5 2.2-5 5v7h6c3.3 0 6 2.7 6 6v20h1c2.1 0 3.9 1.1 5 2.7 1.1-1.6 2.9-2.7 5-2.7h1V25c0-3.3 2.7-6 6-6zm-7-1h-9c-.6 0-1-.4-1-1s.4-1 1-1h9c.6 0 1 .4 1 1s-.4 1-1 1zm0-4h-9c-.6 0-1-.4-1-1s.4-1 1-1h9c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description about="https://iconscout.com/legal#licenses" dc:title="wildebeest" dc:description="wildebeest" dc:publisher="Iconscout" dc:date="2017-09-07" dc:format="image/svg+xml" dc:language="en"><dc:creator><rdf:Bag><rdf:li>Madeby Grids</rdf:li></rdf:Bag></dc:creator></rdf:Description></rdf:RDF></metadata></svg> \ 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: ` - <div class="variant col-sm-12" :id="vobj.name"> + <div class="variant col-sm-12 col-md-5 col-lg-4" :id="vobj.name" + :class="{'col-md-offset-1': index%2==0, 'col-lg-offset-2': index%2==0}"> <a :href="url"> <h4 class="boxtitle text-center"> {{ 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