From: Michael Tremer <michael.tremer@ipfire.org>
Date: Sat, 23 Mar 2024 19:09:16 +0000 (+0100)
Subject: web: Introduce sections
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=4d52940cfcc4fbf814562c98bb408dbacaa5d44b;p=people%2Fms%2Fipfire-2.x.git

web: Introduce sections

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/config/cfgroot/header.pl b/config/cfgroot/header.pl
index aac64193f..b5acbfd68 100644
--- a/config/cfgroot/header.pl
+++ b/config/cfgroot/header.pl
@@ -333,6 +333,24 @@ sub openbigbox {
 sub closebigbox {
 }
 
+# Sections
+
+sub opensection($) {
+	my $title = shift;
+
+	# Open the section
+	print "<section class=\"section\">";
+
+	# Show the title if set
+	if ($title) {
+		print "	<h2 class=\"title\">${title}</h2>\n";
+	}
+}
+
+sub closesection() {
+	print "</section>";
+}
+
 ###############################################################################
 #
 # print box opening html layout
@@ -346,7 +364,7 @@ sub openbox {
 
 	my $title = shift;
 
-	print "<div class=\"box\">\n";
+	print "<section class=\"section is-box\">\n";
 
 	# Show the title
 	if ($title) {
@@ -358,7 +376,7 @@ sub openbox {
 #
 # print box closing html layout
 sub closebox {
-	print "</div>";
+	print "</section>";
 }
 
 sub green_used() {
diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 82ee9dd22..edf75c50e 100644
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -184,13 +184,16 @@ iframe {
 	border-radius: 3px 3px 3px 3px;
 }
 
-.box {
-	border: 1px solid var(--color-grey);
-	padding: 0.75rem 1rem;
+section {
 	margin-bottom: 2rem;
 }
 
-.box .title {
+section.is-box {
+	padding: 0.75rem 1rem;
+	border: 1px solid var(--color-grey);
+}
+
+section .title {
 	margin-bottom: 1rem;
 	border-bottom: 1px solid var(--color-grey);
 }