Chapril/date.chapril.org-framadate
Chapril/date.chapril.org-framadate
24
1
Fork 0
Code Issues Pull Requests Releases Activity

No = fake btn unchecked in vote form + icon display onload and mouseover in results

Browse Source
This commit is contained in:
JosephK 2015-06-17 23:13:44 +02:00
parent 3458b9b51a
commit 20378e7fb7
4 changed files with 112 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
css/style.css
View File

@ -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;

12
js/app/studs.js
View File

@ -35,4 +35,14 @@ $(document).ready(function () {
}
});
});
$('.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');
});
});

35
tpl/part/vote_table_classic.tpl
View File

@ -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 : [

35
tpl/part/vote_table_date.tpl
View File

@ -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 : [