Opened 3 years ago

Closed 3 years ago

#32109 closed Bug (wontfix)

Cannot add content to admin sidebar without breaking layout

Reported by: Ben Davis Owned by: nobody
Component: contrib.admin Version: 3.1
Severity: Normal Keywords: admin sidebar template
Cc: Triage Stage: Unreviewed
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: no

Description (last modified by Ben Davis)

If I want to add content to the sidebar on the admin index page, I would normally override admin/index.html like so:

{% extends "admin/index.html" %}

{% block sidebar %}
  <p>Other stuff</p>
  {{ block.super }}
{% endblock %}

However, using {{block.super}} breaks layout because it contains <div id="content-related">, which is floated right to achieve the sidebar look. Adding any content before this will shift the sidebar to the bottom of the page.

Ideally, there should be another block inside <div id="content-related">, possibly called {% block sidebar_content %}, so that template authors can add content to the sidebar.

Change History (4)

comment:1 by Ben Davis, 3 years ago

Description: modified (diff)

comment:3 by Carlton Gibson, 3 years ago

Hi Ben.

This is a curious one.

Have a look at this diff (imagining that we'd be using super):

$ git diff
diff --git a/django/contrib/admin/templates/admin/index.html b/django/contrib/admin/templates/admin/index.html
index b6e84b64ed..f075aef37f 100644
--- a/django/contrib/admin/templates/admin/index.html
+++ b/django/contrib/admin/templates/admin/index.html
@@ -18,8 +18,22 @@
 {% endblock %}
 
 {% block sidebar %}
+
+<div style="float:right;position:relative;margin-right: -300px;width:260px;">
+<h2>On top</h2>
+<p>the float and clear lets us position OK.</p>
+<p>No styling.</p>
+</div>
+<div style="clear: right;"></div>
+
 <div id="content-related">
+    <h2>Inside #content-related</h2>
+    <p>In the grey sidebar.</p>
+    <p>But style mismatch</p>
+
     <div class="module" id="recent-actions-module">
+        <h2>Inside #recent-actions-module</h2>
+        <p>Picks up styling from Recent Actions.</p>
         <h2>{% translate 'Recent actions' %}</h2>
         <h3>{% translate 'My actions' %}</h3>
             {% load log %}
@@ -47,4 +61,7 @@
             {% endif %}
     </div>
 </div>
+<h2>After all existing content</h2>
+<p>Ends up under the app list.</p>
+
 {% endblock %}

There's three obvious positions for extra content in the sidebar:

  1. Right at the top, outside #content-related (Bottom is in the diff but...)
  2. Inside #content-related (top or bottom)
  3. Inside #recent-actions-module (again top or bottom)

If it's 1. I'm inclined to think Just use CSS and a clearing div to put it in the right place.

Number 2. is your suggestion from the PR, but if you put it in 3, you get the styling from the Recent Actions module for free.

So I'm a bit πŸ€” β€”Β what do you think?

(Half inclined to say that we should pull the inner HTML of #recent-actions-module into an included template to allow folks to go for whatever option they want here quite easily.)

Last edited 3 years ago by Carlton Gibson (previous) (diff)

comment:4 by Carlton Gibson, 3 years ago

Resolution: β†’ wontfix
Status: new β†’ closed

I'm going to close as wontfix for the moment. Go with Option 1 Just use CSS and a clearing div to put it in the right place.
Happy to discuss more if you (or anyone wants to follow up)
Thanks

Note: See TracTickets for help on using tickets.
Back to Top