1. Luke Plant
  2. django

Commits

za...@bcc190cf-cafb-0310-a4f2-bffc1f526a37  committed 05932b7

[soc2009/admin-ui] Better styling for Selector Inlines, and proper javascript hiding

  • Participants
  • Parent commits 59e40f2
  • Branches soc2009/admin-ui

Comments (0)

Files changed (2)

File django/contrib/admin/media/css/forms.css

View file
  • Ignore whitespace
     width: 19%;
 }
 
+.inline-selector a, .inline-selector a:visited {
+    color: #000;
+}
+
 .inline-selector-item {
     background-color: #F6F6F6;
     border: 1px solid #E7E7E7;
     font-size: 0.9em;
 }
 
+.inline-selector-item:hover {
+    background-color: #C1DBFD;
+}
+
 .inline-detail {
     float: right;
     width: 80%;
-    background: #c9c;
     border-left: 1px solid #EEE;
 }
 
     float: right;
 }
 
+.inline-selected {
+    background-color: #9EB7D5;
+}
+
+.inline-selected a, .inline-selected a:visited {
+    color: #FFF;
+}
+
 .clear {
     clear: both;
 }

File django/contrib/admin/templates/admin/edit_inline/selector.html

View file
  • Ignore whitespace
             <div class="inline-selector">
                 {% for inline_admin_form in inline_admin_formset %}
                     <div class="inline-selector-item">
+                        <a href="#" class="inline-select" title="{{ inline_admin_formset.opts.verbose_name}}{{ forloop.counter }}">
                         {% if inline_admin_form.original or inline_admin_form.show_url %}
                             {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
                             {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
                         {% else %}
-                            New Inline
+                            [New Inline]
                         {% endif %}
+                        </a>
                     </div>
                 {% endfor %}
             </div>
             
             <div class="inline-detail">
             {% for inline_admin_form in inline_admin_formset %}
-                <h3>
-                    {% if inline_admin_form.original or inline_admin_form.show_url %}
-                        {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
-                        {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
-                    {% else %}
-                        [New Inline]
+                <div class="selector-item-detail" id="{{ inline_admin_formset.opts.verbose_name}}{{ forloop.counter }}">
+                    <h3>
+                        {% if inline_admin_form.original or inline_admin_form.show_url %}
+                            {% if inline_admin_form.original %} {{ inline_admin_form.original }}{% endif %}
+                            {% if inline_admin_form.show_url %}<a href="../../../r/{{ inline_admin_form.original_content_type_id }}/{{ inline_admin_form.original.id }}/">{% trans "View on site" %}</a>{% endif %}
+                        {% else %}
+                            [New Inline]
+                        {% endif %}
+
+                        {% if inline_admin_formset.formset.can_delete %}
+                            <span class="inline-selector-delete">
+                                {% if inline_admin_form.original %}
+                                    {{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}
+                                {% endif %}
+                            </span>
+                        {% endif %}
+                    </h3>
+
+                    {% if inline_admin_form.form.non_field_errors %}
+                        {{ inline_admin_form.form.non_field_errors }}
                     {% endif %}
-            
-                    {% if inline_admin_formset.formset.can_delete %}
-                        <span class="inline-selector-delete">
-                            {% if inline_admin_form.original %}
-                                {{ inline_admin_form.deletion_field.field }} {{ inline_admin_form.deletion_field.label_tag }}
-                            {% endif %}
-                        </span>
-                    {% endif %}
-                </h3>
-                
-                {% if inline_admin_form.form.non_field_errors %}
-                    {{ inline_admin_form.form.non_field_errors }}
-                {% endif %}
-                
-                <div class="selector-item-detail">
+                    
                     {% if inline_admin_form.has_auto_field %}{{ inline_admin_form.pk_field.field }}{% endif %}
+                    
                     {{ inline_admin_form.fk_field.field }}
+                    
                     {% spaceless %}
                     {% for fieldset in inline_admin_form %}
-                      {% for line in fieldset %}
-                     {% for field in line %}
-                       {% if field.is_hidden %} {{ field.field }} {% endif %}
-                     {% endfor %}
-                      {% endfor %}
+                        {% for line in fieldset %}
+                            {% for field in line %}
+                                {% if field.is_hidden %} {{ field.field }} {% endif %}
+                            {% endfor %}
+                        {% endfor %}
                     {% endfor %}
                     {% endspaceless %}
 
             </div>
         <div class="clear"></div>
     </div>
-</div>
+</div>
+
+<script type="text/javascript">
+$(function() {
+    $('.inline-detail .selector-item-detail').hide();
+    $('.inline-detail .selector-item-detail:first').show();
+    $('.inline-selector .inline-selector-item:first').addClass('inline-selected');
+    
+    $('.inline-selector-item').click(function () {
+        $('.inline-detail .selector-item-detail').hide();
+        $('.inline-selector .inline-selector-item').removeClass('inline-selected');
+
+        $(this).addClass('inline-selected');
+        
+        var div_to_show = '#' + $(this).find('a').attr('title');
+        $(div_to_show).fadeIn('normal');
+        
+        return false;
+    });
+});
+</script>