[web-wiki] improve-doodle-poll: Use semantic layout for doodle poll
| From: | Derick Rethans | Date: | Mon, 01 Sep 2025 10:19:25 +0000 |
| Subject: | [web-wiki] improve-doodle-poll: Use semantic layout for doodle poll | ||
| Groups: | php.webmaster | ||
| Request: | Send a blank email to php-webmaster+get-33144@lists.php.net to get a copy of this message | ||
Author: Derick Rethans (derickr)
Date: 2025-09-01T11:14:45+01:00
Commit: https://github.com/php/web-wiki/commit/0053c2deb2e1ced50be35a7316679830ae9890b1
Raw diff: https://github.com/php/web-wiki/commit/0053c2deb2e1ced50be35a7316679830ae9890b1.diff
Use semantic layout for doodle poll
Changed paths:
M dokuwiki/lib/plugins/doodle/doodle_template.php
M dokuwiki/lib/plugins/doodle/style.css
M dokuwiki/lib/plugins/doodle/syntax.php
Diff:
diff --git a/dokuwiki/lib/plugins/doodle/doodle_template.php
b/dokuwiki/lib/plugins/doodle/doodle_template.php
index 49bc8196..dd9cf8b8 100755
--- a/dokuwiki/lib/plugins/doodle/doodle_template.php
+++ b/dokuwiki/lib/plugins/doodle/doodle_template.php
@@ -22,38 +22,41 @@
<input type="hidden" name="edit__entry" value="">
<input type="hidden" name="delete__entry" value="">
-<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'] ?>
- </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>
+<table class="doodle__results">
+ <thead>
+ <tr class="title_row" style="grid-template-columns: 2fr repeat(<?php echo $c;
?>, 1fr)">
+ <th class="title_caption" style="grid-column: 1 / <?php echo ($c+2)
?>">
+ <?php echo $template['title'] ?>
+ </th>
+ </tr>
+ <tr class="fields_row" style="grid-template-columns: 2fr repeat(<?php echo
$c; ?>, 1fr)">
+ <th class="fields_caption"><?php echo $lang['fullname']
?></th>
<?php foreach ($template['choices'] as $choice) { ?>
- <div class="fields_data"><?php echo $choice ?></div>
+ <th class="fields_data"><?php echo $choice ?></th>
<?php } ?>
- </div>
+ </tr>
+ </thead>
+ <tbody>
<?php foreach ($template['doodleData'] as $fullname => $userData) { ?>
- <div class="data_row" style="grid-template-columns: 2fr repeat(<?php echo
$c; ?>, 1fr)">
- <div class="data_caption">
+ <tr class="data_row" style="grid-template-columns: 2fr repeat(<?php echo
$c; ?>, 1fr)">
+ <td 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; ?>
- </div>
+ </td>
<?php for ($col = 0; $col < $c; $col++) {
echo $userData['choice'][$col];
} ?>
- </div>
+ </tr>
<?php } ?>
<!-- Results / sum per column -->
- <div class="results_row" style="grid-template-columns: 2fr repeat(<?php
echo $c; ?>, 1fr)">
- <div class="results_caption"><?php echo $template['result']
?></div>
+ <tr class="results_row" style="grid-template-columns: 2fr repeat(<?php
echo $c; ?>, 1fr)">
+ <td class="results_caption"><?php echo $template['result']
?></td>
<?php for ($col = 0; $col < $c; $col++) { ?>
- <div class="results_data"><?php echo $template['count'][$col]
?></div>
+ <td class="results_data"><?php echo $template['count'][$col]
?></td>
<?php } ?>
- </div>
+ </tr>
<?php
/* Input fields, if allowed. */
@@ -61,14 +64,14 @@
?>
<?php if (!empty($template['msg'])) { ?>
- <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)
?>">
+ <tr class="title_row" style="grid-template-columns: 2fr repeat(<?php echo
$c; ?>, 1fr)">
+ <td class="title_caption" style="grid-column: 1 / <?php echo ($c+2)
?>">
<?php echo $template['msg'] ?>
- </div>
- </div>
+ </td>
+ </tr>
<?php } ?>
-
-</div>
+ </tbody>
+</table>
</form>
diff --git a/dokuwiki/lib/plugins/doodle/style.css b/dokuwiki/lib/plugins/doodle/style.css
index 678e02b8..3c3088c0 100644
--- a/dokuwiki/lib/plugins/doodle/style.css
+++ b/dokuwiki/lib/plugins/doodle/style.css
@@ -28,50 +28,55 @@ div.dokuwiki table.inline td.notokay {
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 {
+table.doodle__results tbody tr, table.doodle__results thead tr {
display: grid;
width: 100%;
}
-.doodle__results .fields_row div, .doodle__results .results_row div {
+table.doodle__results .results_row td {
background-color: lightblue;
text-align: center;
padding: 0.25em;
}
-.doodle__results .title_row .title_caption, .doodle__results .input_row .input_caption {
+table.doodle__results .title_row .title_caption, table.doodle__results .input_row .input_caption {
text-align: center;
background-color: #bbd;
width: 100%;
}
-.doodle__results .title_row .title_caption {
+table.doodle__results .title_row .title_caption {
font-weight: bold;
}
-.doodle__results .input_row {
+table.doodle__results .input_row {
background-color: #bbd;
}
-.doodle__results .title_caption, .doodle__results .fields_caption, .doodle__results .data_caption,
.doodle__results .results_caption {
+table.doodle__results .title_caption, table.doodle__results .fields_caption, table.doodle__results
.data_caption, table.doodle__results .results_caption {
}
-.doodle__results .title_caption a, .doodle__results .fields_caption a, .doodle__results
.data_caption a, .doodle__results .results_caption a {
+table.doodle__results .title_caption a, table.doodle__results .fields_caption a,
table.doodle__results .data_caption a, table.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 {
+table.doodle__results .title_caption {
+ padding-left: 0;
+ padding-right: 0;
}
-.doodle__results .title_data, .doodle__results .fields_data, .doodle__results .data_data,
.doodle__results .results_data, .doodle__results .input_data {
+table.doodle__results .fields_row .fields_options, table.doodle__results .data_row .data_options,
table.doodle__results .results_row .results_options {
+}
+
+table.doodle__results .title_data, table.doodle__results .fields_data, table.doodle__results
.data_data, table.doodle__results .results_data, table.doodle__results .input_data {
text-align: center;
padding: 0.25em;
}
-.doodle__results .data_row:nth-child(odd) {
+table.doodle__results .data_row:nth-child(odd) {
background-color: #bbd;
}
-.doodle__results .data_row:nth-child(even) {
+table.doodle__results .data_row:nth-child(even) {
background-color: #E2E4EF;
}
diff --git a/dokuwiki/lib/plugins/doodle/syntax.php b/dokuwiki/lib/plugins/doodle/syntax.php
index 773d90bb..1749497b 100755
--- a/dokuwiki/lib/plugins/doodle/syntax.php
+++ b/dokuwiki/lib/plugins/doodle/syntax.php
@@ -295,11 +295,11 @@ function render($mode, Doku_Renderer $renderer, $data) {
if (in_array($col, $userData['choices'])) {
$timeLoc = strftime($conf['dformat'], $userData['time']);
// localized time of vote
$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>';
+ '<td class="data_data"
style="background-color:#AFA"><img
src="'.DOKU_BASE.'lib/images/success.png"
title="'.$timeLoc.'"></td>';
$this->template['count']["$col"]++;
} else {
$this->template['doodleData']["$fullname"]['choice'][$col] =
- '<div class="data_data"
style="background-color:#FCC"> </div>';
+ '<td class="data_data"
style="background-color:#FCC"> </td>';
}
}
}
@@ -503,8 +503,8 @@ function getInputTR() {
$c = count($this->choices);
$TR = '';
//$TR .= '<tr style="height:3px"><th
colspan="'.($c+1).'"></th></tr>';
- $TR .= '<div class="input_row" style="grid-template-columns: 2fr
repeat('. $c . ', 1fr)">';
- $TR .= '<div class="input_caption">';
+ $TR .= '<tr class="input_row" style="grid-template-columns: 2fr
repeat('. $c . ', 1fr)">';
+ $TR .= '<td class="input_caption">';
if ($fullname) {
if ($editMode) $TR .= $this->getLang('edit').': ';
$TR .= $_SERVER['REMOTE_USER'];
@@ -512,14 +512,14 @@ function getInputTR() {
} else {
$TR .= '<input type="text" name="fullname"
value="">';
}
- $TR .='</div>';
+ $TR .='</td>';
for($col = 0; $col < $c; $col++) {
$selected = '';
if ($editMode && in_array($col,
$this->template['editEntry']['selected_indexes']) ) {
$selected = 'checked="checked"';
}
- $TR .= '<div class="input_data">';
+ $TR .= '<td class="input_data">';
if ($this->params['voteType'] == 'multi') {
$inputType = "checkbox";
@@ -528,20 +528,20 @@ function getInputTR() {
}
$TR .= '<input type="'.$inputType.'"
name="selected_indexes[]" value="'.$col.'"';
$TR .= $selected.">";
- $TR .= '</div>';
+ $TR .= '</td>';
}
- $TR .= '</div>';
- $TR .= '<div class="input_row">';
- $TR .= ' <div class="input_caption" style="grid-column: 1 /
'.($c+2).'" class="centeralign">';
+ $TR .= '</td>';
+ $TR .= '<td class="input_row">';
+ $TR .= ' <td 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 .= ' </div>';
- $TR .= '</div>';
+ $TR .= ' </td>';
+ $TR .= '</td>';
return $TR;
}