Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix State of React Native 2024 banner styles #3302

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions docs/src/theme/AnnouncementBar/Content/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ import clsx from 'clsx';
import ArrowButton from './ArrowButton';
import styles from './styles.module.css';
import useBaseUrl from '@docusaurus/useBaseUrl';
import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';

export default function AnnouncementBarContent(props) {
const { isCloseable, close } = props;
return (
<div className={clsx(styles.content, props.className)}>
<div className={styles.wrapper}>
<img
className={styles.logo}
src={useBaseUrl('/img/state-of-react-native-logo.svg')}
alt="State of React Native logo"
/>
<strong className={styles.headline}>State of React Native 2024</strong>
<p className={styles.subText}>
Have a few minutes and want to shape the future of React Native?
</p>
</div>
<img
className={styles.logo}
src={useBaseUrl('/img/state-of-react-native-logo.svg')}
alt="State of React Native logo"
/>
<strong className={styles.headline}>State of React Native 2024</strong>
<p className={styles.subText}>
Have a few minutes and want to shape the future of React Native?
</p>
<a
className={styles.link}
href="https://survey.stateofreactnative.com/"
Expand All @@ -28,6 +28,9 @@ export default function AnnouncementBarContent(props) {
<ArrowButton className={styles.linkArrow} />
</div>
</a>
{isCloseable && (
<AnnouncementBarCloseButton onClick={close} className={styles.close} />
)}
</div>
);
}
76 changes: 44 additions & 32 deletions docs/src/theme/AnnouncementBar/Content/styles.module.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
.content {
display: flex;
display: grid;
grid-template-columns: auto auto auto 1fr auto;
grid-template-areas: 'logo headline subText link close';
align-items: center;
justify-content: space-between;
gap: 8px;
margin: 0 auto;
width: 100%;
max-width: 1440px;

padding: 8px 16px;
Expand All @@ -11,26 +14,17 @@
.logo {
height: 36px;
width: 36px;
margin: auto;
grid-area: logo;
}

.content a {
color: inherit;
}

.wrapper {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
justify-content: center;
}

.headline {
font-size: 16px;
grid-area: headline;
text-wrap: nowrap;
grid-area: headline;
}

p.subText {
Expand All @@ -48,12 +42,18 @@ a.link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 14px;
padding: 4px 12px;
border: 1px solid var(--swm-navy-light-100);
background-color: var(--swm-navy-light-100);
transition: all 0.2s ease-in-out;
transition:
border 0.2s ease-in-out,
background-color 0.2s ease-in-out;
grid-area: link;
margin-left: auto;
margin-right: 64px;
}

.linkTitle {
Expand Down Expand Up @@ -86,32 +86,44 @@ a.link {
align-items: center;
}

@media screen and (max-width: 996px) {
.close {
opacity: 1;
grid-area: close;
}

.close svg g {
stroke: var(--swm-navy-light-100);
stroke-width: 2;
}

@media screen and (max-width: 1200px) {
.content {
gap: 12px;
}
.wrapper {
display: grid;
grid-template-columns: 50px 1fr;
grid-template-columns: auto 1fr 1fr auto;
grid-template-areas:
'logo headline'
'logo subText';
gap: 0;
align-items: center;
'logo headline link close'
'logo subText link close';
}
.link {
margin: auto;
}
}

@media screen and (max-width: 768px) {
@media screen and (max-width: 600px) {
.content {
flex-direction: column;
align-items: flex-start;
padding: 8px 16px;
grid-template-columns: auto 1fr auto;
grid-template-areas:
'logo headline close'
'logo subText close'
'link link link';
}
}

@media screen and (max-width: 450px) {
.link {
width: 100%;
justify-content: center;
margin: 0;
}
.logo {
margin-bottom: auto;
}
.close {
padding: 8px !important;
margin-bottom: auto;
}
}
16 changes: 5 additions & 11 deletions docs/src/theme/AnnouncementBar/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useThemeConfig } from '@docusaurus/theme-common';
import { useAnnouncementBar } from '@docusaurus/theme-common/internal';
import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
import BrowserOnly from '@docusaurus/BrowserOnly';
import styles from './styles.module.css';
Expand Down Expand Up @@ -48,16 +47,11 @@ function AnnouncementBar() {
className={styles.announcementBar}
style={{ backgroundColor, color: textColor }}
role="banner">
{isCloseable && <div className={styles.announcementBarPlaceholder} />}
<AnnouncementBarContent className={styles.announcementBarContent} />
{isCloseable && (
<div className={styles.buttonContainer}>
<AnnouncementBarCloseButton
onClick={close}
className={styles.announcementBarClose}
/>
</div>
)}
<AnnouncementBarContent
className={styles.announcementBarContent}
isCloseable={isCloseable}
close={close}
/>
</div>
)}
</BrowserOnly>
Expand Down
65 changes: 0 additions & 65 deletions docs/src/theme/AnnouncementBar/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,73 +13,8 @@
z-index: 10;
}

.announcementBarAdornment {
height: 500px;
width: 500px;
position: absolute;
opacity: 0.3;
pointer-events: none;
}

.announcementBarPlaceholder {
flex: 0 0 30px;
margin: 0 25px;
}

.announcementBarClose {
flex: 0 0 30px;
margin: 0 25px;
align-self: stretch;
opacity: 1;
}

.announcementBarClose svg g {
stroke: var(--swm-navy-light-100);
stroke-width: 2;
}

.announcementBarContent {
flex: 1 1 auto;
}

.buttonContainer {
display: flex;
justify-content: center;
padding-right: 1rem;
}

@media print {
.announcementBar {
display: none;
}
}

@media screen and (max-width: 996px) {
.announcementBarClose {
margin: 0;
}
.announcementBarPlaceholder {
display: none;
}
}
@media screen and (max-width: 768px) {
.buttonContainer {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 1rem;
}
}
@media screen and (max-width: 600px) {
.announcementBarRightAdornment {
display: none;
}
}

@media screen and (max-width: 450px) {
.buttonContainer {
padding-top: 0;
align-items: center;
justify-content: center;
}
}
Loading