Fixed: overflowing tables on small screens (#3819)

* fix

* overflow-x

* a better fix, that fix all tables

* Revert "a better fix, that fix all tables"

This reverts commit 3bc9447347.

* user list table with wrapper

* scrolling table: extension table
This commit is contained in:
maTh
2021-09-03 08:35:44 +02:00
committed by GitHub
parent be61a3f771
commit 9aed5ef48f
4 changed files with 66 additions and 56 deletions

View File

@@ -34,35 +34,37 @@
<?php if (!empty($this->available_extensions)) { ?>
<h2><?= _t('admin.extensions.community') ?></h2>
<table>
<tr>
<th><?= _t('admin.extensions.name') ?></th>
<th><?= _t('admin.extensions.version') ?></th>
<th><?= _t('admin.extensions.author') ?></th>
<th><?= _t('admin.extensions.description') ?></th>
</tr>
<?php foreach ($this->available_extensions as $ext) { ?>
<div class="table-wrapper">
<table>
<tr>
<td><a href="<?= $ext['url'] ?>" target="_blank"><?= $ext['name'] ?></a></td>
<td><?= $ext['version'] ?></td>
<td><?= $ext['author'] ?></td>
<td>
<?= $ext['description'] ?>
<?php if (isset($this->extensions_installed[$ext['name']])) { ?>
<?php if (version_compare($this->extensions_installed[$ext['name']], $ext['version']) >= 0) { ?>
<span class="alert alert-success">
<?= _t('admin.extensions.latest') ?>
</span>
<?php } elseif ($this->extensions_installed[$ext['name']] != $ext['version']) { ?>
<span class="alert alert-warn">
<?= _t('admin.extensions.update') ?>
</span>
<?php } ?>
<?php } ?>
</td>
<th><?= _t('admin.extensions.name') ?></th>
<th><?= _t('admin.extensions.version') ?></th>
<th><?= _t('admin.extensions.author') ?></th>
<th><?= _t('admin.extensions.description') ?></th>
</tr>
<?php } ?>
</table>
<?php foreach ($this->available_extensions as $ext) { ?>
<tr>
<td><a href="<?= $ext['url'] ?>" target="_blank"><?= $ext['name'] ?></a></td>
<td><?= $ext['version'] ?></td>
<td><?= $ext['author'] ?></td>
<td>
<?= $ext['description'] ?>
<?php if (isset($this->extensions_installed[$ext['name']])) { ?>
<?php if (version_compare($this->extensions_installed[$ext['name']], $ext['version']) >= 0) { ?>
<span class="alert alert-success">
<?= _t('admin.extensions.latest') ?>
</span>
<?php } elseif ($this->extensions_installed[$ext['name']] != $ext['version']) { ?>
<span class="alert alert-warn">
<?= _t('admin.extensions.update') ?>
</span>
<?php } ?>
<?php } ?>
</td>
</tr>
<?php } ?>
</table>
</div>
<?php } ?>
</div>

View File

@@ -74,34 +74,36 @@
</form>
<legend><?= _t('admin.user.list'); ?></legend>
<table id="user-list">
<thead>
<tr>
<th><?= _t('admin.user.username') ?></th>
<th><?= _t('admin.user.enabled') ?></th>
<th><?= _t('admin.user.is_admin') ?></th>
<th><?= _t('admin.user.email') ?></th>
<th><?= _t('admin.user.language') ?></th>
<th><?= _t('admin.user.feed_count') ?></th>
<th><?= _t('admin.user.article_count') ?></th>
<th><?= _t('admin.user.database_size') ?></th>
<th><?= _t('admin.user.last_user_activity') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($this->users as $username => $values) : ?>
<tr <?= $values['is_default'] ? 'class="default-user"' : '' ?>>
<td><a href="<?= _url('user', 'details', 'username', $username) ?>"><?= $username ?></a></td>
<td><?= $values['enabled'] ? '✔' : ' ' ?></td>
<td><?= $values['is_admin'] ? '✔' : ' ' ?></td>
<td><?= $values['mail_login'] ?></td>
<td><?= _t("gen.lang.{$values['language']}") ?></td>
<td><?= format_number($values['feed_count']) ?></td>
<td><?= format_number($values['article_count']) ?></td>
<td><?= format_bytes($values['database_size']) ?></td>
<td><?= $values['last_user_activity'] ?></td>
<div class="table-wrapper">
<table id="user-list">
<thead>
<tr>
<th><?= _t('admin.user.username') ?></th>
<th><?= _t('admin.user.enabled') ?></th>
<th><?= _t('admin.user.is_admin') ?></th>
<th><?= _t('admin.user.email') ?></th>
<th><?= _t('admin.user.language') ?></th>
<th><?= _t('admin.user.feed_count') ?></th>
<th><?= _t('admin.user.article_count') ?></th>
<th><?= _t('admin.user.database_size') ?></th>
<th><?= _t('admin.user.last_user_activity') ?></th>
</tr>
<?php endforeach ?>
</tbody>
</table>
</thead>
<tbody>
<?php foreach ($this->users as $username => $values) : ?>
<tr <?= $values['is_default'] ? 'class="default-user"' : '' ?>>
<td><a href="<?= _url('user', 'details', 'username', $username) ?>"><?= $username ?></a></td>
<td><?= $values['enabled'] ? '✔' : ' ' ?></td>
<td><?= $values['is_admin'] ? '✔' : ' ' ?></td>
<td><?= $values['mail_login'] ?></td>
<td><?= _t("gen.lang.{$values['language']}") ?></td>
<td><?= format_number($values['feed_count']) ?></td>
<td><?= format_number($values['article_count']) ?></td>
<td><?= format_bytes($values['database_size']) ?></td>
<td><?= $values['last_user_activity'] ?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
</div>

View File

@@ -173,6 +173,10 @@ button.as-link[disabled] {
}
/*=== Tables */
.table-wrapper {
overflow-x: auto;
}
table {
max-width: 100%;
}
@@ -208,6 +212,7 @@ td.numeric {
.form-group .group-controls {
min-width: 250px;
margin: 0 0 0 220px;
overflow-x: auto;
}
.form-group .group-controls .control {

View File

@@ -208,6 +208,7 @@ td.numeric {
.form-group .group-controls {
min-width: 250px;
margin: 0 220px 0 0;
overflow-x: auto;
}
.form-group .group-controls .control {