diff --git a/gulpfile.js b/gulpfile.js index 76bfc61cb7..e442be1da8 100644 --- 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 index 8658d0b26e..e18f79f66c 100644 --- 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 index 7373d6e31d..15b37a01fb 100644 --- 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 index 0c2d2968b3..6b0da889a4 100644 --- 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 index b2808eb389..1dcdc85ce7 100644 --- a/src/ralph/admin/templates/admin/base.html +++ b/src/ralph/admin/templates/admin/base.html @@ -59,7 +59,6 @@ {% endif %}
-
{% block content %}{% endblock %}
diff --git a/src/ralph/admin/templates/admin/related_widget_wrapper.html b/src/ralph/admin/templates/admin/related_widget_wrapper.html index a8d133cbe6..41d5cf2e2d 100644 --- 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 %}
-
- {{ widget }} - {% block links %} - {% if can_change_related %} - - - - {% endif %} - {% if can_add_related %} - - - - {% endif %} - {% if can_delete_related %} - - - - {% endif %} - {% endblock %} -
+
+ {{ widget }} +
+
+ {% block links %} + {% if can_change_related %} + + + + {% endif %} + {% if can_add_related %} + + + + {% endif %} + {% if can_delete_related %} + + + + {% endif %} + {% endblock %} +
diff --git a/src/ralph/admin/templates/admin/search_form.html b/src/ralph/admin/templates/admin/search_form.html index 649c06b2b0..d7a8ed8d70 100644 --- 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 %}
- {% endif %} diff --git a/src/ralph/assets/admin.py b/src/ralph/assets/admin.py index 9036637d43..5b13032f9e 100644 --- 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 index a865cce349..c40bf5bd55 100644 --- 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 @@
{% if show_label %} {% label field %} + {% if admin_field.help_text %} + + + + + {% endif %} {% endif %}
@@ -18,17 +29,6 @@ {{ error }} {% endfor %} {% endif %} - {% if admin_field.help_text %} - - - - - {% endif %}
diff --git a/src/ralph/static/src/scss/_overrides.scss b/src/ralph/static/src/scss/_overrides.scss index 2c0d769efb..94cc0aebe6 100644 --- 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 index 67e936a46b..6c9e750c1d 100644 --- 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 index 18d77c0960..bfe1075475 100644 --- 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 index 2c8a3def37..61cb66fcf6 100644 --- 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 index 20ed7ba4cd..cc9e4d8f16 100644 --- 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 index 42c5840f4d..332a04d830 100644 --- 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 new file mode 100644 index 0000000000..950e1b9cec --- /dev/null +++ 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; + } +} diff --git a/src/ralph/static/src/scss/components/select_filter.scss b/src/ralph/static/src/scss/components/select_filter.scss new file mode 100644 index 0000000000..bad2b7558f --- /dev/null +++ b/src/ralph/static/src/scss/components/select_filter.scss @@ -0,0 +1,42 @@ +$chooser-size: 50px; +$selector-size: calc(50% - #{($chooser-size / 2)}; + +#content-main .content .selector h2 { + font-size: 1rem; +} +.selector { + width: 100%; + margin-bottom: 10px; + .help { + display: none; + } + select { + width: 100%; + height: 17.2em; + margin: 0; + &.fitered { + height: 20.6rem; + } + } + .selector-available, .selector-chosen { + width: $selector-size; + float: left; + } + .selector-available { + .selector-filter { + margin-bottom: 0; + label { + display: none; + } + } + } + .selector-chooser { + margin-top: 100px; + list-style: none; + margin: 100px 0 0 0; + width: $chooser-size; + float: left; + text-align: center; + } +} + diff --git a/src/ralph/static/src/scss/components/tables.scss b/src/ralph/static/src/scss/components/tables.scss index 30e8c74a7c..8e787465f0 100644 --- a/src/ralph/static/src/scss/components/tables.scss +++ b/src/ralph/static/src/scss/components/tables.scss @@ -62,7 +62,7 @@ table { background-color: darken($row-odd-bg-color, 1%); } td, th { - text-align: center; + text-align: left; @include cell-border(); padding: 0 5px; } diff --git a/src/ralph/static/src/scss/ralph.scss b/src/ralph/static/src/scss/ralph.scss index 471050ca79..c1fc428d00 100644 --- a/src/ralph/static/src/scss/ralph.scss +++ b/src/ralph/static/src/scss/ralph.scss @@ -51,6 +51,8 @@ @import 'components/fieldsets'; @import 'components/header'; @import 'components/login'; +@import 'components/related_widget'; +@import 'components/select_filter'; @import 'components/tables'; @import 'components/tabs'; @import 'components/visualization';