summaryrefslogtreecommitdiff
path: root/HomeDefault.ui.qml
diff options
context:
space:
mode:
Diffstat (limited to 'HomeDefault.ui.qml')
-rw-r--r--HomeDefault.ui.qml253
1 files changed, 121 insertions, 132 deletions
diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml
index 4aa79cb..438cd8f 100644
--- a/HomeDefault.ui.qml
+++ b/HomeDefault.ui.qml
@@ -1,6 +1,7 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
Flickable {
property alias counter: counter
@@ -25,11 +26,17 @@ Flickable {
id: banner
columns: width < 992 ? 1 : 2
rows: width < 992 ? 2 : 1
- Layout.topMargin: 48
- Layout.leftMargin: 51.28
- Layout.rightMargin: 51.28
+ Layout.leftMargin: -9
+ Layout.rightMargin: -9
+ Layout.bottomMargin: 48
ColumnLayout {
+ Layout.topMargin: 48
+ Layout.leftMargin: 15
+ Layout.rightMargin: 15
+ Layout.bottomMargin: 48
+ Layout.maximumWidth: body.width < 992
+ ? body.width : body.width / 2
FontLoader {
id: heebo
@@ -109,16 +116,42 @@ Flickable {
}
}
- ColumnLayout {
+ Item {
Layout.topMargin: 48
Layout.leftMargin: 24
Layout.rightMargin: 24
+ Layout.fillWidth: true
+ implicitHeight: image.height
+
+ DropShadow {
+ source: angularRectangle
+ anchors.fill: angularRectangle
+ color: Qt.rgba(.113, .227, .325, .15)
+ }
+
+ Rectangle {
+ id: angularRectangle
+ radius: 8
+ implicitWidth: angularImage.width + 16
+ implicitHeight: angularImage.height + 16
+ anchors {
+ top: parent.top
+ right: parent.right
+ rightMargin: 24
+ }
+
+ Image {
+ id: angularImage
+ source: "https://eduport.webestica.com/assets/images/client/angular.svg"
+ anchors.centerIn: parent
+ }
+ }
Image {
id: image
source: "https://eduport.webestica.com/assets/images/element/07.png"
+ width: parent.width
fillMode: Image.PreserveAspectFit
- Layout.fillWidth: true
}
}
}
@@ -131,7 +164,7 @@ Flickable {
: width / 4
cellHeight: 125.6
Layout.fillWidth: true
- Layout.preferredHeight: width < 576
+ implicitHeight: width < 576
? cellHeight * count
: width < 1200 ? cellHeight * count / 2
: cellHeight
@@ -162,152 +195,108 @@ Flickable {
bgColor: "#1a17a2b8"
}
}
+
+ delegate: Counter {
+ implicitWidth: counter.cellWidth
+ implicitHeight: counter.cellHeight
+ }
}
ColumnLayout {
+ Layout.topMargin: 64
Layout.leftMargin: 15
Layout.rightMargin: 15
- Layout.bottomMargin: 25.6
+ Layout.bottomMargin: 48
- Label {
- text: qsTr("Most Popular Courses")
- color: "#24292d"
- horizontalAlignment: Text.AlignHCenter
- wrapMode: Text.Wrap
- Layout.fillWidth: true
- Layout.bottomMargin: 8
- font {
- family: heebo.name
- pointSize: 22.5 + .020625 * width
- }
- }
+ ColumnLayout {
+ Layout.bottomMargin: 25.6
- Label {
- text: qsTr("Choose from hundreds of courses from specialist organizations")
- color: "#747579"
- horizontalAlignment: Text.AlignHCenter
- wrapMode: Text.Wrap
- Layout.fillWidth: true
- font {
- family: doesntEmbed ? "Roboto"
- : roboto.name
- pointSize: 15
+ Label {
+ text: qsTr("Most Popular Courses")
+ color: "#24292d"
+ horizontalAlignment: Text.AlignHCenter
+ wrapMode: Text.Wrap
+ Layout.fillWidth: true
+ Layout.bottomMargin: 8
+ font {
+ family: heebo.name
+ pointSize: 22.5 + .020625 * width
+ }
}
- }
- }
-
- TabBar {
- id: tabs
- currentIndex: tabsContent.currentIndex
- background: Rectangle{
- color: Qt.rgba(.0235, .416, .788, .1)
- radius: 10
- }
- horizontalPadding: 16
- verticalPadding: 10
- Layout.fillWidth: true
- Layout.bottomMargin: 25.6
- TabButton {
- id: webDesign
- text: qsTr("Web Design")
- horizontalPadding: 16
- verticalPadding: 8
- anchors {
- rightMargin: 8
- bottomMargin: 8
- }
- background: Rectangle {
- color: "#066ac9"
- radius: 5.2
+ Label {
+ text: qsTr("Choose from hundreds of courses from specialist organizations")
+ color: "#747579"
+ horizontalAlignment: Text.AlignHCenter
+ wrapMode: Text.Wrap
+ Layout.fillWidth: true
+ font {
+ family: doesntEmbed ? "Roboto" : roboto.name
+ pointSize: 15
+ }
}
}
- TabButton {
- id: development
- text: qsTr("Development")
- horizontalPadding: 16
- verticalPadding: 8
- anchors {
- rightMargin: 8
- bottomMargin: 8
- }
- background: Rectangle {
- color: "#066ac9"
- radius: 5.2
+ TabBar {
+ id: tabs
+ currentIndex: tabsContent.currentIndex
+ background: Rectangle{
+ color: Qt.rgba(.0235, .416, .788, .1)
+ radius: 10
}
- }
-
- TabButton {
- id: graphicDesign
- text: qsTr("Graphic Design")
horizontalPadding: 16
- verticalPadding: 8
- anchors {
- rightMargin: 8
- bottomMargin: 8
- }
- background: Rectangle {
- color: "#066ac9"
- radius: 5.2
- }
- }
+ verticalPadding: 10
+ Layout.fillWidth: true
+ Layout.bottomMargin: 25.6
- TabButton {
- id: marketing
- text: qsTr("Marketing")
- horizontalPadding: 16
- verticalPadding: 8
- anchors {
- rightMargin: 8
- bottomMargin: 8
- }
- background: Rectangle {
- color: "#066ac9"
- radius: 5.2
- }
- }
+ Repeater {
+ model: ["Web Design", "Development",
+ "Graphic Design",
+ "Marketing", "Finance"]
- TabButton {
- id: finance
- text: qsTr("Finance")
- horizontalPadding: 16
- verticalPadding: 8
- anchors {
- rightMargin: 8
- bottomMargin: 8
- }
- background: Rectangle {
- color: "#066ac9"
- radius: 5.2
+ TabButton {
+ text: modelData
+ horizontalPadding: 16
+ verticalPadding: 8
+ width: Math.max(124,
+ tabs.width / 5)
+ anchors {
+ rightMargin: 8
+ bottomMargin: 8
+ }
+ background: Rectangle {
+ color: "#066ac9"
+ radius: 5.2
+ }
+ }
}
}
- }
- StackLayout {
- id: tabsContent
- currentIndex: tabs.currentIndex
- Layout.preferredHeight: popular.height
+ StackLayout {
+ id: tabsContent
+ currentIndex: tabs.currentIndex
+ Layout.preferredHeight: popular.height
- GridView {
- id: popular
- interactive: false
- Layout.fillWidth: true
- cellWidth: width < 576 ? width
- : width < 768 ? width / 2
- : width < 992 ? width / 3
- : width / 4
- cellHeight: cellWidth * 1.3
- height: width < 576
- ? cellHeight * count
- : width < 768
- ? cellHeight
- * (count + count % 2) / 2
- : width < 992
- ? cellHeight
- * (count + (count + 1) % 3) / 3
- : cellHeight
- * (count + (count + 2) % 4) / 4
+ GridView {
+ id: popular
+ interactive: false
+ Layout.fillWidth: true
+ cellWidth: width < 576 ? width
+ : width < 768 ? width / 2
+ : width < 992 ? width / 3
+ : width / 4
+ cellHeight: cellWidth * 1.3
+ height: width < 576
+ ? cellHeight * count
+ : width < 768
+ ? cellHeight
+ * (count + count % 2) / 2
+ : width < 992
+ ? cellHeight
+ * (count + (count + 1) % 3) / 3
+ : cellHeight
+ * (count + (count + 2) % 4) / 4
+ }
}
}
}