From 20378e7fb7dcb72ad7bb5affafccb01e21cde5a7 Mon Sep 17 00:00:00 2001
From: JosephK <josephk@framasoft.org>
Date: Wed, 17 Jun 2015 23:13:44 +0200
Subject: [PATCH] No = fake btn unchecked in vote form + icon display onload
and mouseover in results
---
css/style.css | 70 +++++++++++++++++++++++++++++++--
js/app/studs.js | 12 +++++-
tpl/part/vote_table_classic.tpl | 35 ++++++++---------
tpl/part/vote_table_date.tpl | 35 ++++++++---------
4 files changed, 112 insertions(+), 40 deletions(-)
diff --git a/css/style.css b/css/style.css
index 9b4bfedd..076ba7c4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -328,22 +328,25 @@ table.results .btn-link.btn-sm {
color:#555;
}
-.yes .btn {
+.yes .btn,.yes .btn:hover {
border-bottom-right-radius:0 !important;
border-bottom-left-radius:0 !important;
margin-bottom:-1px !important;
margin-top:4px !important;
+ color: #677835;
}
-.ifneedbe .btn {
+.ifneedbe .btn,.ifneedbe .btn:hover {
border-radius: 0;
+ color: #C48A1B;
}
-.no .btn{
+.no .btn,.no .btn:hover{
border-top-right-radius:0 !important;
border-top-left-radius:0 !important;
margin-bottom:4px !important;
margin-top:-1px !important;
+ color: #AD220F;
}
.yes input[type="radio"]:checked + label { /* =.btn-success.active */
@@ -367,6 +370,67 @@ table.results .btn-link.btn-sm {
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125) inset;
}
+/* Button and results "No" */
+.no .btn.startunchecked {
+ box-shadow:none !important;
+ color:#AD220F !important;
+ background:#fff !important;
+ border-color:#bdbdbd !important;
+}
+
+.no .btn.startunchecked:hover {
+ background-color: #E0E0E0 !important;
+ border-color: #949494 !important;
+}
+
+table.results .bg-danger .glyphicon {
+ opacity:0;
+
+ -moz-animation-name: hideNoIcon;
+ -moz-animation-iteration-count: 1;
+ -moz-animation-timing-function: ease-in;
+ -moz-animation-duration: 2s;
+
+ -webkit-animation-name: hideNoIcon;
+ -webkit-animation-iteration-count: 1;
+ -webkit-animation-timing-function: ease-in;
+ -webkit-animation-duration: 2s;
+
+ animation-name: hideNoIcon;
+ animation-iteration-count: 1;
+ animation-timing-function: ease-in;
+ animation-duration: 2s;
+}
+
+@-moz-keyframes hideNoIcon {
+ 0% {
+ opacity:1;
+ }
+ 100% {
+ opacity:0;
+ }
+}
+@-webkit-keyframes hideNoIcon {
+ 0% {
+ opacity:1;
+ }
+ 100% {
+ opacity:0;
+ }
+}
+@keyframes hideNoIcon {
+ 0% {
+ opacity:1;
+ }
+ 100% {
+ opacity:0;
+ }
+}
+
+table.results > tbody > tr:hover > td .glyphicon {
+ opacity:1
+}
+
/* create_date_poll.php */
#selected-days .form-group {
margin-left:0;
diff --git a/js/app/studs.js b/js/app/studs.js
index 0266c639..52fd1021 100644
--- a/js/app/studs.js
+++ b/js/app/studs.js
@@ -35,4 +35,14 @@ $(document).ready(function () {
}
});
-});
\ No newline at end of file
+ $('.choice input:radio').on('change', function(){
+ $(this).parent().parent().find('.startunchecked').removeClass('startunchecked');
+ });
+ $('.startunchecked').on('click', function(){
+ $(this).removeClass('startunchecked');
+ });
+ $('.no input').on('focus', function(){
+ $(this).next().removeClass('startunchecked');
+ });
+
+});
diff --git a/tpl/part/vote_table_classic.tpl b/tpl/part/vote_table_classic.tpl
index dc9730fe..725c4c98 100644
--- a/tpl/part/vote_table_classic.tpl
+++ b/tpl/part/vote_table_classic.tpl
@@ -16,14 +16,14 @@
<td headers="C{$id}">
<a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->title}"
class="btn btn-link btn-sm" title="{__('adminstuds', 'Remove the column')} {$slot->title|html}">
- <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+ <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
</a>
</td>
{/foreach}
<td>
<a href="{poll_url id=$admin_poll_id admin=true action='add_slot' action_value=true}"
class="btn btn-link btn-sm" title="{__('adminstuds', 'Add a column')} {$slot->title|html}">
- <span class="glyphicon glyphicon-plus text-success"></span><span class="sr-only">{__('Poll results', 'Add a column')}</span>
+ <i class="glyphicon glyphicon-plus text-success"></i><span class="sr-only">{__('Poll results', 'Add a column')}</span>
</a>
</td>
</tr>
@@ -44,7 +44,7 @@
<tr class="hidden-print">
<td class="bg-info" style="padding:5px">
<div class="input-group input-group-sm" id="edit">
- <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="hidden" name="edited_vote" value="{$vote->uniqId}"/>
<input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
</div>
@@ -57,19 +57,19 @@
<li class="yes">
<input type="radio" id="y-choice-{$id}" name="choices[{$id}]" value="2" {if $choice==2}checked {/if}/>
<label class="btn btn-default btn-xs" for="y-choice-{$id}" title="{__('Poll results', 'Vote yes for')|html} {$slots[$id]->title|html}">
- <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+ <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
</label>
</li>
<li class="ifneedbe">
<input type="radio" id="i-choice-{$id}" name="choices[{$id}]" value="1" {if $choice==1}checked {/if}/>
<label class="btn btn-default btn-xs" for="i-choice-{$id}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slots[$id]->title|html}">
- (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+ (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
</label>
</li>
<li class="no">
<input type="radio" id="n-choice-{$id}" name="choices[{$id}]" value="0" {if $choice==0}checked {/if}/>
<label class="btn btn-default btn-xs" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slots[$id]->title|html}">
- <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+ <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
</label>
</li>
</ul>
@@ -85,11 +85,11 @@
{foreach $vote->choices as $id=>$choice}
{if $choice==2}
- <td class="bg-success text-success" headers="C{$id}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span></td>
+ <td class="bg-success text-success" headers="C{$id}"><i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span></td>
{elseif $choice==1}
- <td class="bg-warning text-warning" headers="C{$id}">(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
+ <td class="bg-warning text-warning" headers="C{$id}">(<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
{else}
- <td class="bg-danger" headers="C{$id}"><span class="sr-only">{__('Generic', 'No')}</span></td>
+ <td class="bg-danger text-danger" headers="C{$id}"><i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span></td>
{/if}
{/foreach}
@@ -97,13 +97,13 @@
{if $active && !$expired && ($poll->editable == constant('Framadate\Editable::EDITABLE_BY_ALL') or $admin)}
<td class="hidden-print">
<a href="{if $admin}{poll_url id=$poll->admin_id vote_id=$vote->uniqId admin=true}{else}{poll_url id=$poll->id vote_id=$vote->uniqId}{/if}" class="btn btn-default btn-sm" title="{__('Poll results', 'Edit the line:')|html} {$vote->name|html}">
- <span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span>
+ <i class="glyphicon glyphicon-pencil"></i><span class="sr-only">{__('Generic', 'Edit')}</span>
</a>
{if $admin}
<a href="{poll_url id=$admin_poll_id admin=true action='delete_vote' action_value=$vote->id}"
class="btn btn-default btn-sm"
title="{__('Poll results', 'Remove the line:')} {$vote->name|html}">
- <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+ <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
</a>
{/if}
</td>
@@ -120,7 +120,7 @@
<tr id="vote-form" class="hidden-print">
<td class="bg-info" style="padding:5px">
<div class="input-group input-group-sm">
- <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="name" name="name" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
</div>
</td>
@@ -130,19 +130,19 @@
<li class="yes">
<input type="radio" id="y-choice-{$id}" name="choices[{$id}]" value="2" />
<label class="btn btn-default btn-xs" for="y-choice-{$id}" title="{__('Poll results', 'Vote yes for')|html} {$slot->title|html}">
- <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+ <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
</label>
</li>
<li class="ifneedbe">
<input type="radio" id="i-choice-{$id}" name="choices[{$id}]" value="1" />
<label class="btn btn-default btn-xs" for="i-choice-{$id}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slot->title|html}">
- (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+ (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
</label>
</li>
<li class="no">
<input type="radio" id="n-choice-{$id}" name="choices[{$id}]" value="0" checked/>
- <label class="btn btn-default btn-xs" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slot->title|html}">
- <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+ <label class="btn btn-default btn-xs startunchecked" for="n-choice-{$id}" title="{__('Poll results', 'Vote no for')|html} {$slot->title|html}">
+ <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
</label>
</li>
</ul>
@@ -218,8 +218,7 @@
resIfneedbe.shift(); resIfneedbe.pop();
resYes.shift(); resYes.pop();
- console.log(resYes);
- console.log(resIfneedbe);
+
var barChartData = {
labels : cols,
datasets : [
diff --git a/tpl/part/vote_table_date.tpl b/tpl/part/vote_table_date.tpl
index c81906a3..cf3f3758 100644
--- a/tpl/part/vote_table_date.tpl
+++ b/tpl/part/vote_table_date.tpl
@@ -20,7 +20,7 @@
<a href="{poll_url id=$admin_poll_id admin=true action='delete_column' action_value=$slot->day|cat:'@'|cat:$moment}"
class="btn btn-link btn-sm"
title="{__('adminstuds', 'Remove the column')} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
- <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+ <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
</a>
</td>
{$headersDCount = $headersDCount+1}
@@ -29,7 +29,7 @@
<td>
<a href="{poll_url id=$admin_poll_id admin=true action='add_slot' action_value=true}"
class="btn btn-link btn-sm" title="{__('adminstuds', 'Add a column')} {$slot->day|html}">
- <span class="glyphicon glyphicon-plus text-success"></span><span class="sr-only">{__('Poll results', 'Add a column')}</span>
+ <i class="glyphicon glyphicon-plus text-success"></i><span class="sr-only">{__('Poll results', 'Add a column')}</span>
</a>
</td>
</tr>
@@ -92,7 +92,7 @@
<tr class="hidden-print">
<td class="bg-info" style="padding:5px">
<div class="input-group input-group-sm" id="edit">
- <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="hidden" name="edited_vote" value="{$vote->uniqId}"/>
<input type="text" id="name" name="name" value="{$vote->name|html}" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
</div>
@@ -105,19 +105,19 @@
<li class="yes">
<input type="radio" id="y-choice-{$k}" name="choices[{$k}]" value="2" {if $choice==2}checked {/if}/>
<label class="btn btn-default btn-xs" for="y-choice-{$k}" title="{__('Poll results', 'Vote yes for')|html} {$slots_raw[$k]}">
- <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+ <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
</label>
</li>
<li class="ifneedbe">
<input type="radio" id="i-choice-{$k}" name="choices[{$k}]" value="1" {if $choice==1}checked {/if}/>
<label class="btn btn-default btn-xs" for="i-choice-{$k}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slots_raw[$k]}">
- (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+ (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
</label>
</li>
<li class="no">
<input type="radio" id="n-choice-{$k}" name="choices[{$k}]" value="0" {if $choice==0}checked {/if}/>
<label class="btn btn-default btn-xs" for="n-choice-{$k}" title="{__('Poll results', 'Vote no for')|html} {$slots_raw[$k]}">
- <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+ <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
</label>
</li>
</ul>
@@ -136,11 +136,11 @@
{foreach $vote->choices as $k=>$choice}
{if $choice==2}
- <td class="bg-success text-success" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span></td>
+ <td class="bg-success text-success" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span></td>
{elseif $choice==1}
- <td class="bg-warning text-warning" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}">(<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
+ <td class="bg-warning text-warning" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}">(<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span></td>
{else}
- <td class="bg-danger" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><span class="sr-only">{__('Generic', 'No')}</span></td>
+ <td class="bg-danger text-danger" headers="M{$headersM[$k]} D{$headersD[$k]} H{$k}"><i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span></td>
{/if}
{/foreach}
@@ -148,13 +148,13 @@
{if $active && !$expired && ($poll->editable == constant('Framadate\Editable::EDITABLE_BY_ALL') or $admin)}
<td class="hidden-print">
<a href="{if $admin}{poll_url id=$poll->admin_id vote_id=$vote->uniqId admin=true}{else}{poll_url id=$poll->id vote_id=$vote->uniqId}{/if}" class="btn btn-default btn-sm" title="{__('Poll results', 'Edit the line:')|escape} {$vote->name|html}">
- <span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span>
+ <i class="glyphicon glyphicon-pencil"></i><span class="sr-only">{__('Generic', 'Edit')}</span>
</a>
{if $admin}
<a href="{poll_url id=$admin_poll_id admin=true action='delete_vote' action_value=$vote->id}"
class="btn btn-default btn-sm"
title="{__('Poll results', 'Remove the line:')} {$vote->name|html}">
- <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+ <i class="glyphicon glyphicon-remove text-danger"></i><span class="sr-only">{__('Generic', 'Remove')}</span>
</a>
{/if}
</td>
@@ -171,7 +171,7 @@
<tr id="vote-form" class="hidden-print">
<td class="bg-info" style="padding:5px">
<div class="input-group input-group-sm">
- <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
+ <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" id="name" name="name" class="form-control" title="{__('Generic', 'Your name')}" placeholder="{__('Generic', 'Your name')}" />
</div>
</td>
@@ -183,19 +183,19 @@
<li class="yes">
<input type="radio" id="y-choice-{$i}" name="choices[{$i}]" value="2" />
<label class="btn btn-default btn-xs" for="y-choice-{$i}" title="{__('Poll results', 'Vote yes for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
- <span class="glyphicon glyphicon-ok"></span><span class="sr-only">{__('Generic', 'Yes')}</span>
+ <i class="glyphicon glyphicon-ok"></i><span class="sr-only">{__('Generic', 'Yes')}</span>
</label>
</li>
<li class="ifneedbe">
<input type="radio" id="i-choice-{$i}" name="choices[{$i}]" value="1" />
<label class="btn btn-default btn-xs" for="i-choice-{$i}" title="{__('Poll results', 'Vote ifneedbe for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
- (<span class="glyphicon glyphicon-ok"></span>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
+ (<i class="glyphicon glyphicon-ok"></i>)<span class="sr-only">{__('Generic', 'Ifneedbe')}</span>
</label>
</li>
<li class="no">
<input type="radio" id="n-choice-{$i}" name="choices[{$i}]" value="0" checked/>
- <label class="btn btn-default btn-xs" for="n-choice-{$i}" title="{__('Poll results', 'Vote no for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
- <span class="glyphicon glyphicon-ban-circle"></span><span class="sr-only">{__('Generic', 'No')}</span>
+ <label class="btn btn-default btn-xs startunchecked" for="n-choice-{$i}" title="{__('Poll results', 'Vote no for')|html} {$slot->day|date_format:$date_format.txt_short|html} - {$moment|html}">
+ <i class="glyphicon glyphicon-ban-circle"></i><span class="sr-only">{__('Generic', 'No')}</span>
</label>
</li>
</ul>
@@ -275,8 +275,7 @@
resIfneedbe.shift(); resIfneedbe.pop();
resYes.shift(); resYes.pop();
- console.log(resYes);
- console.log(resIfneedbe);
+
var barChartData = {
labels : cols,
datasets : [
--
GitLab