Skip to content

Commit

Permalink
feat: improved responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@Swiftwork
Swiftwork committed Jan 8, 2020
1 parent 3d65b63 commit 4f39052
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 26 deletions.
6 changes: 3 additions & 3 deletions packages/ui-core/src/components/form.stories.tsx
View file
Expand Up @@ -35,21 +35,21 @@ export const basic = () => (
<TextArea label="Text area" />
<fieldset>
<legend>What matches you the best?</legend>
<div className="e-grid style-start layout-no-margin" e-columns="6">
<div className="e-grid style-start layout-no-margin" e-columns="3" e-columns-md="6">
<RadioButton label="Eagle" name="bird" />
<RadioButton label="Hawk" name="bird" />
<RadioButton label="Owl" name="bird" />
</div>
</fieldset>
<fieldset>
<legend>Favorite birds?</legend>
<div className="e-grid style-start layout-no-margin" e-columns="6">
<div className="e-grid style-start layout-no-margin" e-columns="3" e-columns-md="6">
<CheckBox label="Cockatoo" />
<CheckBox label="Macaw" />
<CheckBox label="Parakeet" />
</div>
</fieldset>
<menu className="e-grid style-end" e-columns="6" style={{ textAlign: 'right' }}>
<menu className="e-grid style-end" e-columns="3" e-columns-md="6" style={{ textAlign: 'right' }}>
<Button type="link" href="#" className="secondary">
Terms
</Button>
Expand Down
80 changes: 60 additions & 20 deletions packages/ui-core/src/styles/base.stories.tsx
View file
Expand Up @@ -164,55 +164,95 @@ export const basic = () => (
<h1>Tabular data</h1>
</header>
<table>
<caption>Table Caption</caption>
<caption>Caption: This is a regular table</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
<td>Table Cell 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
</tr>
</tfoot>
</table>
<h2>Collapsable</h2>
<table className="collapse">
<caption>Caption: This table collapses in mobile</caption>
<thead>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
<th>Table Heading 3</th>
<th>Table Heading 4</th>
<th>Table Heading 5</th>
</tr>
</thead>
<tbody>
<tr>
<td data-thead="Table Heading 1">Table Cell 1</td>
<td data-thead="Table Heading 2">Table Cell 2</td>
<td data-thead="Table Heading 3">Table Cell 3</td>
<td data-thead="Table Heading 4">Table Cell 4</td>
<td data-thead="Table Heading 5">Table Cell 5</td>
</tr>
<tr>
<td data-thead="Table Heading 1">Table Cell 1</td>
<td data-thead="Table Heading 2">Table Cell 2</td>
<td data-thead="Table Heading 3">Table Cell 3</td>
<td data-thead="Table Heading 4">Table Cell 4</td>
<td data-thead="Table Heading 5">Table Cell 5</td>
</tr>
<tr>
<td data-thead="Table Heading 1">Table Cell 1</td>
<td data-thead="Table Heading 2">Table Cell 2</td>
<td data-thead="Table Heading 3">Table Cell 3</td>
<td data-thead="Table Heading 4">Table Cell 4</td>
<td data-thead="Table Heading 5">Table Cell 5</td>
</tr>
<tr>
<td data-thead="Table Heading 1">Table Cell 1</td>
<td data-thead="Table Heading 2">Table Cell 2</td>
<td data-thead="Table Heading 3">Table Cell 3</td>
<td data-thead="Table Heading 4">Table Cell 4</td>
<td data-thead="Table Heading 5">Table Cell 5</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Table Footer 1</th>
<th>Table Footer 2</th>
<th>Table Footer 3</th>
<th>Table Footer 4</th>
<th>Table Footer 5</th>
</tr>
</tfoot>
</table>
<footer>
<p>
Expand Down
55 changes: 55 additions & 0 deletions packages/ui-core/src/styles/base/standardize.css
View file
Expand Up @@ -21,6 +21,10 @@ html {
box-sizing: border-box;
}

img {
max-width: 100%;
}

/* Margins and Height */

h1,
Expand Down Expand Up @@ -119,6 +123,57 @@ tfoot {
}
}

@media (--b_xs) {
table.collapse {
display: block;

thead,
caption,
tfoot,
tbody,
th,
td,
tr {
display: block;
}

/* Hide table headers */
thead tr {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}

th {
padding-left: 0;
padding-right: 0;
border-bottom: 1px solid var(--c_alpha);
}

td,
td:first-child {
position: relative;
padding-left: calc(50% + 0.5rem);
padding-right: 0;
}

td:before {
/* Now like a table header */
position: absolute;
content: attr(data-thead);
top: 0;
left: 0;
padding: 0.5rem 0.5rem 0.5rem 0;
width: calc(50% - 1rem);
font-weight: bold;
white-space: nowrap;
}
}
}

/* Forms */

button,
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-core/src/styles/colors.stories.tsx
View file
Expand Up @@ -6,7 +6,7 @@ export default {
};

export const basic = () => (
<div className="e-grid style-uniform" e-columns="5">
<div className="e-grid style-uniform" e-columns="2" e-columns-sm="3" e-columns-md="4" e-columns-lg="5">
{Object.keys(base)
.filter(key => key.startsWith('--c_'))
.map(key => (
Expand All @@ -18,8 +18,8 @@ export const basic = () => (
<svg style={{ width: 32, height: 32, fill: 'white' }}>
<use xlinkHref="#icon-ghost" />
</svg>
<span style={{ width: 32, height: 32, color: 'black' }}>:></span>
<span style={{ width: 32, height: 32, color: 'white' }}>:></span>
<span style={{ width: 32, height: 32, color: 'black' }}></span>
<span style={{ width: 32, height: 32, color: 'white' }}></span>
</div>
<figcaption style={{ paddingTop: 24 }}>{key}</figcaption>
</figure>
Expand Down

0 comments on commit 4f39052

Please sign in to comment.