Personal details fields

1 files changed, 108 insertions, 16 deletions

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 64a644f..c871462 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -5,7 +5,7 @@ import QtQuick.Layouts 1.15
 Flickable {
 	contentHeight: personal.height
 
-	Rectangle {
+	Item {
 		id: personal
 		anchors {
 			top: parent.top
@@ -13,25 +13,117 @@ Flickable {
 			right: parent.right
 		}
 
-		ColumnLayout {
-			Label {
-				text: qsTr("Your name *")
+		GridLayout {
+			ColumnLayout {
+				Label {
+					text: qsTr("Your name *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Name")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
-			TextField {
-				placeholderText: qsTr("Name")
-				Layout.fillWidth: true
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Email address *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Email")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
 
-			anchors {
-				top: parent.top
-				topMargin: 25.6
-				left: parent.left
-				leftMargin: 25.6
-				right: parent.right
-				rightMargin: 25.6
-				bottom: parent.bottom
-				bottomMargin: 25.6
+			ColumnLayout {
+				Label {
+					text: qsTr("Mobile number *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Mobile number")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
 			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select country *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Select country")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Select state *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Select state")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Postal code *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("PIN code")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			ColumnLayout {
+				Label {
+					text: qsTr("Address *")
+					Layout.fillWidth: true
+				}
+				TextField {
+					placeholderText: qsTr("Address")
+					Layout.fillWidth: true
+				}
+
+				Layout.topMargin: 16
+				Layout.leftMargin: 8
+				Layout.rightMargin: 8
+			}
+
+			width: parent.width
+			columns: width < 786 ? 1 : 2
+			rows: width < 786 ? 4 : 7
+			columnSpacing: 0
+			rowSpacing: 0
 		}
 	}
 }