From 7b88041bb4cdb7f599f838320209fa7acebb18ad Mon Sep 17 00:00:00 2001 From: Mubeen Date: Mon, 27 May 2024 17:28:04 +0500 Subject: [PATCH 1/3] edly-academy-ui-design-changes --- layout/base.html | 43 +- layout/index.html | 16 +- layout/static/css/academy.css | 644 +++++++++++++----------- layout/static/css/resource.css | 108 +++- layout/static/images/bars-solid.svg | 1 - layout/static/images/chevron-down.svg | 3 + layout/static/images/edly_logo.png | Bin 56187 -> 13204 bytes layout/static/images/edly_logo.svg | 7 + layout/static/images/file-icon.svg | 5 + layout/static/images/file-lines.svg | 1 - layout/static/images/github_logo.png | Bin 91488 -> 0 bytes layout/static/images/github_logo.svg | 3 + layout/static/images/hamburger-icon.svg | 5 + layout/static/images/play-icon.svg | 3 + layout/static/images/play-solid.svg | 1 - layout/static/js/search.js | 21 + 16 files changed, 516 insertions(+), 345 deletions(-) delete mode 100644 layout/static/images/bars-solid.svg create mode 100644 layout/static/images/chevron-down.svg create mode 100644 layout/static/images/edly_logo.svg create mode 100644 layout/static/images/file-icon.svg delete mode 100644 layout/static/images/file-lines.svg delete mode 100644 layout/static/images/github_logo.png create mode 100644 layout/static/images/github_logo.svg create mode 100644 layout/static/images/hamburger-icon.svg create mode 100644 layout/static/images/play-icon.svg delete mode 100644 layout/static/images/play-solid.svg diff --git a/layout/base.html b/layout/base.html index 321b37a..3c74dcf 100644 --- a/layout/base.html +++ b/layout/base.html @@ -14,19 +14,24 @@ href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" /> +
- menu + menu
@@ -43,10 +48,10 @@ > github -

Edit on GitHub

+ Edit on GitHub
@@ -61,7 +66,7 @@ @@ -78,10 +83,10 @@ > github -

Edit on GitHub

+ Edit on GitHub
@@ -91,23 +96,23 @@
- -
-

Edly 2024 All rights reserved

-

Privacy Policy

-

Terms & Conditions

+
+ +

+ edX and Open edX are registered trademarks of edX Inc +

-

- edX and Open edX are registered trademarks of edX Inc -

{% block js %}{% endblock%} - {% endblock%} diff --git a/layout/index2.liquid b/layout/index2.liquid new file mode 100644 index 0000000..7bc8acd --- /dev/null +++ b/layout/index2.liquid @@ -0,0 +1,106 @@ +{% extends "base.html" %} {% block content %} +
+

All Resources

+
+
+

Filter by:

+
+
+
+

Resource type

+ +
+ +
+
+
+

Topics

+ +
+ +
+
+
+
+ +
+
+

What is Edly Academy?

+
+ It is a new resource centre that offers guides and tutorials for Open + edX® and Tutor, aiming to support the community with an expanding + library focused on the use and development of Open edX® platforms. +
+ +
+
+

Get Involved

+
+ We encourage our community to contribute. By sharing your knowledge in + guides and tutorials, you can help us enhance our resource library, + benefiting both new and existing Open edX® users and developers. +
+ +
+
+
+{% endblock %} {% block js %} + +{% endblock%} diff --git a/layout/static/css/academy.css b/layout/static/css/academy.css index 68162a5..80b9c9e 100644 --- a/layout/static/css/academy.css +++ b/layout/static/css/academy.css @@ -269,7 +269,7 @@ input[type="radio"] { display: grid; row-gap: 30px; column-gap: 30px; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .card { @@ -633,6 +633,10 @@ pre code.hljs * { /* mobile view */ @media only screen and (max-width: 1024px) { + .resources{ + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + + } .navbar { padding: 12px 70px; } @@ -768,7 +772,7 @@ pre code.hljs * { } .footer-nav { flex-direction: column; - gap: 4px; + gap: 2px; align-items: center; } .footer-nav a, @@ -780,6 +784,7 @@ pre code.hljs * { .footer-bottom-text { width: 100%; max-width: 230px; + line-height: 15px; } .footer-bottom { margin-top: 15px; diff --git a/layout/static/js/search.js b/layout/static/js/search.js index fba405a..3373d30 100644 --- a/layout/static/js/search.js +++ b/layout/static/js/search.js @@ -87,21 +87,24 @@ document .getElementById("categories-button") .addEventListener("click", categoriesFilterToggle); - document.addEventListener('click', function(event) { - const resourceTypeButton = document.getElementById('resource-type-button'); - const resourceTypeFilter = document.getElementById('resource-type-filter'); - - if (!resourceTypeButton.contains(event.target) && !resourceTypeFilter.contains(event.target)) { - resourceTypeFilter.classList.add('invisible'); - } - }); +document.addEventListener("click", function (event) { + const resourceTypeButton = document.getElementById("resource-type-button"); + const resourceTypeFilter = document.getElementById("resource-type-filter"); + + if ( + !resourceTypeButton.contains(event.target) && + !resourceTypeFilter.contains(event.target) + ) { + resourceTypeFilter.classList.add("invisible"); + } + const categoriesButton = document.getElementById("categories-button"); + const categoriesFilter = document.getElementById("categories-filter"); - document.addEventListener('click', function(event) { - const categoriesButton = document.getElementById('categories-button'); - const categoriesFilter = document.getElementById('categories-filter'); - - if (!categoriesButton.contains(event.target) && !categoriesFilter.contains(event.target)) { - categoriesFilter.classList.add('invisible'); - } - }); \ No newline at end of file + if ( + !categoriesButton.contains(event.target) && + !categoriesFilter.contains(event.target) + ) { + categoriesFilter.classList.add("invisible"); + } +}); From 4a44a9c74dfd33bdfdcd51ed4a6787b11240c475 Mon Sep 17 00:00:00 2001 From: Mubeen Date: Fri, 31 May 2024 15:51:26 +0500 Subject: [PATCH 3/3] edly academy UI design fixed and extra spacing on cards also fix and extra file removed --- layout/index2.liquid | 106 ---------------------------------- layout/static/css/academy.css | 38 ++++++++---- 2 files changed, 26 insertions(+), 118 deletions(-) delete mode 100644 layout/index2.liquid diff --git a/layout/index2.liquid b/layout/index2.liquid deleted file mode 100644 index 7bc8acd..0000000 --- a/layout/index2.liquid +++ /dev/null @@ -1,106 +0,0 @@ -{% extends "base.html" %} {% block content %} -
-

All Resources

-
-
-

Filter by:

-
-
-
-

Resource type

- -
- -
-
-
-

Topics

- -
- -
-
-
-
- -
-
-

What is Edly Academy?

-
- It is a new resource centre that offers guides and tutorials for Open - edX® and Tutor, aiming to support the community with an expanding - library focused on the use and development of Open edX® platforms. -
- -
-
-

Get Involved

-
- We encourage our community to contribute. By sharing your knowledge in - guides and tutorials, you can help us enhance our resource library, - benefiting both new and existing Open edX® users and developers. -
- -
-
-
-{% endblock %} {% block js %} - -{% endblock%} diff --git a/layout/static/css/academy.css b/layout/static/css/academy.css index 80b9c9e..f6d9eec 100644 --- a/layout/static/css/academy.css +++ b/layout/static/css/academy.css @@ -26,7 +26,6 @@ body { .container { height: 100vh; - width: 100vw; background-color: white; } @@ -48,6 +47,9 @@ body { text-transform: uppercase; margin-right: 24px; } +a.github-link { + margin-right: 0 !important; +} .mobile-menu-link { display: none; @@ -112,7 +114,7 @@ ul.navbar-list li a { } /* main content area */ .content-area { - padding: 50px 135px 100px; + padding: 50px 135px 80px; display: flex; flex-direction: column; } @@ -283,7 +285,6 @@ input[type="radio"] { position: relative; padding: 32px 24px; max-width: calc(357px - 48px); - } .card a { @@ -321,7 +322,7 @@ input[type="radio"] { display: flex; align-items: center; gap: 4px; - padding: 5px 15px; + padding: 7px 15px; color: var(--white); background-color: #3574a7; border-radius: 6px; @@ -329,7 +330,9 @@ input[type="radio"] { font-weight: 600; width: fit-content; } - +.card-tag .guide { + width: 16px; +} .card-title { overflow: hidden; display: -webkit-box; @@ -376,7 +379,7 @@ input[type="radio"] { width: 100%; display: flex; gap: 96px; - margin-top: 100px; + margin-top: 80px; flex-direction: row; } @@ -632,17 +635,25 @@ pre code.hljs * { /* mobile view */ -@media only screen and (max-width: 1024px) { - .resources{ - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - +@media only screen and (min-width: 1440px) { + .card { + max-width: 100%; } +} + +@media only screen and (max-width: 1200px) { .navbar { padding: 12px 70px; } .content-area { padding: 30px 70px 60px; } +} +@media only screen and (max-width: 1024px) { + .resources { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + } + .resources-heading { font-size: 35px; line-height: 40px; @@ -653,6 +664,9 @@ pre code.hljs * { .tutorials { margin-top: 70px; } + .card { + max-width: calc(450px - 48px); + } } @media only screen and (max-width: 768px) { .github-text { @@ -702,7 +716,7 @@ pre code.hljs * { line-height: 25px; } - .card{ + .card { max-width: 100%; } } @@ -810,7 +824,7 @@ pre code.hljs * { .resource-type-option { font-size: 14px; } - .footer{ + .footer { padding: 40px 0; } }