various improvements to CSS

Changes: - changed autocomplete widget height, - changed form spacing.
dounoit · Sep 18, 2015 · 4ef3e08 · 4ef3e08
1 parent d64639d
commit 4ef3e08
Show file tree

Hide file tree

Showing 19 changed files with 159 additions and 78 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -5,6 +5,7 @@ var gulp = require('gulp');
     bower = require('gulp-bower'),
     prefixer = require('gulp-autoprefixer'),
     sass = require('gulp-sass'),
+    sourcemaps = require('gulp-sourcemaps'),
     qunit = require('node-qunit-phantomjs');
 
 var config = {
@@ -15,6 +16,7 @@ var config = {
 }
 
 var sass_config = {
+    outputStyle: 'compressed',
     includePaths: [
         config.bowerDir + 'foundation/scss',
         config.bowerDir + 'fontawesome/scss',
@@ -28,8 +30,10 @@ gulp.task('bower', function() {
 
 gulp.task('scss', function() {
     gulp.src(config.srcRoot + 'scss/*.scss')
+        .pipe(sourcemaps.init())
         .pipe(sass(sass_config).on('error', sass.logError))
         .pipe(prefixer())
+        .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest(config.staticRoot + 'css/'))
 });
 

diff --git a/package.json b/package.json
@@ -3,14 +3,15 @@
   "repository": "allegro/ralph",
   "version": "3.0.0",
   "dependencies": {
+    "bower": "~1.4.1",
     "gulp": "~3.9.0",
+    "gulp-autoprefixer": "~2.3.1",
     "gulp-bower": "0.0.10",
     "gulp-rename": "~1.2.2",
-    "run-sequence": "~1.1.0",
     "gulp-sass": "~2.0.1",
-    "gulp-autoprefixer": "~2.3.1",
-    "bower": "~1.4.1",
-    "jshint": "~2.8.0"
+    "gulp-sourcemaps": "^1.5.2",
+    "jshint": "~2.8.0",
+    "run-sequence": "~1.1.0"
   },
   "devDependencies": {
     "gulp-watch": "~4.2.4",

diff --git a/src/ralph/admin/fields.py b/src/ralph/admin/fields.py
@@ -3,7 +3,7 @@
 
 from django import forms
 from django.forms import ValidationError
-from django.forms.util import ErrorList
+from django.forms.utils import ErrorList
 from django.utils.safestring import mark_safe
 from django.utils.translation import ugettext as _
 

diff --git a/src/ralph/admin/mixins.py b/src/ralph/admin/mixins.py
@@ -199,7 +199,8 @@ def changeform_view(
     def formfield_for_manytomany(self, db_field, request=None, **kwargs):
         if db_field.name in ('user_permissions', 'permissions'):
             kwargs['widget'] = widgets.PermissionsSelectWidget()
-        return db_field.formfield(**kwargs)
+            return db_field.formfield(**kwargs)
+        return super().formfield_for_manytomany(db_field, request, **kwargs)
 
 
 class RalphAdmin(

diff --git a/src/ralph/admin/templates/admin/base.html b/src/ralph/admin/templates/admin/base.html
@@ -59,7 +59,6 @@
     {% endif %}
     <div class="row">
       <div class="large-12 columns content">
-      <div id="magicsuggest"></div>
         {% block content %}{% endblock %}
       </div>
     </div>

diff --git a/src/ralph/admin/templates/admin/related_widget_wrapper.html b/src/ralph/admin/templates/admin/related_widget_wrapper.html
@@ -1,29 +1,31 @@
 {% load i18n admin_static %}
 <div class="related-widget-wrapper row">
-    <div class="large-12 columns">
-        {{ widget }}
-        {% block links %}
-            {% if can_change_related %}
-            <a class="related-widget-wrapper-link change-related" id="change_id_{{ name }}"
-                data-href-template="{{ change_related_template_url }}?{{ url_params }}"
-                title="{% blocktrans %}Change selected {{ model }}{% endblocktrans %}">
-                <i class="fa fa-pencil fa-lg"></i>
-            </a>
-            {% endif %}
-            {% if can_add_related %}
-            <a class="related-widget-wrapper-link add-related" id="add_id_{{ name }}"
-                href="{{ add_related_url }}?{{ url_params }}"
-                title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
-                <i class="fa fa-plus-circle fa-lg"></i>
-            </a>
-            {% endif %}
-            {% if can_delete_related %}
-            <a class="related-widget-wrapper-link delete-related" id="delete_id_{{ name }}"
-                data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
-                title="{% blocktrans %}Delete selected {{ model }}{% endblocktrans %}">
-                <i class="fa fa-trash fa-lg"></i>
-            </a>
-            {% endif %}
-        {% endblock %}
-    </div>
+  <div class="widget">
+    {{ widget }}
+  </div>
+  <div class="links">
+    {% block links %}
+      {% if can_change_related %}
+      <a class="related-widget-wrapper-link change-related" id="change_id_{{ name }}"
+          data-href-template="{{ change_related_template_url }}?{{ url_params }}"
+          title="{% blocktrans %}Change selected {{ model }}{% endblocktrans %}">
+          <i class="fa fa-pencil fa-lg"></i>
+      </a>
+      {% endif %}
+      {% if can_add_related %}
+      <a class="related-widget-wrapper-link add-related" id="add_id_{{ name }}"
+          href="{{ add_related_url }}?{{ url_params }}"
+          title="{% blocktrans %}Add another {{ model }}{% endblocktrans %}">
+          <i class="fa fa-plus-circle fa-lg"></i>
+      </a>
+      {% endif %}
+      {% if can_delete_related %}
+      <a class="related-widget-wrapper-link delete-related" id="delete_id_{{ name }}"
+          data-href-template="{{ delete_related_template_url }}?{{ url_params }}"
+          title="{% blocktrans %}Delete selected {{ model }}{% endblocktrans %}">
+          <i class="fa fa-trash fa-lg"></i>
+      </a>
+      {% endif %}
+  {% endblock %}
+  </div>
 </div>
diff --git a/src/ralph/admin/templates/admin/search_form.html b/src/ralph/admin/templates/admin/search_form.html
@@ -2,21 +2,18 @@
 
 {% if search_fields %}
   <div class="contextual_search">
-    <form id="changelist-search" action="{{ search_url }}" method="get">
-      <div 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:", " }}" />
-        </div>
-        <div class="small-2 columns">
-          <button type="submit" class="button expand search">
-            <i class="fa fa-search"></i>
-          </button>
-        </div>
+    <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:", " }}" />
+      </div>
+      <div class="small-2 columns">
+        <button type="submit" class="button expand search">
+          <i class="fa fa-search"></i>
+        </button>
       </div>
       {% for pair in cl.params.items %}
         {% ifnotequal pair.0 search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}"/>{% endifnotequal %}
       {% endfor %}
     </form>
-  </div>
 <script type="text/javascript">document.getElementById("searchbar").focus();</script>
 {% endif %}
diff --git a/src/ralph/assets/admin.py b/src/ralph/assets/admin.py
@@ -34,7 +34,8 @@ class ServiceEnvironmentInline(RalphTabularInline):
 class ServiceAdmin(RalphAdmin):
     exclude = ['environments']
     inlines = [ServiceEnvironmentInline]
-    search_fields = ['name', 'uid']
+    filter_horizontal = ['business_owners', 'technical_owners']
+    search_fields = ['name']
 
 
 @register(Manufacturer)

diff --git a/src/ralph/lib/foundation/templates/foundation_form/form_field.html b/src/ralph/lib/foundation/templates/foundation_form/form_field.html
@@ -5,6 +5,17 @@
     <div class="small-3 columns">
       {% if show_label %}
         {% label field %}
+        {% if admin_field.help_text %}
+          <span class="help-text">
+            <i
+              class="fa fa-lg fa-info-circle has-tip tip-top"
+              data-tooltip
+              aria-haspopup="true"
+              title="{{ admin_field.help_text | escape }}"
+            >
+            </i>
+          </span>
+        {% endif %}
       {% endif %}
     </div>
     <div class="small-7 end columns {% if field.errors %} error{% endif %}">
@@ -18,17 +29,6 @@
           <small class="error">{{ error }}</small>
         {% endfor %}
       {% endif %}
-      {% if admin_field.help_text %}
-        <span class="help-text">
-          <i
-            class="fa fa-lg fa-info-circle has-tip tip-top"
-            data-tooltip
-            aria-haspopup="true"
-            title="{{ admin_field.help_text | escape }}"
-          >
-          </i>
-        </span>
-      {% endif %}
     </div>
   </div>
 </div>
diff --git a/src/ralph/static/src/scss/_overrides.scss b/src/ralph/static/src/scss/_overrides.scss
@@ -55,7 +55,7 @@ select {
                 display: none;
             }
             #{text-inputs(all, 'input')}, select{
-                margin: rem-calc(5) 0;
+                margin: 0;
             }
         }
     }

diff --git a/src/ralph/static/src/scss/_settings.scss b/src/ralph/static/src/scss/_settings.scss
@@ -37,6 +37,7 @@ $button-font-lrg: rem-calc(14);
 $button-margin-bottom: 0;
 $button-radius: 0;
 
+$form-spacing: rem-calc(12);
 $form-label-font-size: rem-calc(12);
 
 $fieldset-border-style: solid;

diff --git a/src/ralph/static/src/scss/_styles.scss b/src/ralph/static/src/scss/_styles.scss
@@ -69,6 +69,7 @@ select {
 label, label.inline, select, #{text-inputs(all, 'input')} {
     padding: $input-padding;
     height: auto;
+    margin: $form-spacing / 2 0;
 }
 
 button.button.search {

diff --git a/src/ralph/static/src/scss/components/autocomplete_field.scss b/src/ralph/static/src/scss/components/autocomplete_field.scss
@@ -1,31 +1,41 @@
-$item-padding: 0.1rem;
-$widget-padding: $input-padding - $item-padding;
-$lookup-icon-width: 20px;
+$item-padding: 0.25rem;
+$lookup-icon-width: 25px;
+$icons-count: 2;
+$icons-wrapper-margin: 5px;
+$font-size: rem-calc(16);
 
 @mixin right-lookup() {
-    width: calc(100%  - #{($lookup-icon-width * 2)});
+    width: calc(100%  - #{($lookup-icon-width * $icons-count) + $icons-wrapper-margin});
     float: left;
 }
 
+@mixin common-styles() {
+    padding: $item-padding 0;
+    font-size: $input-font-size;
+}
+
 .autocomplete-widget {
     position: relative;
-    margin: 0 0 $form-spacing 0;
+    margin: $form-spacing / 2 0;
     .widget-wrapper {
+        overflow: hidden;
         background: $input-bg-color;
         border: {
             style: $input-border-style;
             width: $input-border-width;
             color: $input-border-color;
-          }
+        }
         box-shadow: $input-box-shadow;
-        padding: $widget-padding;
         .item-wrapper {
             @include right-lookup;
             .item {
-                display:inline;
+                line-height: 1rem;
+                display: inline-block;
                 background: #ededed;
-                padding: $item-padding 0;
                 border: 1px solid #cacaca;
+                white-space: nowrap;
+                margin: 1px;
+                @include common-styles;
                 .title {
                     margin-left: $item-padding;
                 }
@@ -40,16 +50,25 @@ $lookup-icon-width: 20px;
                 padding: 0 4px;
             }
         }
-        .widget-icons .fa {
-            font-size: rem-calc(18);
+        .widget-icons {
+            width: #{($lookup-icon-width * $icons-count)};
+            float: right;
+            text-align: right;
+            margin-top: 5px;
+            margin-right: $icons-wrapper-margin;
+            .fa {
+                font-size: $font-size;
+            }
         }
         .input {
             @include right-lookup;
-            padding: $item-padding;
-            margin: 0;
+            @include common-styles;
             display: none;
-            float: left;
+            padding-left: 4px;
+            margin: 4px 0;
             border: 0;
+            border-left: 0;
+            border-right: 0;
         }
         .delete, .title, .related-lookup {
             font-size: $input-font-size;
@@ -62,11 +81,11 @@ $lookup-icon-width: 20px;
         }
         .status{
             position: absolute;
-            top: 5px;
-            right: 48px;
+            top: 8px;
+            right: 45px;
             .fa {
                 display: none;
-                font-size: 1.25rem;
+                font-size: $font-size;
                 &.fa-spin {
                     -webkit-animation-duration: 1s;
                     animation-duration: 1s;
@@ -128,7 +147,8 @@ $lookup-icon-width: 20px;
     }
 }
 
-.error .suggest-field-widget .widget-wrapper {
+.error .autocomplete-widget .widget-wrapper {
+    background-color: #fff5c3;
     border-color: $alert-color;
     .input {
         border: none;

diff --git a/src/ralph/static/src/scss/components/contextual_search.scss b/src/ralph/static/src/scss/components/contextual_search.scss
@@ -8,13 +8,14 @@
 
 .contextual_search {
     #searchbar, .search {
-        padding: rem-calc(6) inherit;
+        padding: rem-calc(6);
         font-size: 1rem;
     }
     #searchbar {
         border-right: 0;
         padding-left: rem-calc(6);
         margin-bottom: rem-calc(4);
+        margin-top: 0;
     }
     .search {
         border: 1px solid #5B5B5B;

diff --git a/src/ralph/static/src/scss/components/fieldsets.scss b/src/ralph/static/src/scss/components/fieldsets.scss
@@ -14,5 +14,5 @@ fieldset {
 .help-text {
     position: absolute;
     right: -13px;
-    top: 5px;
+    top: 11px;
 }
diff --git a/src/ralph/static/src/scss/components/related_widget.scss b/src/ralph/static/src/scss/components/related_widget.scss
@@ -0,0 +1,9 @@
+form .row .related-widget-wrapper.row {
+    margin-left: 0;
+    .links {
+        position: absolute;
+        left: 100%;
+        top: 10px;
+        width: 60px;
+    }
+}