Skip to content

Commit 59b1743

Browse files
bramusbramus
committed
Fix footer on mobile
1 parent b1dd779 commit 59b1743

7 files changed

Lines changed: 54 additions & 19 deletions

File tree

‎demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ <h3 class="card-title">
174174
</div>
175175
</main>
176176
<footer class="demo-footer">
177-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
177+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
178178
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
179179
</footer>
180180
<script>

‎demo/measure/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@
2525
<iframe id="demo-iframe" src="demo.html" title="Measure Demo"></iframe>
2626
</div>
2727
</div>
28+
<footer class="shell-footer mobile-only">
29+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
30+
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
31+
</footer>
2832
<aside class="shell-sidebar">
2933
<div class="shell-header">
3034
<a href="../" class="shell-back"><span>&larr;</span> Back</a>
@@ -69,8 +73,8 @@ <h3>Functions Used</h3>
6973
const boxGroupAnimation = getAnimations(t, "box", ViewTransitionPart.Group)[0];
7074
const boxGroupGeometry = extractGeometry(boxGroupAnimation);</code></pre>
7175
</div>
72-
<footer class="shell-footer">
73-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
76+
<footer class="shell-footer desktop-only">
77+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
7478
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
7579
</footer>
7680
</aside>

‎demo/navigation-types/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<iframe id="demo-iframe" src="demo.html" title="Navigation Types Demo"></iframe>
2525
</div>
2626
</div>
27+
<footer class="shell-footer mobile-only">
28+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
29+
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
30+
</footer>
2731
<aside class="shell-sidebar">
2832
<div class="shell-header">
2933
<a href="../" class="shell-back"><span>&larr;</span> Back</a>
@@ -77,8 +81,8 @@ <h3>Functions Used</h3>
7781

7882
useAutoTypes(routeMap);</code></pre>
7983
</div>
80-
<footer class="shell-footer">
81-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
84+
<footer class="shell-footer desktop-only">
85+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
8286
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
8387
</footer>
8488
</aside>

‎demo/optimize/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<iframe id="demo-iframe" src="demo.html" title="Optimize Demo"></iframe>
2525
</div>
2626
</div>
27+
<footer class="shell-footer mobile-only">
28+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
29+
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
30+
</footer>
2731
<aside class="shell-sidebar">
2832
<div class="shell-header">
2933
<a href="../" class="shell-back"><span>&larr;</span> Back</a>
@@ -66,8 +70,8 @@ <h3>Functions Used</h3>
6670
optimizeGroupAnimations(t, "*"); // All groups
6771
optimizeGroupAnimations(t, "box-flip", OPTIMIZATION_STRATEGY.SLIDE); // Specific group</code></pre>
6872
</div>
69-
<footer class="shell-footer">
70-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
73+
<footer class="shell-footer desktop-only">
74+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
7175
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
7276
</footer>
7377
</aside>

‎demo/playback-control/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<iframe id="demo-iframe" src="demo.html" title="Playback Control Demo"></iframe>
2525
</div>
2626
</div>
27+
<footer class="shell-footer mobile-only">
28+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
29+
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
30+
</footer>
2731
<aside class="shell-sidebar">
2832
<div class="shell-header">
2933
<a href="../" class="shell-back"><span>&larr;</span> Back</a>
@@ -71,8 +75,8 @@ <h3>Functions Used</h3>
7175
resume(t); // Resumes all VT animations
7276
scrub(t, position); // Sets animations to 50% playback</code></pre>
7377
</div>
74-
<footer class="shell-footer">
75-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
78+
<footer class="shell-footer desktop-only">
79+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
7680
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
7781
</footer>
7882
</aside>

‎demo/scroll-driven-view-transition/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
<iframe id="demo-iframe" src="demo.html" title="Scroll-Driven Demo"></iframe>
2525
</div>
2626
</div>
27+
<footer class="shell-footer mobile-only">
28+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
29+
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
30+
</footer>
2731
<aside class="shell-sidebar">
2832
<div class="shell-header">
2933
<a href="../" class="shell-back"><span>&larr;</span> Back</a>
@@ -72,8 +76,8 @@ <h3>Functions Used</h3>
7276
pause(document.activeViewTransition);
7377
scrub(document.activeViewTransition, scrollProgress);</code></pre>
7478
</div>
75-
<footer class="shell-footer">
76-
<p>Built by <a href="https://www.bram.us/">Bramus</a>, Chrome Developer Relations Engineer at Google.<br>
79+
<footer class="shell-footer desktop-only">
80+
<p><code>view-transitions-toolkit</code> is a a Chrome DevRel Project.<br>
7781
Source Code available <a href="https://github.com/googlechromelabs/view-transitions-toolkit">on GitHub</a> – <a href="https://www.apache.org/licenses/LICENSE-2.0.txt">Apache License, Version 2.0</a></p>
7882
</footer>
7983
</aside>

‎demo/styles.css‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,10 @@ code {
599599
margin: 1.5rem 0;
600600
}
601601

602+
.shell-footer.mobile-only {
603+
display: none;
604+
}
605+
602606
.demo-footer, .shell-footer {
603607
margin-top: 5rem;
604608
padding: 2rem 0;
@@ -622,24 +626,35 @@ code {
622626
/* Responsive Layout for Demo Shells (Viewport < 1130px) */
623627
@media (max-width: 1129px) {
624628
.shell-container {
625-
flex-direction: column-reverse !important;
629+
display: flex !important;
630+
flex-direction: column !important;
626631
height: auto !important;
627632
overflow-y: auto !important;
628633
}
629634

630-
.shell-main {
631-
width: 100% !important;
632-
height: 70vh !important;
633-
padding: 1.5rem !important;
634-
flex: none !important;
635-
}
636-
637635
.shell-sidebar {
636+
order: 1 !important;
638637
width: 100% !important;
639638
max-width: none !important;
640639
height: auto !important;
641640
border-left: none !important;
642641
border-bottom: 1px solid var(--card-border) !important;
643642
padding: 2rem !important;
644643
}
644+
645+
.shell-main {
646+
order: 2 !important;
647+
width: 100% !important;
648+
height: 70vh !important;
649+
padding: 1.5rem !important;
650+
flex: none !important;
651+
}
652+
653+
.shell-footer.mobile-only {
654+
order: 3 !important;
655+
display: block !important;
656+
margin-top: 2rem;
657+
}
645658
}
659+
660+

0 commit comments

Comments
 (0)