Tweaks for fewer divs

This commit is contained in:
Timothy Warren 2018-04-04 09:32:18 -04:00
parent f2d286d129
commit 6a659aa273
10 changed files with 8439 additions and 29 deletions

View File

@ -31,4 +31,10 @@ bs-container > * {
padding: 0.5em 1em;
}
bs-form-feedback,
bs-form-group,
bs-jumbotron {
display: block;
}
/*! Ids */

8408
public/css/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4,13 +4,12 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/css/app.css" />
<title>Inferno App</title>
</head>
<body>
<film-exif id="app"></film-exif>
<script src="%PUBLIC_URL%/js/customElements.js"></script>
<noscript>
You need to enable JavaScript to run this app.
</noscript>

View File

@ -10,7 +10,7 @@ import Dropdown from 'inferno-bootstrap/dist/Dropdown';
import DropdownItem from 'inferno-bootstrap/dist/DropdownItem';
import DropdownMenu from 'inferno-bootstrap/dist/DropdownMenu';
import DropdownToggle from 'inferno-bootstrap/dist/DropdownToggle';
import Jumbotron from 'inferno-bootstrap/dist/Jumbotron';
import BSJumbotron from 'inferno-bootstrap/dist/Jumbotron';
import Pagination from 'inferno-bootstrap/dist/Pagination';
import PaginationItem from 'inferno-bootstrap/dist/PaginationItem';
import PaginationLink from 'inferno-bootstrap/dist/PaginationLink';
@ -25,6 +25,14 @@ import TabPane from 'inferno-bootstrap/dist/TabPane';
import Table from 'inferno-bootstrap/dist/Table';
import Tooltip from 'inferno-bootstrap/dist/Tooltip';
export const BSWrapper = (Component, tagName) => {
return ({children, ...props}) => (
<Component tag={tagName} {...props}>{children}</Component>
)
}
export const Jumbotron = BSWrapper(BSJumbotron, 'bs-jumbotron');
export {
Alert,
Badge,
@ -38,7 +46,6 @@ export {
DropdownItem,
DropdownMenu,
DropdownToggle,
Jumbotron,
Pagination,
PaginationItem,
PaginationLink,

View File

@ -1,7 +1,8 @@
import { BSWrapper } from './Bootstrap';
import Button from 'inferno-bootstrap/dist/Button';
import Form from 'inferno-bootstrap/dist/Form/Form';
import FormFeedback from 'inferno-bootstrap/dist/Form/FormFeedback';
import FormGroup from 'inferno-bootstrap/dist/Form/FormGroup';
import BSFormFeedback from 'inferno-bootstrap/dist/Form/FormFeedback';
import BSFormGroup from 'inferno-bootstrap/dist/Form/FormGroup';
import FormText from 'inferno-bootstrap/dist/Form/FormText';
import Input from 'inferno-bootstrap/dist/Form/Input';
import InputGroup from 'inferno-bootstrap/dist/Form/InputGroup';
@ -10,11 +11,12 @@ import InputGroupButtonDropdown from 'inferno-bootstrap/dist/Form/InputGroupButt
import InputGroupText from 'inferno-bootstrap/dist/Form/InputGroupText';
import Label from 'inferno-bootstrap/dist/Form/Label';
export const FormFeedback = BSWrapper(BSFormFeedback, 'bs-form-feedback');
export const FormGroup = BSWrapper(BSFormGroup, 'bs-form-group');
export {
Button,
Form,
FormFeedback,
FormGroup,
FormText,
Input,
InputGroup,

View File

@ -1,9 +1,8 @@
import Col from 'inferno-bootstrap/dist/Col';
import Container from 'inferno-bootstrap/dist/Container';
import Row from 'inferno-bootstrap/dist/Row';
import BSCol from 'inferno-bootstrap/dist/Col';
import BSContainer from 'inferno-bootstrap/dist/Container';
import BSRow from 'inferno-bootstrap/dist/Row';
import { BSWrapper } from './Bootstrap'
export {
Col,
Container,
Row,
};
export const Col = BSWrapper(BSCol, 'bs-col');
export const Container = BSWrapper(BSContainer, 'bs-container');
export const Row = BSWrapper(BSRow, 'bs-row');

View File

@ -4,9 +4,6 @@ import {
Button,
Col,
Form,
FormGroup,
Input,
Label,
Row,
} from '../../components/Bootstrap'
@ -25,7 +22,7 @@ export class FilmAddView extends Component {
return (
<Form>
<Row>
<FormBlock
<FormBlock
label="Brand"
name="brand"
required

View File

@ -1,7 +1,7 @@
import { Alert, Row } from '../components/Bootstrap';
export const OopsView = (props) => (
<Row className="align-items-center justify-content-center full-height" tag="bs-row">
<Row className="align-items-center justify-content-center full-height">
<Alert className="abs-center" color="danger" style={{padding: '5em'}} tag="main">
<h1>Oops!</h1>
<hr />