EBernhardson has submitted this change and it was merged.

Change subject: Cosmetic improvements to solitaire UI
......................................................................


Cosmetic improvements to solitaire UI

Adding items to info panel:
- adding seach query links
- adding remaining card counter
- styling buttons differently

Change-Id: Ib6cd62fee859acfa5457126961283654af56fe86
---
M public/css/deck.css
A public/img/bing.svg
A public/img/duckduckgo.svg
A public/img/google.svg
A public/img/yahoo.svg
M public/js/discernadeck.js
M views/score_query_cards.twig
7 files changed, 490 insertions(+), 42 deletions(-)

Approvals:
  EBernhardson: Verified; Looks good to me, approved



diff --git a/public/css/deck.css b/public/css/deck.css
index e10940b..0d0466e 100644
--- a/public/css/deck.css
+++ b/public/css/deck.css
@@ -7,7 +7,7 @@
     background-color: #dadada;
     color: #2F3133;
     height: 100%;
-    background-image: radial-gradient(#95c791, #628060);
+    background-image: radial-gradient(#54a56d, #37844f);
 }
 
 /* When using a hidden input field chromes Back/Forward
@@ -40,9 +40,25 @@
     font-weight: bold;
 }
 
-.skip-query-container {
+.query-form-container {
     float: left;
     padding-right: 1em;
+    margin-bottom: 6px;
+}
+
+.score-query button.switch-ui {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: #fff;
+    margin-left: 5px;
+}
+
+
+.score-query input.submit-scores {
+    width: 100%;
+    margin-top: 1em;
 }
 
 .info {
@@ -59,20 +75,127 @@
 }
 
 .query {
-    margin-top: 0;
-    margin-bottom: 0;
+    text-align: center;
+    border-bottom: 1px solid;
+    font-size: 18px;
+    display: block;
+    border-top: 1px solid;
+}
+
+.query-info {
+    display: block;
+    width: 60%;
+    float: left;
+    text-align: center;
+    padding-right: 10px;
+}
+
+.query-actions {
+    float: left;
+    width: 40%;
+}
+
+.query-actions .glyphicon {
+    margin-right: 5px;
+}
+
+.query-actions .glyphicon-step-forward {
+    margin-left:0;
+    padding-left: 0;
+}
+
+.query-links-label {
+    cursor: pointer;
+}
+.query-links-label:hover {
+    text-decoration: underline;
+}
+
+.query-links {
+    width: 100%;
+    margin-bottom: 6px;
+}
+
+.query-links-content {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.skip-query {
+    display: inline-block;
+}
+
+.skip-query .btn {
+    display: inline;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+}
+
+.skip-query .btn:hover{
+    text-decoration: underline;
+}
+
+.section-label {
+    text-align: center;
+    font-size: 12px;
+    display: block;
+    padding-right: 0.5em;
+}
+
+.search-icon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    font-size: 0;
+    overflow: hidden;
+    line-height:24px;
+    vertical-align: middle;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.search-icon img {
+    -webkit-filter: grayscale(1) contrast(2);
+    -moz-filter: grayscale(1) contrast(2);
+    filter:  grayscale(1) contrast(2);
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+}
+
+.search-icon:hover img {
+    -webkit-filter: none;
+    -moz-filter: none;
+    filter: none;
+}
+
+.icon-ddg {
+}
+
+.icon-goog{
+}
+
+.icon-yahoo {
+}
+
+.icon-bing {
 }
 
 .deck-counter-description{
     text-align: center;
     color: white;
+    margin-bottom: 16px;
+    margin-top: 0px;
+    clear: both;
 }
 
 .deck-counter{
     display: block;
     font-family: georgia;
-    font-size: 58px;
-    line-height: 88px;
+    font-size: 50px;
+    line-height: 53px;
+    padding-bottom: 12px;
 }
 
 .card {
diff --git a/public/img/bing.svg b/public/img/bing.svg
new file mode 100644
index 0000000..1b4ffbb
--- /dev/null
+++ b/public/img/bing.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="320px" viewBox="0 0 256 320" version="1.1" 
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; 
preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M95.055,82.908 L127.636,153.555 L175.78,175.332 
L2.125,266.695 L73.279,203.267 L73.279,22.449 L0,0 L0,268.932 L72.83,319.986 
L256,210.88 L256,132.227 L95.055,82.908" fill="#F4BD27"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/duckduckgo.svg b/public/img/duckduckgo.svg
new file mode 100644
index 0000000..b24953b
--- /dev/null
+++ b/public/img/duckduckgo.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="255px" viewBox="0 0 256 255" version="1.1" 
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; 
preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="71.0046292%" y1="100%" x2="0%" y2="100%" 
id="linearGradient-1">
+            <stop stop-color="#394A9F" offset="0%"></stop>
+            <stop stop-color="#6176B9" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+       <g>
+               <path d="M128.145,18.841 C188.147,18.841 236.788,67.482 
236.788,127.484 C236.788,187.485 188.147,236.126 128.145,236.126 
C68.144,236.126 19.503,187.485 19.503,127.484 C19.503,67.482 68.144,18.841 
128.145,18.841" fill="#DE5833"></path>
+               <path d="M128.143,254.922 C198.526,254.922 255.583,197.865 
255.583,127.482 C255.583,57.099 198.526,0.042 128.143,0.042 C57.76,0.042 
0.703,57.099 0.703,127.482 C0.703,197.865 57.76,254.922 128.143,254.922 
L128.143,254.922 Z M128.143,244.302 C63.625,244.302 11.323,192 11.323,127.482 
C11.323,62.964 63.625,10.662 128.143,10.662 C192.661,10.662 244.963,62.964 
244.963,127.482 C244.963,192 192.661,244.302 128.143,244.302 L128.143,244.302 
Z" fill="#DE5833"></path>
+               <g transform="translate(66.000000, 42.000000)">
+                       <path d="M9.219,12.13 C9.198,10.303 10.525,9.28 
12.288,8.563 C11.481,8.695 10.708,8.897 10.012,9.209 C8.174,10.042 6.8,13.196 
6.813,14.689 C15.736,13.787 28.931,14.411 38.58,17.291 C39.292,17.191 
40.004,17.091 40.727,17.008 C31.103,12.735 19.661,11.085 9.219,12.13" 
fill="#D5D7D8"></path>
+                       <path d="M11.048,1.15 C11.249,1.114 11.453,1.089 
11.655,1.055 C9.73,1.294 8.715,1.982 7.27,2.219 C8.839,2.358 14.784,5.133 
18.52,6.659 C19.044,6.46 19.516,6.239 19.901,5.978 C17.964,5.692 13.151,1.342 
11.048,1.15" fill="#D5D7D8"></path>
+                       <path d="M20.326,22.756 C19.791,22.962 19.283,23.177 
18.843,23.408 C4.298,31.071 -2.127,48.97 1.702,70.418 C5.197,89.936 
19.522,156.623 26.081,187.989 C27.996,188.662 29.934,189.287 31.896,189.854 
C26.055,161.614 10.112,87.614 6.392,66.831 C2.621,45.688 6.29,30.517 
20.326,22.756" fill="#D5D7D8"></path>
+                       <path d="M79.184,176.618 C78.944,176.778 78.658,176.928 
78.353,177.074 C78.127,177.95 77.782,178.614 77.279,178.948 C74.275,180.941 
65.79,181.945 61.31,180.941 C60.539,180.77 59.955,180.487 59.499,180.098 
C51.85,184.345 40.85,189.999 38.616,188.725 C35.126,186.724 34.62,160.274 
35.126,153.783 C35.495,148.883 52.707,156.82 61.08,160.983 C62.931,159.254 
67.466,158.097 71.48,157.704 C65.415,142.943 60.942,126.059 63.684,114.086 
C59.894,111.445 54.871,105.32 55.917,98.927 C56.723,94.061 69.297,84.855 
78.2,84.299 C87.123,83.736 89.904,83.863 97.338,82.083 C97.71,81.994 
98.119,81.896 98.547,81.793 C103.123,65.706 92.148,37.719 79.906,25.472 
C75.915,21.481 69.779,18.969 62.865,17.643 C60.206,13.994 55.917,10.505 
49.845,7.274 C38.57,1.288 24.636,-1.149 11.655,1.055 C11.453,1.089 11.249,1.114 
11.048,1.15 C13.151,1.342 17.964,5.692 19.901,5.978 C19.516,6.239 19.044,6.46 
18.52,6.659 C16.702,7.351 14.231,7.771 12.288,8.563 C10.525,9.28 9.198,10.303 
9.219,12.13 C19.661,11.085 31.103,12.735 40.727,17.008 C40.004,17.091 
39.292,17.191 38.58,17.291 C31.755,18.251 25.482,20.019 20.95,22.41 
C20.737,22.521 20.535,22.641 20.326,22.756 C6.29,30.517 2.621,45.688 
6.392,66.831 C10.112,87.614 26.1589994,162.759995 31.9999994,190.999995 
C41.6029994,193.778995 50.5819993,195.999995 61.0799993,195.999995 
C69.9919993,195.999995 80.7110013,194.024995 89.0000013,191.999995 
C86.0890013,186.386995 82.344,180.18 80.036,175.729 C79.728,176.096 
79.485,176.417 79.184,176.618 Z M85.057,70.057 C81.253,70.057 78.15,66.963 
78.15,63.137 C78.15,59.329 81.253,56.234 85.057,56.234 C88.882,56.234 
91.973,59.329 91.973,63.137 C91.973,66.963 88.882,70.057 85.057,70.057 
L85.057,70.057 Z M89.218,44.049 C89.218,44.049 84.861,41.56 81.48,41.602 
C74.532,41.693 72.64,44.763 72.64,44.763 C72.64,44.763 73.806,37.445 
82.691,38.913 C87.508,39.714 89.218,44.049 89.218,44.049 L89.218,44.049 Z 
M15.963,53.046 C15.963,53.046 12.834,46.073 21.173,42.656 C29.521,39.238 
33.586,44.601 33.586,44.601 C33.586,44.601 27.524,41.859 21.63,45.563 
C15.746,49.263 15.963,53.046 15.963,53.046 L15.963,53.046 Z M23.253,67.908 
C23.253,63.462 26.848,59.864 31.3,59.864 C35.74,59.864 39.34,63.462 
39.34,67.908 C39.34,72.355 35.74,75.949 31.3,75.949 C26.848,75.951 
23.253,72.355 23.253,67.908 L23.253,67.908 Z" fill="#FFFFFF"></path>
+                       <path d="M39.34,67.908 C39.34,63.462 35.74,59.864 
31.3,59.864 C26.848,59.864 23.253,63.462 23.253,67.908 C23.253,72.355 
26.848,75.951 31.3,75.949 C35.74,75.949 39.34,72.355 39.34,67.908 L39.34,67.908 
Z M34.862,67.317 C33.72,67.32 32.781,66.381 32.781,65.227 C32.781,64.07 
33.717,63.139 34.862,63.139 C36.016,63.139 36.952,64.07 36.952,65.227 
C36.952,66.381 36.016,67.317 34.862,67.317 L34.862,67.317 Z" 
fill="#2D4F8E"></path>
+                       <path d="M34.862,63.139 C33.717,63.139 32.781,64.07 
32.781,65.227 C32.781,66.381 33.72,67.32 34.862,67.317 C36.016,67.317 
36.952,66.381 36.952,65.227 C36.952,64.07 36.016,63.139 34.862,63.139" 
fill="#FFFFFF"></path>
+                       <path d="M85.057,56.234 C81.253,56.234 78.15,59.329 
78.15,63.137 C78.15,66.963 81.253,70.057 85.057,70.057 C88.882,70.057 
91.973,66.963 91.973,63.137 C91.973,59.329 88.882,56.234 85.057,56.234 
L85.057,56.234 Z M88.124,62.628 C87.149,62.628 86.344,61.835 86.344,60.839 
C86.344,59.856 87.149,59.049 88.124,59.049 C89.141,59.049 89.921,59.856 
89.921,60.839 C89.921,61.835 89.141,62.628 88.124,62.628 L88.124,62.628 Z" 
fill="#2D4F8E"></path>
+                       <path d="M88.124,59.049 C87.149,59.049 86.344,59.856 
86.344,60.839 C86.344,61.835 87.149,62.628 88.124,62.628 C89.141,62.628 
89.921,61.835 89.921,60.839 C89.921,59.856 89.141,59.049 88.124,59.049" 
fill="#FFFFFF"></path>
+                       <path d="M33.586,44.601 C33.586,44.601 29.521,39.238 
21.173,42.656 C12.834,46.073 15.963,53.046 15.963,53.046 C15.963,53.046 
15.746,49.263 21.63,45.563 C27.524,41.859 33.586,44.601 33.586,44.601" 
fill="url(#linearGradient-1)"></path>
+                       <path d="M82.691,38.913 C73.806,37.445 72.64,44.763 
72.64,44.763 C72.64,44.763 74.532,41.693 81.48,41.602 C84.861,41.56 
89.218,44.049 89.218,44.049 C89.218,44.049 87.508,39.714 82.691,38.913" 
fill="url(#linearGradient-1)"></path>
+                       <path d="M78.2,84.299 C69.297,84.855 56.723,94.061 
55.917,98.927 C54.871,105.32 59.894,111.445 63.684,114.086 C63.694,114.093 
63.705,114.102 63.715,114.109 C67.504,116.745 92.733,125.256 105.25,125.02 
C117.781,124.776 138.361,117.102 136.101,110.953 C133.851,104.802 
113.412,116.38 92.094,114.404 C76.306,112.937 73.519,105.864 77.015,100.698 
C81.412,94.205 89.421,101.93 102.631,97.977 C115.861,94.035 134.363,86.979 
141.228,83.137 C157.101,74.288 134.586,70.618 129.268,73.073 C124.227,75.402 
106.681,79.83 98.547,81.793 C98.119,81.896 97.71,81.994 97.338,82.083 
C89.904,83.863 87.123,83.736 78.2,84.299" fill="#FDD209"></path>
+               </g>
+               <g transform="translate(100.000000, 189.000000)">
+                       <path d="M24.316,17.97 C24.316,17.049 25.057,16.234 
26.233,15.539 C26.266,14.98 26.57,14.46 27.08,13.983 C18.707,9.82 1.495,1.883 
1.126,6.783 C0.62,13.274 1.126,39.724 4.616,41.725 C6.85,42.999 17.85,37.345 
25.499,33.098 C23.292,31.217 24.316,26.651 24.316,17.97" fill="#65BC46"></path>
+                       <path d="M45.925,28.686 C45.961,28.7 46,28.715 
46.036,28.729 C52.89,31.374 66.534,36.353 69.497,35.266 C73.492,33.739 
72.492,1.813 68.008,0.796 C64.416,-0.001 50.665,9.688 45.255,13.635 
C46.212,17.676 47.37,25.68 45.925,28.686" fill="#65BC46"></path>
+                       <path d="M29.214,31.611 C24.719,30.615 26.221,26.118 
26.221,15.64 C26.221,15.606 26.231,15.573 26.233,15.539 C25.057,16.234 
24.316,17.049 24.316,17.97 C24.316,26.651 23.292,31.217 25.499,33.098 
C25.955,33.487 26.539,33.77 27.31,33.941 C31.79,34.945 40.275,33.941 
43.279,31.948 C43.782,31.614 44.127,30.95 44.353,30.074 C40.837,31.758 
33.329,32.547 29.214,31.611" fill="#43A244"></path>
+                       <path d="M27.08,13.983 C26.57,14.46 26.266,14.98 
26.233,15.539 C26.231,15.573 26.221,15.606 26.221,15.64 C26.221,26.118 
24.719,30.615 29.214,31.611 C33.329,32.547 40.837,31.758 44.353,30.074 
C44.658,29.928 44.944,29.778 45.184,29.618 C45.485,29.417 45.728,29.096 
45.925,28.686 C47.37,25.68 46.212,17.676 45.255,13.635 C45.044,12.746 
44.844,12.046 44.683,11.636 C44.27,10.614 41.089,10.351 37.48,10.704 
C33.466,11.097 28.931,12.254 27.08,13.983" fill="#65BC46"></path>
+               </g>
+       </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/google.svg b/public/img/google.svg
new file mode 100644
index 0000000..05d397a
--- /dev/null
+++ b/public/img/google.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="262px" viewBox="0 0 256 262" version="1.1" 
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; 
preserveAspectRatio="xMidYMid">
+       <g>
+               <path d="M255.878,133.451 C255.878,122.717 255.007,114.884 
253.122,106.761 L130.55,106.761 L130.55,155.209 L202.497,155.209 
C201.047,167.249 193.214,185.381 175.807,197.565 L175.563,199.187 
L214.318,229.21 L217.003,229.478 C241.662,206.704 255.878,173.196 
255.878,133.451" fill="#4285F4"></path>
+               <path d="M130.55,261.1 C165.798,261.1 195.389,249.495 
217.003,229.478 L175.807,197.565 C164.783,205.253 149.987,210.62 130.55,210.62 
C96.027,210.62 66.726,187.847 56.281,156.37 L54.75,156.5 L14.452,187.687 
L13.925,189.152 C35.393,231.798 79.49,261.1 130.55,261.1" fill="#34A853"></path>
+               <path d="M56.281,156.37 C53.525,148.247 51.93,139.543 
51.93,130.55 C51.93,121.556 53.525,112.853 56.136,104.73 L56.063,103 
L15.26,71.312 L13.925,71.947 C5.077,89.644 0,109.517 0,130.55 C0,151.583 
5.077,171.455 13.925,189.152 L56.281,156.37" fill="#FBBC05"></path>
+               <path d="M130.55,50.479 C155.064,50.479 171.6,61.068 
181.029,69.917 L217.873,33.943 C195.245,12.91 165.798,0 130.55,0 C79.49,0 
35.393,29.301 13.925,71.947 L56.136,104.73 C66.726,73.253 96.027,50.479 
130.55,50.479" fill="#EB4335"></path>
+       </g>
+</svg>
\ No newline at end of file
diff --git a/public/img/yahoo.svg b/public/img/yahoo.svg
new file mode 100644
index 0000000..523fb00
--- /dev/null
+++ b/public/img/yahoo.svg
@@ -0,0 +1,210 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:ooo="http://xml.openoffice.org/svg/export";
+   xmlns:dc="http://purl.org/dc/elements/1.1/";
+   xmlns:cc="http://creativecommons.org/ns#";
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#";
+   xmlns:svg="http://www.w3.org/2000/svg";
+   xmlns="http://www.w3.org/2000/svg";
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd";
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape";
+   version="1.2"
+   width="200"
+   height="143.7538"
+   viewBox="0 0 5644.4442 4057.0515"
+   preserveAspectRatio="xMidYMid"
+   clip-path="url(#presentation_clip_path)"
+   xml:space="preserve"
+   id="svg2"
+   inkscape:version="0.48.3.1 r9886"
+   sodipodi:docname="Sem título 1.svg"
+   
style="fill-rule:evenodd;stroke-width:28.22200012;stroke-linejoin:round"><metadata
+   id="metadata75"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage"; 
/></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1440"
+   inkscape:window-height="876"
+   id="namedview73"
+   showgrid="false"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0"
+   inkscape:zoom="0.86711188"
+   inkscape:cx="-18.482228"
+   inkscape:cy="-95.951374"
+   inkscape:window-x="0"
+   inkscape:window-y="24"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg2" />
+ <defs
+   class="ClipPathGroup"
+   id="defs4">
+  <clipPath
+   id="presentation_clip_path"
+   clipPathUnits="userSpaceOnUse">
+   <rect
+   x="0"
+   y="0"
+   width="20000"
+   height="20000"
+   id="rect7" />
+  </clipPath>
+ 
+  
+ 
+   
+  
+    
+   
+     
+    
+      
+      
+      
+     
+       
+      
+        
+       </defs>
+ <defs
+   class="TextShapeIndex"
+   id="defs9">
+  <g
+   ooo:slide="id1"
+   ooo:id-list="id3 id4 id5"
+   id="g11" />
+ </defs>
+ <defs
+   class="EmbeddedBulletChars"
+   id="defs13">
+  <g
+   id="bullet-char-template(57356)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="M 580,1141 1163,571 580,0 -4,571 580,1141 z"
+   id="path16"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(57354)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="m 8,1128 1129,0 L 1137,0 8,0 8,1128 z"
+   id="path19"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(10146)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="M 174,0 602,739 174,1481 1456,739 174,0 z m 1184,739 -1049,607 350,-607 
699,0 z"
+   id="path22"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(10132)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="M 2015,739 1276,0 717,0 l 543,543 -1086,0 0,393 1086,0 -543,545 557,0 
741,-742 z"
+   id="path25"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(10007)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="m 0,-2 c -7,16 -16,29 -25,39 l 381,530 c -94,256 -141,385 -141,387 0,25 
13,38 40,38 9,0 21,-2 34,-5 21,4 42,12 65,25 l 27,-13 111,-251 280,301 64,-25 
24,25 c 21,-10 41,-24 62,-43 C 886,937 835,863 770,784 769,783 710,716 594,584 
L 774,223 c 0,-27 -21,-55 -63,-84 l 16,-20 C 717,90 699,76 672,76 641,76 
570,178 457,381 L 164,-76 c -22,-34 -53,-51 -92,-51 -42,0 -63,17 -64,51 -7,9 
-10,24 -10,44 0,9 1,19 2,30 z"
+   id="path28"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(10004)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="M 285,-33 C 182,-33 111,30 74,156 52,228 41,333 41,471 c 0,78 14,145 
41,201 34,71 87,106 158,106 53,0 88,-31 106,-94 l 23,-176 c 8,-64 28,-97 59,-98 
l 735,706 c 11,11 33,17 66,17 42,0 63,-15 63,-46 l 0,-122 c 0,-36 -10,-64 
-30,-84 L 442,47 C 390,-6 338,-33 285,-33 z"
+   id="path31"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(9679)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="M 813,0 C 632,0 489,54 383,161 276,268 223,411 223,592 c 0,181 53,324 
160,431 106,107 249,161 430,161 179,0 323,-54 432,-161 108,-107 162,-251 
162,-431 0,-180 -54,-324 -162,-431 C 1136,54 992,0 813,0 z"
+   id="path34"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(8226)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="m 346,457 c -73,0 -137,26 -191,78 -54,51 -81,114 -81,188 0,73 27,136 
81,188 54,52 118,78 191,78 73,0 134,-26 185,-79 51,-51 77,-114 77,-187 0,-75 
-25,-137 -76,-188 -50,-52 -112,-78 -186,-78 z"
+   id="path37"
+   inkscape:connector-curvature="0" />
+  </g>
+  <g
+   id="bullet-char-template(8211)"
+   transform="scale(4.8828125e-4,-4.8828125e-4)">
+   <path
+   d="m -4,459 1139,0 0,147 -1139,0 0,-147 z"
+   id="path40"
+   inkscape:connector-curvature="0" />
+  </g>
+ </defs>
+ <defs
+   class="TextEmbeddedBitmaps"
+   id="defs42" />
+ <g
+   id="g44"
+   transform="translate(-11027.183,-3706.8291)">
+  <g
+   id="id2"
+   class="Master_Slide">
+   <g
+   id="bg-id2"
+   class="Background" />
+   <g
+   id="bo-id2"
+   class="BackgroundObjects" />
+  </g>
+ </g>
+ <g
+   id="g3970"
+   transform="translate(-11027.183,-3706.8291)"><g
+     transform="matrix(0.34329426,0,0,0.34329426,10409.253,2299.6659)"
+     id="g3956"><path
+       style="fill:#6b0094;stroke:none"
+       inkscape:connector-curvature="0"
+       id="path61"
+       d="m 7898,4099 c 3457,0 6098,2558 6098,5908 0,3350 -2641,5909 
-6098,5909 -3457,0 -6098,-2559 -6098,-5909 0,-3350 2641,-5908 6098,-5908 z m 
-6098,0 0,0 z m 12197,11818 0,0 z" /><g
+       id="g63"
+       class="com.sun.star.drawing.ClosedBezierShape">
+       <g
+   id="id4">
+        <path
+   style="fill:#ffffff;stroke:none"
+   inkscape:connector-curvature="0"
+   id="path66"
+   d="m 7636,7981 c 14,-205 29,-409 58,-613 -1547,0 -3093,0 -4639,0 0,204 
0,408 0,613 466,29 919,73 1386,102 875,1065 1750,2130 2640,3209 0,555 0,1094 
0,1649 -496,44 -992,73 -1488,117 0,175 0,364 0,539 1532,0 3064,0 4581,0 0,-175 
0,-364 0,-539 -496,-30 -992,-44 -1488,-59 15,-583 29,-1181 44,-1765 860,-759 
1707,-1517 2553,-2276 437,-29 875,-58 1327,-102 0,-233 0,-481 0,-715 -1298,15 
-2582,29 -3880,58 0,205 0,394 0,599 481,29 963,43 1444,58 -627,540 -1255,1065 
-1882,1605 -642,-788 -1284,-1590 -1926,-2378 423,-44 846,-73 1270,-102 z" />
+       </g>
+      </g><g
+       id="g68"
+       class="com.sun.star.drawing.ClosedBezierShape">
+       <g
+   id="id5">
+        <path
+   style="fill:#6b0094;stroke:none"
+   inkscape:connector-curvature="0"
+   id="path71"
+   d="m 18242,4684 c -1182,-59 -2349,-117 -3516,-176 -59,2787 -117,5588 
-175,8375 554,58 1123,116 1677,175 671,-2801 1343,-5588 2014,-8374 z m 
-3852,11218 c 671,0 1342,0 2013,0 0,-554 0,-1108 0,-1677 -729,-59 -1458,-117 
-2188,-175 58,627 117,1240 175,1852 z" />
+       </g>
+      </g></g></g>
+</svg>
\ No newline at end of file
diff --git a/public/js/discernadeck.js b/public/js/discernadeck.js
index dfe2d05..7b39d79 100644
--- a/public/js/discernadeck.js
+++ b/public/js/discernadeck.js
@@ -20,8 +20,8 @@
 
                for ( var i = 0; i < this.cards.length; i++ ) {
                        var card = this.cards[i];
-                       var reverseIndex = this.cards.length - i ;
-                       TweenLite.to( card.domEl, 0.8,{x: stackXY.x, y: 
stackXY.y - (stack.DROP_GAP * (reverseIndex -1 ) ), zIndex: stack.cards.length 
- reverseIndex, ease:Elastic.easeOut} );
+                       var reverseIndex = this.cards.length - i - 1 ;
+                       TweenLite.to( card.domEl, 0.8,{x: stackXY.x, y: 
stackXY.y - (stack.DROP_GAP * (reverseIndex ) ), zIndex: stack.cards.length - 
reverseIndex, ease:Elastic.easeOut} );
                        card.setCardXY( stackXY.x, stackXY.y + stack.gap - (( 
reverseIndex - 1) * stack.DROP_GAP ));
                }
 
@@ -132,7 +132,7 @@
 
                var newStackXY = newStack.getStackPos();
                this.setCardXY( newStackXY.x,  newStackXY.y );
-               TweenLite.to( this.domEl, 0.2,{x: newStackXY.x, y: 
newStackXY.y, zIndex:newStack.getCards().length - 1, ease:Power4.easeOut} );
+               TweenLite.to( this.domEl, 0.2,{x: newStackXY.x, y: 
newStackXY.y, zIndex:newStack.getCards().length, ease:Power4.easeOut} );
                this.formEl.value = 
newStack.domEl.attributes.getNamedItem('data-score').value;
        },
        onPanEnd: function( card ) {
@@ -230,6 +230,9 @@
        cardsInDeck: [],
        hammerDeck: Object,
        currentCard: false,
+       getCards: function() {
+               return this.cardsInDeck;
+       },
        initializeDeck: function() {
                var deck = this;
                //deck.cardsInDeck = window.scoringData.results;
@@ -269,6 +272,25 @@
                                        card.moveCardToStack(this, 
stacksByScore[score]);
                                        break;
                        }
+               }
+               this.validateForm();
+       },
+       validateForm: function(){
+               var inputsTotal = document.querySelectorAll( 
'.result-score').length;
+
+               var eightyPercent = Math.ceil( inputsTotal * 0.8 );
+
+               var totalScored = inputsTotal - this.cardsInDeck.length;
+
+               var remainingToEighty = eightyPercent - totalScored;
+
+               if ( totalScored >= eightyPercent ){
+                       document.getElementById( 
'submit-score-btn').removeAttribute('disabled');
+                       
document.getElementById('remaining-card-counter').innerText = "You've scored 
enough cards to submit this query."
+               } else {
+                       document.getElementById( 
'submit-score-btn').setAttribute('disabled', 'disabled');
+                       
document.getElementById('remaining-card-counter').innerText = 'Score at least ' 
+ remainingToEighty + ' more cards to submit this query.'
+
                }
        },
        setCardCounter: function() {
@@ -313,6 +335,8 @@
                if ( this.cardsInDeck.length > 0 ) {
                        this.currentCard = this.cardsInDeck[0];
                }
+
+               this.validateForm();
        },
        addCardToDeck: function( cardData ) {
 
@@ -332,6 +356,7 @@
                }
 
                this.setCardCounter();
+               this.validateForm();
        },
        moveCardToBottom: function(){
                var cards = this.cardsInDeck;
@@ -361,3 +386,14 @@
 }
 
 deck.initializeDeck();
+
+
+/**
+ * Menu functions.
+ */
+$(document).ready(function(){
+       $('.query-links-label').click(function(){
+               $('.query-links-content').toggle();
+       });
+
+});
diff --git a/views/score_query_cards.twig b/views/score_query_cards.twig
index 145bdc2..a49dad9 100644
--- a/views/score_query_cards.twig
+++ b/views/score_query_cards.twig
@@ -23,9 +23,6 @@
 {% endblock %}
 
 {% block content %}
-    <div class='skip-query-container'>
-        {{ form(skipForm, {'attr': {'class': 'skip-query'}}) }}
-    </div>
 
     <noscript>
         <div class="errors">
@@ -33,42 +30,77 @@
         </div>
     </noscript>
 
-    <form class="score-query" method="post" novalidate>
-        {{ form_widget(form._token) }}
-        {% for child in form %}
-            {% if child.vars.name != '_token' %}
-                <input class="result-score" type="text" 
id="result_{{child.vars.name}}" name="{{child.vars.full_name}}" 
value="{{child.vars.value}}" data-id="{{child.vars.name}}">
-            {% endif %}
-        {% endfor %}
-        <div class="row">
-            <input type="submit" class="btn btn-default" />
-            <button type="submit" class="btn btn-default" name="cards" 
value="0">Switch to classic interface</button>
-        </div>
-        {% if showErrors %}
-            <div class="error">
-                {{ form_errors(form) }}
-            </div>
-        {% endif %}
-    </form>
-
     <div class="row">
 
         <div class="info">
-            <small class="query-label">query</small>
-            <h1 class="query">{{ query.query }}</h1>
-        </div>
-    
-        <div class="stack-position">
-    
-            <div class="card-deck"></div>
-    
-            <div class="stack"/>
+
+            <div class="query-info">
+                <span class="section-label">Your query:</span><span 
class="query">{{ query.query }}</span>
+
                 <div class="deck-counter-description">
                     <span class="deck-counter">{{ resultsList|length }}</span>
                     cards left in this deck.
                 </div>
-            </span>
-    
+
+            </div>
+
+            <div class="query-actions">
+
+
+                <div class="query-links">
+                    <span class="glyphicon glyphicon-search" 
aria-hidden="true"></span>
+                    <span class="query-links-label">Search this query</span>
+                    <div class="query-links-content" style="display:none">
+                        <a class="search-icon icon-ddg" 
href="https://duckduckgo.com/?q={{ query.query }}" target="_blank">
+                            <img src="/img/duckduckgo.svg"/>
+                        </a>
+                        <a class="search-icon icon-goog" 
href="https://www.google.com/?q={{ query.query }}" target="_blank">
+                            <img src="/img/google.svg"/>
+                        </a>
+                        <a class="search-icon icon-yahoo" 
href="https://search.yahoo.com/search?p={{ query.query }}" target="_blank">
+                            <img src="/img/yahoo.svg"/>
+                        </a>
+                        <a class="search-icon icon-bing" 
href="http://www.bing.com/search?q={{ query.query }}" target="_blank">
+                            <img src="/img/bing.svg"/>
+                        </a>
+                    </div>
+                </div>
+
+                <div class='query-form-container'>
+                    <span class="glyphicon glyphicon-step-forward" 
aria-hidden="true"></span>
+                    {{ form(skipForm, {'attr': {'class': 'skip-query'}}) }}
+                </div>
+
+                <form class="score-query" method="post" novalidate>
+                    {{ form_widget(form._token) }}
+                    {% for child in form %}
+                        {% if child.vars.name != '_token' %}
+                            <input class="result-score" type="text" 
id="result_{{child.vars.name}}" name="{{child.vars.full_name}}" 
value="{{child.vars.value}}" data-id="{{child.vars.name}}">
+                        {% endif %}
+                    {% endfor %}
+
+                    <span class="glyphicon glyphicon-eye-open"></span><button 
type="submit" class="btn btn-default switch-ui" name="cards" value="0">Switch 
to classic</button>
+                    <input type="submit" class="btn btn-default submit-scores" 
value="Submit scores" id="submit-score-btn" disabled />
+
+                    <small id="remaining-card-counter">
+                        At least x cards must be ranked to submit this query.
+                    </small>
+
+                    {% if showErrors %}
+                        <div class="error">
+                            {{ form_errors(form) }}
+                        </div>
+                    {% endif %}
+                </form>
+            </div>
+        </div>
+
+        <div class="stack-position">
+
+            <div class="card-deck"></div>
+
+            <div class="stack"/></div>
+
             <div class="drop-area irrelevant" data-score="0">
                 <span class="drop-area-label"> Irrelevant </span>
                 <p class="drop-area-description">
@@ -93,7 +125,7 @@
                     A result is Relevant if you would expect to find it in the 
top 5 results for a query. Use this ranking sparingly.
                 </p>
             </div>
-        </div>    
+        </div>
     </div>
 {% endblock %}
 

-- 
To view, visit https://gerrit.wikimedia.org/r/311122
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ib6cd62fee859acfa5457126961283654af56fe86
Gerrit-PatchSet: 4
Gerrit-Project: wikimedia/discovery/discernatron
Gerrit-Branch: master
Gerrit-Owner: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: EBernhardson <ebernhard...@wikimedia.org>
Gerrit-Reviewer: Jdrewniak <jdrewn...@wikimedia.org>
Gerrit-Reviewer: Tjones <tjo...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to