Fixed styles (#2374)

* bumped version for gulp-sourcemap and gulp-scss

* bumped foundation version

* centered checkboxes

* changed width of first column

* changed admin-bottom

 * refactored and cleanup
 * admin-bottom is fixed where user save something
 * admin-bottom is relative to list in change list

* added additional information about actual context

* changed admin-bottom bg color

 * changed bg color to same as a change form

* hide empty column in inline

* removed panel from actions and filters

* added model verbose name to header

* added extra margin to auto-complete

* changed align of count-info in bulk edit view

* restyled filters fields

bower.json

@@ -20,7 +20,7 @@
     "angular-route": "~1.4.0",
     "angular-ui-router": "~0.2.15",
     "angular-breadcrumb": "~0.4.0",
-    "foundation": "~5.5.2",
+    "foundation": "~5.5.3",
     "foundation-datepicker": "~1.3.0",
     "angular-loading-bar": "~0.8.0",
     "raven-js": "~1.3.0",

package.json

@@ -8,8 +8,8 @@
     "gulp-autoprefixer": "~2.3.1",
     "gulp-bower": "0.0.10",
     "gulp-rename": "~1.2.2",
-    "gulp-sass": "~2.0.1",
-    "gulp-sourcemaps": "^1.5.2",
+    "gulp-sass": "~2.2.0",
+    "gulp-sourcemaps": "^1.6.0",
     "jshint": "~2.8.0",
     "run-sequence": "~1.1.0"
   },

src/ralph/admin/sitetrees.py

@@ -1,4 +1,5 @@
 # -*- coding: utf-8 -*-
+from django.apps import apps
 from django.conf import settings
 from django.utils.translation import ugettext_lazy as _
 from django.utils.translation import activate
@@ -51,6 +52,7 @@ def get_menu_items_for_admin(name, perm):
 
 def section(section_name, app, model):
     app, model = map(str.lower, [app, model])
+    model_class = apps.get_model(app, model)
     change_perm = '{}.change_{}'.format(app, model)
     item = ralph_item(
         title=section_name,
@@ -59,7 +61,9 @@ def section(section_name, app, model):
         perms_mode_all=False,
         children=[
             ralph_item(
-                title=_('Add'),
+                title=_('Add {}'.format(
+                    model_class._meta.verbose_name.lower()
+                )),
                 url='admin:{}_{}_add'.format(app, model),
                 access_by_perms='{}.add_{}'.format(app, model),
             ),

src/ralph/admin/templates/admin/actions.html

@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="panel actions">
+<div class="actions">
   <h4>{% trans "Actions" %}</h4>
     {% for field in action_form %}
       {{ field }}

src/ralph/admin/templates/admin/base.html

@@ -30,7 +30,7 @@
              {% sitetree_menu from "ralph_admin" include "trunk" template "admin/menu_admin.html" %}
             <ul class="right">
               <li class="has-form">
-                {% contextual_search_form search_url search_fields %}
+                {% contextual_search_form search_url search_fields cl.opts.verbose_name %}
               </li>
               {% block usertools %}
                 {% if has_permission %}

src/ralph/admin/templates/admin/change_form.html

@@ -10,7 +10,7 @@
   <div id="content-main">
     <div class="row header">
       <div class="large-2 small-2 columns">
-        <h1 class="ellipsis-hidden">{% block title_head %}{% if original %}{{ original }}{% else %}{% trans 'Add' %}{% endif %}{% endblock %}</h1>
+        <h1 class="ellipsis-hidden">{% block title_head %}{% if original %}{{ original }}{% else %}{% trans 'Add' %} {{ opts.verbose_name|lower }}{% endif %}{% endblock %}</h1>
       </div>
       {% if not in_recovery_mode %}
         <div class="large-8 small-8 columns">

src/ralph/admin/templates/admin/change_list.html

@@ -8,12 +8,12 @@
     </style>
   {% endif %}
 {% endblock %}
-{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}
+{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% if bulk_edit %} bulk-edit{% endif %}{% endblock %}
 {% block coltype %}flex{% endblock %}
 
 {% block content %}
   {% if is_popup and cl %}
-    {% contextual_search_form search_url search_fields %}
+    {% contextual_search_form search_url search_fields cl.opts.verbose_name  %}
   {% endif %}
   <div id="content-main">
     <form method="get" action="" id="filter-form" class="hide"></form>
@@ -81,9 +81,9 @@ <h1>{{ header_obj_name|capfirst }}</h1>
         {% if not bulk_edit %}
           {% block filters %}
             {% if cl.has_filters %}
-              <div class="small-2 columns">
+              <div class="small-2 columns sidebar actions-and-filters">
                 {% admin_actions %}
-                <div class="panel">
+                <div class="filters">
                   <h4>Filters</h4>
                   <div class="filter-container">
                     {% if is_popup %}

src/ralph/admin/templates/admin/edit_inline/tabular.html

@@ -11,18 +11,16 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
             <tr>
               {% for field in inline_admin_formset.fields %}
                 {% if not field.widget.is_hidden %}
-                  <th{% if forloop.first %} colspan="2"{% endif %}{% if field.required %} class="required"{% endif %}>{{ field.label|capfirst }}
+                  <th{% if field.required %} class="required"{% endif %}>{{ field.label|capfirst }}
                     {% if field.help_text %}
                       &nbsp;<img src="{% static "admin/img/icon-unknown.gif" %}" class="help help-tooltip" width="10" height="10" alt="({{ field.help_text|striptags }})" title="{{ field.help_text|striptags }}" />
                     {% endif %}
                   </th>
                 {% endif %}
               {% endfor %}
-              {% if inline_admin_formset.formset.can_delete %}
-                {% block delete_header %}
-                  <th>{% trans "Delete?" %}</th>
-                {% endblock %}
-              {% endif %}
+              {% block delete_header %}
+                <th>{% trans "Delete?" %}</th>
+              {% endblock %}
             </tr>
           </thead>
 
@@ -36,28 +34,6 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
               </tr>
             {% endif %}
             <tr class="form-row {% cycle "row1" "row2" %} {% if inline_admin_form.original or inline_admin_form.show_url %}has_original{% endif %}{% if forloop.last %} empty-form{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
-              <td class="original">
-                {% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
-                  <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}?{{ inline_admin_form.model_admin.change_link_url_params }}" class="inlinechangelink change-related" title="{% trans 'Change' %}">
-                    <i class="fa fa-pencil fa-lg"></i>
-                  </a>
-                {% endif %}
-                {% if inline_admin_form.needs_explicit_pk_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.field.is_hidden %}
-                          {{ field.field }}
-                        {% endif %}
-                      {% endfor %}
-                    {% endfor %}
-                  {% endfor %}
-                {% endspaceless %}
-              </td>
               {% for fieldset in inline_admin_form %}
                 {% for line in fieldset %}
                   {% for field in line %}
@@ -76,13 +52,35 @@ <h2>{{ inline_admin_formset.opts.verbose_name_plural|capfirst }}</h2>
                   {% endfor %}
                 {% endfor %}
               {% endfor %}
-              {% if inline_admin_formset.formset.can_delete %}
                 <td class="delete">
-                  {% if inline_admin_form.original %}
-                    {{ inline_admin_form.deletion_field.field }}
+                  {% if inline_admin_formset.formset.can_delete %}
+                    {% if inline_admin_form.original %}
+                      {{ inline_admin_form.deletion_field.field }}
+                    {% endif %}
                   {% endif %}
+                  <div class="original hide">
+                    {% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
+                      <a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}?{{ inline_admin_form.model_admin.change_link_url_params }}" class="inlinechangelink change-related" title="{% trans 'Change' %}">
+                        <i class="fa fa-pencil fa-lg"></i>
+                      </a>
+                    {% endif %}
+                    {% if inline_admin_form.needs_explicit_pk_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.field.is_hidden %}
+                              {{ field.field }}
+                            {% endif %}
+                          {% endfor %}
+                        {% endfor %}
+                      {% endfor %}
+                    {% endspaceless %}
+                  </div>
                 </td>
-              {% endif %}
             </tr>
           {% endfor %}
         </tbody>

src/ralph/admin/templates/admin/filters/_filter_base.html

@@ -1,18 +1,23 @@
 {% load i18n %}
+
 {% block filter_header %}
-    <div class="filter-header">
-      <h6>
-        {% blocktrans with filter_title=title %}
-          {{ filter_title }}
-        {% endblocktrans %}
-      </h6>
+<div class="filter-row">
+  <div class="filter-header">
+    <h6>
+      {% blocktrans with filter_title=title %}
+        {{ filter_title }}
+      {% endblocktrans %}
       {% with choices.0 as i %}
         {% block filter_after_header %}{% endblock %}
       {% endwith %}
-    </div>
-{% endblock %}
-{% block filter_content %}
-    {% with choices.0 as i %}
+    </h6>
+  </div>
+  <div class="wrapper">
+    {% block filter_content %}
+      {% with choices.0 as i %}
         {% block filter_choices %}{% endblock %}
-    {% endwith %}
+      {% endwith %}
+    {% endblock %}
+  </div>
+</div>
 {% endblock %}

src/ralph/admin/templates/admin/filters/date_filter.html

@@ -1,6 +1,12 @@
 {% extends "admin/filters/_filter_base.html" %}
 
 {% block filter_choices %}
-    <input type="text" name="{{ i.parameter_name_start }}" placeholder="Start {{ i.date_format }}" class="datepicker" value="{{ i.date_start }}" />
-    <input type="text" name="{{ i.parameter_name_end }}" placeholder="End {{ i.date_format }}" class="datepicker" value="{{ i.date_end }}" />
+  <div class="date-filter">
+    <div class="start">
+      <input type="text" name="{{ i.parameter_name_start }}" placeholder="Start {{ i.date_format }}" class="datepicker" value="{{ i.date_start }}" />
+    </div>
+    <div class="end">
+      <input type="text" name="{{ i.parameter_name_end }}" placeholder="End {{ i.date_format }}" class="datepicker" value="{{ i.date_end }}" />
+    </div>
+  </div>
 {% endblock %}

src/ralph/admin/templates/admin/filters/text_filter.html

@@ -1,9 +1,9 @@
 {% extends "admin/filters/_filter_base.html" %}
 
 {% block filter_after_header %}
-<i data-tooltip class="has-tip fa fa-info-circle" title='Use {{ i.separators }} separators to search{% if i.multiple %} for multiple values{% endif %}'></i>
+  <i data-tooltip class="has-tip fa fa-info-circle" title='Use {{ i.separators }} separators to search{% if i.multiple %} for multiple values{% endif %}'></i>
 {% endblock %}
 
 {% block filter_choices %}
-    <input type="text" name="{{ i.parameter_name }}" value="{{ i.current_value|default_if_none:"" }}" />
+  <input type="text" name="{{ i.parameter_name }}" value="{{ i.current_value|default_if_none:"" }}" />
 {% endblock %}

src/ralph/admin/templates/admin/multi_add.html

@@ -40,7 +40,7 @@ <h5>
         </tr>
       </tbody>
     </table>
-    <div class="admin_bottom panel">
+    <div class="admin-bottom bottom">
       <div class="row">
         <div class="small-2 columns">
           <a href="{{ obj.get_absolute_url }}" class="button alert">

src/ralph/admin/templates/admin/pagination.html

@@ -1,26 +1,30 @@
 {% load admin_change_list i18n %}
-<div class="panel admin_bottom">
-  <div class="row">
-    <div class="small-4 columns">
-      <ul class="pagination">
-      {% if pagination_required %}
-          {% for i in page_range %}
-           {% admin_paginator_number cl i %}
-          {% endfor %}
-        {% endif %}
-      </ul>
+<div class="admin-bottom pagination">
+  {% if page_range %}
+    <div class="row">
+      <div class="small-12 columns pagination-centered">
+        <ul class="pagination">
+        {% if pagination_required %}
+            {% for i in page_range %}
+             {% admin_paginator_number cl i %}
+            {% endfor %}
+          {% endif %}
+        </ul>
+      </div>
     </div>
-    <div class="small-4 columns text-center">
+  {% endif %}
+  <div class="row">
+    <div class="small-{% if cl.formset %}6{% else %}12{% endif %} columns count-info">
       {{ cl.result_count }}
       {% ifequal cl.result_count 1 %}{{ cl.opts.verbose_name }}{% else %}{{ cl.opts.verbose_name_plural }}{% endifequal %}
       {% if show_all_url %}
           &nbsp;&nbsp;<a href="{{ show_all_url }}" class="showall">{% trans 'Show all' %}</a>
       {% endif %}
     </div>
-    <div class="small-4 columns right_section">
-      {% if cl.formset and cl.result_count %}
-          <input type="submit" name="_save" class="default button success small right radius" value="{% trans 'Save' %}"/>
-      {% endif %}
-   </div>
+    {% if cl.formset and cl.result_count %}
+      <div class="small-6 columns right_section">
+            <input type="submit" name="_save" class="default button success small right radius" value="{% trans 'Save' %}"/>
+     </div>
+    {% endif %}
   </div>
 </div>

src/ralph/admin/templates/admin/search_form.html

@@ -4,7 +4,7 @@
   <div class="contextual_search">
     <form id="changelist-search" action="{{ search_url }}" method="get" class="row collapse">
       <div class="small-10 columns">
-        <input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans "Search by" %} {{ search_fields|join:", " }}" />
+        <input type="text" size="40" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% blocktrans %}Search {{ verbose_name }} by{% endblocktrans %} {{ search_fields|join:", " }}" />
       </div>
       <div class="small-2 columns">
         <button type="submit" class="button expand search">

src/ralph/admin/templates/admin/submit_line.html

@@ -1,6 +1,6 @@
 {% load i18n admin_urls %}
 
-<div class="admin_bottom panel">
+<div class="admin-bottom bottom">
   <div class="row">
     {% if show_delete_link %}
       <div class="small-1 columns">

src/ralph/admin/templatetags/ralph_tags.py

@@ -48,11 +48,12 @@ def views_tabs(context, views, name=None, obj=None):
 
 
 @register.inclusion_tag('admin/search_form.html', takes_context=True)
-def contextual_search_form(context, search_url, search_fields):
+def contextual_search_form(context, search_url, search_fields, verbose_name):
     context.update({
         'search_url': search_url,
         'search_fields': search_fields,
         'search_var': SEARCH_VAR,
+        'verbose_name': verbose_name.lower(),
     })
     return context
 

src/ralph/static/src/scss/_settings.scss

@@ -93,3 +93,7 @@ $has-tip-border-bottom-hover: none;
 
 $alert-function-factor: -40%;
 $info-color: #F7F48A;
+
+$pagination-height: 0;
+
+$admin-bottom-bg: $tabs-content-bg-color !default;

src/ralph/static/src/scss/_styles.scss

@@ -38,25 +38,12 @@ ul.reset {
     max-width: 100%;
 }
 
-.row .admin_bottom .row {
-    max-width: 100%;
-    margin: 0;
-}
 
 .row .row {
     margin: 0;
     width: 100%;
 }
 
-.admin_bottom {
-    z-index: 1000;
-    width: 100%;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    margin: 0;
-    padding: 10px 0;
-}
 
 .breadcrumbs {
     border-bottom: 1px solid darken($crumb-bg, 10%);
@@ -76,14 +63,6 @@ select {
     background-color: #fff;
 }
 
-label, label.inline {
-    padding: $input-padding / 2 0;
-}
-select, #{text-inputs(all, 'input')} {
-    padding: $input-padding;
-    height: auto;
-    margin: $form-spacing / 2 0;
-}
 
 button.button.search {
     background-color: #5B5B5B;