mobile/summary: more UI fine tuning

Creating more space for the header column and a little visual separation for
the different sections.

The commit is much smaller than it looks - try 'git show -w'.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 19 insertions, 12 deletions

diff --git a/mobile-widgets/qml/DiveSummary.qml b/mobile-widgets/qml/DiveSummary.qml
index 8c390c8a2..bf206cc3e 100644
--- a/mobile-widgets/qml/DiveSummary.qml
+++ b/mobile-widgets/qml/DiveSummary.qml
@@ -110,13 +110,13 @@ Kirigami.ScrollablePage {
 			Row {
 				height: headerLabel.height + Kirigami.Units.largeSpacing
 				Rectangle {
-					width: Kirigami.Units.gridUnit * 2
+					width: Kirigami.Units.gridUnit
 					height: parent.height
 					color: "transparent"
 				}
 				Rectangle {
 					color: index & 1 ? subsurfaceTheme.backgroundColor : subsurfaceTheme.lightPrimaryColor
-					width: headerColumnWidth
+					width: headerColumnWidth + Kirigami.Units.gridUnit
 					height: headerLabel.height + Kirigami.Units.largeSpacing
 					Label {
 						id: headerLabel
@@ -152,16 +152,23 @@ Kirigami.ScrollablePage {
 
 		Component {
 			id: sectionDelegate
-			Rectangle {
-				width: headerColumnWidth * 3 - Kirigami.Units.gridUnit * 2
-				height: sectionLabel.height + Kirigami.Units.largeSpacing
-				Label {
-					id: sectionLabel
-					anchors.verticalCenter: parent.verticalCenter
-					leftPadding: Kirigami.Units.largeSpacing
-					color: subsurfaceTheme.textColor
-					text: section
-					font.bold: true
+			Column {
+				Rectangle {
+					width: headerColumnWidth * 3 - Kirigami.Units.gridUnit * 2
+					height: Kirigami.Units.largeSpacing
+					color: subsurfaceTheme.backgroundColor
+				}
+				Rectangle {
+					width: headerColumnWidth * 3 - Kirigami.Units.gridUnit * 2
+					height: sectionLabel.height + Kirigami.Units.largeSpacing
+					Label {
+						id: sectionLabel
+						anchors.verticalCenter: parent.verticalCenter
+						leftPadding: Kirigami.Units.largeSpacing
+						color: subsurfaceTheme.textColor
+						text: section
+						font.bold: true
+					}
 				}
 			}
 		}