Browse Source

fix(layout): fix the layout by switching to grid

tags/v1.5.2
Dany Sluijk 2 months ago
parent
commit
43e601cae0
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
8 changed files with 158 additions and 118 deletions
  1. +117
    -93
      example/src/pages/Home.tsx
  2. +5
    -1
      src/base/style.scss
  3. +13
    -4
      src/card/card/index.tsx
  4. +12
    -1
      src/card/card/style.scss
  5. +1
    -0
      src/card/hero/style.scss
  6. +3
    -4
      src/layout/container/style.scss
  7. +3
    -5
      src/layout/grid/index.tsx
  8. +4
    -10
      src/layout/grid/style.scss

+ 117
- 93
example/src/pages/Home.tsx View File

@@ -1,100 +1,124 @@
import { h, FunctionalComponent, Fragment } from "preact";
import { h, FunctionalComponent } from "preact";
import { Button, card, layout } from "teenyui";

const { Card, Hero } = card;
const { Container, Grid } = layout;

export const Home: FunctionalComponent = () => (
<Fragment>
<Hero
image="https://i.picsum.photos/id/770/1440/1080.jpg?hmac=LgQtRIvk-FthvEO2N6QuR_FMH3Dj1MqITEsWrBr9xII"
imageFallback="linear-gradient(to bottom right, rgb(88, 90, 218), #eb5e28)"
imageLabel="Demo image"
>
<h1>Page Title</h1>
<h3>Subtitle</h3>
<div>
<Button>Button 1</Button>
<Button ghost>Button 2</Button>
</div>
</Hero>
<Card>
<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>
<p>
This is some text, with a <a href="https://dany.dev">link</a>.
</p>
</Card>
<Container>
<Grid size="6" mobileSize="12">
<Card>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
congue felis vitae enim ullamcorper venenatis. Nulla velit elit,
pellentesque sed justo sed, elementum fringilla ligula. Ut urna
ligula, viverra vitae ante eget, sodales volutpat ligula. Ut leo
magna, luctus non nunc at, pellentesque facilisis eros. Duis
pulvinar mollis nisl sed rhoncus. Sed blandit augue eu enim pharetra
ultricies. Sed vestibulum nibh vitae purus rhoncus, id convallis
lorem ornare. Phasellus ultrices ipsum at malesuada blandit.
Suspendisse arcu mauris, sagittis eu semper in, consequat vel felis.
Curabitur dapibus augue sit amet ante tempus, non maximus arcu
laoreet. Suspendisse interdum ex nunc, eget faucibus metus mattis
feugiat. Curabitur porttitor sem at tempor iaculis. Donec molestie
volutpat sem et feugiat.
</p>
<p>
In erat elit, aliquam non augue ut, porta viverra arcu. Aenean
mollis augue quis mi commodo dapibus. Morbi ultricies justo urna,
vel dictum ex tempus et. Nulla porttitor nisl non tristique commodo.
Sed eu velit urna. Cras sit amet est tincidunt, fringilla justo et,
molestie dui. Quisque semper, neque sodales gravida iaculis, ex
felis vulputate felis, non tristique mauris orci in orci. Nunc at
sagittis lorem. Curabitur sed velit venenatis enim ullamcorper
accumsan sed ac metus.
</p>
</Card>
</Grid>
<Grid size="6" mobileSize="12">
<Card>
<p>
Quisque quis convallis ex. Nulla blandit sollicitudin urna, non
elementum sem egestas nec. Nam tristique, justo volutpat auctor
placerat, leo mi finibus eros, id placerat purus leo non arcu.
Aenean venenatis eros sed tellus finibus, in tristique ipsum congue.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Phasellus eu mattis metus, ut efficitur
dolor. Nulla eu dapibus augue, ut porttitor libero. Vestibulum porta
aliquet urna, eu feugiat nunc pulvinar eget. Suspendisse tempor
fringilla eros, ut lacinia massa fringilla quis. Sed a suscipit dui,
sed tempus sem. Ut sodales erat nec ligula mattis viverra.
</p>
<p>
Cras non mauris facilisis dui ornare efficitur et sodales augue.
Vivamus eu pulvinar leo. Nullam laoreet imperdiet nisl ut sodales.
Sed a molestie lorem, vitae finibus nisi. Praesent at finibus risus.
Cras egestas felis sed condimentum tristique. Proin consectetur
lacus vulputate lectus tincidunt vestibulum quis eu orci. Donec sed
ex scelerisque, laoreet libero nec, euismod arcu. Fusce ut nunc id
ipsum lobortis gravida eget at purus. Nunc euismod orci a metus
rhoncus interdum. Maecenas condimentum mauris vitae vestibulum
volutpat.
</p>
</Card>
</Grid>
</Container>
<Card>
Suspendisse iaculis cursus gravida. Praesent varius urna eu faucibus
aliquet. Etiam id dolor a mauris molestie sagittis. Aenean non tristique
purus. Ut nec tincidunt sem, et pulvinar augue. Nunc eget lorem quis lorem
lacinia varius. Etiam ac ultricies purus, tempor gravida diam. Fusce
tristique nibh vel eros pellentesque egestas. Nam vitae facilisis augue,
non suscipit nulla. Nam tristique auctor neque. Morbi feugiat neque ac
volutpat accumsan. Maecenas interdum cursus porta.
</Card>
</Fragment>
<Container direction="column">
<Grid size="12">
<Hero
image="https://i.picsum.photos/id/770/1440/1080.jpg?hmac=LgQtRIvk-FthvEO2N6QuR_FMH3Dj1MqITEsWrBr9xII"
imageFallback="linear-gradient(to bottom right, rgb(88, 90, 218), #eb5e28)"
imageLabel="Demo image"
>
<h1>Page Title</h1>
<h3>Subtitle</h3>
<div>
<Button>Button 1</Button>
<Button ghost>Button 2</Button>
</div>
</Hero>
</Grid>
<Grid size="12">
<Card>
<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>
<p>
This is some text, with a <a href="https://dany.dev">link</a>.
</p>
</Card>
</Grid>
<Grid size="6" desktopSize="7" mobileSize="12">
<Card>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue
felis vitae enim ullamcorper venenatis. Nulla velit elit, pellentesque
sed justo sed, elementum fringilla ligula. Ut urna ligula, viverra
vitae ante eget, sodales volutpat ligula. Ut leo magna, luctus non
nunc at, pellentesque facilisis eros. Duis pulvinar mollis nisl sed
rhoncus. Sed blandit augue eu enim pharetra ultricies. Sed vestibulum
nibh vitae purus rhoncus, id convallis lorem ornare. Phasellus
ultrices ipsum at malesuada blandit. Suspendisse arcu mauris, sagittis
eu semper in, consequat vel felis. Curabitur dapibus augue sit amet
ante tempus, non maximus arcu laoreet. Suspendisse interdum ex nunc,
eget faucibus metus mattis feugiat. Curabitur porttitor sem at tempor
iaculis. Donec molestie volutpat sem et feugiat.
</p>
<p>
In erat elit, aliquam non augue ut, porta viverra arcu. Aenean mollis
augue quis mi commodo dapibus. Morbi ultricies justo urna, vel dictum
ex tempus et. Nulla porttitor nisl non tristique commodo. Sed eu velit
urna. Cras sit amet est tincidunt, fringilla justo et, molestie dui.
Quisque semper, neque sodales gravida iaculis, ex felis vulputate
felis, non tristique mauris orci in orci. Nunc at sagittis lorem.
Curabitur sed velit venenatis enim ullamcorper accumsan sed ac metus.
</p>
</Card>
</Grid>
<Grid size="6" desktopSize="5" mobileSize="12">
<Container direction="column">
<Grid size="12" mobileSize="12">
<Card primary>
<p>
Quisque quis convallis ex. Nulla blandit sollicitudin urna, non
elementum sem egestas nec. Nam tristique, justo volutpat auctor
placerat, leo mi finibus eros, id placerat purus leo non arcu.
Aenean venenatis eros sed tellus finibus, in tristique ipsum
congue. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Phasellus eu mattis metus,
ut efficitur dolor. Nulla eu dapibus augue, ut porttitor libero.
Vestibulum porta aliquet urna, eu feugiat nunc pulvinar eget.
Suspendisse tempor fringilla eros, ut lacinia massa fringilla
quis. Sed a suscipit dui, sed tempus sem. Ut sodales erat nec
ligula mattis viverra.
</p>
</Card>
</Grid>
<Grid size="12" mobileSize="12">
<Card secondary>
<p>
Cras non mauris facilisis dui ornare efficitur et sodales augue.
Vivamus eu pulvinar leo. Nullam laoreet imperdiet nisl ut sodales.
Sed a molestie lorem, vitae finibus nisi. Praesent at finibus
risus. Cras egestas felis sed condimentum tristique. Proin
consectetur lacus vulputate lectus tincidunt vestibulum quis eu
orci. Donec sed ex scelerisque, laoreet libero nec, euismod arcu.
Fusce ut nunc id ipsum lobortis gravida eget at purus. Nunc
euismod orci a metus rhoncus interdum. Maecenas condimentum mauris
vitae vestibulum volutpat.
</p>
</Card>
</Grid>
</Container>
</Grid>
<Grid size="6" mobileSize="12">
<Card>
Suspendisse iaculis cursus gravida. Praesent varius urna eu faucibus
aliquet. Etiam id dolor a mauris molestie sagittis. Aenean non tristique
purus. Ut nec tincidunt sem, et pulvinar augue. Nunc eget lorem quis
lorem lacinia varius. Etiam ac ultricies purus, tempor gravida diam.
Fusce tristique nibh vel eros pellentesque egestas. Nam vitae facilisis
augue, non suscipit nulla. Nam tristique auctor neque. Morbi feugiat
neque ac volutpat accumsan. Maecenas interdum cursus porta.
</Card>
</Grid>
<Grid size="6" mobileSize="12">
<Card>
Mauris pharetra molestie sapien id pellentesque. Cras semper egestas
mollis. Duis at elit ac nibh suscipit porttitor. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Suspendisse suscipit, purus a
aliquet elementum, nisl elit gravida mauris, et pulvinar purus massa sit
amet mauris. Aliquam sem est, sodales vel posuere eget, consectetur nec
tortor. Sed pellentesque tortor dolor, non mollis ligula faucibus vel.
Aenean mollis lacus sed sapien accumsan, finibus viverra turpis
eleifend. Suspendisse at interdum velit. Curabitur orci nibh, porttitor
a lorem eget, tristique sollicitudin nisl.
</Card>
</Grid>
</Container>
);

+ 5
- 1
src/base/style.scss View File

@@ -59,6 +59,10 @@
color: var(--text-color-subheader);
}

p {
margin: 0 0 8px;
}

:not(nav) > a {
color: var(--text-color-header);
text-decoration: underline;
@@ -71,6 +75,6 @@

@include breakpoint(min, large) {
.pillar {
padding: 0 10%;
padding: 0 10vw;
}
}

+ 13
- 4
src/card/card/index.tsx View File

@@ -1,7 +1,16 @@
import { h, FunctionalComponent } from "preact";
import { h, FunctionalComponent, RenderableProps } from "preact";

import style from "./style.scss";

export const Card: FunctionalComponent = (props) => (
<div class={style.card}>{props.children}</div>
);
export const Card: FunctionalComponent<RenderableProps<Props>> = (props) => {
const primary = props.primary ? style.primary : "";
const secondary = props.secondary ? style.secondary : "";
const styles = `${style.card} ${primary} ${secondary}`;

return <div class={styles}>{props.children}</div>;
};

interface Props {
primary?: boolean;
secondary?: boolean;
}

+ 12
- 1
src/card/card/style.scss View File

@@ -1,7 +1,18 @@
.card {
width: 100%;
margin: 8px 6px;
padding: 16px;
padding: 12px;
border-radius: 0.3em;
box-shadow: 0 2px 4px 0 var(--background-border);
background-color: var(--background-secondary);
}

.primary {
color: var(--primary-color-text);
background-color: var(--primary-color);
}

.secondary {
color: var(--secondary-color-text);
background-color: var(--secondary-color);
}

+ 1
- 0
src/card/hero/style.scss View File

@@ -1,4 +1,5 @@
.hero {
width: 100%;
position: relative;
overflow: hidden;
z-index: 100;


+ 3
- 4
src/layout/container/style.scss View File

@@ -1,8 +1,7 @@
.container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: row dense;
}

.row {


+ 3
- 5
src/layout/grid/index.tsx View File

@@ -4,10 +4,9 @@ import style from "./style.scss";

export const Grid: FunctionalComponent<RenderableProps<Props>> = (props) => {
const size = style[`grid-${props.size}`];
const mobileSize = style[`grid-mobile-${props.mobileSize}`];
const desktopSize = style[`grid-desktop-${props.desktopSize}`];
const spacing = style[`spacing-${props.spacing}`] || "";
const styles = `${style.grid} ${size} ${mobileSize} ${desktopSize} ${spacing}`;
const mobileSize = style[`grid-mobile-${props.mobileSize}`] || "";
const desktopSize = style[`grid-desktop-${props.desktopSize}`] || "";
const styles = `${style.grid} ${size} ${mobileSize} ${desktopSize}`;

return <div class={styles}>{props.children}</div>;
};
@@ -16,5 +15,4 @@ interface Props {
size: number | string;
mobileSize?: number | string;
desktopSize?: number | string;
spacing?: 4 | 8 | 12 | 16;
}

+ 4
- 10
src/layout/grid/style.scss View File

@@ -1,19 +1,19 @@
@import "../../mixins";

.grid {
box-sizing: border-box;
display: flex;
}

@for $i from 1 through 12 {
.grid-#{$i} {
flex-basis: round(($i / 12) * 100% * 10) / 10;
grid-column: span $i;
}
}

@include breakpoint(max, small) {
@for $i from 1 through 12 {
.grid-mobile-#{$i} {
flex-basis: round(($i / 12) * 100% * 10) / 10;
grid-column: span $i;
}
}
}
@@ -21,13 +21,7 @@
@include breakpoint(min, large) {
@for $i from 1 through 12 {
.grid-desktop-#{$i} {
flex-basis: round(($i / 12) * 100% * 10) / 10;
grid-column: span $i;
}
}
}

@for $i from 1 through 4 {
.spacing-#{$i} {
padding: $i * 1px;
}
}

Loading…
Cancel
Save