mirror of
https://github.com/strapi/strapi.git
synced 2025-08-22 15:48:59 +00:00
Fix css
This commit is contained in:
parent
372842ef5c
commit
da865168e8
@ -3,11 +3,11 @@
|
|||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
> div {
|
> div {
|
||||||
border: 6px solid #f3f3f3; /* Light grey */
|
border: 4px solid #f3f3f3; /* Light grey */
|
||||||
border-top: 6px solid #3498db; /* Blue */
|
border-top: 4px solid #555555 !important; /* Blue */
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 50px;
|
width: 26px;
|
||||||
height: 50px;
|
height: 26px;
|
||||||
animation: spin 2s linear infinite;
|
animation: spin 2s linear infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,7 @@
|
|||||||
> div {
|
> div {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
border: 6px solid #f3f3f3; /* Light grey */
|
border: 6px solid #f3f3f3; /* Light grey */
|
||||||
border-top: 6px solid #3498db; /* Blue */
|
border-top: 6px solid #1C91E7; /* Blue */
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -72,10 +72,11 @@ export function deleteSeveralDataSuccess() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getData(currentModel, source) {
|
export function getData(currentModel, source, setUpdatingParams = false) {
|
||||||
return {
|
return {
|
||||||
type: GET_DATA,
|
type: GET_DATA,
|
||||||
currentModel,
|
currentModel,
|
||||||
|
setUpdatingParams,
|
||||||
source,
|
source,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -87,7 +87,7 @@ export class ListPage extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (search !== this.props.location.search) {
|
if (search !== this.props.location.search) {
|
||||||
this.getData(this.props);
|
this.getData(this.props, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (prevProps.listPage.filtersUpdated !== filtersUpdated) {
|
if (prevProps.listPage.filtersUpdated !== filtersUpdated) {
|
||||||
@ -120,7 +120,7 @@ export class ListPage extends React.Component {
|
|||||||
* Function to fetch data
|
* Function to fetch data
|
||||||
* @param {Object} props
|
* @param {Object} props
|
||||||
*/
|
*/
|
||||||
getData = props => {
|
getData = (props, setUpdatingParams = false) => {
|
||||||
const source = getQueryParameters(props.location.search, 'source');
|
const source = getQueryParameters(props.location.search, 'source');
|
||||||
const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
|
const _limit = toInteger(getQueryParameters(props.location.search, '_limit')) || 10;
|
||||||
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
|
const _page = toInteger(getQueryParameters(props.location.search, '_page')) || 1;
|
||||||
@ -130,7 +130,7 @@ export class ListPage extends React.Component {
|
|||||||
const filters = generateFiltersFromSearch(props.location.search);
|
const filters = generateFiltersFromSearch(props.location.search);
|
||||||
|
|
||||||
this.props.setParams(params, filters);
|
this.props.setParams(params, filters);
|
||||||
this.props.getData(props.match.params.slug, source);
|
this.props.getData(props.match.params.slug, source, setUpdatingParams);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -306,9 +306,9 @@ export class ListPage extends React.Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
showLoaders = () => {
|
showLoaders = () => {
|
||||||
const { listPage: { isLoading, records } } = this.props;
|
const { listPage: { isLoading, records, updatingParams } } = this.props;
|
||||||
|
|
||||||
return isLoading && get(records, this.getCurrentModelName()) === undefined;
|
return updatingParams || isLoading && get(records, this.getCurrentModelName()) === undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -43,10 +43,10 @@ const initialState = fromJS({
|
|||||||
_sort: '',
|
_sort: '',
|
||||||
_q: '',
|
_q: '',
|
||||||
}),
|
}),
|
||||||
// records: List([]),
|
|
||||||
records: fromJS({}),
|
records: fromJS({}),
|
||||||
showFilter: false,
|
showFilter: false,
|
||||||
showWarningDeleteAll: false,
|
showWarningDeleteAll: false,
|
||||||
|
updatingParams: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
function listPageReducer(state = initialState, action) {
|
function listPageReducer(state = initialState, action) {
|
||||||
@ -86,17 +86,25 @@ function listPageReducer(state = initialState, action) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return v;
|
return v;
|
||||||
});
|
})
|
||||||
|
.update('updatingParams', () => true);
|
||||||
case GET_DATA:
|
case GET_DATA:
|
||||||
return state
|
return state
|
||||||
.update('isLoading', () => true)
|
.update('isLoading', () => true)
|
||||||
.update('currentModel', () => action.currentModel);
|
.update('currentModel', () => action.currentModel)
|
||||||
|
.update('updatingParams', v => {
|
||||||
|
if (action.setUpdatingParams) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return v;
|
||||||
|
});
|
||||||
case GET_DATA_SUCCEEDED:
|
case GET_DATA_SUCCEEDED:
|
||||||
return state
|
return state
|
||||||
.update('entriesToDelete', () => List([]))
|
.update('entriesToDelete', () => List([]))
|
||||||
.updateIn(['count', state.get('currentModel')], () => action.data[0].count)
|
.updateIn(['count', state.get('currentModel')], () => action.data[0].count)
|
||||||
.update('isLoading', () => false)
|
.update('isLoading', () => false)
|
||||||
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]));
|
.updateIn(['records', state.get('currentModel')], () => List(action.data[1]))
|
||||||
|
.update('updatingParams', () => false);
|
||||||
case ON_CHANGE:
|
case ON_CHANGE:
|
||||||
return state.updateIn(['appliedFilters', action.index, action.key], () => action.value);
|
return state.updateIn(['appliedFilters', action.index, action.key], () => action.value);
|
||||||
case ON_CLICK_REMOVE:
|
case ON_CLICK_REMOVE:
|
||||||
|
@ -1,9 +1 @@
|
|||||||
{
|
{}
|
||||||
"product": {
|
|
||||||
"attributes": {
|
|
||||||
"description": {
|
|
||||||
"appearance": "WYSIWYG"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -7,6 +7,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
|
import cn from 'classnames';
|
||||||
|
|
||||||
import LoadingIndicator from 'components/LoadingIndicator';
|
import LoadingIndicator from 'components/LoadingIndicator';
|
||||||
import Input from 'components/InputsIndex';
|
import Input from 'components/InputsIndex';
|
||||||
@ -28,7 +29,7 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
|
|||||||
render() {
|
render() {
|
||||||
if (this.props.showLoaders) {
|
if (this.props.showLoaders) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.editForm}>
|
<div className={cn(styles.editForm, this.props.showLoaders && styles.loadIndicatorContainer)}>
|
||||||
<LoadingIndicator />
|
<LoadingIndicator />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -13,3 +13,11 @@
|
|||||||
margin-bottom: 2.1rem;
|
margin-bottom: 2.1rem;
|
||||||
background: #F6F6F6;
|
background: #F6F6F6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loadIndicatorContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
min-height: 209px;
|
||||||
|
padding-top: 88px;
|
||||||
|
}
|
@ -72,7 +72,7 @@ function List({ data, deleteData, noButton, onButtonClick, settingType, showLoad
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer)}>
|
<div className={cn(styles.ulContainer, showLoaders && styles.loadingContainer, showLoaders && settingType === 'roles' && styles.loadingContainerRole )}>
|
||||||
{showLoaders ? <LoadingIndicator /> : (
|
{showLoaders ? <LoadingIndicator /> : (
|
||||||
<ul className={noButton ? styles.listPadded : ''}>
|
<ul className={noButton ? styles.listPadded : ''}>
|
||||||
{map(object, item => (
|
{map(object, item => (
|
||||||
|
@ -39,6 +39,12 @@
|
|||||||
.loadingContainer {
|
.loadingContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: space-around;
|
||||||
min-height: 150px;
|
min-height: 162px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadingContainerRole {
|
||||||
|
min-height: 142px !important;
|
||||||
|
padding-top: 0;
|
||||||
}
|
}
|
Loading…
x
Reference in New Issue
Block a user