Some styles improvement attempts (how to uniformize modals?)

diff --git a/public/images/index/unicorn.svg b/public/images/index/unicorn.svg
new file mode 100644 (file)
index 0000000..c9e930b
--- /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 (file)
index 0000000..21a3c9a
--- /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 620f810..e6ec03a 100644 (file)
--- 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 29e48f7..54c296b 100644 (file)
--- 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 f67ed08..07f965f 100644 (file)
--- 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 b645859..647a78b 100644 (file)
--- 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 c7af125..be0dbc8 100644 (file)
--- 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 62690a3..78473c0 100644 (file)
--- 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 d3581ae..803c7de 100644 (file)
--- 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')")