diff --git a/admin_interface/admin.py b/admin_interface/admin.py index 4cad1d2..5e161fc 100644 --- a/admin_interface/admin.py +++ b/admin_interface/admin.py @@ -94,6 +94,7 @@ class ThemeAdmin(admin.ModelAdmin): 'related_modal_background_color', 'related_modal_background_opacity', 'related_modal_rounded_corners', + 'related_modal_close_button_visible', ) }), (_('List Filter'), { diff --git a/admin_interface/migrations/0013_add_related_modal_close_button.py b/admin_interface/migrations/0013_add_related_modal_close_button.py new file mode 100644 index 0000000..67cce8b --- /dev/null +++ b/admin_interface/migrations/0013_add_related_modal_close_button.py @@ -0,0 +1,20 @@ +# -*- coding: utf-8 -*- + +from __future__ import unicode_literals + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ('admin_interface', '0012_update_verbose_names'), + ] + + operations = [ + migrations.AddField( + model_name='theme', + name='related_modal_close_button_visible', + field=models.BooleanField(default=True, verbose_name='close button visible'), + ), + ] diff --git a/admin_interface/models.py b/admin_interface/models.py index 43ec872..5aa8f96 100644 --- a/admin_interface/models.py +++ b/admin_interface/models.py @@ -1,4 +1,5 @@ # -*- coding: utf-8 -*- + from __future__ import unicode_literals from django.db import models @@ -247,6 +248,9 @@ class Theme(models.Model): related_modal_rounded_corners = models.BooleanField( default=True, verbose_name=_('rounded corners')) + related_modal_close_button_visible = models.BooleanField( + default=True, + verbose_name=_('close button visible')) list_filter_dropdown = models.BooleanField( default=False, diff --git a/admin_interface/static/admin_interface/related-modal/related-modal.js b/admin_interface/static/admin_interface/related-modal/related-modal.js index 321048d..a71983e 100644 --- a/admin_interface/static/admin_interface/related-modal/related-modal.js +++ b/admin_interface/static/admin_interface/related-modal/related-modal.js @@ -78,7 +78,10 @@ if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined') } // build the iframe html - var iframeHTML = ''; + var iframeHTML = '
'; + // create the iframe jquery element var iframeEl = $(iframeHTML); @@ -105,6 +108,8 @@ if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined') // open the popup using magnific popup $.magnificPopup.open({ mainClass: iframeInternalModalClass, + showCloseBtn: true, + closeBtnInside: true, items: { src: iframeEl, type: 'inline' diff --git a/admin_interface/templates/admin_interface/css/related-modal.css b/admin_interface/templates/admin_interface/css/related-modal.css index 56bf800..7cae8bd 100644 --- a/admin_interface/templates/admin_interface/css/related-modal.css +++ b/admin_interface/templates/admin_interface/css/related-modal.css @@ -3,38 +3,56 @@ related modal + magnific popup customization https://github.com/dimsemenov/Magnific-Popup */ .admin-interface .related-modal.mfp-bg { - background-color:{{ theme.related_modal_background_color }}; + background-color: {{ theme.related_modal_background_color }}; opacity: {{ theme.related_modal_background_opacity }}; } .admin-interface .related-modal .mfp-content { height: 100%; - overflow: hidden; - {% if theme.related_modal_rounded_corners %} - border-radius: 4px; - {% endif %} -webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2); } .admin-interface .related-modal .mfp-container { - padding: 90px 90px 90px 90px; + padding: 80px 80px 80px 80px; } .admin-interface .related-modal__nested .mfp-container { - padding: 30px 60px 30px 60px; + padding: 40px 80px 40px 80px; } @media (max-width:640px){ .admin-interface .related-modal .mfp-container { - padding: 60px 15px 60px 15px; + padding: 80px 20px 80px 20px; } .admin-interface .related-modal__nested .mfp-container { - padding: 30px 30px 30px 30px; + padding: 40px 40px 40px 40px; } } +@media (max-height:640px){ + .admin-interface .related-modal .mfp-container { + padding-top: 20px; + padding-bottom: 20px; + } + .admin-interface .related-modal__nested .mfp-container { + padding: 40px 40px 40px 40px; + } +} + +.admin-interface .related-modal .related-modal-iframe-container { + display: block; + width: 100%; + height: 100%; + position: relative; + z-index: 100; + overflow: hidden; + {% if theme.related_modal_rounded_corners %} + border-radius: 4px; + {% endif %} +} + .admin-interface .related-modal #related-modal-iframe { width: 100%; height: 100%; @@ -47,4 +65,20 @@ https://github.com/dimsemenov/Magnific-Popup margin: 0 auto; padding: 0; display: block; -} \ No newline at end of file +} + +.admin-interface .related-modal .mfp-close { + width: 40px; + height: 40px; + opacity: 1.0; + color: rgba(0, 0, 0, 0.4); + {% if not theme.related_modal_close_button_visible %} + display: none; + {% endif %} +} + +.admin-interface .related-modal .mfp-close:hover, +.admin-interface .related-modal .mfp-close:active { + color: rgba(0, 0, 0, 0.6); + top: 0; +}