Skip to content

Commit 79c4a51

Browse files
hobbitronicshobbitronics
committed
feat(Drawer): use var to set main content height
1 parent d2385d9 commit 79c4a51

File tree

4 files changed

+90
-126
lines changed

4 files changed

+90
-126
lines changed

‎README.md

+4-123
Original file line numberDiff line numberDiff line change
@@ -49,128 +49,7 @@ module.exports = {
4949

5050
### components
5151

52-
A list of all components (subcomponents and js files for interfacing in []) followed by their properties in (<property>: <defaultValue>):
53-
54-
```
55-
Button (disabled, outlined, raised, prependIcon, appendIcon, url)
56-
57-
Card (secondary, outlined, color, isClickable, noPadding)
58-
59-
Checkbox (label, checked, disabled, uppercase)
60-
61-
Datatable (label) [
62-
Datatable.Data,
63-
Datatable.Data.Row (clickable),
64-
Datatable.Data.Row.Item,
65-
Datatable.Header,
66-
Datatable.Header.Item
67-
]
68-
69-
Dialog [
70-
Dialog.Alert (
71-
buttons: [
72-
{
73-
label: 'cancel',
74-
action: 'cancel',
75-
class: 'mdc-dialog__button'
76-
},
77-
{
78-
label: 'discard',
79-
action: 'discard',
80-
class: 'mdc-dialog__button'
81-
}
82-
],
83-
open: false,
84-
title: '',
85-
defaultAction: 'discard'
86-
),
87-
Dialog.Simple(
88-
items: [],
89-
open: false,
90-
title: ''
91-
)
92-
]
93-
94-
Drawer (
95-
title,
96-
subtitle,
97-
menuItems,
98-
toggle,
99-
modal,
100-
dismissible,
101-
hasTopAppBar,
102-
isFullHeightMenu,
103-
hideForPhonesOnly,
104-
hideForTablet,
105-
miniMenu
106-
)
107-
108-
Fab (icon, label, url, mini, extended, action)
109-
110-
IconButton (icon, ariaLabel)
111-
112-
List (twoLine, avatar) [
113-
List.Item (
114-
activated,
115-
graphicURL,
116-
graphicAlt,
117-
icon,
118-
meta,
119-
primary,
120-
secondary,
121-
text,
122-
withDivider,
123-
nonInteractive,
124-
tabindex
125-
),
126-
List.Divider
127-
]
128-
129-
Menu (menuItems, menuOpen)
130-
131-
Progress [
132-
Progress.Circular,
133-
Progress.Linear (indeterminate, value)
134-
]
135-
136-
Select (options, width, disabled, selectedID)
137-
138-
Snackbar [
139-
notice.js
140-
]
141-
142-
TabBar [
143-
TabBar.Scroller, TabBar.Tab (active, label)
144-
]
145-
146-
TextArea (label, value, placeholder, rows, maxlength, autofocus, rtl)
147-
148-
TextField (label, value, placeholder, maxlength, autofocus, disabled)
149-
150-
Tooltip (tooltipID, positionX, positionY) [
151-
Tooltip.Wrapper (ariaDescribedBy)
152-
]
153-
154-
TopAppBar (dense, fixed, navIconBreakpointClass, bgColorIsVariant) [
155-
actions.js, title.js
156-
]
157-
158-
Badge (color, borderRadius, padding, bordered)
159-
160-
CustomCard (
161-
src, alt, title, icon, disabled, buttons, footerText
162-
)
163-
164-
Form
165-
166-
Page (loading, title, layout, center, noProgress)[
167-
Page.Subheader
168-
]
169-
170-
StaticChip (bgColor)
171-
172-
Tour (steps, data)
173-
```
52+
A list of all components and their props can be found in our running instance of [Storybook](https://silinternational.github.io/ui-components/).
17453

17554
### importing components
17655

@@ -180,7 +59,9 @@ Just include `import { Button } from '@silintl/ui-components'` in your script se
18059

18160
### examples
18261

183-
Here is a demo app with examples of how to use components.
62+
See our Storybook [Docs](https://silinternational.github.io/ui-components/?path=/docs/example-introduction--page) for examples. Just click on the component you want to learn more about.
63+
64+
Here is a demo app with more examples of how to use components.
18465
https://github.com/hobbitronics/svelte-ui-components-app
18566

18667
It was buit from https://github.com/sveltejs/template

‎components/mdc/Drawer/Drawer.svelte

+5-2
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,9 @@ main {
108108
.mdc-list-item {
109109
margin: 4px 8px;
110110
}
111+
.main-content-height {
112+
height: var(--mdc-drawer-height);
113+
}
111114
</style>
112115

113116
<svelte:window on:resize={showAppropriateThings} />
@@ -187,8 +190,8 @@ main {
187190
</TopAppBar>
188191
{/if}
189192

190-
<main class="h-100" id="main-drawer-content" bind:this={mainContentEl}>
191-
<div class:mdc-top-app-bar--dense-fixed-adjust={hasTopAppBar} class="h-100">
193+
<main class="main-content-height" id="main-drawer-content" bind:this={mainContentEl}>
194+
<div class:mdc-top-app-bar--dense-fixed-adjust={hasTopAppBar} class="main-content-height">
192195
<slot />
193196
</div>
194197
</main>

‎stories/Drawer.stories.svelte

+80-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
3-
import { Drawer, Button } from '../components/mdc'
3+
import { Button, Datatable, Drawer } from '../components/mdc'
4+
import Page from '../components/page/Page.svelte'
45
import { copyAndModifyArgs } from './helpers.js'
56
67
const args = {
@@ -42,6 +43,18 @@ const args = {
4243
}
4344
</script>
4445

46+
<style>
47+
footer {
48+
height: 150px;
49+
display: flex;
50+
justify-content: center;
51+
align-items: end;
52+
}
53+
a {
54+
padding-bottom: 2rem;
55+
}
56+
</style>
57+
4558
<Meta title="Molecule/Drawer" component={Drawer} />
4659

4760
<Template let:args>
@@ -53,6 +66,72 @@ const args = {
5366
</span>
5467

5568
<Button on:click={() => (args.toggle = !args.toggle)}>Toggle drawer</Button>
69+
<Page>
70+
<h1>Title</h1>
71+
<p>
72+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
73+
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
74+
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti
75+
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
76+
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
77+
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
78+
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
79+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class
80+
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed
81+
lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla
82+
facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien.
83+
Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus
84+
luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget
85+
diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia
86+
molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum
87+
sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum
88+
tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est
89+
pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a
90+
tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet,
91+
augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
92+
</p>
93+
<p>
94+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
95+
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
96+
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti
97+
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
98+
Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
99+
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
100+
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.
101+
Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class
102+
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed
103+
lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla
104+
facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien.
105+
</p>
106+
107+
<Datatable on:sorted={args.onSorted}>
108+
<Datatable.Header>
109+
<Datatable.Header.Item class={'w-50'}>Name</Datatable.Header.Item>
110+
<Datatable.Header.Item>Date</Datatable.Header.Item>
111+
</Datatable.Header>
112+
113+
<Datatable.Data>
114+
<Datatable.Data.Row>
115+
<Datatable.Data.Row.Item>item</Datatable.Data.Row.Item>
116+
<Datatable.Data.Row.Item>today</Datatable.Data.Row.Item>
117+
</Datatable.Data.Row>
118+
119+
<Datatable.Data.Row>
120+
<Datatable.Data.Row.Item>item2</Datatable.Data.Row.Item>
121+
<Datatable.Data.Row.Item>tomorrow</Datatable.Data.Row.Item>
122+
</Datatable.Data.Row>
123+
124+
<Datatable.Data.Row>
125+
<Datatable.Data.Row.Item colspan={6}>Done loading</Datatable.Data.Row.Item>
126+
</Datatable.Data.Row>
127+
</Datatable.Data>
128+
</Datatable>
129+
</Page>
130+
131+
<footer>
132+
<a class="pr-1" href="">Terms of Service</a>
133+
<a href="">Privacy Policy</a>
134+
</footer>
56135
</Drawer>
57136
</body>
58137
</Template>

‎stories/_theme.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
--mdc-theme-error: #c30000;
88
--mdc-required-input: #da1414;
99
--progress-bar-color: #005cb9;
10+
--main-content-height: unset;
1011
}
1112

1213
.mdc-theme--primary-variant {

0 commit comments

Comments
 (0)