use thumb and zoom screenshot openrightsgroup/Blocking-Middleware#115

dantheta · Aug 10, 2021 · 35a86ec · 35a86ec
1 parent 39daac1
commit 35a86ec
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/BlockedFrontend/models.py b/BlockedFrontend/models.py
@@ -499,6 +499,9 @@ def get_report_categories(self, category_type):
     def get_screenshot_url(self):
         return "https://www.blocked.org.uk/screenshots/{0}.png".format(self['hash'])
 
+    def get_screenshot_thumb_url(self):
+        return "https://www.blocked.org.uk/screenshots/{0}_thumb.png".format(self['hash'])
+
     def get_screenshot_date(self):
         try:
             import requests

diff --git a/BlockedFrontend/templates/admin/ispreports_email.html b/BlockedFrontend/templates/admin/ispreports_email.html
@@ -37,6 +37,10 @@
       return false;
     });
 
+    $('a.screenshot-modal').click(function(){
+        $('#screenshot-modal').modal('toggle')
+        return false;
+    });
 
 });
 {% endblock %}
@@ -94,7 +98,7 @@ <h3>Site details</h3>
 </div>
 
 <div style="">
-    <img src="{{ urlobj.get_screenshot_url() }}" style="max-height: 16em" class="img-responsive" title="{{ url }} screenshot {{ urlobj.get_screenshot_date() }}"/>
+    <a href="" class="screenshot-modal"><img src="{{ urlobj.get_screenshot_thumb_url() }}" style="max-height: 16em" class="img-responsive" title="{{ url }} screenshot {{ urlobj.get_screenshot_date() }}"/></a>
 </div>
 
 </div>
@@ -514,6 +518,20 @@ <h4>Review notes</h4>
 </div> <!-- /#block -->
 
 </div> <!-- /.tab-content -->
+
+<div class="modal" id="screenshot-modal" style="" >
+    <div class="modal-dialog modal-lg" role="document" style="">
+        <div class="modal-content" >
+
+            <div class="modal-body" style="">
+                <img src="{{ urlobj.get_screenshot_url() }}" style="" class="img-responsive" title="{{ url }} screenshot {{ urlobj.get_screenshot_date() }}"/>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+</div>
 {% endblock body %}
 
 {% macro policy_match_help(value) %}