Skip to content

Commit 9193e7d

Browse files
hperrinhperrin
committed
docs: fix some mobile styling issues
1 parent a49d503 commit 9193e7d

File tree

3 files changed

+59
-36
lines changed

3 files changed

+59
-36
lines changed

‎packages/site/src/app.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
// Now on to the regular app styling stuff.
2626

2727
html {
28-
height: 100vh;
29-
width: 100vw;
28+
height: 100%;
29+
width: 100%;
3030
position: fixed;
3131
}
3232

‎packages/site/src/routes/+layout.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -670,7 +670,7 @@
670670
previousPagePath = $page.url.pathname;
671671
}
672672
673-
onMount(setMiniWindow);
673+
onMount(() => setTimeout(setMiniWindow, 0));
674674
675675
onMount(() => {
676676
if (mainContent) {

‎packages/site/src/routes/+page.svelte

+56-33
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,9 @@
8989
</div>
9090

9191
<div style="margin: 4em 0;">
92-
<List
93-
twoLine
94-
nonInteractive
95-
style="border: 1px solid var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));"
96-
>
97-
<Item style="height: auto; min-height: 64px;">
98-
<Graphic style="height: auto; width: auto;">
92+
<List twoLine nonInteractive class="feature-list">
93+
<Item>
94+
<Graphic>
9995
<Icon
10096
component={Svg}
10197
style="width: 40px; height: 40px;"
@@ -106,15 +102,15 @@
106102
</Graphic>
107103
<Text>
108104
<PrimaryText>Fully, Strictly Typed</PrimaryText>
109-
<SecondaryText style="white-space: normal;">
105+
<SecondaryText>
110106
SMUI is strictly typed with TypeScript. This not only helps catch
111107
bugs early, it helps while developing as every property is
112108
autocompleted by modern IDEs.
113109
</SecondaryText>
114110
</Text>
115111
</Item>
116-
<Item style="height: auto; min-height: 64px;">
117-
<Graphic style="height: auto; width: auto;">
112+
<Item>
113+
<Graphic>
118114
<Icon
119115
component={Svg}
120116
style="width: 40px; height: 40px;"
@@ -125,16 +121,16 @@
125121
</Graphic>
126122
<Text>
127123
<PrimaryText>Accessible by Default</PrimaryText>
128-
<SecondaryText style="white-space: normal;">
124+
<SecondaryText>
129125
SMUI automatically adds appropriate ARIA attributes to components
130126
to provide accessibility to screen readers. SMUI is also fully
131127
keyboard accessible, meaning motor impaired users can easily use
132128
SMUI components.
133129
</SecondaryText>
134130
</Text>
135131
</Item>
136-
<Item style="height: auto; min-height: 64px;">
137-
<Graphic style="height: auto; width: auto;">
132+
<Item>
133+
<Graphic>
138134
<Icon
139135
component={Svg}
140136
style="width: 40px; height: 40px;"
@@ -145,15 +141,15 @@
145141
</Graphic>
146142
<Text>
147143
<PrimaryText>Touch Friendly</PrimaryText>
148-
<SecondaryText style="white-space: normal;">
144+
<SecondaryText>
149145
SMUI provides increased touch targets to allow ease of use on
150146
mobile devices, conforming to the Material Spec requirement of
151147
minimum 48px x 48px touch targets.
152148
</SecondaryText>
153149
</Text>
154150
</Item>
155-
<Item style="height: auto; min-height: 64px;">
156-
<Graphic style="height: auto; width: auto;">
151+
<Item>
152+
<Graphic>
157153
<Icon
158154
component={Svg}
159155
style="width: 40px; height: 40px;"
@@ -164,15 +160,15 @@
164160
</Graphic>
165161
<Text>
166162
<PrimaryText>Server Side Rendering</PrimaryText>
167-
<SecondaryText style="white-space: normal;">
163+
<SecondaryText>
168164
SMUI can be fully rendered on the server, meaning faster time to
169165
first meaningful paint. SMUI fully supports SvelteKit. In fact,
170166
the site you're looking at is a SvelteKit app.
171167
</SecondaryText>
172168
</Text>
173169
</Item>
174-
<Item style="height: auto; min-height: 64px;">
175-
<Graphic style="height: auto; width: auto;">
170+
<Item>
171+
<Graphic>
176172
<Icon
177173
component={Svg}
178174
style="width: 40px; height: 40px;"
@@ -183,15 +179,15 @@
183179
</Graphic>
184180
<Text>
185181
<PrimaryText>Fully Themable</PrimaryText>
186-
<SecondaryText style="white-space: normal;">
182+
<SecondaryText>
187183
Components are themable using Sass variables, provided by MDC-Web.
188184
Everything from their shape, color, density, borders, interaction
189185
states, and more is themable.
190186
</SecondaryText>
191187
</Text>
192188
</Item>
193-
<Item style="height: auto; min-height: 64px;">
194-
<Graphic style="height: auto; width: auto;">
189+
<Item>
190+
<Graphic>
195191
<Icon
196192
component={Svg}
197193
style="width: 40px; height: 40px;"
@@ -202,14 +198,14 @@
202198
</Graphic>
203199
<Text>
204200
<PrimaryText>RTL Support</PrimaryText>
205-
<SecondaryText style="white-space: normal;">
201+
<SecondaryText>
206202
SMUI is RTL aware, and components will adapt their design to suit
207203
the language of the user.
208204
</SecondaryText>
209205
</Text>
210206
</Item>
211-
<Item style="height: auto; min-height: 64px;">
212-
<Graphic style="height: auto; width: auto;">
207+
<Item>
208+
<Graphic>
213209
<Icon
214210
component={Svg}
215211
style="width: 40px; height: 40px;"
@@ -220,7 +216,7 @@
220216
</Graphic>
221217
<Text>
222218
<PrimaryText>Widely Used, a Growing Community</PrimaryText>
223-
<SecondaryText style="white-space: normal;">
219+
<SecondaryText>
224220
With over <a
225221
href="https://github.com/hperrin/svelte-material-ui/network/dependents?package_id=UGFja2FnZS01NTM5MDg5MDQ"
226222
target="_blank">2200 projects</a
@@ -230,8 +226,8 @@
230226
</SecondaryText>
231227
</Text>
232228
</Item>
233-
<Item style="height: auto; min-height: 64px;">
234-
<Graphic style="height: auto; width: auto;">
229+
<Item>
230+
<Graphic>
235231
<Icon
236232
component={Svg}
237233
style="width: 40px; height: 40px;"
@@ -242,7 +238,7 @@
242238
</Graphic>
243239
<Text>
244240
<PrimaryText>Adaptable, Versatile</PrimaryText>
245-
<SecondaryText style="white-space: normal;">
241+
<SecondaryText>
246242
SMUI supports adding arbitrary attributes and actions to every
247243
component and many internal elements within them. SMUI forwards
248244
all events from every component, and supports event modifiers,
@@ -253,8 +249,8 @@
253249
</SecondaryText>
254250
</Text>
255251
</Item>
256-
<Item style="height: auto; min-height: 64px;">
257-
<Graphic style="height: auto; width: auto;">
252+
<Item>
253+
<Graphic>
258254
<Icon
259255
component={Svg}
260256
style="width: 40px; height: 40px;"
@@ -265,7 +261,7 @@
265261
</Graphic>
266262
<Text>
267263
<PrimaryText>Material Design Compliant</PrimaryText>
268-
<SecondaryText style="white-space: normal;">
264+
<SecondaryText>
269265
Every SMUI component fully follows the Material Design
270266
specification. You can build up-to-spec UIs with SMUI.
271267
</SecondaryText>
@@ -349,7 +345,32 @@
349345
flex-basis: 0;
350346
}
351347
352-
@media (max-width: 460px) {
348+
* :global(.feature-list) {
349+
border: 1px solid
350+
var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));
351+
padding: 1em;
352+
}
353+
354+
* :global(.feature-list .mdc-deprecated-list-item) {
355+
height: auto;
356+
min-height: 64px;
357+
margin-bottom: 1em;
358+
}
359+
360+
* :global(.feature-list .mdc-deprecated-list-item:last-child) {
361+
margin-bottom: 0;
362+
}
363+
364+
* :global(.feature-list .mdc-deprecated-list-item__graphic) {
365+
height: auto;
366+
width: auto;
367+
}
368+
369+
* :global(.feature-list .mdc-deprecated-list-item__secondary-text) {
370+
white-space: normal;
371+
}
372+
373+
@media (max-width: 767px) {
353374
section {
354375
padding: 16px;
355376
}
@@ -361,7 +382,9 @@
361382
height: 276px;
362383
width: 276px;
363384
}
385+
}
364386
387+
@media (max-width: 1023px) {
365388
.boxes {
366389
flex-direction: column;
367390
}

0 commit comments

Comments
 (0)