darklow / django-suit

Modern theme for Django admin interface

Home Page:http://djangosuit.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Django Suit version 2.0

darklow opened this issue · comments

Brace yourselves, this is going to be a long post!

I have bad news and good news.
The bad news is - Bootstrap 3 branch will be discontinued.
The good news is what is coming instead! 

Some history

Some time after i launched the very first Django Suit (DS) version I realised biggest challenge is to keep up with Django admin changes. And bs3 branch version proved that even more. I haven’t finished it yet as Django admin started changing quite a lot. New templates, new features, new styles etc. Third party apps are also changing and evolving a lot, therefore same problem existed with 3rd party apps too. I knew i needed to solve this issue before continuing.

Flexbox

Recently I did a lot of thinking and experimenting and because browsers have evolved significantly I found an answer to my problems - Flexbox. I’ve been working on Django Suit fresh rewrite for few weeks and haven’t overridden a single Django admin template and in the end of the post you can see real screenshot of what i achieved by CSS only.

So this is a short story how Django Suit v2.0 rewrite started.

I will try to avoid any Django admin templates override as long as possible and if needed i will use JS DOM manipulations instead of overriding templates, which gives a few huge benefits:
When Django admin templates changes, some minor visual bugs may appear, but it will not break anything.

Without overriding admin templates, we have much wider 3rd party app support. Any app that haven’t modified templates too much and use Django admin markup should work perfectly.
This gives us much wider Django version support range, however I think Django Suit will stay with 2-3 recent version support.

What’s new in Django Suit v2

  • Based on Bootstrap 4.0 (currently v4-alpha):
    • Moved from Less to Sass.
    • Flexbox usage and support.
    • Responsive sizing using rem units. To increase whole admin sizing (font-sizes, margins), all you have to do is change font-size for body tag.
  • Django 1.9+
  • Menu rewrite to MenuItem classes
  • FontAwesome icons
  • Demo app is part of Django Suit repository now
  • Toggle-able list top actions if any row is selected
  • Menu:
    • Horizontal navigation
    • Aligned right menu
    • Rewrite whole menu builder to MenuItem classes

So here is the current state of v2.0 rewrite.
No templates overridden except base_site.html:

image

Todo:

  • CSS: Base layout
  • CSS: List base layout
  • Menu builder rewrite
  • Custom admin view example
  • CSS: List states / cell / row attributes
  • CSS: Popups
  • CSS: Forms
    • CSS: Forms base
    • CSS: Regular and collapsible fieldsets
    • Form sizing handling (label and field column proportions)
    • Two column change form with submit row on right
    • Submit buttons debounce - avoid clicking submit twice
    • Form inlines
    • Tabular Inlines
    • Stacked Inlines
    • CSS: Submit row
    • CSS: Floating/fixed Submit row
    • CSS: Delete confirmation
    • Sticky submit box
  • CSS: Alerts & messages
  • Suit Widgets
    • AutosizedTextarea
    • EnclosedInput
    • LinkedSelect
  • Native Widgets
    • CSS: Date & Date time picker
    • CSS: Side to Side chooser
    • CSS: Many to Many select
    • CSS: Many to Many checkboxes
  • CSS: Footer
  • CSS: Responsiveness
  • CSS: Login
  • CSS: Left side menu
  • Horizontal list filters
  • Form Tabs
  • Form Includes
  • Warning on leaving if unconfirmed changes
  • Print styles for list and forms.
  • Sortables
    • For tabular inline
    • For Stacked inline
    • For admin change list
  • Django support:
    • Django 1.9
    • Django 1.10
    • Django 1.11
  • Examples:
    • "Kind of" inlines in inlines / nested inlines solution #475 (comment)
    • Multiple admin sites
    • Django select2 widget
  • Documentation

If you're ok with incomplete features and missing documentation (demo app with all examples is included) then feel free to install or even use it for production (I personally use it in production for a few projects already):

pip install https://github.com/darklow/django-suit/tarball/v2

In requirements.txt:

 -e git://github.com/darklow/django-suit.git@v2#egg=django-suit

Work in progress links:
v2 demo: http://v2.djangosuit.com/admin/
v2 branch: https://github.com/darklow/django-suit/tree/v2
v2 docs: http://django-suit.readthedocs.org/en/v2/

Feel free to share your thoughts.

We use Suit on every project (paid!), and it looks like the future is going to be good. 🎩 Really appreciate the work you've done.

Any ballpark when suit v2 is going to be ready? I have a couple paid django 1.x folks i wanted to upgrade to 1.9, but i'm afraid to break their admin.

I really hope we will see support for Django 1.8 as that is a long term release - that could be a deal--breaker.

Also hope to see the left-menu option retained as an alternative to the top menu - there was a lot of discussion about this before -- the fact remains that there is simply more horizontal screen space than vertical and avoiding "bar creep" is very desirable.

@gamesbook Thanks for your feedback. I'll look into Django 1.8 support. As the stage is early, probably I can adjust it to make work for both. Supporting Django LTS release makes sense.
And I added horizontal menu to features list as well, it was planned, just forgot to mention in roadmap.

What's about left or right sidebar?
I want all previous suit versio features.

@darklow Thanks for the positive feedback. This a great product that we hope to keep using and deploying further in future. (I see 1.8LTS has planned support through to April 2018).

Day by day suit v2 is getting more and more mature.

Status update:

  • List layout fixes
  • Forms base
  • Submit row
  • Delete confimations

PS. You can see total progress in main issue description.

image

v2 demo: http://v2.djangosuit.com/admin/

I know many of you will like these features that I just deployed ;)

  • Two column change form with submit row on right (with responsive fallback to bottom)
  • AutoSized textarea

You can see full list of updates in v2 branch commit log:
https://github.com/darklow/django-suit/commits/v2

v2 demo:
http://v2.djangosuit.com/admin/demo/country/170/change/

image

This is really shaping up quite nicely. :)

2016-02-17 16:39 GMT+01:00 Kaspars Sprogis notifications@github.com:

I know many of you will like these features that I just deployed ;)

  • Two column change form with submit row on right (with responsive
    fallback to bottom)
  • AutoSized textarea

You can see full list of updates in v2 branch commit log:
https://github.com/darklow/django-suit/commits/v2

v2 demo:
http://v2.djangosuit.com/admin/demo/country/170/change/

[image: image]
https://cloud.githubusercontent.com/assets/445304/13114625/f301e576-d59c-11e5-8290-0131349b6af6.png

v2 demo: http://v2.djangosuit.com/admin/


Reply to this email directly or view it on GitHub
#475 (comment)
.

If anyone wants to contribute to Django framework and help Django Suit as well, there is a great chance to do it. There is an incomplete pull request at Django repository with a super-valuable feature started, which needs some help to make it to the final line. Author don't have time to finish what he started, however he already did a great job and almost finished it.

Django: Added template-based widget rendering
https://code.djangoproject.com/ticket/15667

Pull request and author comments about what still has to be done to finish it:
django/django#4848 (comment)

I will try to help as much as possible, but i already have my hands full with v2 and other things.
If we could get this PR by Django version 1.10 then no more hacks for widgets are needed and anyone can style any widgets with custom templates. I think this is awesome and very very valuable feature.

Thanks.

Isn't this cute? :)
Native Django admin Date/Time widgets:

image

image

image

Live demo: http://v2.djangosuit.com/admin/demo/showcase/add/

Awesome!

Some users with existing licenses asked if they can contribute or buy an upgrade fee for v2 in advance.
So even if this is complete rewrite, all you current licenses will be valid for v2 and therefore will be no upgrade fee. If you want to show your appreciation and support development of v2, you can use Donate feature or buy an extra license here:
http://djangosuit.com/pricing/#v2
Thank you!

Sortables for change list and tabular inlines are ready!
http://v2.djangosuit.com/admin/demo/continent/
http://v2.djangosuit.com/admin/demo/continent/9/change/

Tips and Tricks
By these years I've learned a lot of how to extend Django admin and in new v2 documentation I will share a lot of my knowledge how to do that too.

Just added to demo app how to extend submit_line.html, object-tools or add custom admin actions for specific ModelAdmin:
http://v2.djangosuit.com/admin/demo/showcase/1/change/
https://github.com/darklow/django-suit/blob/v2/demo/demo/templatetags/demo_tags.py#L6
https://github.com/darklow/django-suit/blob/v2/demo/demo/admin.py#L190
https://github.com/darklow/django-suit/blob/v2/demo/demo/admin.py#L119

Hope you find it useful ;)

👍

Stacked inlines including Sortable Stacked inlines are now ready!
http://v2.djangosuit.com/admin/demo/showcase/1/change/
image

👍 I like it man!

Anyone using v2.0 alpha in development already or is it just me? :)

It's getting gorgeous! 👍

me in mexico, for school management - testing...

Happy to announce next two handy features that are finished:

  • Form Tabs
  • Form Includes

Beta release is coming closer by each day!
http://v2.djangosuit.com/admin/demo/country/170/change/

image

image

This is awesome! Keep up the good work!

commented

This looks good! :D

Thanks for your work.

Un cordial saludo:
-- Nekmo.

Sitio web: http://nekmo.com
Dirección de contacto: contacto@nekmo.com
XMPP/Jabber: contacto@nekmo.com
Google+: Nekmo Com

2016-03-09 18:14 GMT+01:00 Wills Ward notifications@github.com:

This is awesome! Keep up the good work!


Reply to this email directly or view it on GitHub
#475 (comment)
.

Yes, it's a great software... but, please, we support their development
http://djangosuit.com/pricing/#v2

Eh, put a 400 error template please.

Awesome work, can't wait for V2!!!

commented

Do you plan to support a left-sided navigation like in v1?
Most monitors have more space in the width than height and I would really prefer of move the navigation to the left instead of top. :-)

@lukas-schulze I am thinking of left-sided navigation. But stick has two ends. Submit button column is also right sided. So by adding left side menu the space for form content is narrowing even more down. Users were complaining about that in v1. Maybe narrowing top navigation could be a solution as well.

@eviltnan and others. Please use new Github +1 feature for comment or whole issue instead of a comment with text +1.

This makes django admin enter to the new level!
Two usability features that will make life even better with Suit:

  1. Drag'n'Drop for ordering (instead of up/down arrows)
  2. New, redesigned filter_horizontal widget (as in groups and permissions for user changeform). At now it is very ugly and can be used only on small amounts of items available for select, it even lacks filtering in selected items list.

@lukas-schulze This topic was raised earlier in this issue and @darklow said he would support it.

Apart from the very good reason of it maximising available screen use, its also important for maintaining continuity with existing deployments; end users get a bit cranky if you "improve" things without really solid justification.

the package installed via
pip install https://github.com/darklow/django-suit/tarball/v2
does not include bootstrap css?
How can I deal with this?

@joseph2002 Django Suit v2 doesn't have separate bootstrap.css file. It is all compiled using sass into single suit.css file: https://github.com/darklow/django-suit/tree/v2/suit/static/suit/css

@darklow It's ok now after I cleared my browser's cache. before that I can not see any styles, just plain texts. maybe something conflict with previous version of suit. thank you!

If you're already using v2 or playing with it, until there are no official docs, read my comments here if you're interested in how to control form sizing in v2:
#500

@darklow 👍 We've been happy suit 1.0 users, then happy suit bs3 branch users, and look forward to being happy suit 2.0 users. Donated as a small token of our appreciation. Cheers 🍻

http://djangosuit.com/pricing/#v2

@kcolton Thank you, I appreciate it. Next week I have few important deadlines and after that I am planning to finish things that are still missing and release v2 beta and put it on pypi.

For those who are using v2, just added missing style for two-select/column selector widget which is used for permissions: http://v2.djangosuit.com/admin/auth/group/add/

commented

Just donated to your awesome project to show our thanks. Keep up the good work on v2! 👍

@luto Maybe you donated to somebody, but definitely not me or DjangoSuit :) Thanks for good intentions, though! :)

commented

well, my boss donated a few weeks ago, by buying a license :) "just" was maybe the wrong word 😅

Another awesome feature migrated:
Added suit_row_attributes, suit_cell_attributes callables for row/cell/column styling based on object and field and added one new suit_column_attributes callable for column header styling:

Demo:
http://v2.djangosuit.com/admin/demo/continent/
https://github.com/darklow/django-suit/blob/v2/demo/demo/admin.py#L140

Preview:
image

How about inline in inline? it is very necessary for many projects

@uniqe15 Inline in inline is way too complicated, there are few apps that does that, I tried, but they are always outdated and have many bugs and limitations.

However I have implemented in on of my projects "kind of" inline in inline solution, where you can edit 2nd level inline items in a popup. This is 100% valid solution using only Django admin templates to achieve this. I will include in the demo app to show how it could be done. Here is a preview of stacked inline which has more related items in it:
image

Popup once you click "Edit related":
image

I cannot wait to try it out! Is there any official release date?

@uniqe15 No official release date yet, but I am using v2-dev already in 3 projects in production. You can try it out already. Most important features are there.

I'm writing a project for graduation (poll app) and i have a lot of inline-in-inline stuff, is there a way to clone this v2-dev package? I'm not going to use it in production ofc but it will make my work muuch easier.

@uniqe15 In my first post in this issue I wrote how to install v2-dev: #475 (comment) however there is no example for inlines in inlines included yet.

@darklow It seems django-debug-toolbar is not working with v2. Would appreciate if you could please check at your end.

@geekashu It is working but is getting hidden. It bootstrap fault, this line hides it https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss#L391
I will look forward to override it somehow.

@geekashu I just fixed Django Debug Toolbar problem, just reinstall v2-dev:

pip uninstall django-suit
pip install https://github.com/darklow/django-suit/tarball/v2

thank you,.. hoping for nested inline demo soon..

yup it works now... thanku...

I' using Django Suit v2. Is it possible to show Suit menu at frontend?

@mzbyszewska I don't think so, at least not in an easy way, Django Suit is "skin/addon" specifically for Django admin app and highly relies on it's context variables.

It seems that I should slightly overwritte your get_menu tag in case "if not available_apps" and fake available_apps for frontend. Then the MenuManager will has chance to read custom SuitConfig.

I am using custom formset for my inline admin, inline formset are doing some custom validation and raises a ValidationError if certain criteria doesn't met for all the forms.

Now it seems triggered error messages are not able to use errorlist css class from suit.css and renders them as plain black colored text.

@geekashu please open new issue and provide a screenshot, I can't reproduce.

@darklow this update looks great, just looking into trying this out for the first time. That said, nested inlines is a huge feature for a few projects of mine and it would be great to see support for it. At the moment, I've used dj-nested-inlines before, and it seems that django-nested-admin has support for the current version of django-suit. It would be great to see this continue through a 3rd party module or just be builtin.

While there aren't necessarily a ton of use-cases there are a few where it's pretty indispensable.

Note about v2 support for Django 1.8 (LTE) @gamesbook.

For a few days I've been trying to add support for Django 1.8 and it isn't so easy and I am considering not adding it for upcoming v2. Although 1.8 is long-term release it is missing some important features which made Django Suit v2 so easy and clean to develop.

The thing is in Django 1.9+ template loader was updated and improved which made possible to extend Django admin templates in very simple and clean way without overriding whole change_form.html and other main Django admin templates files, but just few parts of it.

In order to support Django 1.8 I would need to go back to fully copy/pasting full change_form.html and other file content and making appropriate changes, which would make problems supporting 3rd party apps "out-of-the-box" and other issues.

Current Django v2-dev already supports Django 1.9 and Django 1.10.

I think I must look forward this time and not breaking nice and simple things I created to support Django 1.8 for which mainstream support has already ended and only security fixes will be added.
https://www.djangoproject.com/download/

By the way Django 1.10 which is already out has support until December 2017 (just 4x months difference to Django 1.8)

For those who need Django 1.8 version support, let me know what you think.
PS. Django 1.8 users can still use 0.2.x branch.

@chris-erickson, @gamesbook good news!

Forget my previous post, persistent trying and tests resulted in success and I found a way to support all three Django 1.8, 1.9 and 1.10 versions.
I merged inv2-django18 branch into https://github.com/darklow/django-suit/tree/v2 and now you can try it out.

Django 1.8 still have some cosmetic issues and some legacy css classes that need some attention, but so far it works.

Feel free to test it with Django 1.8:

pip uninstall django-suit
pip install https://github.com/darklow/django-suit/tarball/v2

That is good news. We are scheduled to update to 1.8 soon and would like to
sync this change with Suitv2.

On 29 August 2016 at 17:13, Kaspars Sprogis notifications@github.com
wrote:

@chris-erickson https://github.com/chris-erickson, @gamesbook
https://github.com/gamesbook good news!

Forget my previous post, persistent trying and tests resulted in success
and I found a way to support all three Django 1.8, 1.9 and 1.10 versions.
I merged inv2-django18 branch into https://github.com/darklow/
django-suit/tree/v2 and now you can try it out.

Django 1.8 still have some cosmetic issues and some legacy css classes
that need some attention, but so far it works.

Feel free to test it with Django 1.8:

pip uninstall django-suit
pip install https://github.com/darklow/django-suit/tarball/v2


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#475 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVm67H1NcSRcmNTWiNZKjMeEfGCIQJKks5qkvcngaJpZM4HP7vt
.

suit.js:199 Uncaught ReferenceError: Suit is not defined

@keyvanm Please open separate issue with more details, Django version etc.

commented

Love V2 so far! Convinced my supervisors to user for our development project. Question: are drop down lists for filters feasible for this version? Instead of or in place of the list_filter default?

@heathernicoale Yes, I will reimplement them as well for v2.
"Horizontal list filters" checkbox in feature list

commented

@darklow - I see. I overlooked that, I apologize! Can't wait! :)

commented

Just out of curiosity - do you have a general idea of the release date for V2? :) This is such a great product so far!

Can you explain how to install version 2 on Digital Ocean Django One-Click Install Image?
I have been trying using your tutorial but it never works.

Thanks.

@ganmedia I am not familiar with Digital Ocean and have no idea what One-Click install means.
To install django-suit v2 you need to run:

pip install https://github.com/darklow/django-suit/tarball/v2

Or if you're using requirements.txt file then use following line (keeping space as first char):

 -e git://github.com/darklow/django-suit.git@v2#egg=django-suit

I did it but I got always the same error:

TemplateSyntaxError at /admin/
'suit_tags' is not a valid tag library: ImportError raised loading suit.templatetags.suit_tags: No module named apps

@ganmedia please open a separate issue with some more details, full stacktrace, Django & python versions etc.

Two new features just added to v2-dev:

  • Django Suit now supports multiple admin instances - you can define settings / menus per each admin_site.
  • Define def menu_handler(items, request, context): return items method to config class to manipulate menu items right before they are being rendered.

Hoping that we'll see an "official" release before year end - this would be a fantastic upgrade to offer clients for next year!

@gamesbook me too :) Funny or not one thing that holds me back for releasing something like public beta is not having done left side navigation. Since I like top/horizontal navigation much more I wouldn't use left side anymore. Hard to make/do something when you don't need it. You will never run out of vertical space, but you will run out of horizontal eventually and left side nav will help you do that even faster and then I got tens of issues about "my inlines doesn't fit in horizontally and wraps" kind of issues.

I've said it couple of times - I am already using v2-dev branch on all my production projects with no issues. In a way it is even more stable than master or discontinued bs3 branch. I guess that is another reason holding back. But I am close to releasing "official" version. As soon as I got my hands on new Documentation.

@darklow Have you considered collapsible side navigation? It seems like that would work great on mobile and smaller screens: that way it wouldn't take up horizontal space if there isn't enough space.

@SanderTuit Yes I have, and that was my intention, but as you know for responsiveness you need extra time to handle all the layout changes, collapses etc. But in terms of essential features it wasn't in my priority list so far. First I wanted to deal with features that doesn't have alternative solutions. Right now list filters as dropdowns are next ones in the list.

@darklow In principle, you are right - infinite scrolling. But the trick is to fit the key data into limited vertical space without users having to scroll. I limit the default view to 10 or 15 rows for that reason. An optional "hider" on the sidebar (like bitbucket uses) also makes sense.

Had quite productive day.

  • Updated to latest Bootstrap v4-alpha5.
  • Vertical menu layout. (work still in progress and polishing details, but base is there).
  • Icon support.

Todo:

  • Vertical menu responsiveness.

Suggestions and feedback are welcomed.

pip uninstall django-suit
pip install https://github.com/darklow/django-suit/tarball/v2
#apps.py
class SuitConfig(DjangoSuitConfig):
    layout = 'vertical'

image

Very happy to see "Return of the Left Menu". Will the location of the little icons (between the title and the menu itself) be repositionable? In the current version, the menu starts directly below top name; and we need as much vertical space as possible.

Great news, but where should I place apps.py to override SuitConfig?

@ganmedia You can put apps.py anywhere you want, but by Django documentation it should be in your main project main app directory.

This is the new way of configuring 3rd party apps which was introduced in Django 1.7 already:
https://docs.djangoproject.com/en/1.10/ref/applications/

See example in demo/demo app:
https://github.com/darklow/django-suit/blob/v2/demo/demo/apps.py
https://github.com/darklow/django-suit/blob/v2/demo/demo/settings.py#L39

@gamesbook Currently both horizontal and vertical layouts use same template and CSS is what puts them left or top. To manipulate position of .header .user-tools template you could override base-site.html although not too much places elsewhere where you could put them. I really didn't wanted to introduce another header inside center column as it was in v1.
Another option is - you can just override CSS and make these icons position: absolute and move them to the bottom of the left column, would that work to you?

@darklow I think bottom of the menu (left column) would be fine; but I
should also get feedback from some of the users.

On 14 November 2016 at 12:14, Kaspars Sprogis notifications@github.com
wrote:

@gamesbook https://github.com/gamesbook Currently both horizontal and
vertical layouts use same template and CSS is what puts them left or top.
To manipulate position of .header .user-tools template you could override
base-site.html although not too much places elsewhere where you could put
them. I really didn't wanted to introduce another header inside center
column as it was in v1.
Another option is - you can just override CSS and make these icons
position: absolute and move them to the bottom of the left column, would
that work to you?


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#475 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVm6-28fMe-rPjxzjSNaJTDJiyYOBByks5q-DR8gaJpZM4HP7vt
.

commented

@darklow - this is shaping up great so far! :) Question though - I followed the uninstall, install instructions, however the vertical menu isn't display even after restarting the server. Any ideas what may cause it to not display? It's also been added to the SuitConfig.

@heathernicoale In settings.py add this line to INSTALLED_APPS:
'django_project.apps.SuitConfig'

Then add a file called apps.py in the root of your project directory (same where settings.py is) and add this:

from suit.apps import DjangoSuitConfig
class SuitConfig(DjangoSuitConfig):
    layout = 'vertical'
commented

@ganmedia Hey! :) Thanks for the response! I have done this. I had my menu already configured and set up. so all of the parent / child items are in place already. Everything is there, the apps.py, DjangoSuitConfig, InstalledApps, etc...

@heathernicolae read carefully my commet, v2 vertical is on another branch: #475 (comment)

Hi @darklow is really great the job you have done. I have been using suit v2 for almost 4 months and it has been outstanding. I was expecting the left menu and now I will wait the responsiveness feature. I want to use it in a recent project I am working on. Just wanted to thank you.

Thank you for this beautiful admin interface.

I couldn't make work 'show_change_link' option of InlineModelAdmin .

@AliPolat just fixed in e997f71 #553
Now there is global config form_inlines_hide_original = False for SuitConfig configuration class which may be overridden per individual Inlines as suit_form_inlines_hide_original = True
Demo with show_change_link: http://v2.djangosuit.com/admin/demo/continent/7/change/

Thank you, It has very nice appearance...

commented

@darklow - absolutely LOVE Django Suit V2 - your development has significantly progressed our own development on our company's project.

Question - have you considered adding 'Print' actions or ability in Django Suit V2? I'm surprised this isn't already included in Django Admin anyhow. Working on creating a custom one for our project. But it made me think to ask. :) Keep up the great work!

@heathernicoale Thanks, glad you like v2 and it helps you so much.
I don't think many users need visible Print actions and print actions are always available from browser menus.
However having print styles (hiding redundant menus) to improve printing of lists and forms is a good idea. I'll add it to the feature list.

v2-vertical branch has been merged into v2.

@gamesbook Is Django 1.8 support really so necessary for you?
I keep fighting issues with Django 1.8 and circular imports because of outdated template loaders, which were fixed and rewritten in Django 1.9. Keep spending time, which could be spent on moving forward with v2 :/