Anchors replace layout in card item

1 files changed, 152 insertions, 104 deletions

diff --git a/CardGrid.ui.qml b/CardGrid.ui.qml
index 4ec20f6..b9af4fa 100644
--- a/CardGrid.ui.qml
+++ b/CardGrid.ui.qml
@@ -23,8 +23,6 @@ Item {
 				|| Qt.platform.os === "osx"
 				|| Qt.platform.os === "unix"
 				|| Qt.platform.os === "windows"
-	width: 301
-	height: 451
 
 	DropShadow {
 		source: rectangle
@@ -38,136 +36,186 @@ Item {
 		id: rectangle
 		radius: 10
 		anchors {
-			top: parent.top
+			fill: parent
 			topMargin: 25.6
-			left: parent.left
 			leftMargin: 12.8
-			right: parent.right
 			rightMargin: 12.8
-			bottom: parent.bottom
 		}
 
-		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
-					}
+		Image {
+			id: image
+			anchors {
+				top: parent.top
+				left: parent.left
+				right: parent.right
+			}
+			source: imageSource
+			fillMode: Image.PreserveAspectFit
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: image.width
+					height: image.height
+					radius: 10
 				}
+			}
 
-				MouseArea {
-					id: imageArea
-					anchors.fill: parent
-				}
+			MouseArea {
+				id: imageArea
+				anchors.fill: parent
 			}
+		}
 
-			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
-
-					FontLoader {
-						id: roboto
-						source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
-					}
+		Rectangle {
+			height: 16
+			anchors {
+				left: parent.left
+				right: parent.right
+				bottom: image.bottom
+			}
+		}
 
-					Label {
-						id: badge
-						anchors {
-							left: parent.left
-							verticalCenter: parent.verticalCenter
-						}
-						topPadding: 4.463
-						leftPadding: 8.287
-						rightPadding: 8.287
-						bottomPadding: 4.463
-						text: badgeText
-						color: badgeColor
-						font {
-							family: doesntEmbed ? "Roboto" : roboto.name
-							pixelSize: 13
-						}
-						background: Rectangle {
-							color: badgeBackgroundColor
-							radius: 6
-						}
-					}
+		ColumnLayout {
+			id: body
+			anchors {
+				top: image.bottom
+				left: parent.left
+				leftMargin: 20
+				right: parent.right
+				rightMargin: 20
+				bottom: footer.top
+			}
 
-					Image {
-						id: favorite
-						source: "Font-Awesome/svgs/solid/heart.svg"
-						sourceSize {
-							width: 15
-							height: 15
-						}
-						anchors {
-							right: parent.right
-							verticalCenter: parent
-								.verticalCenter
-						}
-					}
-				}
+			Item {
+				id: badgeAndFavorite
+				height: badge.height
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
 
 				FontLoader {
-					id: heebo
-					source: "Heebo/Heebo-Bold.ttf"
+					id: roboto
+					source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
 				}
 
 				Label {
-					id: title
-					text: titleText
-					color: Qt.rgba(.141, .161, .176, 1.0)
-					wrapMode: Text.Wrap
-					Layout.fillWidth: true
-					Layout.bottomMargin: 8
+					id: badge
+					anchors.left: parent.left
+					topPadding: 4.463
+					leftPadding: 8.287
+					rightPadding: 8.287
+					bottomPadding: 4.463
+					text: badgeText
+					color: badgeColor
 					font {
-						family: heebo.name
-						pixelSize: 21
+						family: doesntEmbed ? "Roboto" : roboto.name
+						pixelSize: 13
 					}
-
-					MouseArea {
-						id: titleArea
-						anchors.fill: parent
+					background: Rectangle {
+						color: badgeBackgroundColor
+						radius: 6
 					}
 				}
 
-				Label {
-					id: textTruncate
-					text: textTruncateText
-					color: Qt.rgba(.455, .459, .475, 1.0)
-					wrapMode: Text.Wrap
-					Layout.fillWidth: true
-					Layout.bottomMargin: 8
-					font {
-						family: doesntEmbed ? "Roboto"
-							: roboto.name
-						pointSize: 14
+				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"
+			}
+
+			Label {
+				id: title
+				text: titleText
+				color: Qt.rgba(.141, .161, .176, 1.0)
+				wrapMode: Text.Wrap
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: heebo.name
+					pixelSize: 21
 				}
 
-				RowLayout {
-					id: listInline
+				MouseArea {
+					id: titleArea
+					anchors.fill: parent
+				}
+			}
+
+			Label {
+				id: textTruncate
+				text: textTruncateText
+				color: Qt.rgba(.455, .459, .475, 1.0)
+				wrapMode: Text.Wrap
+				Layout.fillWidth: true
+				Layout.bottomMargin: 8
+				font {
+					family: doesntEmbed ? "Roboto"
+						: roboto.name
+					pointSize: 14
 				}
 			}
 
 			RowLayout {
-				id: footer
+				id: listInline
+			}
+		}
+
+		ColumnLayout {
+			id: footer
+			anchors {
+				left: parent.left
+				leftMargin: 16
+				right: parent.right
+				rightMargin: 16
+				bottom: parent.bottom
+				bottomMargin: 16
+			}
+
+			Rectangle {
+				border {
+					color: "#449a9ea4"
+					width: .5
+				}
+				height: 1
+				Layout.fillWidth: true
+				Layout.topMargin: 16
+				Layout.bottomMargin: 16
+			}
+
+			Item {
+				Layout.fillWidth: true
+
+				Label {
+					id: duration
+					text: "15h 30m"
+					anchors {
+						top: parent.top
+						left: parent.left
+						bottom: parent.bottom
+					}
+				}
+
+				Label {
+					id: lectures
+					text: "68 lectures"
+					anchors {
+						top: parent.top
+						right: parent.right
+						bottom: parent.bottom
+					}
+				}
 			}
 		}
 	}