Skip to content

Commit

Permalink
Fix mobile view screenshots by moving the DOM part outside of infobox. (
Browse files Browse the repository at this point in the history
  • Loading branch information
isoos authored Jan 18, 2024
1 parent 54236eb commit 91282f6
Show file tree
Hide file tree
Showing 38 changed files with 435 additions and 673 deletions.
1 change: 0 additions & 1 deletion app/lib/frontend/templates/views/pkg/info_box.dart
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@ d.Node packageInfoBoxNode({
}
}
return d.fragment([
imageCarousel(),
labeledScores,
if (thumbnailUrl != null)
d.div(classes: [
Expand Down
3 changes: 3 additions & 0 deletions app/lib/frontend/templates/views/shared/detail/page.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:pub_dev/frontend/templates/views/pkg/screenshots.dart';

import '../../../../dom/dom.dart' as d;

/// Renders the details page content.
Expand Down Expand Up @@ -82,5 +84,6 @@ d.Node detailPageNode({
),
],
),
imageCarousel(),
]);
}
12 changes: 12 additions & 0 deletions app/test/frontend/golden/my_activity_log_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,18 @@ <h1 class="title">admin</h1>
</div>
</div>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
12 changes: 12 additions & 0 deletions app/test/frontend/golden/my_liked_packages.html
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,18 @@ <h3 class="packages-title">
</div>
</div>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
12 changes: 12 additions & 0 deletions app/test/frontend/golden/my_packages.html
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,18 @@ <h3 class="packages-title">
</div>
</div>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
12 changes: 12 additions & 0 deletions app/test/frontend/golden/my_publishers.html
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,18 @@ <h3>Want to create a new publisher?</h3>
</div>
</div>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
36 changes: 12 additions & 24 deletions app/test/frontend/golden/pkg_activity_log_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -354,18 +354,6 @@ <h3 class="detail-lead-title">Metadata</h3>
</div>
</div>
<aside class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -440,18 +428,6 @@ <h3 class="detail-metadata-title">
Metadata
</h3>
<div class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -522,6 +498,18 @@ <h3 class="title">More</h3>
<a class="detail-metadata-toggle">Back</a>
</p>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
36 changes: 12 additions & 24 deletions app/test/frontend/golden/pkg_admin_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -556,18 +556,6 @@ <h3>Restore Retracted Package Version</h3>
</div>
</div>
<aside class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -642,18 +630,6 @@ <h3 class="detail-metadata-title">
Metadata
</h3>
<div class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -724,6 +700,18 @@ <h3 class="title">More</h3>
<a class="detail-metadata-toggle">Back</a>
</p>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
36 changes: 12 additions & 24 deletions app/test/frontend/golden/pkg_changelog_page.html
Original file line number Diff line number Diff line change
Expand Up @@ -224,18 +224,6 @@ <h2 class="changelog-version hash-header" id="120">
</div>
</div>
<aside class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -311,18 +299,6 @@ <h3 class="detail-metadata-title">
Metadata
</h3>
<div class="detail-info-box">
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
<a class="packages-scores" href="/packages/oxygen/score">
<div class="packages-score packages-score-like">
<div class="packages-score-value -has-value">
Expand Down Expand Up @@ -393,6 +369,18 @@ <h3 class="title">More</h3>
<a class="detail-metadata-toggle">Back</a>
</p>
</div>
<div id="-screenshot-carousel" class="carousel">
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
</fab>
<div id="-image-container" class="image-container"></div>
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
<div class="mdc-fab__ripple"></div>
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
</fab>
<p id="-screenshot-description" class="screenshot-description"></p>
</div>
</main>
<footer class="site-footer">
<a class="link" href="https://dart.dev/">Dart language</a>
Expand Down
Loading

0 comments on commit 91282f6

Please sign in to comment.