Change order completed UI to flickable

3 files changed, 52 insertions, 42 deletions

diff --git a/OrderCompletedColumnLayout.ui.qml b/OrderCompletedColumnLayout.ui.qml
deleted file mode 100644
index 4bf79fe..0000000
--- a/OrderCompletedColumnLayout.ui.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-
-ColumnLayout {
-	property string orderCompletedText: "673290789"
-	property alias orderCompletedButton: button
-
-	ColumnLayout {
-		Layout.topMargin: 96
-		Layout.leftMargin: 16
-		Layout.rightMargin: 16
-		Layout.bottomMargin: 96
-
-		Label {
-			text: qsTr("Your Order is Completed!")
-			font.pixelSize: 30
-			Layout.alignment: Qt.AlignHCenter
-			Layout.bottomMargin: 20
-		}
-
-		Label {
-			text: qsTr("Your order ") + orderCompletedText
-				+ qsTr(" has been completed. Your order details"
-				+ " are shown for your personal account.")
-			font.pixelSize: 16
-			wrapMode: Text.Wrap
-			horizontalAlignment: Text.AlignHCenter
-			Layout.fillWidth: true
-			Layout.alignment: Qt.AlignHCenter
-			Layout.bottomMargin: 32
-		}
-
-		Button {
-			id: button
-			text: qsTr("View My Orders")
-			font.pixelSize: 16
-			Layout.alignment: Qt.AlignHCenter
-		}
-	}
-}
diff --git a/OrderCompletedFlickable.ui.qml b/OrderCompletedFlickable.ui.qml
new file mode 100644
index 0000000..1b96e7d
--- /dev/null
+++ b/OrderCompletedFlickable.ui.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+Flickable {
+	property string orderCompletedText: "673290789"
+	property alias orderCompletedButton: button
+	contentHeight: body.height
+
+	ColumnLayout {
+		id: body
+		anchors {
+			top: parent.top
+			left: parent.left
+			right: parent.right
+		}
+
+		ColumnLayout {
+			Layout.topMargin: 96
+			Layout.leftMargin: 16
+			Layout.rightMargin: 16
+			Layout.bottomMargin: 96
+
+			Label {
+				text: qsTr("Your Order is Completed!")
+				font.pixelSize: 30
+				Layout.alignment: Qt.AlignHCenter
+				Layout.bottomMargin: 20
+			}
+
+			Label {
+				text: qsTr("Your order ") + orderCompletedText
+				+ qsTr(" has been completed. Your order details"
+				+ " are shown for your personal account.")
+				font.pixelSize: 16
+				wrapMode: Text.Wrap
+				horizontalAlignment: Text.AlignHCenter
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignHCenter
+				Layout.bottomMargin: 32
+			}
+
+			Button {
+				id: button
+				text: qsTr("View My Orders")
+				font.pixelSize: 16
+				Layout.alignment: Qt.AlignHCenter
+			}
+		}
+	}
+}
diff --git a/QShopper.qmlproject b/QShopper.qmlproject
index 96f95f7..9ff52c8 100644
--- a/QShopper.qmlproject
+++ b/QShopper.qmlproject
@@ -1,7 +1,7 @@
 import QmlProject 1.1
 
 Project {
-	mainFile: "OrderCompletedColumnLayout.ui.qml"
+	mainFile: "OrderCompletedFlickable.ui.qml"
 
 	QmlFiles {
 		directory: "."