Skip to content

Adjust typography on the example page #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 23, 2020
Merged

Adjust typography on the example page #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
049f91e
Unify font-family style application
przemyslawzalewski Jan 23, 2020
04882c6
Set default increased line height
przemyslawzalewski Jan 23, 2020
332e0f1
Disable confused stylelint and prettier conflict
przemyslawzalewski Jan 23, 2020
aea62e6
Center footer text content despite flexbox centering
przemyslawzalewski Jan 23, 2020
3e86c2e
Give up and let stylelint take over formatting as the rules seems to …
przemyslawzalewski Jan 23, 2020
591454e
Adjust header margins to make them not stick to the chrome
przemyslawzalewski Jan 23, 2020
96f2ea9
Use more semantic header tag and provide fallback trigger texts
przemyslawzalewski Jan 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions examples/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,12 @@ function App() {

return (
<div className={styles.example}>
<h3>react-swipeable-list example</h3>
<h1>react-swipeable-list example</h1>
<h5>(try also mobile view in dev tools for touch events)</h5>
<h3>Simple example (with default 0.5 action trigger threshold)</h3>
<span className={styles.actionInfo}>{triggeredSimpleItemAction}</span>
<span className={styles.actionInfo}>
{triggeredSimpleItemAction || 'No action triggered yet'}
</span>
<div className={styles.listContainer}>
<SwipeableList>
<SwipeableListItem
Expand Down Expand Up @@ -97,7 +99,9 @@ function App() {
More complex items and scroll (with 0.25 action trigger threshold)
</h3>
<h3>List in smaller container</h3>
<span className={styles.actionInfo}>{triggeredComplexItemAction}</span>
<span className={styles.actionInfo}>
{triggeredComplexItemAction || 'No action triggered yet'}
</span>
<div className={styles.complexListContainer}>
<SwipeableList threshold={0.25}>
<SwipeableListItem
Expand Down
41 changes: 25 additions & 16 deletions examples/src/app.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
html {
font-family: 'Roboto', sans-serif;
}

h3 {
margin-bottom: 0;
text-align: center;
Expand All @@ -13,25 +9,38 @@ h5 {
}

body {
/* stylelint-disable */
font-family:
system,
-apple-system,
'.SFNSText-Regular',
'San Francisco',
'Roboto',
'Segoe UI',
'Helvetica Neue',
'Lucida Grande',
sans-serif;
/* stylelint-enable */
/* prettier-ignore */
font-family: system, -apple-system, '.SFNSText-Regular', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif;
line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5 {
margin-left: 16px;
margin-right: 16px;
}

h1 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0;
margin-inline-end: 0;
font-weight: bold;
margin-bottom: 0;
text-align: center;
}

footer {
display: flex;
flex-direction: column;
align-items: center;
padding: 56px 0;
text-align: center;
}

a {
Expand Down