improved functionality and appearance of inline-image expansion

cc-d · Dec 20, 2019 · 9e1d779 · 9e1d779
1 parent 95d531e
commit 9e1d779
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git a/app/functions/functions.py b/app/functions/functions.py
@@ -281,7 +281,7 @@ def inline_expansion(text):
         z = [x for x in image_exts if a[1].lower()[-5:].find(x) != -1]
 
         if (len(z) > 0):
-            text = '<div class="expansion-block">' + a[0] + \
+            text = text.replace(a[0], '<div class="expansion-block">' + '<a class="inline-link-a" ' + a[0][3:] + \
                     '<div style="display: inline">' + \
                     '<div class="inline-expansion-expand" id="btn-' + random_id + '">' + \
                         '&nbsp;' + \
@@ -295,7 +295,7 @@ def inline_expansion(text):
                         '<img class="inline-image" id="real-' + random_id + '" real-src="' + html.escape(a[1]) + '">' + \
                     '</div>' + \
                     '</div>' + \
-                '</div>'    
+                '</div>', 1 )
 
     return text
 

diff --git a/app/static/base.css b/app/static/base.css
@@ -556,6 +556,7 @@ ul, li{
     max-height: 100%;
     overflow: hidden;
     color: #eee!important;
+    margin-right: 0.5rem;
 }
 .mod-option-wrapper {
     float: right;
@@ -1298,16 +1299,32 @@ blockquote {
 
 .inline-expand-link {
     position: absolute;
-    margin-top: 2px;
-    margin-left: 2px;
 }
 
 .inline-expansion-expand {
     display: inline;
 }
 
+.inline-link-a {
+    word-break: break-all;
+}
+
 .expansion-block {
-    display: block;
+    display: inline;
+    margin-right: 1rem;
+    padding-right: 0.5rem;
+}
+
+.expansion-block-expanded {
+    display: inline;
+    margin-right: 0px;
+    padding-right: 0.5rem;
+}
+
+.expansion-block-closed {
+    display: inline;
+    margin-right: 0rem;
+    padding-right: 0.5rem;
 }
 
 .inline-expanded {
@@ -1317,8 +1334,8 @@ blockquote {
 }
 
 .inline-image {
-    max-height: 90%;
-    max-width: 90%;
+    max-height: 100%;
+    max-width: 100%;
 }
 
 .pref-language, .pref-language > * {

diff --git a/app/static/main.js b/app/static/main.js
@@ -506,17 +506,19 @@ function jslogin() {
 }
 
 function inlineExpand(elem_id) {
+    $('#btn-' + elem_id).parent().parent().attr('class', 'expansion-block-expanded');
     $('#btn-' + elem_id).html('&nbsp;' +
         '<a class="inline-expand-link" href="javascript:inlineCollapse(\'' + elem_id + '\');">' +
         '<i class="fa fa-minus-square-o"></i></a></div>');
     elem = $('#hidden-' + elem_id);
-    doubleParent = $(elem).parent().parent();
+
     $(elem).attr('class', 'inline-expanded');
     $(elem).css('display', 'block');
     $('#real-' + elem_id).attr('src', $('#real-' + elem_id).attr('real-src'));
 }
 
 function inlineCollapse(elem_id) {
+    $('#btn-' + elem_id).parent().parent().attr('class', 'expansion-block-closed');
     $('#btn-' + elem_id).html('&nbsp;' +
         '<a class="inline-collapse-link" href="javascript:inlineExpand(\'' + elem_id + '\');">' +
         '<i class="fa fa-plus-square-o"></i></a>');