Course Grid Minimal draft

4 files changed, 179 insertions, 1 deletions

diff --git a/Course/Grid/Minimal.ui.qml b/Course/Grid/Minimal.ui.qml
new file mode 100644
index 0000000..a0a007f
--- /dev/null
+++ b/Course/Grid/Minimal.ui.qml
@@ -0,0 +1,169 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import Eduport 1.4
+import "Minimal"
+import "../../Home/Default"
+
+Flickable {
+	contentHeight: main.height
+
+	Rectangle {
+		anchors.fill: parent
+		color: Eduport.bsBodyBg
+	}
+
+	ColumnLayout {
+		id: main
+		anchors {
+			top: parent.top
+			left: parent.left
+			right: parent.right
+		}
+
+		FilterBar {}
+
+		GridView {
+			id: courseGrid
+			interactive: false
+			Layout.fillWidth: true
+			implicitHeight: main.width < 576
+				? cellHeight * count
+				: main.width < 768
+				? cellHeight * count / 2
+				: main.width < 992
+				? cellHeight * count / 3
+				: cellHeight * count / 4
+			cellWidth: main.width < 576
+				? width
+				: main.width < 768
+				? width / 2
+				: main.width < 992
+				? width / 3
+				: width / 4
+			cellHeight: cellWidth * 400 / 533 + 273.35
+			model: ListModel {
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: false
+					title: "Sketch from A to Z: for app designer"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/02.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Graphic Design Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/03.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Create a Design System in Figma"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/07.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Deep Learning with React-Native"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/11.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Build Responsive Websites with HTML"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/12.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Build Websites with CSS"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/05.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "The Complete Web Development in python"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/06.jpg"
+					level: "Intermediate"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "Angular – The Complete Guider"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/10.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Bootstrap 5 From Scratch"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/13.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: false
+					title: "PHP with - CMS Project"
+					rate: 4.0
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
+					level: "Beginner"
+					levelColor: "#ff0cbc87"
+					levelBackgroundColor: "#1a0cbc87"
+					liked: true
+					title: "Digital Marketing Masterclass"
+					rate: 4.5
+				}
+				ListElement {
+					image: "https://eduport.webestica.com/assets/images/courses/4by3/04.jpg"
+					level: "All level"
+					levelColor: "#ff6f42c1"
+					levelBackgroundColor: "#1a6f42c1"
+					liked: true
+					title: "Learn Invision"
+					rate: 3.5
+				}
+			}
+			delegate: Card {
+				width: courseGrid.cellWidth
+				height: courseGrid.cellHeight
+				imageSource: image
+				badgeText: level
+				badgeColor: levelColor
+				badgeBackgroundColor: levelBackgroundColor
+				favorite.checked: liked
+				titleText: title
+				truncatedText: ""
+				rating: rate
+			}
+		}
+	}
+}
diff --git a/Course/Grid/FilterBar.ui.qml b/Course/Grid/Minimal/FilterBar.ui.qml
index 6531261..d9bf81a 100644
--- a/Course/Grid/FilterBar.ui.qml
+++ b/Course/Grid/Minimal/FilterBar.ui.qml
@@ -63,7 +63,7 @@ Rectangle {
 			id: searchButton
 			Layout.fillWidth: true
 			icon.color: "#ffffff"
-			icon.source: "Material/svg/filled/search.svg"
+			icon.source: "../../../Font-Awesome/svgs/solid/magnifying-glass.svg"
 			Layout.rightMargin: 24
 			display: AbstractButton.IconOnly
 		}
diff --git a/CourseGridMinimal.qrc b/CourseGridMinimal.qrc
new file mode 100644
index 0000000..0cbbe0b
--- /dev/null
+++ b/CourseGridMinimal.qrc
@@ -0,0 +1,8 @@
+<!DOCTYPE RCC><RCC version="1.0">
+	<qresource prefix="qeduport">
+		<file>Font-Awesome/svgs/solid/magnifying-glass.svg</file>
+		<file>Course/Grid/Minimal/FilterBar.ui.qml</file>
+		<file>Course/Grid/Card.ui.qml</file>
+		<file>Course/Grid/Minimal.ui.qml</file>
+	</qresource>
+</RCC>
diff --git a/Font-Awesome/svgs/solid/magnifying-glass.svg b/Font-Awesome/svgs/solid/magnifying-glass.svg
new file mode 100644
index 0000000..ee25f3c
--- /dev/null
+++ b/Font-Awesome/svgs/solid/magnifying-glass.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
\ No newline at end of file