Skip to content

Commit ca25ba2

Browse files
NotWoodsNotWoods
committed
Add view transitions
1 parent 37e935e commit ca25ba2

File tree

4 files changed

+193
-154
lines changed

4 files changed

+193
-154
lines changed

‎editor.html

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,44 @@
1616
<body>
1717
<button class="scrim toggle--layers" aria-hidden="true" aria-label="Close layers sidebar"></button>
1818
<file-drop accept="image/*" multiple id="icon_drop" class="body icon__file-drop drop">
19-
<article class="viewer">
19+
<main>
2020
{{> navbar page="editor" }}
21+
<article class="viewer">
22+
<div class="button__row">
23+
<button type="button" class="button--secondary toggle--layers small" aria-controls="layersSidebar">
24+
Layers
25+
</button>
26+
<button type="button" class="button--primary toggle--export" name="export" aria-controls="exportModal">
27+
Export
28+
</button>
29+
<button type="button" class="button--primary" name="share">Share</button>
30+
</div>
2131

22-
<div class="button__row">
23-
<button type="button" class="button--secondary toggle--layers small" aria-controls="layersSidebar">
24-
Layers
25-
</button>
26-
<button type="button" class="button--primary toggle--export" name="export" aria-controls="exportModal">
27-
Export
28-
</button>
29-
<button type="button" class="button--primary" name="share">Share</button>
30-
</div>
31-
32-
<section class="icon__grid">
33-
<div class="icon__original editor__preview"></div>
34-
<div class="icon__mask masked editor__preview"></div>
35-
<div class="icon__shadow masked"></div>
36-
</section>
32+
<section class="icon__grid">
33+
<div class="icon__original editor__preview"></div>
34+
<div class="icon__mask masked editor__preview"></div>
35+
<div class="icon__shadow masked"></div>
36+
</section>
3737

38-
{{> controls }}
39-
<hr />
40-
<aside class="about text">
41-
{{> ad }}
42-
<p class="about__main">
43-
Maskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
44-
</p>
45-
<p class="about__main">
46-
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
47-
Maskable icons</a
48-
>
49-
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
50-
icons on the device. On Android, this lets developers get rid of the default white background around their
51-
icons and use the entire provided space by generating adaptive icons.
52-
</p>
53-
{{> github }} {{> donate}}
54-
</aside>
55-
</article>
38+
{{> controls }}
39+
<hr />
40+
<aside class="about text">
41+
{{> ad }}
42+
<p class="about__main">
43+
Maskable.app Editor lets you generate maskable PWA icons before adding them to your web app manifest.
44+
</p>
45+
<p class="about__main">
46+
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
47+
Maskable icons</a
48+
>
49+
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
50+
icons on the device. On Android, this lets developers get rid of the default white background around their
51+
icons and use the entire provided space by generating adaptive icons.
52+
</p>
53+
{{> github }} {{> donate}}
54+
</aside>
55+
</article>
56+
</main>
5657

5758
<aside class="layers" id="layersSidebar">
5859
<h2>Layers</h2>

‎index.html

Lines changed: 118 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -16,134 +16,135 @@
1616

1717
<body>
1818
<file-drop accept="image/*" id="icon_drop" class="icon__file-drop drop">
19-
<main class="viewer">
19+
<main>
2020
{{> navbar page="viewer" }}
21-
22-
<div class="demo__container">
23-
<ul class="demo__list">
24-
<!--
21+
<article class="viewer">
22+
<div class="demo__container">
23+
<ul class="demo__list">
24+
<!--
2525
Different sample icons that the user can look at.
2626
The original source of the icon is linked in the data-source attribute.
2727
The alt tag is used as the title of the source.
2828
-->
29-
<li class="demo">
30-
<a class="demo__link" href="?demo=demo/spec.svg">
31-
<img
32-
width="56"
33-
height="56"
34-
class="demo__preview"
35-
src="demo/spec.svg"
36-
alt="W3C example"
37-
data-source="https://www.w3.org/TR/appmanifest/#examples-of-masks"
38-
/>
39-
</a>
40-
</li>
41-
<li class="demo">
42-
<a class="demo__link" href="?demo=demo/color-breakdown.png">
43-
<img
44-
width="56"
45-
height="56"
46-
class="demo__preview"
47-
src="demo/color-breakdown.png"
48-
alt="Color Breakdown"
49-
data-source="https://notwoods.github.io/color-breakdown/"
50-
/>
51-
</a>
52-
</li>
53-
<li class="demo">
54-
<a class="demo__link" href="?demo=demo/insightful-energy.svg">
55-
<img
56-
width="56"
57-
height="56"
58-
class="demo__preview"
59-
src="demo/insightful-energy.svg"
60-
alt="Insightful Energy"
61-
data-source="https://notwoods.github.io/insightful-energy/"
62-
/>
63-
</a>
64-
</li>
65-
<li class="demo">
66-
<a class="demo__link" href="?demo=demo/big-island-buses.png">
67-
<img
68-
width="56"
69-
height="56"
70-
class="demo__preview"
71-
src="demo/big-island-buses.png"
72-
alt="Big Island Buses"
73-
data-source="https://notwoods.github.io/big-island-buses/"
74-
/>
75-
</a>
76-
</li>
77-
<li class="demo">
78-
<a class="demo__link" href="?demo=demo/proxx.png">
79-
<img
80-
width="56"
81-
height="56"
82-
class="demo__preview"
83-
src="demo/proxx.png"
84-
alt="PROXX"
85-
data-source="https://proxx.app"
86-
/>
87-
</a>
88-
</li>
89-
<li class="demo">
90-
<a class="demo__link" href="?demo=demo/svgomg.svg">
91-
<img
92-
width="56"
93-
height="56"
94-
class="demo__preview"
95-
src="demo/svgomg.svg"
96-
alt="SVGOMG"
97-
data-source="https://jakearchibald.github.io/svgomg/"
98-
/>
99-
</a>
100-
</li>
101-
</ul>
29+
<li class="demo">
30+
<a class="demo__link" href="?demo=demo/spec.svg">
31+
<img
32+
width="56"
33+
height="56"
34+
class="demo__preview"
35+
src="demo/spec.svg"
36+
alt="W3C example"
37+
data-source="https://www.w3.org/TR/appmanifest/#examples-of-masks"
38+
/>
39+
</a>
40+
</li>
41+
<li class="demo">
42+
<a class="demo__link" href="?demo=demo/color-breakdown.png">
43+
<img
44+
width="56"
45+
height="56"
46+
class="demo__preview"
47+
src="demo/color-breakdown.png"
48+
alt="Color Breakdown"
49+
data-source="https://notwoods.github.io/color-breakdown/"
50+
/>
51+
</a>
52+
</li>
53+
<li class="demo">
54+
<a class="demo__link" href="?demo=demo/insightful-energy.svg">
55+
<img
56+
width="56"
57+
height="56"
58+
class="demo__preview"
59+
src="demo/insightful-energy.svg"
60+
alt="Insightful Energy"
61+
data-source="https://notwoods.github.io/insightful-energy/"
62+
/>
63+
</a>
64+
</li>
65+
<li class="demo">
66+
<a class="demo__link" href="?demo=demo/big-island-buses.png">
67+
<img
68+
width="56"
69+
height="56"
70+
class="demo__preview"
71+
src="demo/big-island-buses.png"
72+
alt="Big Island Buses"
73+
data-source="https://notwoods.github.io/big-island-buses/"
74+
/>
75+
</a>
76+
</li>
77+
<li class="demo">
78+
<a class="demo__link" href="?demo=demo/proxx.png">
79+
<img
80+
width="56"
81+
height="56"
82+
class="demo__preview"
83+
src="demo/proxx.png"
84+
alt="PROXX"
85+
data-source="https://proxx.app"
86+
/>
87+
</a>
88+
</li>
89+
<li class="demo">
90+
<a class="demo__link" href="?demo=demo/svgomg.svg">
91+
<img
92+
width="56"
93+
height="56"
94+
class="demo__preview"
95+
src="demo/svgomg.svg"
96+
alt="SVGOMG"
97+
data-source="https://jakearchibald.github.io/svgomg/"
98+
/>
99+
</a>
100+
</li>
101+
</ul>
102102

103-
<div class="button__row">
104-
<input type="file" accept="image/*" class="hidden-offscreen" id="icon_file" name="icon_file" />
105-
<label for="icon_file" class="icon__file-input button--primary"> Open icon file </label>
103+
<div class="button__row">
104+
<input type="file" accept="image/*" class="hidden-offscreen" id="icon_file" name="icon_file" />
105+
<label for="icon_file" class="icon__file-input button--primary"> Open icon file </label>
106106

107-
<button type="button" class="button--primary toggle--url" name="url" aria-controls="urlModal">
108-
Load from URL
109-
</button>
107+
<button type="button" class="button--primary toggle--url" name="url" aria-controls="urlModal">
108+
Load from URL
109+
</button>
110+
</div>
110111
</div>
111-
</div>
112112

113-
<section class="icon__grid">
114-
<div class="icon__original">
115-
<img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
116-
</div>
117-
<div class="icon__mask masked">
118-
<img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
119-
</div>
120-
<div class="icon__shadow masked"></div>
121-
</section>
113+
<section class="icon__grid">
114+
<div class="icon__original">
115+
<img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
116+
</div>
117+
<div class="icon__mask masked">
118+
<img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
119+
</div>
120+
<div class="icon__shadow masked"></div>
121+
</section>
122122

123-
{{> controls }}
124-
<aside class="source text">
125-
<p>
126-
Icon from
127-
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
128-
</p>
129-
</aside>
123+
{{> controls }}
124+
<aside class="source text">
125+
<p>
126+
Icon from
127+
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
128+
</p>
129+
</aside>
130130

131-
<hr />
132-
<aside class="about text">
133-
{{> ad }}
134-
<p class="about__main">
135-
Use Maskable.app to preview your maskable PWA icons before adding them to your web app manifest.
136-
</p>
137-
<p class="about__main">
138-
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
139-
Maskable icons</a
140-
>
141-
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
142-
icons on the device. On Android, this lets developers get rid of the default white background around their
143-
icons and use the entire provided space by generating adaptive icons.
144-
</p>
145-
{{> github }} {{> donate}}
146-
</aside>
131+
<hr />
132+
<aside class="about text">
133+
{{> ad }}
134+
<p class="about__main">
135+
Use Maskable.app to preview your maskable PWA icons before adding them to your web app manifest.
136+
</p>
137+
<p class="about__main">
138+
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
139+
Maskable icons</a
140+
>
141+
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
142+
icons on the device. On Android, this lets developers get rid of the default white background around their
143+
icons and use the entire provided space by generating adaptive icons.
144+
</p>
145+
{{> github }} {{> donate}}
146+
</aside>
147+
</article>
147148
</main>
148149

149150
<dialog class="url-dialog" id="urlModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">

‎public/css/editor.css

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,14 @@ dark-mode-toggle {
99
right: 0;
1010
}
1111

12-
.viewer {
13-
background: var(--background);
14-
position: relative;
12+
main {
1513
overflow-y: auto;
1614
padding-left: env(safe-area-inset-left);
1715
padding-right: env(safe-area-inset-right);
1816
}
17+
.viewer {
18+
position: relative;
19+
}
1920
.layers {
2021
padding-left: env(safe-area-inset-left);
2122
resize: horizontal;

‎public/css/viewer.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -475,3 +475,39 @@ hr {
475475
width: 20em;
476476
max-width: 100%;
477477
}
478+
479+
@keyframes slide-in-from-right {
480+
from {
481+
translate: 100% 0;
482+
}
483+
}
484+
@keyframes slide-out-to-right {
485+
to {
486+
translate: 100% 0;
487+
}
488+
}
489+
490+
@media (prefers-reduced-motion: no-preference) {
491+
@view-transition {
492+
navigation: auto;
493+
}
494+
.viewer {
495+
view-transition-name: viewer;
496+
}
497+
.layers {
498+
view-transition-name: layers;
499+
}
500+
501+
::view-transition-old(*) {
502+
animation-duration: 0.2s;
503+
animation-timing-function: ease-in;
504+
}
505+
@media (min-width: 56rem) {
506+
::view-transition-old(layers) {
507+
animation: 0.2s ease-in both slide-out-to-right;
508+
}
509+
::view-transition-new(layers) {
510+
animation: 0.2s ease-in both slide-in-from-right;
511+
}
512+
}
513+
}

0 commit comments

Comments
 (0)