Improved responsive m2m selector, ckeditor and sorl-thumbnail widgets
Fabio Caccamo
parent
b24c6010d2
commit
a6df45a571
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
/*
|
||||
list-filter-dropdown
|
||||
*/
|
||||
|
||||
.admin-interface .list-filter-dropdown {
|
||||
margin-top:10px;
|
||||
margin-bottom:20px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-interface div[style="float:left"] + div.help {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.admin-interface textarea.tinymce ~ p.help {
|
||||
margin-top:5px/* !important*/;
|
||||
margin-top:5px !important;
|
||||
}
|
||||
Loading…
Reference in New Issue