Skip to content

Commit

Permalink
Dev: working on array-by-column
Browse files Browse the repository at this point in the history 
Dev: fix some issue in little screen (default template)
  • Loading branch information
@Shnoulle
Shnoulle committed Oct 5, 2016
1 parent 171cd81 commit dd8a74a
Show file tree
Hide file tree
Showing 8 changed files with 114 additions and 140 deletions.
14 changes: 11 additions & 3 deletions application/core/packages/limesurvey/ls-public.css
View file
@@ -1,5 +1,6 @@
/*!
* Style for public survey
* This file is part of LimeSurvey API for template
*
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
Expand All @@ -18,16 +19,23 @@
-moz-osx-font-smoothing: grayscale;
}
*/
.asterisk {
}
.asterisk {}
.asterisk:before {
content: "\f069";
display: inline-block;
font-family: FontAwesome;
font-size: inherit;
line-height:1;
}

/** ls-label-xs-visibility : set sr-only by default : template can reinit it with initial */
.ls-label-xs-visibility{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/**
* The answers part
* BS use px size, use rem to easily update body font-size : @link http://caniuse.com/rem/embed/
Expand Down
2 changes: 1 addition & 1 deletion application/views/survey/questions/arrays/array/no_dropdown/rows/answer_row.php
View file
Expand Up @@ -11,7 +11,7 @@

<!-- answer_row -->
<tr id="javatbd<?php echo $myfname;?>" class="answers-list radio-list array<?php echo $zebra; ?><?php if($error){ echo " has-error";} ?>" role="radiogroup" aria-labelledby="answertext<?php echo $myfname;?>">
<th id="answertext<?php echo $myfname;?>" class="answertext control-label">
<th id="answertext<?php echo $myfname;?>" class="answertext control-label <?php if($error){ echo " ls-error-mandatory";} ?>">
<?php echo $answertext;?>
<input name="java<?php echo $myfname;?>" id="java<?php echo $myfname;?>" value="<?php echo $value;?>" type="hidden">
</th>
Expand Down
94 changes: 49 additions & 45 deletions application/views/survey/questions/arrays/column/answer.php
View file
Expand Up @@ -7,54 +7,58 @@
* @var $cellwidth
*/
?>
<div class="no-more-tables">
<table class="table question subquestion-list questions-list">
<thead class=' array1 dontread'>
<tr>
<th>&nbsp;</th>
<table class="table question subquestion-list questions-list array-by-columns">
<colgroup>
<col class="col-answers" />
<?php foreach ($aQuestions as $i=>$question): ?>
<col
class="answers-list radio-list <?php echo ($i % 2 == 0)?' array2':' array1';?> <?php if($question['errormandatory']): echo " has-error"; endif; ?>"
style='width: <?php echo $cellwidth; ?>%;'
role="radiogroup"
aria-labelledby="answertext<?php echo $question['myfname'];?>"
>
<!-- @todo : control if radiogroup can be used in col : https://www.w3.org/TR/wai-aria/roles -->
<?php endforeach; ?>
</colgroup>
<thead>
<tr class=''>
<td>&nbsp;</td>
<?php
foreach ($aQuestions as $i=>$question): ?>
<th id="answertext<?php echo $question['myfname'];?>" class="answertext control-label <?php if($question['errormandatory']){ echo " error-mandatory";} ?>">
<?php echo $question['question']; ?>
</th>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ($labels as $ansrow): ?>
<tr id="javatbd<?php echo $ansrow['code'];?>" class="answers-list">
<th class="answertext" id="label-<?php echo $ansrow['code'];?>">
<?php echo $ansrow['answer']; ?>
</th>
<?php
foreach ($aQuestions as $i=>$question): ?>
<?php if ($question['errormandatory']): ?>
<th class='text-center<?php echo ($i % 2 == 0)?' array2':' well';?>'>
<span class="label label-danger" role="alert">
<?php echo $question['question']; ?>
</span >
</th>
<?php else: ?>
<th class="text-center<?php echo ($i % 2 == 0)?' array2':' well';?>">
<?php echo $question['question']; ?>
</th>
<?php endif; ?>
foreach ($anscode as $i => $ld): ?>
<td class="answer_cell_<?php echo $ld;?> answer-item radio-item">
<input
type="radio"
name="<?php echo $aQuestions[$i]['myfname']; ?>"
value="<?php echo $ansrow['code']; ?>"
id="answer<?php echo $aQuestions[$i]['myfname']; ?>-<?php echo $ansrow['code']; ?>"
<?php echo $checked[$ansrow['code']][$ld]; ?>
onclick='<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)'
aria-labelledby="label-<?php echo $ansrow['code'];?>"
/>
<label class="ls-label-xs-visibility " for="answer<?php echo $aQuestions[$i]['myfname']; ?>-<?php echo $ansrow['code']; ?>">
<?php echo $aQuestions[$i]['question'];?>
</label>
</td>
<?php endforeach; ?>
</tr>
</thead>
<tbody>
<?php foreach ($labels as $ansrow): ?>
<tr id="javatbd<?php echo $ansrow['code'];?>" class="answers-list radio-list">
<th class="answertext">
<span class="answertextright"><?php echo $ansrow['answer']; ?></span>
</th>
<?php
foreach ($anscode as $i => $ld): ?>
<td class="answer-cell-2 answer_cell_<?php echo $ld;?><?php echo ($i % 2 == 0)?' array2':' well';?> answer-item radio-item radio text-center">
<input
class="radio"
type="radio"
name="<?php echo $aQuestions[$i]['myfname']; ?>"
value="<?php echo $ansrow['code']; ?>"
id="answer<?php echo $aQuestions[$i]['myfname']; ?>-<?php echo $ansrow['code']; ?>"
<?php echo $checked[$ansrow['code']][$ld]; ?>
onclick='<?php echo $checkconditionFunction; ?>(this.value, this.name, this.type)' />
<label class="" for="answer<?php echo $aQuestions[$i]['myfname']; ?>-<?php echo $ansrow['code']; ?>">
<span class="visible-xs-inline-block label-clickable label-text"><?php echo $aQuestions[$i]['question'];?></span>
</label>
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endforeach; ?>
</tbody>
</table>

<?php foreach ($anscode as $i => $ld): ?>
<input
type="hidden"
Expand Down
2 changes: 1 addition & 1 deletion application/views/survey/questions/arrays/multiflexi/answer.php
View file
Expand Up @@ -14,7 +14,7 @@
*/
?>
<!-- answer -->
<table class="table question subquestion-list questions-list <?php echo $answertypeclass; ?>-list <?php echo $extraclass; ?>">
<table class="table question subquestion-list questions-list table-bordered <?php echo $answertypeclass; ?>-list <?php echo $extraclass; ?>">

<colgroup class="col-responses">
<col class="answertext" style='width: <?php echo $answerwidth;?>%;'/>
Expand Down
1 change: 1 addition & 0 deletions templates/default/config.xml
View file
Expand Up @@ -110,6 +110,7 @@
<packages>
<package>jqueryui</package>
<package>jquery-touch-punch</package>
<!-- Add the limesurvey needed package. Without : no backwards-compatible for minor version -->
<package>limesurvey-public</package>
</packages>
</engine>
Expand Down
52 changes: 39 additions & 13 deletions templates/default/css/template-core.css
View file
Expand Up @@ -40,7 +40,8 @@ margin: 0;
}

/* show partially sr-only inside table */
.radio-item label.sr-only,.checkbox-item label.sr-only{
.radio-item label.sr-only,.checkbox-item label.sr-only,
.radio-item label.ls-label-xs-visibility,.checkbox-item label.ls-label-xs-visibility{
display:inline-block;
overflow:hidden;
width: 17px;
Expand All @@ -49,18 +50,31 @@ margin: 0;
line-height: 21px;
text-indent: 21px;
}
.radio-item label.ls-label-xs-visibility,.checkbox-item label.ls-label-xs-visibility{
position:relative;
left:auto;
top:auto;
}
/* no margin on label : no margin after and before too */
.radio-item label.sr-only::before,.checkbox-item label.sr-only::before {
.radio-item label.sr-only::before,.checkbox-item label.sr-only::before,
.radio-item label.ls-label-xs-visibility::before,.checkbox-item label.ls-label-xs-visibility::before
{
margin-left:0;
}
.radio-item label.sr-only::after,.checkbox-item label.sr-only::after {
.radio-item label.sr-only::after,.checkbox-item label.sr-only::after,
.radio-item label.ls-label-xs-visibility::after,.checkbox-item label.ls-label-xs-visibility::after
{
margin-left:0;
}
.checkbox-item label.sr-only::after {
.checkbox-item label.sr-only::after,
.checkbox-item label.ls-label-xs-visibility::after
{
line-height:17px;width:17px;text-align:center;text-indent: 0;
}
/* Hide the other content inside sr-only */
.radio-item label.sr-only > *,.checkbox-item label.sr-only > * {
.radio-item label.sr-only > *,.checkbox-item label.sr-only > *,
.radio-item label.ls-label-xs-visibility > *,.checkbox-item label.ls-label-xs-visibility > *
{
height: 1px;
margin: -1px;
overflow: hidden;
Expand All @@ -75,27 +89,26 @@ For iPads specifically : add this : (min-device-width: 768px) and (max-device-wi
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.no-more-table table.question,.no-more-table thead,.no-more-table tbody,.no-more-table th,.no-more-table td,.no-more-table tr {
table.question,thead,tbody,th,td,tr {
display: block;
text-align:left;
}
.no-more-table thead{display:none} /* We don't need it for accessibility : we already have the label */
table.question thead{display:none} /* We don't need it for accessibility : we already have the label */

.table.question td
{text-align:left;}
.table.question thead th
{text-align:left;}

.no-more-table .table > tbody > tr > td.radio-item{padding:4px;padding-left: 24px;}
.table > tbody > tr > td.radio-item, .table > tbody > tr > td.checkbox-item{padding:4px;padding-left: 24px;}
.table.question .answertext{text-align:left}
.table.question .answertextright{text-align:right}

/* Show the label */
label.sr-only{
label.sr-only,label.ls-label-xs-visibility{
display:inline-block;
}
.no-more-table label.sr-only,
.no-more-table label.sr-only > *
.radio-item label.sr-only,.radio-item label.sr-only > *,.checkbox-item label.sr-only,.checkbox-item label.sr-only > *
{
overflow:visible;
width: auto;
Expand All @@ -105,10 +118,23 @@ only screen and (max-width: 760px),
clip: auto;
position: relative;
}
.no-more-table .radio-item label.sr-only::before,.no-more-table .checkbox-item label.sr-only::before {
.radio-item label.ls-label-xs-visibility,.radio-item label.ls-label-xs-visibility > *
{
overflow:visible;
width: auto;
height: auto;
margin-left:0;
text-indent: 0;
position: relative;
}
.radio-item label.sr-only::before,.checkbox-item label.sr-only::before,
.radio-item label.ls-label-xs-visibility::before,.checkbox-item label.ls-label-xs-visibility::before
{
margin-left:-20px;
}
.no-more-table .radio-item label.sr-only::after,.no-more-table .checkbox-item label.sr-only::after {
.radio-item label.sr-only::after,.checkbox-item label.sr-only::after,
.radio-item label.ls-label-xs-visibility::after,.checkbox-item label.ls-label-xs-visibility::after
{
margin-left:-20px;
}
}

0 comments on commit dd8a74a

Please sign in to comment.