Personal info rectangle

1 files changed, 274 insertions, 264 deletions

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 71bd3b6..ff828ee 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -56,341 +56,351 @@ Flickable {
 					}
 				}
 
-				ColumnLayout {
+				Rectangle {
+					Layout.fillWidth: true
+					implicitHeight: personal.height
 
-					Label {
-						text: qsTr("Personal Details")
-						font.pointSize: 22
-						font.family: "roboto"
-						Layout.fillWidth: true
-					}
+					ColumnLayout {
+						id: personal
+						anchors {
+							left: parent.left
+							right: parent.right
+						}
 
-					GridLayout {
-						columns: width < 768 ? 1 : 2
-						rows: width < 768 ? 4 : 7
-						columnSpacing: 0
-						rowSpacing: 0
+						Label {
+							text: qsTr("Personal Details")
+							font.pointSize: 22
+							font.family: "roboto"
+							Layout.fillWidth: true
+						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+						GridLayout {
+							columns: width < 768 ? 1 : 2
+							rows: width < 768 ? 4 : 7
+							columnSpacing: 0
+							rowSpacing: 0
 
-							Label {
-								text: qsTr("Your name *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: name
-										placeholderText: qsTr("Name")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Label {
+									text: qsTr("Your name *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
+
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: name
+											placeholderText: qsTr("Name")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Email address *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+								Label {
+									text: qsTr("Email address *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: email
-										placeholderText: qsTr("Email")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: email
+											placeholderText: qsTr("Email")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Mobile number *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+								Label {
+									text: qsTr("Mobile number *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: mobile
-										placeholderText: qsTr("Mobile number")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: mobile
+											placeholderText: qsTr("Mobile number")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Select country *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: country
-										placeholderText: qsTr("Select country")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Label {
+									text: qsTr("Select country *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: country
+											placeholderText: qsTr("Select country")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Select state *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+								Label {
+									text: qsTr("Select state *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: province
-										placeholderText: qsTr("Select state")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: province
+											placeholderText: qsTr("Select state")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Postal code *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+								Label {
+									text: qsTr("Postal code *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: postal
-										placeholderText: qsTr("PIN code")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: postal
+											placeholderText: qsTr("PIN code")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
-						}
 
-						ColumnLayout {
-							Layout.topMargin: 16
-							Layout.leftMargin: 8
-							Layout.rightMargin: 8
+							ColumnLayout {
+								Layout.topMargin: 16
+								Layout.leftMargin: 8
+								Layout.rightMargin: 8
 
-							Label {
-								text: qsTr("Address *")
-								font.pointSize: 12
-								font.family: "roboto"
-								Layout.fillWidth: true
-							}
+								Label {
+									text: qsTr("Address *")
+									font.pointSize: 12
+									font.family: "roboto"
+									Layout.fillWidth: true
+								}
 
-							Rectangle {
-								implicitHeight: 56
-								color: "#f5f7f9"
-								radius: 8
-								border.width: 0
-								Layout.fillWidth: true
-								RowLayout {
-									anchors.fill: parent
-									TextField {
-										id: address
-										placeholderText: qsTr("Address")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-										Layout.fillHeight: true
-										background: Rectangle {
-											color: "transparent"
+								Rectangle {
+									implicitHeight: 56
+									color: "#f5f7f9"
+									radius: 8
+									border.width: 0
+									Layout.fillWidth: true
+									RowLayout {
+										anchors.fill: parent
+										TextField {
+											id: address
+											placeholderText: qsTr("Address")
+											font.pointSize: 16
+											font.family: "roboto"
+											Layout.fillWidth: true
+											Layout.fillHeight: true
+											background: Rectangle {
+												color: "transparent"
+											}
 										}
 									}
 								}
 							}
 						}
-					}
-
-					ColumnLayout {
-
-						Label {
-							text: qsTr("Payment method")
-							font.pointSize: 22
-							font.family: "roboto"
-							Layout.fillWidth: true
-						}
 
 						ColumnLayout {
 
-							Frame {
+							Label {
+								text: qsTr("Payment method")
+								font.pointSize: 22
+								font.family: "roboto"
 								Layout.fillWidth: true
-
-								ColumnLayout {
-									anchors.fill: parent
-
-									Label {
-										text: qsTr("Credit or Debit Card")
-										font.pointSize: 16
-										font.family: "roboto"
-										Layout.fillWidth: true
-									}
-								}
 							}
 
-							Frame {
-								Layout.fillWidth: true
-
-								ColumnLayout {
-									anchors.fill: parent
+							ColumnLayout {
 
-									Label {
-										text: qsTr("Pay with Net Banking")
-										font.pointSize: 15
-										Layout.fillWidth: true
-									}
+								Frame {
+									Layout.fillWidth: true
 
 									ColumnLayout {
+										anchors.fill: parent
 
 										Label {
-											text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
-											font.pointSize: 15
-											wrapMode: Text.Wrap
+											text: qsTr("Credit or Debit Card")
+											font.pointSize: 16
+											font.family: "roboto"
 											Layout.fillWidth: true
 										}
+									}
+								}
+
+								Frame {
+									Layout.fillWidth: true
+
+									ColumnLayout {
+										anchors.fill: parent
 
 										Label {
-											text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
+											text: qsTr("Pay with Net Banking")
 											font.pointSize: 15
-											wrapMode: Text.Wrap
 											Layout.fillWidth: true
 										}
 
-										ComboBox {
-											id: banks
-											font.pointSize: 15
-											model: ListModel {
-												ListElement {
-													label: "Please choose one"
-												}
-												ListElement {
-													label: "Bank of America"
-												}
-												ListElement {
-													label: "Bank of India"
-												}
-												ListElement {
-													label: "Bank of London"
-												}
+										ColumnLayout {
+
+											Label {
+												text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
+												font.pointSize: 15
+												wrapMode: Text.Wrap
+												Layout.fillWidth: true
 											}
-											delegate: ItemDelegate {
-												contentItem: Text {
-													text: label
-													font.pointSize: 14
+
+											Label {
+												text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
+												font.pointSize: 15
+												wrapMode: Text.Wrap
+												Layout.fillWidth: true
+											}
+
+											ComboBox {
+												id: banks
+												font.pointSize: 15
+												model: ListModel {
+													ListElement {
+														label: "Please choose one"
+													}
+													ListElement {
+														label: "Bank of America"
+													}
+													ListElement {
+														label: "Bank of India"
+													}
+													ListElement {
+														label: "Bank of London"
+													}
+												}
+												delegate: ItemDelegate {
+													contentItem: Text {
+														text: label
+														font.pointSize: 14
+													}
 												}
 											}
 										}