Sitelet https://github.com/angular/angular/commit/b3643e5e830b17b52eead3f3d3a2119364d820e6
Skip to content

Commit b3643e5

Browse files
JeanMecheAndrewKushnir
JeanMeche
authored and
AndrewKushnir
committed
docs(docs-infra): fix mobile banner layout (#64408)
PR Close #64408
1 parent 0bf157c commit b3643e5

4 files changed

Lines changed: 45 additions & 50 deletions

File tree

‎adev/shared-docs/components/top-level-banner/BUILD.bazel‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ ng_project(
2626
sass_binary(
2727
name = "style",
2828
src = "top-level-banner.component.scss",
29+
deps = [
30+
"//adev/shared-docs/styles",
31+
],
2932
)
3033

3134
ts_project(

‎adev/shared-docs/components/top-level-banner/top-level-banner.component.html‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
@if (!hasClosed()) {
2-
@if (link()) {
3-
<a [href]="link()" class="docs-top-level-banner">
4-
<h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
5-
<h1 tabindex="0" class="docs-top-level-banner-cta background"><span class="docs-top-level-banner-cta__text">{{ text()
6-
}}</span></h1>
7-
</a>
8-
} @else {
9-
<div class="docs-top-level-banner">
10-
<h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
11-
<h1 tabindex="0" class="docs-top-level-banner-cta background"><span class="docs-top-level-banner-cta__text">{{ text()
12-
}}</span></h1>
13-
</div>
2+
<span class="spacer"></span>
3+
@if (link()) {
4+
<a [href]="link()" class="docs-top-level-banner">
5+
<h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
6+
<h1 tabindex="0" class="docs-top-level-banner-cta background">
7+
<span class="docs-top-level-banner-cta__text">{{ text()
8+
}}</span>
9+
</h1>
10+
</a>
11+
} @else {
12+
<div class="docs-top-level-banner">
13+
<h1 tabindex="-1" class="docs-top-level-banner-cta shimmer">{{ text() }}</h1>
14+
<h1 tabindex="0" class="docs-top-level-banner-cta background">
15+
<span class="docs-top-level-banner-cta__text">{{ text()
16+
}}</span>
17+
</h1>
18+
</div>
19+
}
20+
<span class="spacer"></span>
21+
<button class="docs-top-level-banner-close" type="button" (click)="close()">
22+
<docs-icon class="docs-icon_high-contrast">close</docs-icon>
23+
</button>
1424
}
15-
16-
<button class="docs-top-level-banner-close" type="button" (click)="close()">
17-
<docs-icon class="docs-icon_high-contrast">close</docs-icon>
18-
</button>
19-
}

‎adev/shared-docs/components/top-level-banner/top-level-banner.component.scss‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../../styles/media-queries' as mq;
2+
13
:host {
24
&:not(:empty) {
35
z-index: var(--z-index-top-level-banner);
@@ -7,25 +9,33 @@
79
justify-content: center;
810
height: auto;
911
width: 100vw;
10-
padding: .5rem;
1112
border-bottom: 1px solid var(--septenary-contrast);
1213
text-align: center;
1314
align-content: center;
1415
backdrop-filter: blur(16px);
1516
background-color: color-mix(in srgb, var(--page-background) 70%, transparent);
17+
18+
@include mq.for-tablet-landscape-down {
19+
position: initial;
20+
}
21+
}
22+
23+
.spacer {
24+
flex: 1;
1625
}
1726

1827
a.docs-top-level-banner {
1928
display: grid;
2029
width: auto;
21-
margin: 0rem 2.5rem;
30+
margin: 0.5rem 2.5rem;
2231

23-
&:hover{
24-
h1.docs-top-level-banner-cta.background{
25-
span.docs-top-level-banner-cta__text::after{
32+
&:hover {
33+
h1.docs-top-level-banner-cta.background {
34+
span.docs-top-level-banner-cta__text::after {
2635
transform: scaleX(1);
2736
transform-origin: bottom left;
28-
}}
37+
}
38+
}
2939
}
3040
}
3141

@@ -39,9 +49,9 @@
3949

4050
&.background {
4151
color: var(--tertiary-contrast);
42-
43-
& .docs-top-level-banner-cta__text{
44-
position:relative;
52+
53+
& .docs-top-level-banner-cta__text {
54+
position: relative;
4555

4656
&::after {
4757
content: '';
@@ -57,9 +67,7 @@
5767
transition: transform 0.3s ease;
5868
}
5969
}
60-
6170
}
62-
6371
}
6472

6573
&:not(.background) {
@@ -68,11 +76,8 @@
6876
}
6977

7078
.docs-top-level-banner-close {
71-
position: absolute;
72-
top: 0.25rem;
73-
right: 1.4rem;
79+
margin: 0 1rem;
7480
color: var(--tertiary-contrast);
75-
padding-left: 0rem;
7681
}
7782
}
7883

‎adev/src/app/app.component.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,6 @@
77
align-items: flex-start;
88
min-height: 100vh;
99

10-
// Display top level banner below the navigation.
11-
docs-top-level-banner {
12-
@include mq.for-tablet {
13-
top: 4.6875rem;
14-
}
15-
16-
@include mq.for-phone-only {
17-
top: 3.75rem;
18-
transform: translateY(0);
19-
transition: transform 0.3s ease-out 0.6s;
20-
}
21-
22-
// show it under the navbar.
23-
@include mq.for-tablet-landscape-down {
24-
z-index: calc(var(--z-index-nav) - 1);
25-
}
26-
}
27-
2810
// Case: If secondary navigation exists, display banner below secondary navigation for tablets.
2911
&:has(adev-secondary-navigation) {
3012
docs-top-level-banner {

0 commit comments

Comments
 (0)