Author: Derick Rethans (derickr)
Date: 2025-08-28T18:48:12+01:00
Commit:
https://github.com/php/web-wiki/commit/17a77a7f9425daf7eebbf00cf13763380f64b506
Raw diff:
https://github.com/php/web-wiki/commit/17a77a7f9425daf7eebbf00cf13763380f64b506.diff
Use CSS grid instead of tables to have a better dynamic layout for doodle polls
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 6c7a4595..0a6adc51 100755
--- a/dokuwiki/lib/plugins/doodle/doodle_template.php
+++ b/dokuwiki/lib/plugins/doodle/doodle_template.php
@@ -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>
diff --git a/dokuwiki/lib/plugins/doodle/style.css
b/dokuwiki/lib/plugins/doodle/style.css
index 0db25ee3..678e02b8 100644
--- a/dokuwiki/lib/plugins/doodle/style.css
+++ b/dokuwiki/lib/plugins/doodle/style.css
@@ -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;
+}
diff --git a/dokuwiki/lib/plugins/doodle/syntax.php
b/dokuwiki/lib/plugins/doodle/syntax.php
index 74632115..773d90bb 100755
--- a/dokuwiki/lib/plugins/doodle/syntax.php
+++ b/dokuwiki/lib/plugins/doodle/syntax.php
@@ -294,13 +294,13 @@ 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]
=
- '<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"> </td>';
- }
+ $this->template['doodleData']["$fullname"]['choice'][$col]
=
+ '<div class="data_data"
style="background-color:#FCC"> </div>';
+ }
}
}
@@ -503,8 +503,8 @@ function getInputTR() {
$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').': ';
$TR .= $_SERVER['REMOTE_USER'];
@@ -512,15 +512,15 @@ function getInputTR() {
} 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 @@ function getInputTR() {
}
$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;
}
