mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Converted grid-field to table markup and SCSS to BEM
Also added tab index
This commit is contained in:
parent
ccb4041326
commit
7f59a7e6f7
@ -5,7 +5,7 @@ class AccordionItem extends SilverStripeComponent {
|
||||
render() {
|
||||
let className = `list-group-item ${this.props.className}`;
|
||||
return (
|
||||
<a className={className}>
|
||||
<a tabIndex="0" className={className}>
|
||||
{this.props.children}
|
||||
</a>
|
||||
);
|
||||
|
@ -10,7 +10,7 @@ class GridFieldActionComponent extends SilverStripeComponent {
|
||||
render() {
|
||||
return (
|
||||
<button
|
||||
className={`grid-field-action-component font-icon-${this.props.icon}`}
|
||||
className={`grid-field__icon-action font-icon-${this.props.icon}`}
|
||||
onClick={this.handleClick}
|
||||
/>
|
||||
);
|
||||
|
@ -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 (
|
||||
<div {...props}>{this.props.children}</div>
|
||||
<td {...props}>{this.props.children}</td>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -5,7 +5,7 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="grid-field-header-cell-component">{this.props.children}</div>
|
||||
<th>{this.props.children}</th>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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 = <span key={'actionPlaceholder'} />;
|
||||
const actionPlaceholder = <th className={'grid-field__action-placeholder'} ></th>;
|
||||
const headerCells = columns.map((column, i) =>
|
||||
<GridFieldHeaderCell key={i}>{column.name}</GridFieldHeaderCell>
|
||||
);
|
||||
@ -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}
|
||||
/>,
|
||||
/>
|
||||
<GridFieldAction
|
||||
icon={'cancel'}
|
||||
handleClick={this.deleteRecord}
|
||||
key={`action-${i}-delete`}
|
||||
record={record}
|
||||
/>,
|
||||
/>
|
||||
</GridFieldCell>
|
||||
);
|
||||
|
||||
const rowProps = {
|
||||
key: i,
|
||||
className: handleDrillDown ? 'grid-field-row-component--drillable' : '',
|
||||
className: handleDrillDown ? 'grid-field__row--drillable' : '',
|
||||
};
|
||||
|
||||
return (
|
||||
|
@ -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 <li className={className}>{this.props.children}</li>;
|
||||
const className = `grid-field__row ${this.props.className}`;
|
||||
return <tr tabIndex="0" className={className}>{this.props.children}</tr>;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -5,10 +5,12 @@ class GridFieldTableComponent extends SilverStripeComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ul className="grid-field-table-component [ list-group ]">
|
||||
{this.generateHeader()}
|
||||
{this.generateRows()}
|
||||
</ul>
|
||||
<div className="container-fluid grid-field">
|
||||
<table className="table table-hover grid-field__table">
|
||||
<thead>{this.generateHeader()}</thead>
|
||||
<tbody>{this.generateRows()}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -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 {
|
||||
|
37
admin/javascript/src/styles/_typography.scss
Normal file
37
admin/javascript/src/styles/_typography.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -1,4 +1,9 @@
|
||||
/** -----------------------------
|
||||
* Base styles
|
||||
* ------------------------------ */
|
||||
@import "_typography.scss";
|
||||
|
||||
/** -----------------------------
|
||||
* Sections
|
||||
* ------------------------------ */
|
||||
@import "../sections/campaign-admin/styles";
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user