php/archived-web-wiki
1
0
Fork 0
mirror of https://github.com/php/web-wiki.git synced 2026-03-23 23:12:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use CSS grid instead of tables to have a better dynamic layout for doodle polls

Browse Source
This commit is contained in:
Derick Rethans
2025-08-26 15:37:19 +01:00
parent 5618594fe3
commit 1940bcaef7
3 changed files with 88 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
dokuwiki/lib/plugins/doodle/doodle_template.php
View File

@@ -22,55 +22,45 @@
<input type="hidden" name="edit__entry" value="">
<input type="hidden" name="delete__entry" value="">
<table class="inline">
<tbody>
<tr class="row0">
<th class="centeralign" colspan="<?php echo ($c+1) ?>">
<div class="doodle__results">
<div class="title_row" style="grid-template-columns: 2fr repeat(<?php echo $c; ?>, 1fr)">
<div class="title_caption" style="grid-column: 1 / <?php echo ($c+2) ?>">
<?php echo $template['title'] ?>
</th>
</tr>
<tr class="row1">
<th class="col0"><?php echo $lang['fullname'] ?></th>
</div>
</div>
<div class="fields_row" style="grid-template-columns: 2fr repeat(<?php echo $c; ?>, 1fr)">
<div class="fields_caption"><?php echo $lang['fullname'] ?></div>
<?php foreach ($template['choices'] as $choice) { ?>
<td class="centeralign"><?php echo $choice ?></td>
<div class="fields_data"><?php echo $choice ?></div>
<?php } ?>
</tr>
</div>
<?php foreach ($template['doodleData'] as $fullname => $userData) { ?>
<tr>
<td class="rightalign">
<div class="data_row" style="grid-template-columns: 2fr repeat(<?php echo $c; ?>, 1fr)">
<div class="data_caption">
<?php $link = '<a href="https://people.php.net/' . htmlspecialchars($userData['username']) . '">' . htmlspecialchars($userData['username']) . '</a>';?>
<?php echo (array_key_exists('editLinks', $userData) ? $userData['editLinks'] : '') . $link; ?>
</td>
</div>
<?php for ($col = 0; $col < $c; $col++) {
echo $userData['choice'][$col];
} ?>
</tr>
} ?>
</div>
<?php } ?>
<!-- Results / sum per column -->
<tr>
<th class="rightalign"><b><?php echo $template['result'] ?></b></th>
<div class="results_row" style="grid-template-columns: 2fr repeat(<?php echo $c; ?>, 1fr)">
<div class="results_caption"><?php echo $template['result'] ?></div>
<?php for ($col = 0; $col < $c; $col++) { ?>
<th class="centeralign"><b><?php echo $template['count'][$col] ?></b></th>
<div class="results_data"><?php echo $template['count'][$col] ?></div>
<?php } ?>
</tr>
</div>
<?php
/* Input fields, if allowed. */
echo $template['inputTR']
echo $template['inputTR']
?>
<?php if (!empty($template['msg'])) { ?>
<tr>
<td colspan="<?php echo $c+1 ?>">
<?php echo $template['msg'] ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</form>

48
dokuwiki/lib/plugins/doodle/style.css
View File

@@ -27,3 +27,51 @@ div.dokuwiki table.inline td.notokay {
border: 0;
color: rgba(0, 0, 0, 0);
}
.doodle__results .title_row, .doodle__results .fields_row, .doodle__results .data_row, .doodle__results .results_row, .doodle__results .input_row {
display: grid;
width: 100%;
}
.doodle__results .fields_row div, .doodle__results .results_row div {
background-color: lightblue;
text-align: center;
padding: 0.25em;
}
.doodle__results .title_row .title_caption, .doodle__results .input_row .input_caption {
text-align: center;
background-color: #bbd;
width: 100%;
}
.doodle__results .title_row .title_caption {
font-weight: bold;
}
.doodle__results .input_row {
background-color: #bbd;
}
.doodle__results .title_caption, .doodle__results .fields_caption, .doodle__results .data_caption, .doodle__results .results_caption {
}
.doodle__results .title_caption a, .doodle__results .fields_caption a, .doodle__results .data_caption a, .doodle__results .results_caption a {
margin: 0.25em;
}
.doodle__results .fields_row .fields_options, .doodle__results .data_row .data_options, .doodle__results .results_row .results_options {
}
.doodle__results .title_data, .doodle__results .fields_data, .doodle__results .data_data, .doodle__results .results_data, .doodle__results .input_data {
text-align: center;
padding: 0.25em;
}
.doodle__results .data_row:nth-child(odd) {
background-color: #bbd;
}
.doodle__results .data_row:nth-child(even) {
background-color: #E2E4EF;
}

38
dokuwiki/lib/plugins/doodle/syntax.php
View File

@@ -294,13 +294,13 @@ class syntax_plugin_doodle extends DokuWiki_Syntax_Plugin
}
if (in_array($col, $userData['choices'])) {
$timeLoc = strftime($conf['dformat'], $userData['time']); // localized time of vote
$this->template['doodleData']["$fullname"]['choice'][$col] =
'<td class="centeralign" style="background-color:#AFA"><img src="'.DOKU_BASE.'lib/images/success.png" title="'.$timeLoc.'"></td>';
$this->template['doodleData']["$fullname"]['choice'][$col] =
'<div class="data_data" style="background-color:#AFA"><img src="'.DOKU_BASE.'lib/images/success.png" title="'.$timeLoc.'"></div>';
$this->template['count']["$col"]++;
} else {
$this->template['doodleData']["$fullname"]['choice'][$col] =
'<td class="centeralign" style="background-color:#FCC">&nbsp;</td>';
}
$this->template['doodleData']["$fullname"]['choice'][$col] =
'<div class="data_data" style="background-color:#FCC">&nbsp;</div>';
}
}
}
@@ -503,8 +503,8 @@ class syntax_plugin_doodle extends DokuWiki_Syntax_Plugin
$c = count($this->choices);
$TR = '';
//$TR .= '<tr style="height:3px"><th colspan="'.($c+1).'"></th></tr>';
$TR .= '<tr>';
$TR .= '<td class="rightalign">';
$TR .= '<div class="input_row" style="grid-template-columns: 2fr repeat('. $c . ', 1fr)">';
$TR .= '<div class="input_caption">';
if ($fullname) {
if ($editMode) $TR .= $this->getLang('edit').':&nbsp;';
$TR .= $_SERVER['REMOTE_USER'];
@@ -512,15 +512,15 @@ class syntax_plugin_doodle extends DokuWiki_Syntax_Plugin
} else {
$TR .= '<input type="text" name="fullname" value="">';
}
$TR .='</td>';
$TR .='</div>';
for($col = 0; $col < $c; $col++) {
$selected = '';
if ($editMode && in_array($col, $this->template['editEntry']['selected_indexes']) ) {
$selected = 'checked="checked"';
}
$TR .= '<td class="centeralign">';
$TR .= '<div class="input_data">';
if ($this->params['voteType'] == 'multi') {
$inputType = "checkbox";
} else {
@@ -528,21 +528,21 @@ class syntax_plugin_doodle extends DokuWiki_Syntax_Plugin
}
$TR .= '<input type="'.$inputType.'" name="selected_indexes[]" value="'.$col.'"';
$TR .= $selected.">";
$TR .= '</TD>';
$TR .= '</div>';
}
$TR .= '</tr>';
$TR .= '<tr>';
$TR .= ' <td colspan="'.($c+1).'" class="centeralign">';
$TR .= '</div>';
$TR .= '<div class="input_row">';
$TR .= ' <div class="input_caption" style="grid-column: 1 / '.($c+2).'" class="centeralign">';
if ($editMode) {
$TR .= ' <input type="submit" id="voteButton" value=" '.$this->getLang('btn_change').' " name="change__vote" class="button">';
} else {
$TR .= ' <input type="submit" id="voteButton" value=" '.$this->getLang('btn_vote').' " name="cast__vote" class="button">';
}
$TR .= ' </td>';
$TR .= '</tr>';
$TR .= ' </div>';
$TR .= '</div>';
return $TR;
}