From 6398af715ad0ed9a4ac001b0363455527e770cf2 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Fri, 9 Jan 2015 23:30:33 -0500 Subject: [PATCH] Make group config styles generic --- .../js/spec/views/group_configuration_spec.js | 18 +- .../views/pages/group_configurations_spec.js | 2 +- cms/static/js/views/content_group_details.js | 2 +- cms/static/js/views/content_group_editor.js | 2 +- cms/static/js/views/content_group_item.js | 2 + cms/static/js/views/content_group_list.js | 2 + .../js/views/group_configuration_details.js | 1 + .../js/views/group_configuration_editor.js | 5 +- .../js/views/group_configuration_item.js | 12 +- .../js/views/group_configurations_list.js | 2 + cms/static/js/views/list.js | 8 +- cms/static/js/views/list_item.js | 9 +- .../sass/views/_group-configuration.scss | 781 ++++++++++-------- cms/templates/group_configurations.html | 8 +- .../js/content-group-details.underscore | 8 +- .../js/content-group-editor.underscore | 12 +- .../js/group-configuration-details.underscore | 30 +- .../js/group-configuration-editor.underscore | 14 +- cms/templates/js/list.underscore | 9 +- .../studio/settings_group_configurations.py | 14 +- 20 files changed, 517 insertions(+), 424 deletions(-) diff --git a/cms/static/js/spec/views/group_configuration_spec.js b/cms/static/js/spec/views/group_configuration_spec.js index 6177d96c31..bc37013475 100644 --- a/cms/static/js/spec/views/group_configuration_spec.js +++ b/cms/static/js/spec/views/group_configuration_spec.js @@ -24,7 +24,7 @@ define([ groupsAllocation: '.group-allocation', errorMessage: '.group-configuration-edit-error', inputGroupName: '.group-name', - inputName: '.group-configuration-name-input', + inputName: '.collection-name-input', inputDescription: '.group-configuration-description-input', usageCount: '.group-configuration-usage-count', usage: '.group-configuration-usage', @@ -635,15 +635,15 @@ define([ describe('Content groups list view', function() { var newGroupCss = '.new-button', addGroupCss = '.action-add', - inputCss = '.group-configuration-name-input', + inputCss = '.collection-name-input', saveButtonCss = '.action-primary', cancelButtonCss = '.action-cancel', - validationErrorCss = '.group-configuration-edit-error', + validationErrorCss = '.content-group-edit-error', scopedGroupSelector, createGroups, renderView, saveOrCancel, editNewGroup, editExistingGroup, verifyEditingGroup, respondToSave, expectGroupsVisible, correctValidationError; scopedGroupSelector = function(groupIndex, additionalSelectors) { - var groupSelector = '.group-configurations-list-item-' + groupIndex; + var groupSelector = '.content-groups-list-item-' + groupIndex; if (additionalSelectors) { return groupSelector + ' ' + additionalSelectors; } else { @@ -704,11 +704,11 @@ define([ // editing a group. index = index || 0; if (expectEditing) { - expect(view.$(scopedGroupSelector(index, '.group-configuration-edit'))).toExist(); + expect(view.$(scopedGroupSelector(index, '.content-group-edit'))).toExist(); expect(view.$(newGroupCss)).not.toExist(); expect(view.$(addGroupCss)).toHaveClass('is-hidden'); } else { - expect(view.$('.group-configuration-edit')).not.toExist(); + expect(view.$('.content-group-edit')).not.toExist(); if (view.collection.length === 0) { expect(view.$(newGroupCss)).toExist(); expect(view.$(addGroupCss)).not.toExist(); @@ -742,7 +742,7 @@ define([ expectGroupsVisible = function(view, groupNames) { _.each(groupNames, function(groupName) { - expect(view.$('.group-configurations-list-item')).toContainText(groupName); + expect(view.$('.content-groups-list-item')).toContainText(groupName); }); }; @@ -753,13 +753,13 @@ define([ }); it('shows a message when no groups are present', function() { - expect(renderView().$('.no-group-configurations-content')) + expect(renderView().$('.no-content')) .toContainText('You have not created any content groups yet.'); }); it('can render groups', function() { var groupNames = ['Group 1', 'Group 2', 'Group 3']; - renderView(groupNames).$('.group-configuration-details').each(function(index) { + renderView(groupNames).$('.content-group-details').each(function(index) { expect($(this)).toContainText(groupNames[index]); }); }); diff --git a/cms/static/js/spec/views/pages/group_configurations_spec.js b/cms/static/js/spec/views/pages/group_configurations_spec.js index 8b59d03b1e..3ebd6f576f 100644 --- a/cms/static/js/spec/views/pages/group_configurations_spec.js +++ b/cms/static/js/spec/views/pages/group_configurations_spec.js @@ -52,7 +52,7 @@ define([ expect(view.$('.ui-loading')).toBeVisible(); view.render(); expect(view.$(groupConfigItemClassName)).toExist(); - expect(view.$('.content-groups .no-group-configurations-content')).toExist(); + expect(view.$('.content-groups .no-content')).toExist(); expect(view.$('.ui-loading')).toHaveClass('is-hidden'); }); }); diff --git a/cms/static/js/views/content_group_details.js b/cms/static/js/views/content_group_details.js index 7c0b5b86a2..9388db60ed 100644 --- a/cms/static/js/views/content_group_details.js +++ b/cms/static/js/views/content_group_details.js @@ -9,7 +9,7 @@ define([ var ContentGroupDetailsView = BaseView.extend({ tagName: 'div', - className: 'group-configuration-details', + className: 'content-group-details collection', events: { 'click .edit': 'editGroup' diff --git a/cms/static/js/views/content_group_editor.js b/cms/static/js/views/content_group_editor.js index 798f0ae659..7d87048f02 100644 --- a/cms/static/js/views/content_group_editor.js +++ b/cms/static/js/views/content_group_editor.js @@ -10,7 +10,7 @@ function(ListItemEditorView, _) { var ContentGroupEditorView = ListItemEditorView.extend({ tagName: 'div', - className: 'group-configuration-edit', + className: 'content-group-edit collection-edit', events: { 'submit': 'setAndClose', 'click .action-cancel': 'cancel' diff --git a/cms/static/js/views/content_group_item.js b/cms/static/js/views/content_group_item.js index e949c1c9d4..199fe31a0f 100644 --- a/cms/static/js/views/content_group_item.js +++ b/cms/static/js/views/content_group_item.js @@ -12,6 +12,8 @@ define([ var ContentGroupItemView = ListItemView.extend({ tagName: 'section', + baseClassName: 'content-group', + createEditView: function() { return new ContentGroupEditorView({model: this.model}); }, diff --git a/cms/static/js/views/content_group_list.js b/cms/static/js/views/content_group_list.js index e7131beff4..d4b6242e18 100644 --- a/cms/static/js/views/content_group_list.js +++ b/cms/static/js/views/content_group_list.js @@ -15,6 +15,8 @@ define([ // Translators: This refers to a content group that can be linked to a student cohort. itemCategoryDisplayName: gettext('content group'), + emptyMessage: gettext('You have not created any content groups yet.'), + createItemView: function(options) { return new ContentGroupItemView(options); } diff --git a/cms/static/js/views/group_configuration_details.js b/cms/static/js/views/group_configuration_details.js index 8dcb48cf2a..24fc35dee2 100644 --- a/cms/static/js/views/group_configuration_details.js +++ b/cms/static/js/views/group_configuration_details.js @@ -19,6 +19,7 @@ function(BaseView, _, gettext, str) { var index = this.model.collection.indexOf(this.model); return [ + 'collection', 'group-configuration-details', 'group-configuration-details-' + index ].join(' '); diff --git a/cms/static/js/views/group_configuration_editor.js b/cms/static/js/views/group_configuration_editor.js index 41484cd707..77df7112bd 100644 --- a/cms/static/js/views/group_configuration_editor.js +++ b/cms/static/js/views/group_configuration_editor.js @@ -11,7 +11,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { var GroupConfigurationEditorView = ListItemEditorView.extend({ tagName: 'div', events: { - 'change .group-configuration-name-input': 'setName', + 'change .collection-name-input': 'setName', 'change .group-configuration-description-input': 'setDescription', 'click .action-add-group': 'createGroup', 'focus .input-text': 'onFocus', @@ -24,6 +24,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { var index = this.model.collection.indexOf(this.model); return [ + 'collection-edit', 'group-configuration-edit', 'group-configuration-edit-' + index ].join(' '); @@ -84,7 +85,7 @@ function(ListItemEditorView, _, $, gettext, ExperimentGroupEditView) { setName: function(event) { if (event && event.preventDefault) { event.preventDefault(); } this.model.set( - 'name', this.$('.group-configuration-name-input').val(), + 'name', this.$('.collection-name-input').val(), { silent: true } ); }, diff --git a/cms/static/js/views/group_configuration_item.js b/cms/static/js/views/group_configuration_item.js index badf262768..a0ba843b8b 100644 --- a/cms/static/js/views/group_configuration_item.js +++ b/cms/static/js/views/group_configuration_item.js @@ -18,6 +18,13 @@ define([ tagName: 'section', + baseClassName: 'group-configuration', + + canDelete: true, + + // Translators: this refers to a collection of groups. + itemDisplayName: gettext('group configuration'), + attributes: function () { return { 'id': this.model.get('id'), @@ -25,11 +32,6 @@ define([ }; }, - // Translators: this refers to a collection of groups. - itemDisplayName: gettext('group configuration'), - - canDelete: true, - createEditView: function() { return new GroupConfigurationEditorView({model: this.model}); }, diff --git a/cms/static/js/views/group_configurations_list.js b/cms/static/js/views/group_configurations_list.js index 33b76a0d94..e40af573e9 100644 --- a/cms/static/js/views/group_configurations_list.js +++ b/cms/static/js/views/group_configurations_list.js @@ -17,6 +17,8 @@ define([ // Translators: this refers to a collection of groups. itemCategoryDisplayName: gettext('group configuration'), + emptyMessage: gettext('You have not created any group configurations yet.'), + createItemView: function(options) { return new GroupConfigurationItemView(options); } diff --git a/cms/static/js/views/list.js b/cms/static/js/views/list.js index 7975586b63..5930329ef9 100644 --- a/cms/static/js/views/list.js +++ b/cms/static/js/views/list.js @@ -10,6 +10,7 @@ * - itemCategoryDisplayName (string): Display name for the category * of items this list contains. For example, 'Group Configuration'. * Note that it must be translated. + * - emptyMessage (string): Text to render when the list is empty. */ define([ 'js/views/baseview' @@ -21,6 +22,8 @@ define([ 'click .new-button': 'onAddItem' }, + listContainerCss: '.list-items', + initialize: function() { this.listenTo(this.collection, 'add', this.addNewItemView); this.listenTo(this.collection, 'remove', this.onRemoveItem); @@ -35,12 +38,13 @@ define([ render: function(model) { this.$el.html(this.template({ itemCategoryDisplayName: this.itemCategoryDisplayName, + emptyMessage: this.emptyMessage, length: this.collection.length, isEditing: model && model.get('editing') })); this.collection.each(function(model) { - this.$('.content-groups').append(this.createItemView({model: model}).render().el); + this.$(this.listContainerCss).append(this.createItemView({model: model}).render().el); }, this); return this; @@ -71,7 +75,7 @@ define([ // If items already exist, just append one new. // Otherwise re-render the empty list HTML. if (this.collection.length > 1) { - this.$('.content-groups').append(view.render().el); + this.$(this.listContainerCss).append(view.render().el); } else { this.render(); } diff --git a/cms/static/js/views/list_item.js b/cms/static/js/views/list_item.js index 0636d93e55..a4bf11eeff 100644 --- a/cms/static/js/views/list_item.js +++ b/cms/static/js/views/list_item.js @@ -5,6 +5,7 @@ * Subclasses must implement: * - itemDisplayName (string): Display name for the list item. * Must be translated. + * - baseClassName (string): CSS class name representing the item. * - createEditView (function): Render and append the edit view to the * DOM. * - createDetailsView (function): Render and append the details view @@ -29,9 +30,11 @@ define([ var index = this.model.collection.indexOf(this.model); return [ - 'group-configuration', - 'group-configurations-list-item', - 'group-configurations-list-item-' + index + 'wrapper-collection', + 'wrapper-collection-' + index, + this.baseClassName, + this.baseClassName + 's-list-item', + this.baseClassName + 's-list-item-' + index ].join(' '); }, diff --git a/cms/static/sass/views/_group-configuration.scss b/cms/static/sass/views/_group-configuration.scss index f6485bc489..ac6168423f 100644 --- a/cms/static/sass/views/_group-configuration.scss +++ b/cms/static/sass/views/_group-configuration.scss @@ -19,7 +19,7 @@ text-align: center; } - .no-group-configurations-content { + .no-content { @extend %no-content; } @@ -35,193 +35,183 @@ .copy { @extend %t-copy-sub1; } - } - .group-configuration { + .wrapper-collection { @extend %ui-window; position: relative; outline: none; - .group-configuration-details { - .wrapper-group-configuration { - padding: $baseline ($baseline*1.5); + &:hover .collection .actions { + opacity: 1.0; + } - .group-configuration-header { - margin-bottom: 0; - border-bottom: 0; - padding-bottom: 0; - } + .collection-details { + padding: $baseline ($baseline*1.5); + } - .group-configuration-title { - @extend %t-title5; - @extend %t-strong; - overflow: hidden; - text-overflow: ellipsis; - margin-right: ($baseline*14); + .collection-header { + margin-bottom: 0; + border-bottom: 0; + padding-bottom: 0; + + .title { + @extend %cont-truncated; + @extend %t-title5; + @extend %t-strong; + margin-right: ($baseline*14); + color: $black; + + .toggle { + display: inline-block; + padding-left: $baseline; color: $black; - .group-toggle { - display: inline-block; - padding-left: $baseline; - color: $black; - - &:hover, &:focus { - color: $blue; - } - } - } - - .group-configuration-info { - @extend %t-copy-sub1; - color: $gray-l1; - margin-left: $baseline; - - &.group-configuration-info-inline { - display: table; - width: 70%; - margin: ($baseline/4) 0 ($baseline/2) $baseline; - - li { - @include box-sizing(border-box); - display: table-cell; - margin-right: 1%; - - &.group-configuration-usage-count { - font-style: italic; - } - } - } - - &.group-configuration-info-block { - li { - padding: ($baseline/4) 0; - } - } - - .group-configuration-label { - text-transform: uppercase; - } - - .group-configuration-description { - overflow: hidden; - text-overflow: ellipsis; - } - } - - .ui-toggle-expansion { - @include transition(rotate .15s ease-in-out .25s); - @extend %t-action1; - display: inline-block; - width: ($baseline*0.75); - vertical-align: baseline; - margin-left: -$baseline; - } - - &.is-selectable { - @extend %ui-fake-link; - - &:hover { + &:hover, &:focus { color: $blue; - - .ui-toggle-expansion { - color: $blue; - } } - } - .groups { - margin-left: $baseline; - margin-bottom: ($baseline*0.75); - - .group { - @extend %t-copy-lead1; - padding: ($baseline/7) 0 ($baseline/4); - border-top: 1px solid $gray-l4; - white-space: nowrap; - - &:first-child { - border-top: none; - } - - .group-name { - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: middle; - width: 75%; - margin-right: 5%; - } - - .group-allocation { - display: inline-block; - vertical-align: middle; - width: 20%; - color: $gray-l1; - text-align: right; - } - } - } - - .actions { - @include transition(opacity .15s .25s ease-in-out); - opacity: 0.0; - position: absolute; - top: $baseline; - right: $baseline; - - .action { + .ui-toggle-expansion { + @include transition(rotate .15s ease-in-out .25s); + @extend %t-action1; display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - - .edit { - @extend %ui-btn-non-blue; - } - - .delete { - @extend %ui-btn-non; - - &.is-disabled { - background-color: $gray-l3; - color: $gray-l6; - } - } + width: ($baseline*0.75); + vertical-align: baseline; + margin-left: -$baseline; } - } - } - .wrapper-group-configuration-usages { - @extend %t-copy-sub1; - box-shadow: 0 2px 2px 0 $shadow inset; - padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5); - color: $gray-l1; + &.is-selectable { + @extend %ui-fake-link; - .group-configuration-usage { - margin-left: $baseline; + &:hover { + color: $blue; - .group-configuration-usage-unit { - padding: ($baseline/4) 0; - - a { - font-weight: 600; - } - - .fa-warning { - margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5); - color: $orange; - } - - .fa-times-circle { - margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5); - color: $red-l2; + .ui-toggle-expansion { + color: $blue; + } } } } } } - .wrapper-group-configuration-validation { + .collection-info { + @extend %t-copy-sub1; + color: $gray-l1; + margin-left: $baseline; + + &.collection-info-inline { + display: table; + width: 70%; + margin: ($baseline/4) 0 ($baseline/2) $baseline; + + li { + @include box-sizing(border-box); + display: table-cell; + margin-right: 1%; + padding: ($baseline/4) 0; + + &.collection-usage-count { + font-style: italic; + } + } + } + + .collection-label { + text-transform: uppercase; + } + + .collection-description { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .collection-items { + margin-left: $baseline; + margin-bottom: ($baseline*0.75); + + .item { + @extend %t-copy-lead1; + padding: ($baseline/7) 0 ($baseline/4); + border-top: 1px solid $gray-l4; + white-space: nowrap; + + &:first-child { + border-top: none; + } + + .name { + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: middle; + width: 75%; + margin-right: 5%; + } + } + } + + .collection-details { + + .actions { + @include transition(opacity .15s .25s ease-in-out); + position: absolute; + top: $baseline; + right: $baseline; + opacity: 0.0; + + .action { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + + .edit { + @extend %ui-btn-non-blue; + } + + .delete { + @extend %ui-btn-non; + + &.is-disabled { + background-color: $gray-l3; + color: $gray-l6; + } + } + } + } + } + + .collection-references { + @extend %t-copy-sub1; + box-shadow: 0 2px 2px 0 $shadow inset; + padding: $baseline ($baseline*1.5) $baseline ($baseline*2.5); + color: $gray-l1; + + .usage { + margin-left: $baseline; + + .usage-unit { + padding: ($baseline/4) 0; + + a { + @extend %t-strong; + } + + .fa-warning { + margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5); + color: $orange; + } + + .fa-times-circle { + margin: ($baseline/4) ($baseline/2) 0 ($baseline*1.5); + color: $red-l2; + } + } + } + } + + .usage-validation { @extend %t-copy-sub1; background-color: $gray-l6; margin-top: $baseline; @@ -233,17 +223,21 @@ float: left; } - .group-configuration-validation-text { + .collection-validation-text { overflow: auto; } } - .group-configuration-edit { + .collection-edit { @include box-sizing(border-box); border-radius: 2px; width: 100%; background: $white; + .message { + margin-bottom: 0; + } + .wrapper-form { padding: $baseline ($baseline*1.5); } @@ -260,6 +254,113 @@ color: $gray; } + + .collection-fields { + @extend %cont-no-list; + margin-bottom: $baseline; + } + + .field { + margin: 0 0 ($baseline*0.75) 0; + + &:last-child { + @extend %wipe-last-child; + } + + &.required { + + label { + @extend %t-strong; + } + + label:after { + margin-left: ($baseline/4); + content: "*"; + } + } + + label, input, textarea { + display: block; + } + + textarea { + resize: vertical; + } + + label { + @extend %t-copy-sub1; + @include transition(color, 0.15s, ease-in-out); + margin: 0 0 ($baseline/4) 0; + + &.is-focused { + color: $blue; + } + } + + //this section is borrowed from _account.scss - we should clean up and unify later + input, textarea { + @extend %t-copy-base; + height: 100%; + width: 100%; + padding: ($baseline/2); + + &.long { + width: 100%; + } + + &.short { + width: 25%; + } + + ::-webkit-input-placeholder { + color: $gray-l4; + } + + :-moz-placeholder { + color: $gray-l3; + } + + ::-moz-placeholder { + color: $gray-l3; + } + + :-ms-input-placeholder { + color: $gray-l3; + } + + &:focus { + + .tip { + color: $gray; + } + } + } + + &.error { + label { + color: $red; + } + + input { + border-color: $red; + } + } + } + + label.required { + @extend %t-strong; + + &:after { + margin-left: ($baseline/4); + content: "*"; + } + } + + .field.add-collection-name label { + @extend %t-title5; + display: inline-block; + vertical-align: bottom; + } + .actions { box-shadow: inset 0 1px 2px $shadow; border-top: 1px solid $gray-l1; @@ -304,191 +405,9 @@ @extend %t-strong; } } - - .groups-fields, - .group-configuration-fields { - @extend %cont-no-list; - - .field { - margin: 0 0 ($baseline*0.75) 0; - - &:last-child { - margin-bottom: 0; - } - - &.required { - - label { - @extend %t-strong; - } - - label:after { - margin-left: ($baseline/4); - content: "*"; - } - } - - label, input, textarea { - display: block; - } - - textarea { - resize: vertical; - } - - label { - @extend %t-copy-sub1; - @include transition(color, 0.15s, ease-in-out); - margin: 0 0 ($baseline/4) 0; - - &.is-focused { - color: $blue; - } - } - - //this section is borrowed from _account.scss - we should clean up and unify later - input, textarea { - @extend %t-copy-base; - height: 100%; - width: 100%; - padding: ($baseline/2); - - &.long { - width: 100%; - } - - &.short { - width: 25%; - } - - ::-webkit-input-placeholder { - color: $gray-l4; - } - - :-moz-placeholder { - color: $gray-l3; - } - - ::-moz-placeholder { - color: $gray-l3; - } - - :-ms-input-placeholder { - color: $gray-l3; - } - - &:focus { - + .tip { - color: $gray; - } - } - } - - &.error { - label { - color: $red; - } - - input { - border-color: $red; - } - } - - &.add-group-configuration-name label { - @extend %t-title5; - display: inline-block; - width: 50%; - padding-right: 5%; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - } - - .group-configuration-id { - display: inline-block; - width: 45%; - text-align: right; - vertical-align: top; - color: $gray-l1; - - .group-configuration-value { - @extend %t-strong; - white-space: nowrap; - margin-left: ($baseline*0.5); - } - } - - &.group-allocation { - color: $gray-l1; - } - } - - label.required { - @extend %t-strong; - - &:after { - margin-left: ($baseline/4); - content: "*"; - } - } - - .field-group { - @include clearfix(); - margin: 0 0 ($baseline/2) 0; - padding: ($baseline/4) 0 0 0; - - .group-allocation, - .field { - display: inline-block; - vertical-align: middle; - margin: 0 3% 0 0; - } - - .group-allocation { - max-width: 10%; - min-width: 5%; - color: $gray-l1; - } - - .field { - position: relative; - - &.long { - width: 80%; - } - - &.short { - width: 10%; - } - } - - .action-close { - @include transition(color $tmg-f2 ease-in-out); - @extend %t-action1; - display: inline-block; - border: 0; - padding: 0; - background: transparent; - color: $blue-l3; - vertical-align: middle; - - &:hover { - color: $blue; - } - } - } - } - - .group-configuration-fields { - margin-bottom: $baseline; - } } - &:hover .wrapper-group-configuration .actions { - opacity: 1.0; - } - - .action-add-group { + .action-add-item { @extend %ui-btn-flat-outline; @extend %t-action2; @extend %t-strong; @@ -499,7 +418,7 @@ } } - // add/new items + // add/new collection .action-add { @extend %ui-btn-flat-outline; display: block; @@ -517,13 +436,167 @@ @include margin-right($baseline/2); } } + + // specific group-type styles + .content-groups { + + .collection-header{ + + .title { + margin-bottom: 0; + } + } + } + + .experiment-groups { + + .group-configuration-details { + + .group-configuration-info { + @extend %t-copy-sub1; + color: $gray-l1; + margin-left: $baseline; + + &.group-configuration-info-inline { + display: table; + width: 70%; + margin: ($baseline/4) 0 ($baseline/2) $baseline; + + li { + @include box-sizing(border-box); + display: table-cell; + margin-right: 1%; + + &.group-configuration-usage-count { + font-style: italic; + } + } + } + + &.group-configuration-info-block { + li { + padding: ($baseline/4) 0; + } + } + + .group-configuration-label { + text-transform: uppercase; + } + + .group-configuration-description { + overflow: hidden; + text-overflow: ellipsis; + } + } + + .groups { + margin-left: $baseline; + margin-bottom: ($baseline*0.75); + + .group { + @extend %t-copy-lead1; + padding: ($baseline/7) 0 ($baseline/4); + border-top: 1px solid $gray-l4; + white-space: nowrap; + + &:first-child { + border-top: none; + } + + .group-name { + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: middle; + width: 75%; + margin-right: 5%; + } + + .group-allocation { + display: inline-block; + vertical-align: middle; + width: 20%; + color: $gray-l1; + text-align: right; + } + } + } + } + + .group-configuration-edit { + + .add-collection-name label { + width: 50%; + padding-right: 5%; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + } + + .group-configuration-id { + display: inline-block; + width: 45%; + text-align: right; + vertical-align: top; + color: $gray-l1; + + .group-configuration-value { + @extend %t-strong; + white-space: nowrap; + margin-left: ($baseline*0.5); + } + } + + .field-group { + @include clearfix(); + margin: 0 0 ($baseline/2) 0; + padding: ($baseline/4) 0 0 0; + + .group-allocation, + .field { + display: inline-block; + vertical-align: middle; + margin: 0 3% 0 0; + } + + .group-allocation { + max-width: 10%; + min-width: 5%; + color: $gray-l1; + } + + .field { + position: relative; + + &.long { + width: 80%; + } + + &.short { + width: 10%; + } + } + + .action-close { + @include transition(color $tmg-f2 ease-in-out); + @extend %t-action1; + display: inline-block; + border: 0; + padding: 0; + background: transparent; + color: $blue-l3; + vertical-align: middle; + + &:hover { + color: $blue; + } + } + } + } + } } .content-supplementary { width: flex-grid(3, 12); - - .content-groups-doc { - margin-bottom: $baseline; - } } } diff --git a/cms/templates/group_configurations.html b/cms/templates/group_configurations.html index ec1bd722a4..f9a6d0ce08 100644 --- a/cms/templates/group_configurations.html +++ b/cms/templates/group_configurations.html @@ -63,8 +63,8 @@ % endif