Fix #1470 - responsive tables for home page blocks

6 files changed, 23 insertions, 18 deletions

diff --git a/resources/views/blocks/research-tasks.php b/resources/views/blocks/research-tasks.php
index b38381186f..a467942c69 100644
--- a/resources/views/blocks/research-tasks.php
+++ b/resources/views/blocks/research-tasks.php
@@ -1,16 +1,16 @@
 <?php use Fisharebest\Webtrees\Html; ?>
 <?php use Fisharebest\Webtrees\I18N; ?>
 
-<table class="table table-bordered table-sm table-responsive datatables table-research-task"  data-columns="[null, null, null, null]" data-info="false" data-paging="false" data-searching="false" data-state-save="true">
+<table class="table table-bordered table-sm datatables table-research-task table-responsive" data-columns="[null, null, null, null]" data-info="false" data-paging="false" data-searching="false" data-state-save="true">
 	<thead>
 		<tr>
-			<th>
+			<th class="d-none d-md-table-cell wt-side-block-optional">
 				<?= I18N::translate('Date') ?>
 			</th>
 			<th>
 				<?= I18N::translate('Record') ?>
 			</th>
-			<th>
+			<th class="d-none d-md-table-cell wt-side-block-optional">
 				<?= I18N::translate('Username') ?>
 			</th>
 			<th>
@@ -22,7 +22,7 @@
 	<tbody>
 		<?php foreach ($tasks as $task): ?>
 			<tr>
-				<td data-sort="<?= $task->getDate()->julianDay() ?>">
+				<td data-sort="<?= $task->getDate()->julianDay() ?>" class="d-none d-md-table-cell wt-side-block-optional">
 					<?= $task->getDate()->display() ?>
 				</td>
 				<td data-sort="<?= Html::escape($task->getParent()->getSortName()) ?>">
@@ -30,7 +30,7 @@
 						<?= $task->getParent()->getFullName() ?>
 					</a>
 				</td>
-				<td>
+				<td class="d-none d-md-table-cell wt-side-block-optional">
 					<?= Html::escape($task->getAttribute('_WT_USER')) ?>
 				</td>
 				<td dir="auto">
diff --git a/resources/views/blocks/template.php b/resources/views/blocks/template.php
index 44aa117bea..9d84aad1d1 100644
--- a/resources/views/blocks/template.php
+++ b/resources/views/blocks/template.php
@@ -9,7 +9,7 @@
 		<?php endif ?>
 		<?= Html::escape($title) ?>
 	</div>
-	<div class="card-body wt-block-content wt-block-content table-responsive-<?= Html::escape($block) ?>">
+	<div class="card-body wt-block-content wt-block-content-<?= Html::escape($block) ?>">
 		<?= $content ?>
 	</div>
 </div>
diff --git a/resources/views/home-page.php b/resources/views/home-page.php
index 16986e1fe0..83ccf89458 100644
--- a/resources/views/home-page.php
+++ b/resources/views/home-page.php
@@ -2,7 +2,7 @@
 
 <div class="row">
 	<?php if (empty($main_blocks) || empty($side_blocks)): ?>
-		<div class="col-sm-12 wt-main-blocks">
+		<div class="col-md-12 wt-main-blocks">
 			<?php foreach ($main_blocks + $side_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
@@ -13,7 +13,7 @@
 			<?php endforeach ?>
 		</div>
 	<?php else: ?>
-		<div class="col-sm-8 wt-main-blocks">
+		<div class="col-md-8 wt-main-blocks">
 			<?php foreach ($main_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
@@ -23,7 +23,7 @@
 				<?php endif ?>
 			<?php endforeach ?>
 		</div>
-		<div class="col-sm-4 wt-side-blocks">
+		<div class="col-md-4 wt-side-blocks">
 			<?php foreach ($side_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
diff --git a/resources/views/layouts/default.php b/resources/views/layouts/default.php
index 192af8bfc0..62195d73ac 100644
--- a/resources/views/layouts/default.php
+++ b/resources/views/layouts/default.php
@@ -6,6 +6,13 @@
 	<?= $theme_head ?>
 	<?= $theme_body_header ?>
 
+	<div class="alert alert-danger">
+		<div class="d-sm-none">XS</div>
+		<div class="d-none d-sm-block d-md-none">SM</div>
+		<div class="d-none d-md-block d-lg-none">MD</div>
+		<div class="d-none d-lg-block d-xl-none">LG</div>
+		<div class="d-none d-xl-block">XL</div>
+	</div>
 			<?= $content ?>
 
 		<?= $theme_footer_container ?>
@@ -28,7 +35,7 @@
 
 	</body>
 </html>
-<!-- webtrees: <?= WT_VERSION ?> -->' .
+<!-- webtrees: <?= WT_VERSION ?> -->
 <!-- Execution time: <?= I18N::number(microtime(true) - WT_START_TIME, 3) ?> seconds -->
 <!-- Memory: <?= I18N::number(memory_get_peak_usage(true) / 1024) ?> KB -->
 <!-- SQL queries: <?= I18N::number(Database::getQueryCount()) ?> -->
diff --git a/resources/views/my-page.php b/resources/views/my-page.php
index 285596898f..8f7800299f 100644
--- a/resources/views/my-page.php
+++ b/resources/views/my-page.php
@@ -6,7 +6,7 @@
 
 <div class="row">
 	<?php if (empty($main_blocks) || empty($side_blocks)): ?>
-		<div class="col-sm-12 wt-main-blocks">
+		<div class="col-md-12 wt-main-blocks">
 			<?php foreach ($main_blocks + $side_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
@@ -17,7 +17,7 @@
 			<?php endforeach ?>
 		</div>
 	<?php else: ?>
-		<div class="col-sm-8 wt-main-blocks">
+		<div class="col-md-8 wt-main-blocks">
 			<?php foreach ($main_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
@@ -27,7 +27,7 @@
 				<?php endif ?>
 			<?php endforeach ?>
 		</div>
-		<div class="col-sm-4 wt-side-blocks">
+		<div class="col-md-4 wt-side-blocks">
 			<?php foreach ($side_blocks as $block_id => $block): ?>
 				<?php if ($block->loadAjax()): ?>
 					<div class="wt-ajax-load" data-ajax-url="<?= Html::escape(Html::url('index.php', ['ctype' => 'gedcom', 'block_id' => $block_id, 'ajax' => 1])) ?>">
diff --git a/themes/_common/css-2.0.0/style.css b/themes/_common/css-2.0.0/style.css
index e726819798..be1ffccd47 100755
--- a/themes/_common/css-2.0.0/style.css
+++ b/themes/_common/css-2.0.0/style.css
@@ -178,11 +178,9 @@
  * +---wt-block-content, wt-block-content-XXX
  */
 
- /* fix problem with upcoming events on right side of screen */
-.wt-block .table-responsive,  .wt-block .table-responsive-upcoming-events {
-	display: block;
-	width: 100%;
-	overflow-x: auto!important;
+ /* Some blocks show a reduced version on the right-hand side. */
+.wt-side-blocks .wt-side-block-optional {
+	display: none !important;
 }
 
  /* my page chart enhancements */