From a6df45a571be36770513a228ce93fa9aed5f248e Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Fri, 19 May 2017 12:59:02 +0200 Subject: [PATCH] Improved responsive m2m selector, ckeditor and sorl-thumbnail widgets --- .../css/admin-interface-fix.css | 127 ++++++++++++++---- .../admin_interface/css/admin-interface.css | 22 ++- .../admin_interface/css/ckeditor.css | 90 +++++++++++-- .../css/list-filter-dropdown.css | 1 + .../admin_interface/css/modeltranslation.css | 37 ++--- .../admin_interface/css/related-modal.css | 14 +- .../admin_interface/css/sorl-thumbnail.css | 36 ++++- .../templates/admin_interface/css/tinymce.css | 2 +- 8 files changed, 260 insertions(+), 69 deletions(-) diff --git a/admin_interface/templates/admin_interface/css/admin-interface-fix.css b/admin_interface/templates/admin_interface/css/admin-interface-fix.css index de0bf60..f38b018 100644 --- a/admin_interface/templates/admin_interface/css/admin-interface-fix.css +++ b/admin_interface/templates/admin_interface/css/admin-interface-fix.css @@ -45,6 +45,18 @@ text-align:right; } +@media (max-width:767px){ + .admin-interface.login .submit-row label { + display:none; + } + .admin-interface.login .submit-row { + float: left; + width: 100%; + margin-top: 20px; + margin-bottom: 30px; + } +} + .admin-interface #header { height:auto; min-height:40px; @@ -55,7 +67,7 @@ margin-top:10px; margin-bottom:10px; margin-right:15px; - display:inline-block !important; + display:inline-block !important; /* override inline display:none; */ } .admin-interface #branding h1 img.logo+span { @@ -83,7 +95,7 @@ */ .admin-interface #changelist .paginator { - margin-top:-1px !important; /* merge 2 borders into 1 */ + margin-top:-1px; /* merge 2 borders into 1 */ line-height:42px; } @@ -91,7 +103,7 @@ .admin-interface .paginator a:link, .admin-interface .paginator a:visited, .admin-interface .paginator .this-page { - padding:7px 12px !important; + padding:7px 12px; } .admin-interface .paginator a, @@ -105,7 +117,7 @@ } .admin-interface .paginator .this-page + a:not(.showall) { - margin-left:-25px/* !important*/; + margin-left:-25px; } body.admin-interface .paginator a.showall, @@ -147,9 +159,16 @@ body.admin-interface .paginator a.showall:visited { } @media (max-width:767px){ + + .admin-interface form .form-row p.file-upload { + width: 100%; + } + .admin-interface form .form-row p.file-upload > a { margin-right:0px; display: block; + white-space: pre-wrap; + word-break: break-word; } .admin-interface form .form-row p.file-upload .clearable-file-input { @@ -166,28 +185,28 @@ body.admin-interface .paginator a.showall:visited { } -/* HELPS / MESSAGES */ -.admin-interface form .wide p.help { - padding-left:10px; +/* FIX WIDE FIELDSET HELPS / ERROR MESSAGES */ +.admin-interface form .wide p.help, +.admin-interface form .wide div.help { + padding-left: 50px; +} + +.admin-interface form .wide input + p.help, +.admin-interface form .wide input + div.help { + margin-left: 160px; } @media (max-width:767px){ - .admin-interface form .wide p.help { - padding-left:0px; + .admin-interface form .form-row div.help { + display: block; + width: 100%; } } -.admin-interface form .aligned.wide p.help, -.admin-interface form .aligned.wide ul.error-list, -.admin-interface form .aligned.wide ul.errorlist { +.admin-interface form .wide ul.errorlist { margin-left: 200px; } -.admin-interface form .aligned.wide div.help { - margin-left: 210px; -} - - /* LIST FILTER */ .admin-interface .module.filtered h2 { border-bottom-left-radius:0; @@ -220,12 +239,6 @@ body.admin-interface .paginator a.showall:visited { } /* end fix */ -/* selector chooseall / clearall color on hover -> just a lighten grey */ -.admin-interface a.selector-chooseall:hover, -.admin-interface a.selector-clearall:hover { - color:#888888/* !important*/; -} - .admin-interface .inline-group { overflow-x:auto; } @@ -237,7 +250,7 @@ body.admin-interface .paginator a.showall:visited { /* end fix */ .admin-interface .inline-related h3 { - padding:6px 10px/* !important*/; + padding:6px 10px; } /* begin fix issue #12 - Inlines bad delete buttons alignement */ @@ -268,8 +281,66 @@ body.admin-interface .paginator a.showall:visited { background-color:#AAAAAA; } -/* selector chooseall / clearall color on hover -> just a lighten grey */ -.admin-interface a.selector-chooseall:hover, -.admin-interface a.selector-clearall:hover { - color:#888888/* !important*/; +/* fix textarea horizontal scroll on Firefox */ +@media (max-width: 767px){ + .admin-interface .aligned .form-row textarea { + width: 100% !important; + flex: 0 1 auto; + } +} + +/* improve responsive selector */ +.admin-interface .selector.stacked { + width: 480px; + margin-right: 10px; +} + +.admin-interface .selector.stacked .selector-chooser { + margin-left: calc(50% - 25px); +} + +@media (min-width: 767px) and (max-width: 1124px){ + .admin-interface .selector { + width: 610px; + display: block; + } + .admin-interface .selector .selector-available, + .admin-interface .selector .selector-chosen { + width: 285px; + flex: 0 1 auto; + } + .admin-interface .selector .selector-filter { + display: flex; + align-items: center; + } + .admin-interface .selector .selector-filter label { + margin: 0; + } + .admin-interface .selector .selector-available input { + width: auto; + flex: 1 1; + } + .admin-interface .selector select { + width: 100%; + } +} + +@media (max-width: 767px){ + .admin-interface .selector.stacked { + margin-right: 0px; + } + .admin-interface .selector.stacked .selector-available select { + margin-bottom: 0px; + } +} + +/* equalize selectors height by adding the height of the .selector-available filter-bar */ +.admin-interface .selector:not(.stacked) .selector-chosen select { + height: calc(46px + 17.2em); +} + +/* equalize horizontal and vertical select padding */ +.admin-interface .selector .selector-available select, +.admin-interface .selector .selector-chosen select { + padding: 7px 10px; } diff --git a/admin_interface/templates/admin_interface/css/admin-interface.css b/admin_interface/templates/admin_interface/css/admin-interface.css index d900733..7c2a096 100644 --- a/admin_interface/templates/admin_interface/css/admin-interface.css +++ b/admin_interface/templates/admin_interface/css/admin-interface.css @@ -72,11 +72,27 @@ color:{{ theme.css_module_text_color }}; } -.admin-interface .selector-chosen h2 { +.admin-interface .selector .selector-chosen h2 { + border-color:{{ theme.css_module_background_color }}; background:{{ theme.css_module_background_color }}; color:{{ theme.css_module_text_color }}; } +.admin-interface .selector .selector-available h2, +.admin-interface .selector .selector-chosen h2 { + {% if theme.css_module_rounded_corners %} + border-bottom-left-radius:0; + border-bottom-right-radius:0; + {% endif %} +} + +.admin-interface .selector a.selector-chooseall:focus, +.admin-interface .selector a.selector-chooseall:hover, +.admin-interface .selector a.selector-clearall:focus, +.admin-interface .selector a.selector-clearall:hover { + color:{{ theme.css_generic_link_hover_color }}; +} + .admin-interface a:link, .admin-interface a:visited { color:{{ theme.css_generic_link_color }}; @@ -149,13 +165,13 @@ .admin-interface .paginator a, .admin-interface .paginator a:link, .admin-interface .paginator a:visited { - background-color:#FFFFFF !important; + background-color:#FFFFFF; color:{{ theme.css_generic_link_color }}; } .admin-interface .paginator a:hover, .admin-interface .paginator a:active { - background-color:#F8F8F8 !important; + background-color:#F8F8F8; color:{{ theme.css_generic_link_hover_color }}; } diff --git a/admin_interface/templates/admin_interface/css/ckeditor.css b/admin_interface/templates/admin_interface/css/ckeditor.css index d3fdf9d..1f6d04f 100644 --- a/admin_interface/templates/admin_interface/css/ckeditor.css +++ b/admin_interface/templates/admin_interface/css/ckeditor.css @@ -2,6 +2,14 @@ ckeditor + light theme https://github.com/Ikimea/ckeditor-light-theme */ + +.admin-interface .cke { + border: none; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; +} + .admin-interface .cke_inner, .admin-interface .cke_wysiwyg_frame { border-top-left-radius: 4px; @@ -10,24 +18,46 @@ https://github.com/Ikimea/ckeditor-light-theme border-bottom-right-radius: 4px; } -.admin-interface .cke_top { - background: #f6f6f6; - border-top: none; +.admin-interface .cke_inner { + border: 1px solid #CCCCCC; +} +.admin-interface .cke_chrome { + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +.admin-interface .cke_top { + background: #f8f8f8; + border-top: none; border-top-left-radius: 4px; border-top-right-radius: 4px; + border-bottom: 1px solid #EEEEEE; + padding-left: 10px; + padding-right: 10px; + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.admin-interface .cke_toolgroup { + background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } .admin-interface .cke_bottom { - background: #f6f6f6; - border-top: 1px solid #efefef; + background: #f8f8f8; + border-top: 1px solid #EEEEEE; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; + + -moz-box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .admin-interface .cke_source { @@ -35,14 +65,56 @@ https://github.com/Ikimea/ckeditor-light-theme box-sizing: border-box; } -.admin-interface a.cke_button_on { +.admin-interface a.cke_button, +.admin-interface a.cke_button:active, +.admin-interface a.cke_button:hover, +.admin-interface a.cke_button:focus { + box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; - box-shadow: none; - background-color: rgba(0,0,0,0.1); + background-image: none; border-radius: 4px; + border: none; +} + +.admin-interface a.cke_button:active, +.admin-interface a.cke_button:hover, +.admin-interface a.cke_button:focus { + background-color: #E8E8E8 !important; +} + +.admin-interface a.cke_button.cke_button_on { + background-color: #CCCCCC !important; +} + +.admin-interface a.cke_button.cke_button_disabled { + background-color: transparent !important; } .admin-interface .cke_resizer { - border-color: transparent #999 transparent transparent; + border-color: transparent #666666 transparent transparent; +} + +@media (max-width: 767px){ + + .django-ckeditor-widget { + width: 100% !important; + } + + .admin-interface .cke { + width: 100% !important; + } + + .admin-interface .cke_top { + padding-left: 10px; + padding-right: 10px; + } + + .admin-interface .cke_toolbar { + height: auto; + } + + .admin-interface .cke_contents { + height: auto; + } } \ No newline at end of file diff --git a/admin_interface/templates/admin_interface/css/list-filter-dropdown.css b/admin_interface/templates/admin_interface/css/list-filter-dropdown.css index f1f5d82..396a207 100644 --- a/admin_interface/templates/admin_interface/css/list-filter-dropdown.css +++ b/admin_interface/templates/admin_interface/css/list-filter-dropdown.css @@ -1,6 +1,7 @@ /* list-filter-dropdown */ + .admin-interface .list-filter-dropdown { margin-top:10px; margin-bottom:20px; diff --git a/admin_interface/templates/admin_interface/css/modeltranslation.css b/admin_interface/templates/admin_interface/css/modeltranslation.css index a61aa8b..777aca8 100644 --- a/admin_interface/templates/admin_interface/css/modeltranslation.css +++ b/admin_interface/templates/admin_interface/css/modeltranslation.css @@ -2,46 +2,47 @@ django-modeltranslation support https://github.com/deschler/django-modeltranslation/pull/313/commits */ + .admin-interface #content h1 select { text-transform:uppercase; margin-left:15px; } .admin-interface .ui-tabs .ui-tabs-nav { - padding:10px 0 0 10px/* !important*/; + padding:10px 0 0 10px; } .admin-interface .ui-tabs .ui-tabs-nav li { - margin-left:-1px/* !important*/; + margin-left:-1px; } .admin-interface .ui-tabs .ui-tabs-nav li a { outline:none; - background-color:#f8f8f8/* !important*/; - border:1px solid #eeeeee/* !important*/; - border-bottom:none/* !important*/; + background-color:#f8f8f8; + border:1px solid #eeeeee; + border-bottom:none; text-transform:uppercase; - padding:7px 14px 8px 14px/* !important*/; - margin-top:1px/* !important*/; + padding:7px 14px 8px 14px; + margin-top:1px; } .admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-selected a { - padding:8px 14px 8px 14px/* !important*/; - margin-top:0px/* !important*/; + padding:8px 14px 8px 14px; + margin-top:0px; - margin-bottom:-1px/* !important*/; + margin-bottom:-1px; - background-color:#FFFFFF/* !important*/; - color:{{ theme.css_module_background_color }} !important; + background-color:#FFFFFF; + color:{{ theme.css_module_background_color }}; - border-bottom:1px solid #FFFFFF !important; + border-bottom:1px solid #FFFFFF; } .admin-interface .inline-group .tabular .ui-tabs .ui-tabs-panel { - padding:8px/* !important*/; + padding:8px; } .admin-interface #changelist .row1:not(.selected):hover, @@ -54,12 +55,12 @@ https://github.com/deschler/django-modeltranslation/pull/313/commits } .admin-interface .row2 .ui-tabs .ui-tabs-nav li a { - background-color:#f5f5f5/* !important*/; - border:1px solid #ebebeb/* !important*/; + background-color:#f5f5f5; + border:1px solid #ebebeb; } .admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a { - background-color:#fcfcfc/* !important*/; - border-bottom:1px solid #fcfcfc/* !important*/; + background-color:#fcfcfc; + border-bottom:1px solid #fcfcfc; } \ No newline at end of file diff --git a/admin_interface/templates/admin_interface/css/related-modal.css b/admin_interface/templates/admin_interface/css/related-modal.css index 3156f17..38f9b43 100644 --- a/admin_interface/templates/admin_interface/css/related-modal.css +++ b/admin_interface/templates/admin_interface/css/related-modal.css @@ -3,12 +3,12 @@ related modal + magnific popup customization https://github.com/dimsemenov/Magnific-Popup */ .admin-interface .related-modal.mfp-bg { - background-color:{{ theme.related_modal_background_color }}/* !important*/; - opacity: {{ theme.related_modal_background_opacity }}/* !important*/; + background-color:{{ theme.related_modal_background_color }}; + opacity: {{ theme.related_modal_background_opacity }}; } .admin-interface .related-modal .mfp-content { - height: 100%/* !important*/; + height: 100%; overflow: hidden; {% if theme.related_modal_rounded_corners %} border-radius: 4px; @@ -19,19 +19,19 @@ https://github.com/dimsemenov/Magnific-Popup } .admin-interface .related-modal .mfp-container { - padding: 90px 90px 90px 90px/* !important*/; + padding: 90px 90px 90px 90px; } .admin-interface .related-modal__nested .mfp-container { - padding: 30px 60px 30px 60px/* !important*/; + padding: 30px 60px 30px 60px; } @media (max-width:640px){ .admin-interface .related-modal .mfp-container { - padding: 60px 15px 60px 15px/* !important*/; + padding: 60px 15px 60px 15px; } .admin-interface .related-modal__nested .mfp-container { - padding: 30px 30px 30px 30px/* !important*/; + padding: 30px 30px 30px 30px; } } diff --git a/admin_interface/templates/admin_interface/css/sorl-thumbnail.css b/admin_interface/templates/admin_interface/css/sorl-thumbnail.css index 7e3240d..44c6190 100644 --- a/admin_interface/templates/admin_interface/css/sorl-thumbnail.css +++ b/admin_interface/templates/admin_interface/css/sorl-thumbnail.css @@ -2,8 +2,25 @@ sorl-thumbnail - improved AdminImageMixin widget layout https://github.com/mariocesar/sorl-thumbnail */ -.admin-interface a.thumbnail + input[type="checkbox"] { - margin: 10px 0; + +.admin-interface a.thumbnail + a { + font-weight: normal; +} + +.admin-interface a.thumbnail + a + input[type="checkbox"] { + margin: 10px 0px 10px 18px; +} + +@media (max-width: 767px){ + .admin-interface a.thumbnail + a { + display: block; + margin-top: 3px; + white-space: pre-wrap; + word-break: break-word; + } + .admin-interface a.thumbnail + a + input[type="checkbox"] { + margin: 15px 0; + } } .admin-interface a.thumbnail ~ label { @@ -21,6 +38,13 @@ https://github.com/mariocesar/sorl-thumbnail margin-bottom: 5px; } +@media (max-width: 767px){ + .admin-interface.change-form div[style="float:left"] { + font-size: 12px; + width: 100%; + } +} + .admin-interface .aligned .form-row a.thumbnail ~ input[type="file"] { margin-top: 0px; } @@ -29,9 +53,15 @@ https://github.com/mariocesar/sorl-thumbnail .admin-interface .aligned .form-row a.thumbnail ~ input[type="file"] { width: auto; padding: 0px; + display: block; + margin-top: 3px; } .admin-interface div[style="float:left"] { margin-bottom: 0px; } -} \ No newline at end of file + + .admin-interface div[style="float:left"] + div.help { + margin-top: 0px !important; + } +} diff --git a/admin_interface/templates/admin_interface/css/tinymce.css b/admin_interface/templates/admin_interface/css/tinymce.css index f0aa1a0..6ab1a8e 100644 --- a/admin_interface/templates/admin_interface/css/tinymce.css +++ b/admin_interface/templates/admin_interface/css/tinymce.css @@ -1,3 +1,3 @@ .admin-interface textarea.tinymce ~ p.help { - margin-top:5px/* !important*/; + margin-top:5px !important; } \ No newline at end of file