QML UI: improve the dive list layout

Based on Davide's ideas, but with a few tweaks:
I really like the dive number on the far right; that gives a clean
consistent look. I tried it with date on the left and depth/duration in
the middle and liked the result.

This doesn't change the font, just addresses the layout and bold heading
vs smaller sub-heading.

See #427

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

1 files changed, 10 insertions, 28 deletions

diff --git a/mobile-widgets/qml/DiveList.qml b/mobile-widgets/qml/DiveList.qml
index da40bd248..dd5336f85 100644
--- a/mobile-widgets/qml/DiveList.qml
+++ b/mobile-widgets/qml/DiveList.qml
@@ -64,7 +64,7 @@ Kirigami.ScrollablePage {
 					Kirigami.Label {
 						id: locationText
 						text: dive.location
-						font.weight: Font.Light
+						font.weight: Font.Bold
 						elide: Text.ElideRight
 						maximumLineCount: 1 // needed for elide to work at all
 						color: textColor
@@ -72,49 +72,30 @@ Kirigami.ScrollablePage {
 							left: parent.left
 							leftMargin: horizontalPadding
 							top: parent.top
-							right: dateLabel.left
-						}
-					}
-					Kirigami.Label {
-						id: dateLabel
-						text: dive.date + " " + dive.time
-						font.pointSize: subsurfaceTheme.smallPointSize
-						color: textColor
-						anchors {
 							right: parent.right
-							top: parent.top
 						}
 					}
 					Row {
 						anchors {
-							left: parent.left
-							leftMargin: horizontalPadding
-							right: parent.right
-							rightMargin: horizontalPadding
+							left: locationText.left
+							top: locationText.bottom
 							topMargin: - Kirigami.Units.smallSpacing * 2
-							bottom: numberText.bottom
 						}
+
 						Kirigami.Label {
-							text: qsTr('Depth: ')
+							id: dateLabel
+							text: dive.date + " " + dive.time
+							width: Math.max(locationText.width * 0.45, paintedWidth) // helps vertical alignment throughout listview
 							font.pointSize: subsurfaceTheme.smallPointSize
 							color: textColor
 						}
+						// let's try to show the depth / duration very compact
 						Kirigami.Label {
-							text: dive.depth
+							text: dive.depth + ' / ' + dive.duration
 							width: Math.max(Kirigami.Units.gridUnit * 3, paintedWidth) // helps vertical alignment throughout listview
 							font.pointSize: subsurfaceTheme.smallPointSize
 							color: textColor
 						}
-						Kirigami.Label {
-							text: qsTr('Duration: ')
-							font.pointSize: subsurfaceTheme.smallPointSize
-							color: textColor
-						}
-						Kirigami.Label {
-							text: dive.duration
-							font.pointSize: subsurfaceTheme.smallPointSize
-							color: textColor
-						}
 					}
 					Kirigami.Label {
 						id: numberText
@@ -123,6 +104,7 @@ Kirigami.ScrollablePage {
 						color: textColor
 						anchors {
 							right: parent.right
+							rightMargin: horizontalPadding
 							top: locationText.bottom
 							topMargin: - Kirigami.Units.smallSpacing * 2
 						}