Detail view uses detail card instead of grid

2 files changed, 62 insertions, 1 deletions

diff --git a/ClassicDetailScrollView.ui.qml b/ClassicDetailScrollView.ui.qml
index 17ffe2e..02a91d7 100644
--- a/ClassicDetailScrollView.ui.qml
+++ b/ClassicDetailScrollView.ui.qml
@@ -4,7 +4,7 @@ import QtQuick.Controls 2.15
 ScrollView {
 	property string cardImageSource
 
-	GridCardItem {
+	DetailCardItem {
 		anchors.fill: parent
 		imageSource: cardImageSource
 	}
diff --git a/DetailCardItem.ui.qml b/DetailCardItem.ui.qml
new file mode 100644
index 0000000..f2f6ca5
--- /dev/null
+++ b/DetailCardItem.ui.qml
@@ -0,0 +1,61 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtGraphicalEffects 1.15
+
+Item {
+	property string imageSource: "Darapsa.svg"
+
+	DropShadow {
+		source: rectangle
+		color: Qt.rgba(.113, .227, .325, .15)
+		anchors.fill: rectangle
+	}
+
+	Rectangle {
+		id: rectangle
+		radius: 10
+		anchors {
+			top: parent.top
+			topMargin: 25.6
+			left: parent.left
+			leftMargin: 12.8
+			right: parent.right
+			rightMargin: 12.8
+			bottom: parent.bottom
+		}
+
+		Image {
+			id: image
+			source: imageSource
+			sourceSize {
+				width: parent.width - 16
+				height: parent.width * 3 / 4
+			}
+			width: sourceSize.width
+			height: sourceSize.height
+			anchors {
+				top: parent.top
+				topMargin: 8
+				horizontalCenter: parent.horizontalCenter
+			}
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: image.width
+					height: image.height
+					radius: 10
+				}
+			}
+		}
+
+		Item {
+			id: body
+			width: parent.width
+			anchors {
+				top: image.bottom
+				bottom: parent.bottom
+			}
+
+		}
+	}
+}