diff --git a/admin/javascript/src/components/accordion/item.js b/admin/javascript/src/components/accordion/item.js
index 17b8efb5f..8a4865e03 100644
--- a/admin/javascript/src/components/accordion/item.js
+++ b/admin/javascript/src/components/accordion/item.js
@@ -5,7 +5,7 @@ class AccordionItem extends SilverStripeComponent {
render() {
let className = `list-group-item ${this.props.className}`;
return (
-
+
{this.props.children}
);
diff --git a/admin/javascript/src/components/grid-field/action.js b/admin/javascript/src/components/grid-field/action.js
index 185cbd12b..f419d4b5d 100644
--- a/admin/javascript/src/components/grid-field/action.js
+++ b/admin/javascript/src/components/grid-field/action.js
@@ -10,7 +10,7 @@ class GridFieldActionComponent extends SilverStripeComponent {
render() {
return (
);
diff --git a/admin/javascript/src/components/grid-field/cell.js b/admin/javascript/src/components/grid-field/cell.js
index b118dd985..1145be011 100644
--- a/admin/javascript/src/components/grid-field/cell.js
+++ b/admin/javascript/src/components/grid-field/cell.js
@@ -10,12 +10,12 @@ class GridFieldCellComponent extends SilverStripeComponent {
render() {
const props = {
- className: `grid-field-cell-component ${this.props.className}`,
+ className: `grid-field__cell ${this.props.className}`,
onClick: this.handleDrillDown,
};
return (
-
{this.props.children}
+ {this.props.children} |
);
}
diff --git a/admin/javascript/src/components/grid-field/header-cell.js b/admin/javascript/src/components/grid-field/header-cell.js
index 4add622cc..9cd61127e 100644
--- a/admin/javascript/src/components/grid-field/header-cell.js
+++ b/admin/javascript/src/components/grid-field/header-cell.js
@@ -5,7 +5,7 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
render() {
return (
- {this.props.children}
+ {this.props.children} |
);
}
diff --git a/admin/javascript/src/components/grid-field/index.js b/admin/javascript/src/components/grid-field/index.js
index c709e9d19..acb684fac 100644
--- a/admin/javascript/src/components/grid-field/index.js
+++ b/admin/javascript/src/components/grid-field/index.js
@@ -50,7 +50,7 @@ class GridField extends SilverStripeComponent {
const columns = this.props.data.columns;
// Placeholder to align the headers correctly with the content
- const actionPlaceholder = ;
+ const actionPlaceholder = | ;
const headerCells = columns.map((column, i) =>
{column.name}
);
@@ -64,7 +64,7 @@ class GridField extends SilverStripeComponent {
const val = column.field.split('.').reduce((a, b) => a[b], record);
const cellProps = {
handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
- className: handleDrillDown ? 'grid-field-cell-component--drillable' : '',
+ className: handleDrillDown ? 'grid-field__cell--drillable' : '',
key: j,
width: column.width,
};
@@ -82,19 +82,19 @@ class GridField extends SilverStripeComponent {
handleClick={this.editRecord}
key={`action-${i}-edit`}
record={record}
- />,
+ />
,
+ />
);
const rowProps = {
key: i,
- className: handleDrillDown ? 'grid-field-row-component--drillable' : '',
+ className: handleDrillDown ? 'grid-field__row--drillable' : '',
};
return (
diff --git a/admin/javascript/src/components/grid-field/row.js b/admin/javascript/src/components/grid-field/row.js
index 83d65ca89..3e683d6ad 100644
--- a/admin/javascript/src/components/grid-field/row.js
+++ b/admin/javascript/src/components/grid-field/row.js
@@ -4,8 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
class GridFieldRowComponent extends SilverStripeComponent {
render() {
- const className = `grid-field-row-component [ list-group-item ] ${this.props.className}`;
- return {this.props.children};
+ const className = `grid-field__row ${this.props.className}`;
+ return {this.props.children}
;
}
}
diff --git a/admin/javascript/src/components/grid-field/styles.scss b/admin/javascript/src/components/grid-field/styles.scss
index 335a620a3..0dfc4288e 100644
--- a/admin/javascript/src/components/grid-field/styles.scss
+++ b/admin/javascript/src/components/grid-field/styles.scss
@@ -1,99 +1,98 @@
-.grid-field-action-component {
+// Grid-field
+// Extends basic table styles, requires .table .table-hover
+
+.grid-field__table {
+// Todo: Add extends
+// @extend .table;
+// @extend .table-hover;
+}
+.grid-field__row--drillable {
+ cursor: pointer;
+}
+.grid-field__cell[data-reactid$=-actions] {
+ white-space: nowrap;
+ width: 1px;
+}
+.grid-field__icon-action {
background: none;
border: 0;
- color: $body-color;
- padding: 0 $spacer-x/2;
- height: 20px;
+ color: lighten($body-color, 10%);
+ padding: $spacer-y $spacer-x/2;
+ margin-top: -$spacer-y;
+ margin-bottom: -$spacer-y;
+ height: #{$line-height-base + $table-cell-padding*2};
vertical-align: top;
&:hover {
- color: darken($body-color, 10%);
+ color: $body-color;
+ background: darken($body-bg,3%);
}
-
&::before {
font-size: 20px;
}
}
-.grid-field-cell-component {
- display: table-cell;
- padding: $spacer-y $spacer-x;
- line-height: 20px;
+// Responsive grid-field
+// Todo:
+// * replace with mixins - @include media-breakpoint-down(sm)
+// * add .text-truncate for overflowing cells
+@media (max-width: 47.9em) {
+ .grid-field__table td,
+ .grid-field__table th {
+ display: none;
&:first-child {
- padding-left: #{$spacer-x + $spacer-x*.25};
+ display: table-cell;
}
-
- &:last-child {
- padding-right: #{$spacer-x + $spacer-x*.25};
- width: 1px;
-
- span { // TEMP, remove commas in js
- display: none;
- }
- }
-
- &:nth-child(2) {
- text-align: center;
- width: 1px;
- }
-
- &[data-reactid$=actionPlaceholder] {
- width: 1px;
- }
-
- &[data-reactid$=-actions] {
- white-space: nowrap;
+ &.grid-field__cell[data-reactid$=-actions],
+ &.grid-field__action-placeholder {
+ display: table-cell;
}
+ }
}
-.grid-field-header-cell-component {
- text-transform: uppercase;
- font-size: $font-size-sm;
- display: table-cell;
- padding: $spacer-y $spacer-x;
- line-height: 20px;
- &:first-child {
- padding-left: $grid-x*2.5;
- }
+// OLD gridfield makeover - currently not in use.
+// Replace .ss-gridfield-table with .grid-field & .table
+// Has known scroll bugs
+.grid-field {
- &:last-child {
- padding-right: $grid-x*2.5;
- width: 1px !important;
- }
-}
+ .ss-gridfield-sort { // Todo: rename to grid-filed__sort
+ background: transparent url(../images/arrows.png) no-repeat right -1px;
+ border: none;
+ width: 100%;
+ padding: 0;
+ text-shadow: none;
+ border-radius: 0;
+ text-transform: uppercase;
+ font-weight: normal;
+ text-align: left;
-.grid-field-table-component {
- border-collapse: collapse;
-
- li.grid-field-row-component {
- display: table-row;
- border: 0;
- border-bottom: 1px solid $border-color;
- margin: 0;
+ .ui-button-text {
padding: 0;
+ line-height: 20px;
+ color: $body-color-light;
+ }
- // Header row
- &:first-child {
- background: none;
- border-bottom: 1px solid $border-color;
- }
+ &:hover {
+ box-shadow: none;
+ background: transparent url(../images/arrows.png) no-repeat right -41px;
+ }
+ &.ss-gridfield-sorted-asc,
+ &.ss-gridfield-sorted-asc:hover {
+ background-position-y: -118px;
+ }
+ &.ss-gridfield-sorted-desc,
+ &.ss-gridfield-sorted-desc:hover {
+ background-position-y: -78px;
+ }
+ }
- // Drillable rows highlight on hover
- &--drillable:hover {
- color: #555;
- text-decoration: none;
- background-color: #f5f5f5;
-
- .grid-field-cell-component--drillable {
- cursor: pointer;
- }
- }
- }
-}
-
-.grid-field-table-component {
- display: table;
- width: 100%;
+ thead tr.title th {
+ font-size: 15px;
+ font-weight: bold;
+ text-transform: none;
+ border-bottom: 0;
+ padding-bottom: 0;
+ }
}
diff --git a/admin/javascript/src/components/grid-field/table.js b/admin/javascript/src/components/grid-field/table.js
index 56dc90b8c..de00eeef6 100644
--- a/admin/javascript/src/components/grid-field/table.js
+++ b/admin/javascript/src/components/grid-field/table.js
@@ -5,10 +5,12 @@ class GridFieldTableComponent extends SilverStripeComponent {
render() {
return (
-
- {this.generateHeader()}
- {this.generateRows()}
-
+
+
+ {this.generateHeader()}
+ {this.generateRows()}
+
+
);
}
diff --git a/admin/javascript/src/sections/campaign-admin/styles.scss b/admin/javascript/src/sections/campaign-admin/styles.scss
index 9b0010b84..5e58b4d40 100644
--- a/admin/javascript/src/sections/campaign-admin/styles.scss
+++ b/admin/javascript/src/sections/campaign-admin/styles.scss
@@ -9,7 +9,7 @@
background-color: #f6f7f8;
z-index: 2;
transition: width .2s;
- padding-bottom: $navbar-height +1; // incl border
+ padding-bottom: $navbar-height+1; // incl border
}
.campaign-items {
diff --git a/admin/javascript/src/styles/_typography.scss b/admin/javascript/src/styles/_typography.scss
new file mode 100644
index 000000000..dbe49ea9c
--- /dev/null
+++ b/admin/javascript/src/styles/_typography.scss
@@ -0,0 +1,37 @@
+// Tables
+// Used as a base for components: Grid-field.
+
+.table {
+ margin-left: -$spacer-x;
+ margin-right: -$spacer-x;
+ min-width: calc(100% + #{$spacer-x*2});
+
+ thead th {
+ background-color: $body-bg;
+ border-bottom: $table-border-width solid $table-border-color;
+ text-transform: uppercase;
+ font-size: $font-size-sm;
+ }
+ th,
+ td {
+ border-top: 0;
+ border-bottom: $table-border-width solid $table-border-color;
+ line-height: 20px;
+
+ &:first-child {
+ padding-left: #{$spacer-x + $spacer-x*.25};
+ }
+ &:last-child {
+ padding-right: #{$spacer-x + $spacer-x*.25};
+ }
+ }
+ tfoot {
+ background-color: transparent;
+ font-size: $font-size-sm;
+
+ td {
+ border-bottom: 0;
+ background-color: $body-bg;
+ }
+ }
+}
diff --git a/admin/javascript/src/styles/main.scss b/admin/javascript/src/styles/main.scss
index ebb81046a..60eda8b25 100644
--- a/admin/javascript/src/styles/main.scss
+++ b/admin/javascript/src/styles/main.scss
@@ -1,4 +1,9 @@
/** -----------------------------
+ * Base styles
+ * ------------------------------ */
+@import "_typography.scss";
+
+ /** -----------------------------
* Sections
* ------------------------------ */
@import "../sections/campaign-admin/styles";
diff --git a/admin/scss/bootstrap/_variables.scss b/admin/scss/bootstrap/_variables.scss
index 3917bbdc8..51ecc6801 100644
--- a/admin/scss/bootstrap/_variables.scss
+++ b/admin/scss/bootstrap/_variables.scss
@@ -97,8 +97,8 @@ $border-width: 1px;
$body-bg: #f6f7f8;
$body-color: $gray-dark;
-$body-color-light: lighten($body-color,10);
-$body-color-lighter: lighten($body-color,20);
+$body-color-light: lighten($gray-dark, 10);
+$body-color-lightest: lighten($gray-dark, 20);
// Links
@@ -185,14 +185,14 @@ $font-size-h6: 12px; /* 1rem; */
// $display3-weight: 300;
// $display4-weight: 300;
-$line-height: 1.538; /* relative to font-size */
+$line-height: 1.538;
$line-height-base: 20px; /* can be used with varying font-sizes, holds grid sizing */
$headings-margin-bottom: $spacer;
-$headings-font-family: inherit;
-$headings-font-weight: 500;
-$headings-line-height: 1.3;
-$headings-color: inherit;
+// $headings-font-family: inherit;
+// $headings-font-weight: 500;
+// $headings-line-height: 1.1;
+// $headings-color: inherit;
//
// $lead-font-size: 1.25rem;
// $lead-font-weight: 300;
@@ -237,13 +237,13 @@ $text-muted: #7f8b97;
//
// Customizes the `.table` component with basic values, each used across all table variations.
-$table-cell-padding: .75rem;
-$table-sm-cell-padding: .3rem;
+$table-cell-padding: 16px; // update to $spacer
+$table-sm-cell-padding: 12px; // update to $spacer
-$table-bg: transparent;
+$table-bg: #FFF;
$table-bg-accent: #f9f9f9;
$table-bg-hover: #f5f5f5;
-$table-bg-active: $table-bg-hover;
+$table-bg-active: $brand-primary;
$table-border-width: $border-width;
$table-border-color: $gray-lighter;
@@ -303,9 +303,9 @@ $btn-danger-border: transparent;
// Forms
-$input-padding-x: .75rem;
-$input-padding-y: .54rem; //.375rem;
-
+// $input-padding-x: .75rem;
+// $input-padding-y: .375rem;
+//
// $input-bg: #fff;
// $input-bg-disabled: $gray-lighter;
//
@@ -386,10 +386,10 @@ $input-padding-y: .54rem; //.375rem;
$navbar-height: 52px;
$navbar-total-height: 53px;
-$navbar-border-radius: 0;
-$navbar-padding-horizontal: $spacer;
-$navbar-padding-vertical: ($spacer / 2);
-
+// $navbar-border-radius: $border-radius;
+// $navbar-padding-horizontal: $spacer;
+// $navbar-padding-vertical: ($spacer / 2);
+//
// $navbar-dark-color: rgba(255,255,255,.5);
// $navbar-dark-hover-color: rgba(255,255,255,.75);
// $navbar-dark-active-color: rgba(255,255,255,1);
@@ -403,23 +403,23 @@ $navbar-padding-vertical: ($spacer / 2);
// Navs
-$nav-link-padding: 12px 8px;
-$nav-link-hover-bg: red; //$gray-lighter;
-
-$nav-disabled-link-color: $text-muted;
-$nav-disabled-link-hover-color: $text-muted;
-
-$nav-tabs-border-color: #d9dee2;
-
-$nav-tabs-link-border-width: 0;
-$nav-tabs-link-hover-border-color: green; //$gray-lighter;
-
-$nav-tabs-active-link-hover-bg: $body-bg;
-$nav-tabs-active-link-hover-color: $body-color;
-$nav-tabs-active-link-hover-border-color: #ddd;
-
-$nav-tabs-justified-link-border-color: #ddd;
-$nav-tabs-justified-active-link-border-color: $body-bg;
+// $nav-link-padding: .5em 1em;
+// $nav-link-hover-bg: $gray-lighter;
+//
+// $nav-disabled-link-color: $gray-light;
+// $nav-disabled-link-hover-color: $gray-light;
+//
+// $nav-tabs-border-color: #ddd;
+//
+// $nav-tabs-link-border-width: $border-width;
+// $nav-tabs-link-hover-border-color: $gray-lighter;
+//
+// $nav-tabs-active-link-hover-bg: $body-bg;
+// $nav-tabs-active-link-hover-color: $gray;
+// $nav-tabs-active-link-hover-border-color: #ddd;
+//
+// $nav-tabs-justified-link-border-color: #ddd;
+// $nav-tabs-justified-active-link-border-color: $body-bg;
//
// $nav-pills-border-radius: $border-radius;
// $nav-pills-active-link-hover-bg: $component-active-bg;
@@ -643,8 +643,13 @@ $nav-tabs-justified-active-link-border-color: $body-bg;
// Breadcrumbs
-$breadcrumb-padding-vertical: 6px;
-$breadcrumb-padding-horizontal: 0;
+// $breadcrumb-padding-vertical: .75rem;
+// $breadcrumb-padding-horizontal: 1rem;
+//
+// $breadcrumb-bg: $gray-lighter;
+// $breadcrumb-divider-color: $gray-light;
+// $breadcrumb-active-color: $gray-light;
+// $breadcrumb-divider: "/";
$breadcrumb-bg: transparent;
$breadcrumb-divider-color: $border-color-dark;