added new validator and also max size is only 400px

Aquaveo · Nov 1, 2023 · 93defe3 · 93defe3
1 parent 5d76e2b
commit 93defe3
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 32 deletions.
diff --git a/backend/migrations/0011_auto_20231101_1931.py b/backend/migrations/0011_auto_20231101_1931.py
@@ -0,0 +1,29 @@
+# Generated by Django 3.2 on 2023-11-01 19:31
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('backend', '0010_auto_20231101_1754'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='hydroshareresource',
+            name='height',
+            field=models.PositiveIntegerField(default=200, validators=[django.core.validators.MinValueValidator(150), django.core.validators.MaxValueValidator(400)]),
+        ),
+        migrations.AlterField(
+            model_name='hydroshareresource',
+            name='image',
+            field=models.CharField(default='https://picsum.photos/200', max_length=200),
+        ),
+        migrations.AlterField(
+            model_name='hydroshareresource',
+            name='width',
+            field=models.PositiveIntegerField(default=200, validators=[django.core.validators.MinValueValidator(150), django.core.validators.MaxValueValidator(400)]),
+        ),
+    ]
diff --git a/backend/models.py b/backend/models.py
@@ -1,14 +1,14 @@
 from cms.models.pluginmodel import CMSPlugin
-
+from django.core.validators import MaxValueValidator, MinValueValidator 
 from django.db import models
 import uuid
 
 class HydroShareResource(CMSPlugin):
     title = models.CharField(max_length=200, default='resource title')
     subtitle = models.CharField(max_length=200, default='resource subtitle')
-    image = models.CharField(max_length=200, default='https://placehold.co/400')
-    width= models.IntegerField(default=200)
-    height=models.IntegerField(default=200)
+    image = models.CharField(max_length=200, default='https://picsum.photos/200')
+    width= models.PositiveIntegerField(default=200, validators=[MinValueValidator(150), MaxValueValidator(400)])
+    height=models.PositiveIntegerField(default=200, validators=[MinValueValidator(150), MaxValueValidator(400)])
     description= models.TextField(default='resource description')
     github_url=models.CharField(max_length=200, default='', blank=True)
     documentation_url=models.CharField(max_length=200, default='', blank=True)

diff --git a/backend/templates/hydroshare_resource_template.html b/backend/templates/hydroshare_resource_template.html
@@ -4,6 +4,10 @@
 
 
   document.addEventListener('DOMContentLoaded', function () {
+    //const helpIcons = document.querySelectorAll('.helpicon');
+    //const spans = document.querySelectorAll('span');
+    //const truncatedElements = document.querySelectorAll('.truncate');
+
     const helpIcon = document.getElementById('helpicon-{{ instance.unique_identifier }}');
     const spanElement = document.getElementById('span-{{ instance.unique_identifier }}');
     const truncatedElement = document.getElementById('truncate-{{ instance.unique_identifier }}');
@@ -27,7 +31,6 @@
     --image-width: {{ instance.width }}px;
     --image-height: {{ instance.height }}px;
   }
-
   .truncate {
     position: relative;
     max-width:90%;
@@ -54,42 +57,27 @@
     top:0;
     position: absolute;
   }
-
   .img-tile{
     object-fit: cover;
-    width: var(--image-width); 
-    height: var(--image-height);
-    max-height: var(--image-height);
-    max-width:  var(--image-width);
   }
 
-  .aspect-ratio-box{
-    display: flex;
-    justify-content: center;
-    height: var(--image-height);
-    width:  var(--image-width);
-  }
-  .a-tag-img{
-    width: fit-content;
-  }
 
 </style>
 {% endaddtoblock %}
 <div class="card border-light mb-3 w-100 card-height" >
     <div class="row g-0">
-
-        <div class="aspect-ratio-box col-md-3" >
-          {% if instance.web_site_url  %} 
-            <a href="{{ instance.web_site_url }}" class="a-tag-img">
-              <img src="{{ instance.image }}" class="img-tile" alt="...">
-            </a>
-          {% else %}
-            <a href='javascript:void(0)' class='a-tag-img portfolio-link'>
-              <img src="{{ instance.image }}" class="img-tile" alt="...">
-            </a>
-          {% endif %}
-        </div>
-      <div class="col-md-9">
+      <div class="col-md-4 col-lg-4" style="min-width:{{ instance.width }}px; min-height:{{ instance.height }}px; width:fit-content; height:{{ instance.height }}px;">
+        {% if instance.web_site_url  %} 
+          <a href="{{ instance.web_site_url }}">
+            <img src="{{ instance.image }}" class="img-tile img-fluid rounded-start" alt="..."  style="width:{{ instance.width }}px; height:{{ instance.height }}px;">
+          </a>
+        {% else %}
+          <a href='javascript:void(0)' class='portfolio-link'>
+            <img src="{{ instance.image }}" class="img-tile img-fluid rounded-start h-100" alt="..." style="width:{{ instance.width }}px; height:{{ instance.height }}px;">
+          </a>
+        {% endif %}
+      </div>
+      <div class="col-md-8 col-lg-8">
         <div class="card-body">
           <h5 class="card-title card-h5">{{ instance.title }}</h5>
           <div style="width:fit-content;">