Skip to content

Commit

Permalink
feat: ui design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mubeenfayyaz20
mubeenfayyaz20 authored May 30, 2024
1 parent 94e7088 commit 56a9e8d
Show file tree
Hide file tree
Showing 16 changed files with 620 additions and 427 deletions.
47 changes: 22 additions & 25 deletions layout/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,22 @@
<link rel="icon" href="{{ URL_ROOT }}/static/images/favicon.png" />
<link rel="stylesheet" href="{{ URL_ROOT }}/static/css/academy.css" />
{% block css %}{% endblock%}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
rel="stylesheet"
/>
</head>

<body>
<div class="container">
<div class="navbar">
<a href="#" class="mobile-menu-link">
<img src="{{ URL_ROOT }}/static/images/bars-solid.svg" alt="menu" />
<img
src="{{ URL_ROOT }}/static/images/hamburger-icon.svg"
alt="menu"
/>
</a>
<div class="edly-logo-item">
<a class="edly-logo-link" href="{{ URL_ROOT }}">
<img
class="edly-logo"
src="{{ URL_ROOT }}/static/images/edly_logo.png"
src="{{ URL_ROOT }}/static/images/edly_logo.svg"
alt="edly academy"
/>
</a>
Expand All @@ -43,10 +40,10 @@
>
<img
class="github-image"
src="{{ URL_ROOT }}/static/images/github_logo.png"
src="{{ URL_ROOT }}/static/images/github_logo.svg"
alt="github"
/>
<p class="github-text">Edit on GitHub</p>
<span class="github-text">Edit on GitHub</span>
</a>
</div>
<div class="mobile-menu">
Expand All @@ -61,7 +58,7 @@
<a class="mobile-edly-logo-link" href="{{ URL_ROOT }}">
<img
class="mobile-edly-logo"
src="{{ URL_ROOT }}/static/images/edly_logo.png"
src="{{ URL_ROOT }}/static/images/edly_logo.svg"
alt="edly academy"
/>
</a>
Expand All @@ -78,10 +75,10 @@
>
<img
class="mobile-github-image"
src="{{ URL_ROOT }}/static/images/github_logo.png"
src="{{ URL_ROOT }}/static/images/github_logo.svg"
alt="github"
/>
<p class="mobile-github-text">Edit on GitHub</p>
<span class="mobile-github-text">Edit on GitHub</span>
</a>
</div>
</div>
Expand All @@ -91,23 +88,23 @@
<div class="footer">
<div class="footer-content">
<p class="email-label">
Get the latest resources, tips, and best practices directly in your
inbox
Get the latest resources, tips, <br />
and best practices directly in your inbox
</p>

<div class="footer-nav">
<p>Edly 2024 All rights reserved</p>
<p><a href="/privacy-policy/"> Privacy Policy </a></p>
<p><a href="/terms-and-conditions/">Terms & Conditions</a></p>
<div class="footer-bottom">
<ul class="footer-nav">
<li>Edly 2024 All rights reserved</li>
<li><a href="/privacy-policy/"> Privacy Policy </a></li>
<li><a href="/terms-and-conditions/">Terms & Conditions</a></li>
</ul>
<p class="footer-bottom-text">
edX and Open edX are registered trademarks of edX Inc
</p>
</div>
<p class="footer-bottom-text">
edX and Open edX are registered trademarks of edX Inc
</p>
</div>
</div>
</div>
{% block js %}{% endblock%}

<script
charset="utf-8"
type="text/javascript"
Expand Down Expand Up @@ -135,7 +132,7 @@
// email subscription form placement in the footer
const hubspotForm = document.querySelector(".hbspt-form");
const footerContent = document.querySelector(".footer-content");
const footerNav = document.querySelector(".footer-nav");
const footerNav = document.querySelector(".footer-bottom");
footerContent.insertBefore(hubspotForm, footerNav);

//set width of email subscription
Expand Down
190 changes: 107 additions & 83 deletions layout/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,118 @@
{% extends "base.html" %}

{% block content %}
{% extends "base.html" %} {% block content %}
<div class="content-area">
<h1 class="resources-heading">All Resources</h1>
<div class="filter">
<div class="filter-left">
<p class="filter-text">Filter by:</p>
<div class="filter-type">
<div id="resource-type-button" class="resource-type-label">
<p>Resource type</p>
<img class="arrow" src="{{ URL_ROOT }}/static/images/chevron-down-solid.svg" />
</div>
<ul class="resource-type-filter invisible" id="resource-type-filter">
{% for resource_type in RESOURCE_TYPES %}
<li class="resource-type-option">
<input class='resource-type-input' type='radio' name="type" value="{{ resource_type }}" {% if
resource_type=="all" %}checked{% endif %}>
<label class="resource-label">{{ resource_type }}</label>
</li>
{% endfor %}
</ul>
</div>
<div class="filter-type">
<div id="categories-button" class="categories-label">
<p>Topics</p>
<img class="arrow" src="{{ URL_ROOT }}/static/images/chevron-down-solid.svg" />
</div>
<ul class="categories-filter invisible" id="categories-filter">
{% for category in CATEGORIES %}
<li class="category-option">
<input class='category-input' type='radio' name="category" value="{{ category }}" {% if
category=="all" %}checked{% endif %}>
<label class="category-label">{{ category }}</label>
</li>
{% endfor %}
</ul>
</div>
<h1 class="resources-heading">All Resources</h1>
<div class="filter">
<div class="filter-left">
<p class="filter-text">Filter by:</p>
<div class="filter-wrapper">
<div class="filter-type">
<div id="resource-type-button" class="resource-type-label">
<p class="filter-dropdown">Resource type</p>
<img
class="arrow"
src="{{ URL_ROOT }}/static/images/chevron-down.svg"
/>
</div>
<ul class="resource-type-filter invisible" id="resource-type-filter">
{% for resource_type in RESOURCE_TYPES %}
<li class="resource-type-option">
<input class='resource-type-input' type='radio' name="type"
value="{{ resource_type }}" {% if resource_type=="all" %}checked{%
endif %}>
<label class="resource-label">{{ resource_type }}</label>
</li>
{% endfor %}
</ul>
</div>
<div class="filter-type">
<div id="categories-button" class="categories-label">
<p class="filter-dropdown">Topics</p>
<img
class="arrow"
src="{{ URL_ROOT }}/static/images/chevron-down.svg"
/>
</div>
<ul class="categories-filter invisible" id="categories-filter">
{% for category in CATEGORIES %}
<li class="category-option">
<input class='category-input' type='radio' name="category"
value="{{ category }}" {% if category=="all" %}checked{% endif %}>
<label class="category-label">{{ category }}</label>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div id="resources" class="resources">
{% for resource in resources %}
<div class="card {% if not resource.src %}coming-soon-card{% endif %} {% if resource.src.startswith('http') %}external-link-card{% endif %}"
attr-resource-type="{{ resource.type }}" attr-category="{{ resource.category }}">
<a {% if not resource.src %} href="" {% elif resource.src.startswith('http') %}
</div>
<div id="resources" class="resources">
{% for resource in resources %}
<div
class="card {% if not resource.src %}coming-soon-card{% endif %} {% if resource.src.startswith('http') %}external-link-card{% endif %}"
attr-resource-type="{{ resource.type }}"
attr-category="{{ resource.category }}"
>
<a {% if not resource.src %} href="" {% elif resource.src.startswith('http') %}
href="{{ resource.src }}" target=_blank {% else %}
href="{{ URL_ROOT }}/{{ resource.src }}" {% endif %}>
<div class="card-tag {% if resource.type == 'Video' %}orange{% else %}green{% endif %}">
{% if resource.type == "Video" %}
<img class="play" src="{{ URL_ROOT}}/static/images/play-solid.svg" alt="play">
{% else %}
<img class="guide" src="{{ URL_ROOT}}/static/images/file-lines.svg" alt="file">
{% endif %}
<p class="card-tag-text">{{ resource.type }}</p>
</div>
{% if not resource.src %}
<div class='coming-soon-tag'>
<p class='coming-soon-text'>coming soon</p>
</div>
{% endif %}
<h2 class="card-title">{{ resource.title }}
{% if resource.src.startswith('http') %}
<img class="link" src="{{ URL_ROOT }}/static/images/link.svg" alt="Link to external resource">
{% endif %}
</h2>
<p class="card-desc">
{{ resource.description }}
</p>
</a>
</div>
{% endfor %}
</div>
<div id="tutorials" class="tutorials">
<div class="detail-box">
<h2 class="tutorial-title">What is Edly Academy?</h2>
<div class="tutorial-description">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.</div>
<!-- <div class='learn-more'><p>learn more</p><img class='right-arrow' src='static/images/chevron-right.svg' alt='right'></div> -->
<div
class="card-tag {% if resource.type == 'Video' %}orange{% else %}green{% endif %}"
>
{% if resource.type == "Video" %}
<img
class="play"
src="{{ URL_ROOT}}/static/images/play-icon.svg"
alt="play"
/>
{% else %}
<img
class="guide"
src="{{ URL_ROOT}}/static/images/file-icon.svg"
alt="file"
/>
{% endif %}
<span class="card-tag-text">{{ resource.type }}</span>
</div>
<div class="detail-box">
<h2 class="tutorial-title">Get Involved</h2>
<div class="tutorial-description">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.</div>
<!-- <div class='learn-more'><p>learn more</p><img class='right-arrow' src='static/images/chevron-right.svg' alt='right'></div> -->
{% if not resource.src %}
<div class="coming-soon-tag">
<span class="coming-soon-text">coming soon</span>
</div>
{% endif %}
<h2 class="card-title">
{{ resource.title }} {% if resource.src.startswith('http') %}
<img
class="link"
src="{{ URL_ROOT }}/static/images/link.svg"
alt="Link to external resource"
/>
{% endif %}
</h2>
<p class="card-desc">{{ resource.description }}</p>
</a>
</div>
{% endfor %}
</div>
<div id="tutorials" class="tutorials">
<div class="detail-box">
<h2 class="tutorial-title">What is Edly Academy?</h2>
<div class="tutorial-description">
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.
</div>
<!-- <div class='learn-more'><p>learn more</p><img class='right-arrow' src='static/images/chevron-right.svg' alt='right'></div> -->
</div>
<div class="detail-box">
<h2 class="tutorial-title">Get Involved</h2>
<div class="tutorial-description">
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.
</div>
<!-- <div class='learn-more'><p>learn more</p><img class='right-arrow' src='static/images/chevron-right.svg' alt='right'></div> -->
</div>
</div>
</div>
{% endblock %}

{% block js %}
{% endblock %} {% block js %}
<script src="{{ URL_ROOT }}/static/js/search.js" type="module"></script>
{% endblock%}
Loading

0 comments on commit 56a9e8d

Please sign in to comment.