Start using as many layouts as possible for card

1 files changed, 111 insertions, 134 deletions

diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml
index 1f87668..729fb71 100644
--- a/CardGrid.ui.qml
+++ b/CardGrid.ui.qml
@@ -1,27 +1,30 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 
 Item {
-	property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+	property string imageSource: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
 	readonly property color allLevelsColor: "#ff6f42c1"
 	readonly property color beginnerColor: "#ff0cbc87"
 	readonly property color intermediateColor: "#ff17a2b8"
 	readonly property color allLevelsBackgroundColor: "#1a6f42c1"
 	readonly property color beginnerBackgroundColor: "#1a0cbc87"
 	readonly property color intermediateBackgroundColor: "#1a17a2b8"
-	property string badgeText: "Beginner"
-	property color badgeColor: "#ff0cbc87"
-	property color badgeBackgroundColor: "#1a0cbc87"
-	property string titleText: "Sketch from A to Z: for app designer"
+	property string badgeText: "All level"
+	property color badgeColor: "#ff6f42c1"
+	property color badgeBackgroundColor: "#1a6f42c1"
+	property string titleText: "Build Responsive Websites with HTML"
 	property alias imageArea: imageArea
 	property alias titleArea: titleArea
-//	property string textTruncateText: "Rooms oh fully taken by worse do. Points afraid but may end afraid but.."
+	property string textTruncateText: "Far advanced settling say finished raillery. Offered chiefly farther"
 	property bool doesntEmbed: Qt.platform.os === "android"
 				|| Qt.platform.os === "linux"
 				|| Qt.platform.os === "osx"
 				|| Qt.platform.os === "unix"
 				|| Qt.platform.os === "windows"
+	width: 301
+	height: 451
 
 	DropShadow {
 		source: rectangle
@@ -42,156 +45,130 @@ Item {
 			bottom: parent.bottom
 		}
 
-		Image {
-			id: image
-			source: imageSource
-			sourceSize {
-				width: parent.width
-				height: parent.width * 3 / 4
-			}
-			anchors.top: parent.top
-			layer.enabled: true
-			layer.effect: OpacityMask {
-				maskSource: Rectangle {
-					width: image.width
-					height: image.height
-					radius: 10
+		ColumnLayout {
+			anchors.fill: parent
+
+			Image {
+				id: image
+				source: imageSource
+				Layout.fillWidth: true
+				sourceSize.height: width * 3 / 4
+				layer.enabled: true
+				layer.effect: OpacityMask {
+					maskSource: Rectangle {
+						width: image.width
+						height: image.height
+						radius: 10
+					}
 				}
-			}
 
-			MouseArea {
-				id: imageArea
-				anchors.fill: parent
-			}
-		}
-
-		Item {
-			id: body
-			width: parent.width
-			anchors {
-				top: image.bottom
-				bottom: footer.top
-			}
-
-			Item {
-				id: badgeAndFavorite
-				height: body.height / 6
-				anchors {
-					top: parent.top
-					topMargin: 16
-					left: parent.left
-					leftMargin: 20
-					right: parent.right
-					rightMargin: 20
+				MouseArea {
+					id: imageArea
+					anchors.fill: parent
 				}
+			}
 
-				Rectangle {
-					id: badge
-					color: badgeBackgroundColor
-					implicitWidth: badgeLabel.width + 18
-					implicitHeight: badgeLabel.height + 6
-					radius: 6
-					anchors {
-						left: parent.left
-						verticalCenter: parent.verticalCenter
-					}
+			ColumnLayout {
+				id: body
+				Layout.topMargin: 16
+				Layout.rightMargin: 20
+				Layout.leftMargin: 20
+
+				Item {
+					id: badgeAndFavorite
+					height: body.height / 6
+					Layout.fillWidth: true
+					Layout.bottomMargin: 8
+
+					Rectangle {
+						id: badge
+						color: badgeBackgroundColor
+						implicitWidth: badgeLabel
+							.width + 18
+						implicitHeight: badgeLabel
+							.height + 6
+						radius: 6
+						anchors {
+							left: parent.left
+							verticalCenter: parent
+								.verticalCenter
+						}
 
-					FontLoader {
-						id: roboto
-						source: doesntEmbed ? ""
-						: "Roboto/Roboto-Regular.ttf"
-					}
+						FontLoader {
+							id: roboto
+							source: doesntEmbed ? ""
+							: "Roboto/Roboto-Regular.ttf"
+						}
 
-					Label {
-						id: badgeLabel
-						text: badgeText
-						color: badgeColor
-						font {
-							family: doesntEmbed
+						Label {
+							id: badgeLabel
+							text: badgeText
+							color: badgeColor
+							font {
+								family: doesntEmbed
 								? "Roboto"
 								: roboto.name
-							pixelSize: 13
+								pixelSize: 13
+							}
+							anchors.centerIn: parent
 						}
-						anchors.centerIn: parent
 					}
-				}
 
-				Image {
-					id: favorite
-					source: "Font-Awesome/svgs/solid/heart.svg"
-					sourceSize {
-						height: parent.height / 1.5
-					}
-					anchors {
-						right: parent.right
-						verticalCenter: parent.verticalCenter
+					Image {
+						id: favorite
+						source: "Font-Awesome/svgs/solid/heart.svg"
+						sourceSize {
+							width: 15
+							height: 15
+						}
+						anchors {
+							right: parent.right
+							verticalCenter: parent
+								.verticalCenter
+						}
 					}
 				}
 
-			}
+				FontLoader {
+					id: heebo
+					source: "Heebo/Heebo-Bold.ttf"
+				}
 
-			FontLoader {
-				id: heebo
-				name: "Heebo"
-				source: "Heebo/Heebo-Bold.ttf"
-			}
+				Label {
+					id: title
+					text: titleText
+					wrapMode: Text.Wrap
+					Layout.fillWidth: true
+					font {
+						family: heebo.name
+						pixelSize: 21
+					}
 
-			Label {
-				id: title
-				width: parent.width
-				text: titleText
-				wrapMode: Text.Wrap
-				font {
-					family: heebo.name
-					pixelSize: 21
-				}
-				anchors {
-					top: badgeAndFavorite.bottom
-					topMargin: 8
-					left: parent.left
-					leftMargin: 20
-					right: parent.right
-					rightMargin: 20
+					MouseArea {
+						id: titleArea
+						anchors.fill: parent
+					}
 				}
 
-				MouseArea {
-					id: titleArea
-					anchors.fill: parent
-				}
-			}
-/*
-			Label {
-				id: textTruncate
-				text: textTruncateText
-				wrapMode: Text.Wrap
-				font {
-					weight: Font.Light
-					pointSize: 14
+				Label {
+					id: textTruncate
+					text: textTruncateText
+					wrapMode: Text.Wrap
+					Layout.fillWidth: true
+					font {
+						weight: Font.Light
+						pointSize: 14
+					}
 				}
-			}
-*/
-			Item {
-				id: listInline
-				height: badgeAndFavorite.height
-				anchors {
-					top: title.bottom
-					topMargin: 8
-					left: parent.left
-					leftMargin: 20
-					right: parent.right
-					rightMargin: 20
+
+				RowLayout {
+					id: listInline
 				}
 			}
-		}
 
-		Item {
-			id: footer
-			width: parent.width
-			height: (parent.height - image.sourceSize.height) / 3
-			anchors.bottom: parent.bottom
+			RowLayout {
+				id: footer
+			}
 		}
 	}
-
-	width: 323.9
-	height: 446.583
 }