Right sidebar implementation

The layout is still not right, though.

1 files changed, 316 insertions, 134 deletions

diff --git a/CheckoutFlickable.ui.qml b/CheckoutFlickable.ui.qml
index 8f1eaa0..4ede584 100644
--- a/CheckoutFlickable.ui.qml
+++ b/CheckoutFlickable.ui.qml
@@ -12,198 +12,380 @@ Flickable {
 	property alias checkoutState: province
 	property alias checkoutPostal: postal
 	property alias checkoutAddress: address
-	contentHeight: main.height
+	contentHeight: container.height
 
-	ColumnLayout {
-		id: main
+	GridLayout {
+		id: container
+		columns: width < 1200 ? 1 : 2
+		rows: width < 1200 ? 2 : 1
+		columnSpacing: 0
+		rowSpacing: 0
 		anchors {
 			top: parent.top
 			left: parent.left
 			right: parent.right
 		}
 
-		RowLayout {
-			id: alert
-			Layout.alignment: Qt.AlignHCenter
-			Label {
-				text: qsTr("Already have an account?")
-			}
-			Text {
-				id: login
-				text: "<a href=\"sign-in.html\">Log in</a>"
-				font.underline: false
-			}
-		}
+		ColumnLayout {
+
+			RowLayout {
+				id: alert
+				Layout.alignment: Qt.AlignHCenter
 
-		GridLayout {
-			ColumnLayout {
 				Label {
-					text: qsTr("Your name *")
-					Layout.fillWidth: true
-				}
-				TextField {
-					id: name
-					placeholderText: qsTr("Name")
-					Layout.fillWidth: true
+					text: qsTr("Already have an account?")
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
+				Text {
+					id: login
+					text: "<a href=\"sign-in.html\">Log in</a>"
+					font.underline: false
+				}
 			}
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Email address *")
-					Layout.fillWidth: true
-				}
-				TextField {
-					id: email
-					placeholderText: qsTr("Email")
-					Layout.fillWidth: true
-				}
+			GridLayout {
+				columns: width < 768 ? 1 : 2
+				rows: width < 768 ? 4 : 7
+				columnSpacing: 0
+				rowSpacing: 0
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
-			}
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Mobile number *")
-					Layout.fillWidth: true
-				}
-				TextField {
-					id: mobile
-					placeholderText: qsTr("Mobile number")
-					Layout.fillWidth: true
+					Label {
+						text: qsTr("Your name *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: name
+						placeholderText: qsTr("Name")
+						Layout.fillWidth: true
+					}
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
-			}
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Select country *")
-					Layout.fillWidth: true
-				}
-				TextField {
-					id: country
-					placeholderText: qsTr("Select country")
-					Layout.fillWidth: true
+					Label {
+						text: qsTr("Email address *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: email
+						placeholderText: qsTr("Email")
+						Layout.fillWidth: true
+					}
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
-			}
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Select state *")
-					Layout.fillWidth: true
+					Label {
+						text: qsTr("Mobile number *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: mobile
+						placeholderText: qsTr("Mobile number")
+						Layout.fillWidth: true
+					}
 				}
-				TextField {
-					id: province
-					placeholderText: qsTr("Select state")
-					Layout.fillWidth: true
+
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
+
+					Label {
+						text: qsTr("Select country *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: country
+						placeholderText: qsTr("Select country")
+						Layout.fillWidth: true
+					}
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
-			}
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
 
-			ColumnLayout {
-				Label {
-					text: qsTr("Postal code *")
-					Layout.fillWidth: true
+					Label {
+						text: qsTr("Select state *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: province
+						placeholderText: qsTr("Select state")
+						Layout.fillWidth: true
+					}
 				}
-				TextField {
-					id: postal
-					placeholderText: qsTr("PIN code")
-					Layout.fillWidth: true
+
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
+
+					Label {
+						text: qsTr("Postal code *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: postal
+						placeholderText: qsTr("PIN code")
+						Layout.fillWidth: true
+					}
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
+				ColumnLayout {
+					Layout.topMargin: 16
+					Layout.leftMargin: 8
+					Layout.rightMargin: 8
+
+					Label {
+						text: qsTr("Address *")
+						Layout.fillWidth: true
+					}
+
+					TextField {
+						id: address
+						placeholderText: qsTr("Address")
+						Layout.fillWidth: true
+					}
+				}
 			}
 
 			ColumnLayout {
+
 				Label {
-					text: qsTr("Address *")
-					Layout.fillWidth: true
-				}
-				TextField {
-					id: address
-					placeholderText: qsTr("Address")
+					text: qsTr("Payment method")
 					Layout.fillWidth: true
 				}
 
-				Layout.topMargin: 16
-				Layout.leftMargin: 8
-				Layout.rightMargin: 8
+				ColumnLayout {
+
+					Frame {
+						Layout.fillWidth: true
+
+						ColumnLayout {
+							anchors.fill: parent
+
+							Label {
+								text: qsTr("Credit or Debit Card")
+								Layout.fillWidth: true
+							}
+						}
+					}
+
+					Frame {
+						Layout.fillWidth: true
+
+						ColumnLayout {
+							anchors.fill: parent
+
+							Label {
+								text: qsTr("Pay with Net Banking")
+								Layout.fillWidth: true
+							}
+
+							ColumnLayout {
+
+								Label {
+									text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers.")
+									Layout.fillWidth: true
+									wrapMode: Text.Wrap
+								}
+
+								Label {
+									text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
+									Layout.fillWidth: true
+									wrapMode: Text.Wrap
+								}
+
+								ComboBox {
+									model: ListModel {
+										ListElement {
+											text: "Bank of America"
+										}
+										ListElement {
+											text: "Bank of India"
+										}
+										ListElement {
+											text: "Bank of London"
+										}
+									}
+								}
+							}
+						}
+					}
+				}
 			}
+		}
 
+		GridLayout {
 			columns: width < 786 ? 1 : 2
-			rows: width < 786 ? 4 : 7
+			rows: width < 786 ? 2 : 1
 			columnSpacing: 0
 			rowSpacing: 0
-		}
+			Layout.alignment: Qt.AlignTop
 
-		ColumnLayout {
-			Label {
-				text: qsTr("Payment method")
+			Frame {
 				Layout.fillWidth: true
-			}
-			ColumnLayout {
-				Frame {
-					Layout.fillWidth: true
+
+				ColumnLayout {
+					anchors.fill: parent
+
+					Label {
+						text: qsTr("Order Summary")
+						Layout.fillWidth: true
+					}
+
 					ColumnLayout {
-						anchors.fill: parent
+
+						Item {
+							Layout.fillWidth: true
+							implicitHeight: codeLabel.implicitHeight
+								+ codeValue.implicitHeight
+
 							Label {
-								text: qsTr("Credit or Debit Card")
+								id: codeLabel
+								text: qsTr("Transaction code")
+								anchors.verticalCenter: parent.verticalCenter
+							}
+
+							Label {
+								id: codeValue
+								text: "AB12365E"
+								anchors {
+									right: parent.right
+									verticalCenter: parent.verticalCenter
+								}
+							}
+						}
+
+						RowLayout {
+
+							TextField {
+								placeholderText: qsTr("COUPON CODE")
 								Layout.fillWidth: true
 							}
+
+							Button {
+								text: qsTr("Apply")
+							}
+						}
 					}
-				}
-				Frame {
-					Layout.fillWidth: true
+
 					ColumnLayout {
-						anchors.fill: parent
-						Label {
-							text: qsTr("Pay with Net Banking")
+
+						Item {
 							Layout.fillWidth: true
+							implicitHeight: priceLabel.implicitHeight
+								+ priceValue.implicitHeight
+
+							Label {
+								id: priceLabel
+								text: qsTr("Original Price")
+								anchors.verticalCenter: parent.verticalCenter
+							}
+
+							Label {
+								id: priceValue
+								text: "$500"
+								anchors {
+									right: parent.right
+									verticalCenter: parent.verticalCenter
+								}
+							}
 						}
-						ColumnLayout {
+
+						Item {
+							Layout.fillWidth: true
+							implicitHeight: discountLabel.implicitHeight
+								+ discountValue.implicitHeight
+
 							Label {
-								text: qsTr("In order to complete your transaction, we will transfer you over to Eduport secure servers. ")
-								Layout.fillWidth: true
-								wrapMode: Text.Wrap
+								id: discountLabel
+								text: qsTr("Coupon Discount")
+								anchors.verticalCenter: parent.verticalCenter
 							}
+
 							Label {
-								text: qsTr("Select your bank from the drop-down list and click proceed to continue with your payment.")
-								Layout.fillWidth: true
-								wrapMode: Text.Wrap
+								id: discountValue
+								text: "-" + "$20"
+								anchors {
+									right: parent.right
+									verticalCenter: parent.verticalCenter
+								}
 							}
-							ComboBox {
-								model: ListModel {
-									ListElement {
-										text: "Bank of America"
-									}
-									ListElement {
-										text: "Bank of India"
-									}
-									ListElement {
-										text: "Bank of London"
-									}
+						}
+
+						Item {
+							Layout.fillWidth: true
+							implicitHeight: totalLabel.implicitHeight
+								+ totalValue.implicitHeight
+
+							Label {
+								id: totalLabel
+								text: qsTr("Total")
+								anchors.verticalCenter: parent.verticalCenter
+							}
+
+							Label {
+								id: totalValue
+								text: "$480"
+								anchors {
+									right: parent.right
+									verticalCenter: parent.verticalCenter
 								}
 							}
 						}
 					}
+
+					Button {
+						text: qsTr("Place Order")
+						Layout.fillWidth: true
+					}
+				}
+			}
+
+			Frame {
+				Layout.fillWidth: true
+				Layout.alignment: Qt.AlignTop
+
+				ColumnLayout {
+					anchors.fill: parent
+
+					Label {
+						text: qsTr("Access 25K Online courses from 120 institutions, Start today!")
+						Layout.fillWidth: true
+						wrapMode: Text.Wrap
+					}
+
+					Label {
+						text: qsTr("Here is the description of premium features which will allow users to get benefits and save a lot of money")
+						Layout.fillWidth: true
+						wrapMode: Text.Wrap
+					}
+
+					Button {
+						text: qsTr("Purchase Premium")
+						Layout.fillWidth: true
+					}
 				}
 			}
 		}