forked from django-cms/django-cms-quickstart
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added refactor of the hydrolearn modules plugin to load the different…
… placeholders as well as the cards
- Loading branch information
romer8
committed
Mar 19, 2024
1 parent
9c90909
commit 56ff438
Showing
16 changed files
with
542 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
from django.contrib import admin | ||
|
||
# Register your models here. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
from django.apps import AppConfig | ||
|
||
|
||
class HydrolearnModulesAppConfig(AppConfig): | ||
default_auto_field = 'django.db.models.BigAutoField' | ||
name = 'hydrolearn_modules_app' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
from cms.plugin_base import CMSPluginBase | ||
from cms.plugin_pool import plugin_pool | ||
from django.utils.translation import gettext_lazy as _ | ||
from .models import ( | ||
HydroLearnModulesList, | ||
) | ||
|
||
import logging | ||
|
||
logger = logging.getLogger(__name__) | ||
|
||
|
||
@plugin_pool.register_plugin | ||
class HydroLearnModulesPlugin(CMSPluginBase): | ||
model = HydroLearnModulesList | ||
name = _("HydroLearn Modules Plugin") | ||
render_template = "hydrolearn-modules.html" | ||
cache = False | ||
|
||
def render(self, context, instance, placeholder): | ||
context = super().render(context, instance, placeholder) | ||
return context |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
# Generated by Django 3.2 on 2024-03-19 18:31 | ||
|
||
from django.db import migrations, models | ||
import django.db.models.deletion | ||
|
||
|
||
class Migration(migrations.Migration): | ||
|
||
initial = True | ||
|
||
dependencies = [ | ||
('cms', '0022_auto_20180620_1551'), | ||
] | ||
|
||
operations = [ | ||
migrations.CreateModel( | ||
name='HydroLearnModulesList', | ||
fields=[ | ||
('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='hydrolearn_modules_app_hydrolearnmoduleslist', serialize=False, to='cms.cmsplugin')), | ||
('organization', models.CharField(blank=True, default='', max_length=200)), | ||
('placeholder_image', models.CharField(default='https://placehold.co/200', max_length=200)), | ||
('modules', models.JSONField(default=dict, editable=False)), | ||
], | ||
options={ | ||
'abstract': False, | ||
}, | ||
bases=('cms.cmsplugin',), | ||
), | ||
] |
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
from cms.models.pluginmodel import CMSPlugin | ||
from django.db import models | ||
import logging | ||
|
||
logger = logging.getLogger(__name__) | ||
|
||
|
||
class HydroLearnModulesList(CMSPlugin): | ||
organization = models.CharField(max_length=200, default="", blank=True) | ||
placeholder_image = models.CharField( | ||
max_length=200, default="https://placehold.co/200" | ||
) | ||
modules = models.JSONField(editable=False, default=dict) |
103 changes: 103 additions & 0 deletions
103
hydrolearn_modules_app/static/css/hydrolearn-modules.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
|
||
.img-tile{ | ||
object-fit: cover; | ||
} | ||
|
||
.name{ | ||
height: 150px; | ||
cursor: pointer; | ||
} | ||
|
||
/* Hide scrollbar for Chrome, Safari and Opera */ | ||
.name::-webkit-scrollbar { | ||
display: none; | ||
} | ||
|
||
/* Hide scrollbar for IE, Edge and Firefox */ | ||
.name { | ||
-ms-overflow-style: none; /* IE and Edge */ | ||
scrollbar-width: none; /* Firefox */ | ||
} | ||
|
||
|
||
.hydrolearn_module{ | ||
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.125), inset 0 0 0 1px rgba(255,255,255,0.75); | ||
border-color: white; | ||
border-bottom: 3px solid #255f9c; | ||
} | ||
.hydrolearn_module:hover, | ||
.hydrolearn_module:focus { | ||
background: #f5f5f5; | ||
border-color: #bebebe; | ||
box-shadow: 0 1px 4px 0 rgba(0,117,180,0.4); | ||
} | ||
.cover-image { | ||
position: relative; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
overflow: hidden; | ||
cursor: pointer; | ||
} | ||
|
||
.cover-image img { | ||
display: block; | ||
width: 100%; | ||
transition: filter 0.5s ease; /* Smooth transition for the filter */ | ||
} | ||
|
||
.learn-more { | ||
position: absolute; | ||
color: white; | ||
padding: 5px 10px; | ||
visibility: hidden; | ||
transition: visibility 0s, opacity 0.5s linear; /* Smooth transition for visibility and opacity */ | ||
opacity: 0; | ||
border-color: #255f9c; | ||
border-radius: 3px; | ||
background: #255f9c; | ||
} | ||
|
||
.cover-image:hover .learn-more { | ||
visibility: visible; | ||
opacity: 1; /* Make it fully opaque on hover */ | ||
} | ||
|
||
.cover-image:hover img { | ||
filter: brightness(50%); /* Darken the image */ | ||
} | ||
.learn-more > a { | ||
color: inherit; | ||
text-decoration: none; | ||
} | ||
|
||
.hidden { | ||
display: none; | ||
} | ||
|
||
|
||
@keyframes placeHolderShimmer{ | ||
0%{ | ||
background-position: -800px 0 | ||
} | ||
100%{ | ||
background-position: 800px 0 | ||
} | ||
} | ||
|
||
|
||
|
||
.animated-background { | ||
animation-duration: 7s; | ||
animation-fill-mode: forwards; | ||
animation-iteration-count: infinite; | ||
animation-name: placeHolderShimmer; | ||
animation-timing-function: linear; | ||
} | ||
.titles-loading-background{ | ||
background: #cbcbcb; | ||
background: linear-gradient(to right, #cbcbcb 8%, #bbbbbb 18%, #cbcbcb 33%); | ||
} | ||
.descriptions-background{ | ||
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
|
||
|
||
const getCSRFToken = () => { | ||
// Attempt to retrieve the CSRF token from the meta tag | ||
const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'); | ||
return token; | ||
} | ||
|
||
const fetchLearningModules = () => { | ||
// Assuming your Django server is running on localhost:8000 | ||
// Update the URL if your setup is different or if you are using a production server | ||
fetch(url, { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
'X-CSRFToken': getCSRFToken(), // Include the CSRF token in the request headers | ||
}, | ||
body: JSON.stringify(requestData), | ||
}) | ||
.then(response => { | ||
console.log(response); | ||
document.getElementById('placeholder-hydrolearn-modules').classList.add('hidden'); | ||
document.getElementById('hydrolearn-modules-plugin').classList.remove('hidden'); | ||
|
||
if (!response.ok) { | ||
throw new Error('Network response was not ok'); | ||
} | ||
return response.json(); // Assuming the response is JSON | ||
}) | ||
.then(data => { | ||
console.log(data); | ||
|
||
let modulesHTML = `` | ||
data['modules'].forEach(module => { | ||
modulesHTML += ` | ||
<div class="hydrolearn_module card mb-3 w-100 card-height" > | ||
<div class="row g-0"> | ||
<div class="col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" >` | ||
if (module.course_url){ | ||
modulesHTML += ` | ||
<header class="course-image"> | ||
<div class="cover-image"> | ||
<a href="${module.course_url}"> | ||
<img src="${module.course_image_url}" class="img-tile img-fluid rounded-start" alt="..." > | ||
</a> | ||
<div class="learn-more" aria-hidden="true"> | ||
<a href="${module.course_url}">OPEN MODULE</a> | ||
</div> | ||
</div> | ||
</header> | ||
</div>` | ||
|
||
} | ||
else{ | ||
modulesHTML += ` | ||
<header class="course-image"> | ||
<div class="cover-image"> | ||
<a href='javascript:void(0)' class='portfolio-link'> | ||
<img src="${module.course_image_url}" class="img-tile img-fluid rounded-start h-100" alt="..." > | ||
</a> | ||
<div class="learn-more" aria-hidden="true"> | ||
<a href="https://edx.hydrolearn.org/courses">OPEN MODULE</a> | ||
</div> | ||
</div> | ||
</header> | ||
</div>` | ||
} | ||
modulesHTML += ` | ||
<div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light"> | ||
<div class="card-body"> | ||
<div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start"> | ||
<h5 class="card-title card-h5">${module.course_title}</h5> | ||
</div> | ||
<div class="row g-0"> | ||
<div class="col col-md-6 col-lg-6 col-xl-6 text-start"> | ||
<p class="card-subtitle mb-2 text-muted" style="font-size:12px;">` | ||
if ( module.course_organization){ | ||
modulesHTML +=`<span class="text-muted">${module.course_organization}</span>` | ||
|
||
} | ||
modulesHTML += `</p></div>` | ||
modulesHTML += ` | ||
<div class="col col-md-6 col-lg-6 col-xl-6 text-end"> | ||
<p class="card-subtitle mb-2 text-muted" style="font-size:12px">` | ||
if(module.course_code){ | ||
modulesHTML += `<span class="text-muted">${module.course_code }</span>` | ||
} | ||
modulesHTML += `</p></div></div>` | ||
|
||
if (module.course_weekly_effort){ | ||
modulesHTML +=`<p class="card-subtitle mb-2 text-muted fst-italic" style="font-size:12px;">Effort: ${module.course_weekly_effort}</p>` | ||
} | ||
modulesHTML +=` | ||
<div class="d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start"> | ||
<p class="name w-100 mb-3 overflow-auto"> | ||
${module.course_description_content} | ||
</p> | ||
</div>` | ||
modulesHTML += `</div></div></div></div>` | ||
|
||
}); | ||
|
||
document.getElementById('hydrolearn-modules-plugin').innerHTML = modulesHTML; | ||
|
||
// For example, you could iterate over the data and append it to an element in your HTML | ||
}) | ||
.catch(error => { | ||
console.error('There was a problem with the fetch operation:', error); | ||
}); | ||
} | ||
const create_placeholders = () => { | ||
let placeholdersHtmlElement = document.getElementById('placeholder-hydrolearn-modules'); | ||
let htmlPlaceholders = ''; | ||
for(var i = 0; i < 10; i++){ | ||
htmlPlaceholders+=` | ||
<div class="card mb-3 w-100 card-height" > | ||
<div class="row g-0"> | ||
<div class="animated-background descriptions-background col-12 col-sm-6 col-md-4 col-lg-4 d-flex justify-content-center justify-content-md-end justify-content-lg-end align-items-center align-items-lg-center align-items-md-center" > | ||
<header class="course-image"> | ||
<div class="cover-image"> | ||
</div> | ||
</header> | ||
</div> | ||
<div class="col-12 col-sm-6 col-md-8 col-lg-8 border-light"> | ||
<div class="card-body" style="background:white;"> | ||
<div class="d-flex align-items-baseline gap-2 justify-content-center justify-content-lg-start justify-content-md-start"> | ||
<h5 class="card-title card-h5 animated-background titles-loading-background" style="width: 50%; height:20px;" ></h5> | ||
</div> | ||
<p class="animated-background titles-loading-background card-subtitle mb-2 text-muted fst-italic" style="height:20px; width:25%;"></p> | ||
<div class="animated-background descriptions-background d-flex flex-column justify-content-center justify-content-lg-start justify-content-md-start text-center text-lg-start text-md-start"> | ||
<p class="name w-100 mb-3 overflow-auto"> | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
` | ||
} | ||
placeholdersHtmlElement.innerHTML = htmlPlaceholders; | ||
} | ||
|
||
create_placeholders(); | ||
fetchLearningModules(); |
16 changes: 16 additions & 0 deletions
16
hydrolearn_modules_app/templates/hydrolearn-modules-base.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{% extends CMS_TEMPLATE %} | ||
|
||
{% load sekizai_tags static cms_tags %} | ||
|
||
{% addtoblock "js" %} | ||
|
||
{% endaddtoblock %} | ||
|
||
{% addtoblock "css" %} | ||
|
||
|
||
{% endaddtoblock %} | ||
|
||
{% block content %} | ||
|
||
{% endblock %} |
Oops, something went wrong.