From 4e18d36c79cf4766a9500b68a28b287de622b852 Mon Sep 17 00:00:00 2001 From: Fabio Caccamo Date: Mon, 5 Feb 2018 12:24:42 +0100 Subject: [PATCH] Added django-tabbed-admin style support --- .../templates/admin/base_site.html | 2 + .../admin_interface/css/jquery.ui.tabs.css | 136 ++++++++++++++++++ .../admin_interface/css/modeltranslation.css | 66 ++------- .../admin_interface/css/tabbed-admin.css | 11 ++ 4 files changed, 158 insertions(+), 57 deletions(-) create mode 100644 admin_interface/templates/admin_interface/css/jquery.ui.tabs.css create mode 100644 admin_interface/templates/admin_interface/css/tabbed-admin.css diff --git a/admin_interface/templates/admin/base_site.html b/admin_interface/templates/admin/base_site.html index fc0062d..4197526 100644 --- a/admin_interface/templates/admin/base_site.html +++ b/admin_interface/templates/admin/base_site.html @@ -19,8 +19,10 @@ https://github.com/fabiocaccamo/django-admin-interface {% include "admin_interface/css/list-filter-dropdown.css" %} {% include "admin_interface/css/recent-actions.css" %} {% include "admin_interface/css/related-modal.css" %} +{% include "admin_interface/css/jquery.ui.tabs.css" %} {% include "admin_interface/css/modeltranslation.css" %} {% include "admin_interface/css/sorl-thumbnail.css" %} +{% include "admin_interface/css/tabbed-admin.css" %} {% include "admin_interface/css/ckeditor.css" %} {% include "admin_interface/css/tinymce.css" %} diff --git a/admin_interface/templates/admin_interface/css/jquery.ui.tabs.css b/admin_interface/templates/admin_interface/css/jquery.ui.tabs.css new file mode 100644 index 0000000..274f986 --- /dev/null +++ b/admin_interface/templates/admin_interface/css/jquery.ui.tabs.css @@ -0,0 +1,136 @@ +/* +* jQuery UI CSS Framework +* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) +* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses. +* http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.core.css +*/ + +/* +backward compatibility: +.ui-tabs-selected: jquery ui < 1.10 +.ui-tabs-active classes jquery ui >= 1.10 +*/ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute; left: -99999999px; } +.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +.ui-helper-clearfix { display: inline-block; } +/* required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { height:1%; } +.ui-helper-clearfix { display:block; } +.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } +.ui-state-disabled { cursor: default !important; } +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } +/* http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.tabs.css */ +.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ +.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } +.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } +.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } +.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } +.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } +.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ +.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } +.ui-tabs .ui-tabs-hide { + position: absolute; + display: none; +} + +/* Custom tabs theme */ +.admin-interface .ui-tabs { + padding: 0; +} +.admin-interface .ui-tabs .ui-tabs-nav { + padding: 10px 0 0 10px; + border-bottom: none; +} +.admin-interface .ui-tabs .ui-tabs-nav li { + margin: 0 0 0 -1px; +} +.admin-interface .ui-tabs .ui-tabs-nav li.required { + font-weight: bold; +} +.admin-interface .ui-tabs .ui-tabs-nav li a { + border: 1px solid #eeeeee; + background-color: #f8f8f8; + border-bottom: none; + color: #666666; + padding: 7px 14px 8px 14px; + margin-top: 1px; + -moz-border-radius-topright: 4px; + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topleft: 4px; + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + border-top-right-radius: 4px; + font-size: 12px; + text-transform: uppercase; + outline: none; +} + +.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; + margin-top: 0px; + margin-bottom: -1px; + font-weight: bold; + background-color: #FFFFFF; + color: {{ theme.css_module_background_color }}; + border-bottom: 1px solid #FFFFFF; +} + +.admin-interface .ui-tabs .ui-tabs-panel { + border: 1px solid #eeeeee; + border-radius: 4px; + padding: 10px; + margin-bottom: 30px; + overflow: hidden; +} + +.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-panel { + padding: 8px; +} + +.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-nav { + padding-left: 4px; +} + +.admin-interface .inline-group .tabular tr td { + vertical-align: bottom; +} + +.admin-interface .inline-group .tabular tr.has_original td.original, +.admin-interface .inline-group .tabular tr td.delete { + vertical-align: top; +} + +.admin-interface .inline-group .tabular .datetime > input { + margin-right: 5px; +} + +.admin-interface .inline-group .tabular .datetime br { + display: none; +} + +.admin-interface #changelist .row1:not(.selected):hover, +.admin-interface #changelist .row2:not(.selected):hover { + background: #f9f9f9; +} + +.admin-interface .row2 { + background: #fcfcfc; +} + +.admin-interface .row2 .ui-tabs .ui-tabs-nav li a { + 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; + border-bottom: 1px solid #fcfcfc; +} diff --git a/admin_interface/templates/admin_interface/css/modeltranslation.css b/admin_interface/templates/admin_interface/css/modeltranslation.css index 7bfad7a..9e1890b 100644 --- a/admin_interface/templates/admin_interface/css/modeltranslation.css +++ b/admin_interface/templates/admin_interface/css/modeltranslation.css @@ -1,65 +1,17 @@ /* django-modeltranslation support -https://github.com/deschler/django-modeltranslation/pull/313/commits +https://github.com/deschler/django-modeltranslation */ .admin-interface #content h1 select { - text-transform:uppercase; - margin-left:15px; + text-transform: uppercase; + margin-left: 15px; + min-width: 50px; } -.admin-interface .ui-tabs .ui-tabs-nav { - padding:10px 0 0 10px; +.admin-interface .ui-tabs .ui-tabs-panel[id^=tab_id_] { + border: none; + border-top: 1px solid #eeeeee; + padding: 0; + margin-bottom: 0; } - -.admin-interface .ui-tabs .ui-tabs-nav li { - margin-left:-1px; -} - -.admin-interface .ui-tabs .ui-tabs-nav li a { - outline:none; - background-color:#f8f8f8; - border:1px solid #eeeeee; - border-bottom:none; - text-transform:uppercase; - - 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; - margin-top:0px; - margin-bottom:-1px; - font-weight: bold; - background-color:#FFFFFF; - color:{{ theme.css_module_background_color }}; - - border-bottom:1px solid #FFFFFF; -} - -.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-panel { - padding:8px; -} - -.admin-interface #changelist .row1:not(.selected):hover, -.admin-interface #changelist .row2:not(.selected):hover { - background:#f9f9f9; -} - -.admin-interface .row2 { - background:#fcfcfc; -} - -.admin-interface .row2 .ui-tabs .ui-tabs-nav li a { - 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; - border-bottom:1px solid #fcfcfc; -} \ No newline at end of file diff --git a/admin_interface/templates/admin_interface/css/tabbed-admin.css b/admin_interface/templates/admin_interface/css/tabbed-admin.css new file mode 100644 index 0000000..9458790 --- /dev/null +++ b/admin_interface/templates/admin_interface/css/tabbed-admin.css @@ -0,0 +1,11 @@ +/* +django-tabbed-admin support +https://github.com/omji/django-tabbed-admin +*/ + +@media (max-width: 767px){ + /* fix horizontal overflow - responsive.css:563 */ + .admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .aligned .form-row > div { + width: 100%; + } +}