Improved: better semantic HTML for boxes (#4665)

* add h1 title on views

* add h2 titles into box-title

* thin scrollbar in box-content

app/views/configure/queries.phtml

@@ -10,13 +10,13 @@
 
 	<form method="post" action="<?= _url('configure', 'queries') ?>" class="draggableList">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
-		<h2><?= _t('conf.query') ?></h2>
+		<h1><?= _t('conf.query') ?></h1>
 
 		<?php foreach ($this->queries as $key => $query) { ?>
 		<div class="form-group" id="query-group-<?= $key ?>" draggable="true">
 			<div class="box">
 				<div class="box-title">
-					<a class="configure open-slider" href="<?= _url('configure', 'query', 'id', '' . $key) ?>"><?= _i('configure') ?></a><?= $query->getName() ?>
+					<a class="configure open-slider" href="<?= _url('configure', 'query', 'id', '' . $key) ?>"><?= _i('configure') ?></a><h2><?= $query->getName() ?></h2>
 					<input type="hidden" id="queries_<?= $key ?>_name" name="queries[<?= $key ?>][name]" value="<?= $query->getName() ?>"/>
 					<input type="hidden" id="queries_<?= $key ?>_url" name="queries[<?= $key ?>][url]" value="<?= $query->getUrl() ?>"/>
 					<input type="hidden" id="queries_<?= $key ?>_search" name="queries[<?= $key ?>][search]" value="<?= urlencode($query->getSearch()) ?>"/>
@@ -37,7 +37,7 @@
 					</div>
 				</div>
 				<?php } else { ?>
-					<ul class="box-content">
+					<ul class="box-content scrollbar-thin">
 					<?php if ($query->hasSearch()) { ?>
 					<li class="item"><?= _t('conf.query.search', htmlspecialchars($query->getSearch()->getRawInput(), ENT_NOQUOTES, 'UTF-8')) ?></li>
 					<?php } ?>

app/views/index/global.phtml

@@ -14,6 +14,7 @@
 ?>
 
 <main id="stream" class="global<?= $class ?>">
+	<h1 class="title_hidden"><?= _t('conf.reading.view.global') ?></h1>
 <?php
 	$params = $_GET;
 	unset($params['c']);
@@ -35,9 +36,9 @@
 ?>
 	<div class="box category" data-unread="<?= $cat->nbNotRead() ?>">
 		<div class="box-title"><a class="title" data-unread="<?= format_number($cat->nbNotRead()) ?>"
-			href="<?= Minz_Url::display($url_base) ?>"><?= $cat->name() ?></a></div>
+			href="<?= Minz_Url::display($url_base) ?>"><h2><?= $cat->name() ?></h2></a></div>
 
-		<ul class="box-content">
+		<ul class="box-content scrollbar-thin">
 			<?php
 				foreach ($feeds as $feed) {
 					$nb_not_read = $feed->nbNotRead();

app/views/index/normal.phtml

@@ -19,6 +19,7 @@ $today = @strtotime('today');
 ?>
 
 <main id="stream" class="normal<?= $hidePosts ? ' hide_posts' : '' ?>">
+	<h1 class="title_hidden"><?= _t('conf.reading.view.normal') ?></h1>
 	<div id="new-article">
 		<a href="<?= Minz_Url::display(Minz_Request::currentRequest()) ?>"><?= _t('gen.js.new_article'); /* TODO: move string in JS*/ ?></a>
 	</div><?php

app/views/index/reader.phtml

@@ -12,7 +12,7 @@ $content_width = FreshRSS_Context::$user_conf->content_width;
 $MAX_TAGS_DISPLAYED = FreshRSS_Context::$user_conf->show_tags_max;
 ?>
 <main id="stream" class="reader">
-
+	<h1 class="title_hidden"><?= _t('conf.reading.view.reader') ?></h1>
 	<div id="new-article">
 		<a href="<?= Minz_Url::display(Minz_Request::currentRequest()) ?>"><?= _t('gen.js.new_article'); /* TODO: move string in JS*/ ?></a>
 	</div><?php

app/views/stats/idle.phtml

@@ -21,8 +21,8 @@
 				$nothing = false;
 	?>
 	<div class="box">
-		<div class="box-title"><?= _t('gen.date.' . $period) ?></div>
-			<ul class="box-content">
+		<div class="box-title"><h2><?= _t('gen.date.' . $period) ?></h2></div>
+			<ul class="box-content scrollbar-thin">
 				<?php
 					foreach ($feedsInPeriod as $feedInPeriod) {
 						$feed = $this->feeds[$feedInPeriod['id']] ?? null;

app/views/subscription/index.phtml

@@ -35,10 +35,10 @@
 		<div class="box">
 			<div class="box-title">
 				<a class="configure open-slider" href="<?= _url('subscription', 'category', 'id', $cat->id()) ?>" data-cat-position="<?= $cat->attributes('position') ?>"><?= _i('configure') ?></a>
-				<?= $cat->name() ?>
+				<h2><?= $cat->name() ?></h2>
 				<?php if ($cat->kind() == FreshRSS_Category::KIND_DYNAMIC_OPML) { echo _i('opml-dyn'); } ?>
 			</div>
-			<ul class="box-content drop-zone" dropzone="move" data-cat-id="<?= $cat->id() ?>">
+			<ul class="box-content drop-zone scrollbar-thin" dropzone="move" data-cat-id="<?= $cat->id() ?>">
 				<?php
 				if (!empty($feeds)) {
 					foreach ($feeds as $feed) {
@@ -82,7 +82,7 @@
 
 		<div class="box visible-semi">
 			<div class="box-title">
-				✚ <a href="<?= _url('subscription', 'add') ?>"><?= _t('sub.category.add') ?></a>
+				✚ <a href="<?= _url('subscription', 'add') ?>"><h2><?= _t('sub.category.add') ?></h2></a>
 			</div>
 			<div class="box-content">
 			</div>

p/themes/base-theme/frss.css

@@ -102,6 +102,10 @@ h3 {
 	line-height: 1.5;
 }
 
+.title_hidden {
+	display: none;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -795,6 +799,10 @@ input[type="checkbox"]:focus-visible {
 
 .box .box-title {
 	position: relative;
+}
+
+.box .box-title h2 {
+	display: inline;
 	font-size: 1.2rem;
 	font-weight: bold;
 }

p/themes/base-theme/frss.rtl.css

@@ -102,6 +102,10 @@ h3 {
 	line-height: 1.5;
 }
 
+.title_hidden {
+	display: none;
+}
+
 /*=== Paragraphs */
 p {
 	margin: 1rem 0 0.5rem;
@@ -795,6 +799,10 @@ input[type="checkbox"]:focus-visible {
 
 .box .box-title {
 	position: relative;
+}
+
+.box .box-title h2 {
+	display: inline;
 	font-size: 1.2rem;
 	font-weight: bold;
 }