Merge pull request #5 from Aquaveo/communities_plugin

Communities plugin

backend/settings.py

@@ -81,6 +81,7 @@
     "zotero_publications_app",
     "hydrolearn_modules_app",
     "hydroshare_resources_app",
+    "hydroshare_community_resources_app",
 ]
 
 MIDDLEWARE = [

backend/urls.py

@@ -9,6 +9,10 @@
     path("zotero_publications_app/", include("zotero_publications_app.urls")),
     path("hydrolearn_modules_app/", include("hydrolearn_modules_app.urls")),
     path("hydroshare_resources_app/", include("hydroshare_resources_app.urls")),
+    path(
+        "hydroshare_community_resources_app/",
+        include("hydroshare_community_resources_app.urls"),
+    ),
 ]
 
 # if settings.DEBUG:

hydroshare_community_resources_app/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class HydroshareCommunitiesResourcesAppConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "hydroshare_community_resources_app"

hydroshare_community_resources_app/cms_plugins.py

@@ -0,0 +1,20 @@
+from cms.plugin_base import CMSPluginBase
+from cms.plugin_pool import plugin_pool
+from django.utils.translation import gettext_lazy as _
+from .models import HydroShareCommunityResourcesList
+
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+@plugin_pool.register_plugin
+class HydroShareCommunityResourcesList(CMSPluginBase):
+    model = HydroShareCommunityResourcesList
+    name = _("HydroShare Community Resources Plugin")
+    render_template = "hydroshare-community-resources.html"
+    cache = False
+
+    def render(self, context, instance, placeholder):
+        context = super().render(context, instance, placeholder)
+        return context

hydroshare_community_resources_app/migrations/0001_initial.py

@@ -0,0 +1,32 @@
+# Generated by Django 3.2 on 2024-10-01 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='HydroShareCommunityResourcesList',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='hydroshare_community_resources_app_hydrosharecommunityresourceslist', serialize=False, to='cms.cmsplugin')),
+                ('user', models.CharField(blank=True, default='', max_length=200)),
+                ('password', models.CharField(blank=True, default='', max_length=200)),
+                ('community_id', models.CharField(default='', max_length=200)),
+                ('placeholder_image', models.CharField(default='https://www.tethysplatform.org/images/tethys_data.png', max_length=200)),
+                ('updated_version', models.IntegerField(default=0, editable=False)),
+                ('resources', models.JSONField(default=dict, editable=False)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+    ]

hydroshare_community_resources_app/models.py

@@ -0,0 +1,16 @@
+from cms.models.pluginmodel import CMSPlugin
+from django.db import models
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class HydroShareCommunityResourcesList(CMSPlugin):
+    user = models.CharField(max_length=200, default="", blank=True)
+    password = models.CharField(max_length=200, default="", blank=True)
+    community_id = models.CharField(max_length=200, default="")
+    placeholder_image = models.CharField(
+        max_length=200, default="https://www.tethysplatform.org/images/tethys_data.png"
+    )
+    updated_version = models.IntegerField(default=0, editable=False)
+    resources = models.JSONField(editable=False, default=dict)

hydroshare_community_resources_app/static/css/hs_community_resources.css

@@ -0,0 +1,179 @@
+:root {
+    --image-width: 200px;
+    --image-height: 200px;
+  }
+
+  .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 */
+  }
+
+  .hydroshare_resource{
+    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;
+  }
+  .hydroshare_resource:hover,
+  .hydroshare_resource: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%);
+  }
+
+  /* The following are css for the toggle */
+  @import url("https://fonts.googleapis.com/css?family=Inter:400'");
+
+  /* Include FontAwesome for icons */
+  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
+
+  .middle {
+    width: 100%;
+    padding-bottom: 50px;
+    text-align: center;
+  }
+
+  .middle h1 {
+    font-family: "Inter", sans-serif;
+    color: #fff;
+  }
+
+  .middle input[type="radio"] {
+    display: none;
+  }
+
+  .middle input[type="radio"]:checked + .box {
+    background-color: #19a7ce;
+  }
+
+  .middle input[type="radio"]:checked + .box span {
+    color: white;
+    transform: translateY(35px); /* Adjusted from 70px */
+  }
+
+  .middle input[type="radio"]:checked + .box span:before {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+
+  .middle .box {
+    width: 100px; /* Adjusted from 200px */
+    height: 100px; /* Adjusted from 200px */
+    background-color: #fff;
+    transition: all 250ms ease;
+    will-change: transform;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    font-family: "Inter", sans-serif;
+    font-weight: 900;
+  }
+
+  .middle .box:active {
+    transform: translateY(5px); /* Adjusted from 10px */
+  }
+
+  .middle .box span {
+    position: absolute;
+    transform: translate(0, 30px); /* Adjusted from 60px */
+    left: 0;
+    right: 0;
+    transition: all 300ms ease;
+    font-size: 1em; /* Adjusted from 1.5em */
+    user-select: none;
+    color: #19a7ce;
+  }
+
+  .middle .box span:before {
+    font-size: 0.8em; /* Adjusted from 1.2em */
+    font-family: FontAwesome;
+    display: block;
+    transform: translateY(-40px); /* Adjusted from -80px */
+    opacity: 0;
+    transition: all 300ms ease-in-out;
+    font-weight: normal;
+    color: white;
+  }