From 01a515adb78c661d90207f0c63fc1fdc63d6511b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?= =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?= Date: Sun, 26 Feb 2023 13:47:49 +0800 Subject: Fix popular courses layout --- HomeDefault.ui.qml | 245 +++++++++++++++++++++++++++-------------------------- 1 file changed, 124 insertions(+), 121 deletions(-) (limited to 'HomeDefault.ui.qml') diff --git a/HomeDefault.ui.qml b/HomeDefault.ui.qml index 34f08c6..d561291 100644 --- a/HomeDefault.ui.qml +++ b/HomeDefault.ui.qml @@ -208,145 +208,148 @@ Flickable { Layout.rightMargin: 15 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 + TabBar { + id: tabs + currentIndex: tabsContent.currentIndex + background: Rectangle{ + color: Qt.rgba(.0235, .416, .788, .1) + radius: 10 } - background: Rectangle { - color: "#066ac9" - radius: 5.2 - } - } - - 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: webDesign + text: qsTr("Web Design") + horizontalPadding: 16 + verticalPadding: 8 + anchors { + rightMargin: 8 + bottomMargin: 8 + } + background: Rectangle { + color: "#066ac9" + radius: 5.2 + } } - } - TabButton { - id: marketing - text: qsTr("Marketing") - horizontalPadding: 16 - verticalPadding: 8 - anchors { - rightMargin: 8 - bottomMargin: 8 + TabButton { + id: development + text: qsTr("Development") + horizontalPadding: 16 + verticalPadding: 8 + anchors { + rightMargin: 8 + bottomMargin: 8 + } + background: Rectangle { + color: "#066ac9" + radius: 5.2 + } } - background: Rectangle { - color: "#066ac9" - radius: 5.2 + + TabButton { + id: graphicDesign + text: qsTr("Graphic Design") + horizontalPadding: 16 + verticalPadding: 8 + anchors { + rightMargin: 8 + bottomMargin: 8 + } + background: Rectangle { + color: "#066ac9" + radius: 5.2 + } } - } - TabButton { - id: finance - text: qsTr("Finance") - horizontalPadding: 16 - verticalPadding: 8 - anchors { - rightMargin: 8 - bottomMargin: 8 + TabButton { + id: marketing + text: qsTr("Marketing") + horizontalPadding: 16 + verticalPadding: 8 + anchors { + rightMargin: 8 + bottomMargin: 8 + } + background: Rectangle { + color: "#066ac9" + radius: 5.2 + } } - background: Rectangle { - color: "#066ac9" - radius: 5.2 + + TabButton { + id: finance + text: qsTr("Finance") + horizontalPadding: 16 + verticalPadding: 8 + 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 + } } } } -- cgit v1.2.3