search

alesdotio / django-admin-shortcuts

Add simple and pretty shortcuts to the django admin homepage.
Other
205 stars 53 forks source link

Version 2.0.0 Incompatible with DjangoCMS Admin Style #34

Open carderm opened 6 years ago

carderm commented 6 years ago

Hi - the new version 2.0.0 overwrites the admin/base_site.html which is also overwritten by djangocms_admin_style. Unfortunately only one can take precedence.. I've started on a fix (https://github.com/mcldev/django-admin-shortcuts) that will create a second app 'admin_shortcuts_django_cms' (can be called whatever)... that will create overrides of DjangoCMS Admin Style specific templates only, leaving their base_site template. There are still some formatting issues - but they could be handled by DjangoCMS Admin Style?

BertrandBordage commented 3 years ago

Thanks for sharing @carderm! I still had issues with it, so I made a fix without fork. With django-admin-shortcuts normally installed, add these two files: templates/admin/base_site.html

{# FIXME: This is a workaround to https://github.com/alesdotio/django-admin-shortcuts/issues/34 #}
{#        It consists in a merge of both conflicting base_site.html #}
{% extends "admin/base.html" %}
{% load i18n static admin_style_tags admin_shortcuts_tags %}

{% block extrastyle %}
{{ block.super }}
{% include 'admin/inc/extrastyle.html' %}
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
  <style type="text/css">{% admin_shortcuts_css %}</style>
{% endblock %}

{% block extrahead %}
{{ block.super }}
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="{% static 'djangocms_admin_style/css/djangocms-admin.css' %}" />
{% if request.user.is_superuser %}{% render_update_notification %}{% endif %}
<script src="{% static 'djangocms_admin_style/js/dist/bundle.adminstyle.min.js' %}"></script>
{% include 'admin/inc/extrahead.html' %}
{% admin_shortcuts_js %}
{% endblock %}

{% block title %}{% include 'admin/inc/title.html' %}{% endblock %}

{% block bodyclass %}{{ block.super }} djangocms-admin-style{% endblock %}

{% block branding %}{% include 'admin/inc/branding.html' %}{% endblock %}

{% block userlinks %}{% include 'admin/inc/userlinks.html' %}{{ block.super }}{% endblock %}

{% block nav-global %}
  {% block admin_shortcuts %}
    </div>  {# this closes the #header div #}
    <div class="admin_shortcuts">
      {% admin_shortcuts %}
    {# </div>  don't close this one, because it's closed in base.html #}
  {% endblock %}
{% endblock %}

templates/admin_shortcuts/base.css

{% block main %}{% endblock %}
{% block count %}{% endblock %}
{% block advanced %}{% endblock %}
{% block icons %}{% endblock %}

.admin_shortcuts .shortcuts li a .icon {
  position: static;
  color: inherit;
}

.admin_shortcuts .shortcuts li a .icon i {
  font-size: inherit;
}
carderm commented 3 years ago

Thanks @BertrandBordage - do you think this could be merged as a pull request to resolve the issues?

BertrandBordage commented 3 years ago

I'm not sure it's that simple, as this module needs to support the builtin Django admin as well as django-cms-admin-style… If we put these changes in a PR, django-admin-shortcuts would only work with django-cms-admin-style.

DmytroLitvinov commented 1 year ago

Starting djangocms-admin-style v3.2.1 it does not work because they removed support for shortcuts https://github.com/django-cms/djangocms-admin-style/blob/d2055f107d2ac0b1e30460ff84f83cfa52087fd5/djangocms_admin_style/sass/djangocms-admin.scss#L31.

Here you can compare changes between 3.2.0 and 3.2.1

What I did instead is took content from components/shortcuts.scss and converted it manually from scss to css. Here is my scss which I converted (pay attention that I just added some variable and commented %icon function)

//##############################################################################
// DJANGO ADMIN SHORTCUTS
$toolbar-height: 46px; // has to be even number
$gray-lighter:    var(--dca-gray-lighter); //lighten($gray, 46.5%); // #ddd
$gray-light:      var(--dca-gray-light); // // #999
$gray-darkest:    var(--dca-gray-darkest); // // #333
$font-size-large: 16px;
$color-primary: var(--dca-primary);
$white: var(--dca-white);
$gray:            var(--dca-gray); // lighten(#000, 40%); // #666;
$color-primary-light: rgba($color-primary, 30%);

.admin_shortcuts {
    max-width: 900px;
    margin: $toolbar-height 35% 0 3%;
    border-bottom: solid 1px $gray-lighter;
    + #content {
        margin-top: 60px !important;
    }
    .shortcuts {
        color: $gray-light;
        padding: 10px !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none;
        h2 {
            color: $gray-darkest;
            font-weight: bold !important;
            font-size: $font-size-large;
            border: 0;
        }
        li {
            a,
            a:link,
            a:visited,
            a:active {
                color: $color-primary !important;
                text-decoration: none;
                min-height: 20px;
                padding: 5px 10px;
                border: 1px solid $gray-lighter;
                background-color: $white;
                box-shadow: none;
                .count {
                    color: $gray;
                }
                .count_new {
                    border-color: $color-primary;
                    background: $color-primary;
                }
                .title {
                    vertical-align: middle;
                    text-shadow: none;
                    padding-right: 5px;
                    padding-left: 5px;
                }
            }
            a:hover,
            a:focus {
                color: $color-primary-light !important;
                background-color: $color-primary;
            }
            a:before {
                font-size: 30px;
                margin-right: 0;
            }
            // replaces shortcut link images with icon font #199
            .archive {
                // @include icon(archive);
            }
            .back {
                // @include icon(reply);
            }
            .basket {
                // @include icon(shopping-cart);
            }
            .blog {
                // @include icon(comment);
            }
            .camera {
                // @include icon(camera);
            }
            .card {
                // @include icon(credit-card);
            }
            .cash {
                // @include icon(money);
            }
            .certificate {
                // @include icon(certificate);
            }
            .clock {
                // @include icon(clock);
            }
            .cloud1 {
                // @include icon(cloud);
            }
            .cloud2 {
                // @include icon(cloud-upload);
            }
            .cloud3 {
                // @include icon(cloud-download);
            }
            .cloud4 {
                // @include icon(refresh);
            }
            .config {
                // @include icon(cog);
            }
            .config2 {
                // @include icon(cog);
            }
            .date {
                // @include icon(calendar);
            }
            .delivery1 {
                // @include icon(envelope-square);
            }
            .delivery2 {
                // @include icon(envelope);
            }
            .diskette {
                // @include icon(floppy-o);
            }
            .file1 {
                // @include icon(file);
            }
            .file2 {
                // @include icon(files-o);
            }
            .film {
                // @include icon(film);
            }
            .flag {
                // @include icon(flag);
            }
            .folder {
                // @include icon(folder-open);
            }
            .gamepad {
                // @include icon(gamepad);
            }
            .garbage {
                // @include icon(trash);
            }
            .gift {
                // @include icon(gift);
            }
            .help {
                // @include icon(life-ring);
            }
            .home {
                // @include icon(home);
            }
            .key {
                // @include icon(key);
            }
            .less {
                // @include icon(minus-circle);
            }
            .letter {
                // @include icon(file-text);
            }
            .letters {
                // @include icon(newspaper-o);
            }
            .light {
                // @include icon(lightbulb-o);
            }
            .lock {
                // @include icon(lock);
            }
            .love {
                // @include icon(heart);
            }
            .mail {
                // @include icon(envelope);
            }
            .monitor {
                // @include icon(desktop);
            }
            .music {
                // @include icon(music);
            }
            .note {
                // @include icon(file-text);
            }
            .notepad {
                // @include icon(file-text);
            }
            .ok {
                // @include icon(check);
            }
            .package {
                // @include icon(cube);
            }
            .pencil {
                // @include icon(pencil);
            }
            .phone {
                // @include icon(mobile);
            }
            .picture {
                // @include icon(picture-o);
            }
            .pin {
                // @include icon(map-marker);
            }
            .plus {
                // @include icon(plus-circle);
            }
            .print {
                // @include icon(print);
            }
            .sound {
                // @include icon(volume-up);
            }
            .suitcase {
                // @include icon(suitcase);
            }
            .tag {
                // @include icon(tag);
            }
            .ticket {
                // @include icon(ticket);
            }
            .tool {
                // @include icon(wrench);
            }
            .unlock {
                // @include icon(unlock-alt);
            }
            .user {
                // @include icon(user);
            }
            .warning {
                // @include icon(exclamation-triangle);
            }
            .zoom {
                // @include icon(search-plus);
            }
        }
    }
}

And here what I get after converting it:

.admin_shortcuts {
     max-width: 900px;
     margin: 46px 35% 0 3%;
     border-bottom: solid 1px var(--dca-gray-lighter);
}
 .admin_shortcuts + #content {
     margin-top: 60px !important;
}
 .admin_shortcuts .shortcuts {
     color: var(--dca-gray-light);
     padding: 10px !important;
     background-color: transparent !important;
     border: 0 !important;
     box-shadow: none;
}
 .admin_shortcuts .shortcuts h2 {
     color: var(--dca-gray-darkest);
     font-weight: bold !important;
     font-size: 16px;
     border: 0;
}
 .admin_shortcuts .shortcuts li a, .admin_shortcuts .shortcuts li a:link, .admin_shortcuts .shortcuts li a:visited, .admin_shortcuts .shortcuts li a:active {
     color: var(--dca-primary) !important;
     text-decoration: none;
     min-height: 20px;
     padding: 5px 10px;
     border: 1px solid var(--dca-gray-lighter);
     background-color: var(--dca-white);
     box-shadow: none;
}
 .admin_shortcuts .shortcuts li a .count, .admin_shortcuts .shortcuts li a:link .count, .admin_shortcuts .shortcuts li a:visited .count, .admin_shortcuts .shortcuts li a:active .count {
     color: var(--dca-gray);
}
 .admin_shortcuts .shortcuts li a .count_new, .admin_shortcuts .shortcuts li a:link .count_new, .admin_shortcuts .shortcuts li a:visited .count_new, .admin_shortcuts .shortcuts li a:active .count_new {
     border-color: var(--dca-primary);
     background: var(--dca-primary);
}
 .admin_shortcuts .shortcuts li a .title, .admin_shortcuts .shortcuts li a:link .title, .admin_shortcuts .shortcuts li a:visited .title, .admin_shortcuts .shortcuts li a:active .title {
     vertical-align: middle;
     text-shadow: none;
     padding-right: 5px;
     padding-left: 5px;
}
 .admin_shortcuts .shortcuts li a:hover, .admin_shortcuts .shortcuts li a:focus {
     color: rgba(0, 30, 0, ) !important;
     background-color: var(--dca-primary);
}
 .admin_shortcuts .shortcuts li a:before {
     font-size: 30px;
     margin-right: 0;
}

Then I placed it after a line <link rel="stylesheet" type="text/css" href="{% static 'djangocms_admin_style/css/djangocms-admin.css' %}" /> as a <style> HTML tag.