feat: support mobile design
This commit is contained in:
parent
09c0fa728f
commit
98dbbc9834
|
@ -97,7 +97,11 @@ const Dropdown: React.FC<DropdownProps> = ({
|
||||||
const DropdownContainer = styled.div`
|
const DropdownContainer = styled.div`
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 200px;
|
width: 150px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const DropdownHeader = styled.div<{ isExpanded: boolean }>`
|
const DropdownHeader = styled.div<{ isExpanded: boolean }>`
|
||||||
|
@ -109,11 +113,9 @@ const DropdownHeader = styled.div<{ isExpanded: boolean }>`
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
border: 1px solid white;
|
|
||||||
border-left: none;
|
|
||||||
|
|
||||||
background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')};
|
background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')};
|
||||||
color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
|
color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
|
||||||
|
outline: 1px solid white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|
|
@ -6,8 +6,16 @@ interface FooterProps {}
|
||||||
const Footer: React.FC<FooterProps> = () => {
|
const Footer: React.FC<FooterProps> = () => {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
<FirstRow>
|
||||||
<span className="logo">Logos Operators</span>
|
<span className="logo">Logos Operators</span>
|
||||||
<nav className="footer-nav">
|
<span className="ift">
|
||||||
|
Built by{' '}
|
||||||
|
<a href="https://free.technology/" target="_blank">
|
||||||
|
IFT
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</FirstRow>
|
||||||
|
<div className="footer-nav">
|
||||||
<a href="https://logos.co/terms" target="_blank">
|
<a href="https://logos.co/terms" target="_blank">
|
||||||
Terms of Use
|
Terms of Use
|
||||||
</a>
|
</a>
|
||||||
|
@ -20,13 +28,7 @@ const Footer: React.FC<FooterProps> = () => {
|
||||||
<a href="https://logos.co/manifesto" target="_blank">
|
<a href="https://logos.co/manifesto" target="_blank">
|
||||||
Manifesto
|
Manifesto
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</div>
|
||||||
<span className="ift">
|
|
||||||
Built by{' '}
|
|
||||||
<a href="https://free.technology/" target="_blank">
|
|
||||||
IFT
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -68,9 +70,29 @@ const Container = styled.footer`
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 991px) {
|
@media (max-width: 768px) {
|
||||||
|
flex-direction: column-reverse;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin-top: 40px;
|
margin-top: 200px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
.footer-nav {
|
||||||
|
position: relative;
|
||||||
|
left: unset;
|
||||||
|
bottom: unset;
|
||||||
|
transform: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const FirstRow = styled.div`
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
margin-top: 31px;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
|
@ -42,11 +42,19 @@ const Container = styled.header`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const Logo = styled.img`
|
const Logo = styled.img`
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
width: 89px;
|
width: 89px;
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
width: 74px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const UserActions = styled.div`
|
const UserActions = styled.div`
|
||||||
|
|
|
@ -105,7 +105,7 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
|
||||||
</AttributeItem>
|
</AttributeItem>
|
||||||
</AttributesFullGrid>
|
</AttributesFullGrid>
|
||||||
|
|
||||||
<DetailsList>
|
{/* <DetailsList>
|
||||||
{isIncripted &&
|
{isIncripted &&
|
||||||
operatorInfo.map((info, index) => (
|
operatorInfo.map((info, index) => (
|
||||||
<DetailItem key={index}>
|
<DetailItem key={index}>
|
||||||
|
@ -113,7 +113,7 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
|
||||||
<DetailValue>{info.value}</DetailValue>
|
<DetailValue>{info.value}</DetailValue>
|
||||||
</DetailItem>
|
</DetailItem>
|
||||||
))}
|
))}
|
||||||
</DetailsList>
|
</DetailsList> */}
|
||||||
</OperatorInfo>
|
</OperatorInfo>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
|
@ -125,9 +125,8 @@ const Container = styled.section`
|
||||||
gap: 0 16px;
|
gap: 0 16px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
grid-template-columns: repeat(1, 1fr);
|
grid-template-columns: repeat(1, 1fr);
|
||||||
margin-top: 40px;
|
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -137,12 +136,12 @@ const OperatorImage = styled.div`
|
||||||
& > img {
|
& > img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 400px;
|
aspect-ratio: 1 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
grid-column: 1 / 13;
|
grid-column: 1 / 13;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
grid-column: 1 / 2;
|
grid-column: 1 / 2;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -150,7 +149,7 @@ const OperatorImage = styled.div`
|
||||||
const OperatorInfo = styled.div`
|
const OperatorInfo = styled.div`
|
||||||
grid-column: 15 / 25;
|
grid-column: 15 / 25;
|
||||||
|
|
||||||
@media (max-width: ${breakpoints.md}px) {
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
grid-column: 1 / 2;
|
grid-column: 1 / 2;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -190,6 +189,14 @@ const OperatorTitle = styled.h1`
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
margin-top: 48px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 28px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
// const OperatorSubtitle = styled.div`
|
// const OperatorSubtitle = styled.div`
|
||||||
|
@ -238,28 +245,37 @@ const ArchetypeSection = styled.div`
|
||||||
padding: 16px 8px;
|
padding: 16px 8px;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
`
|
|
||||||
|
|
||||||
const DetailsList = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
margin-top: 24px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const DetailItem = styled.div`
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-color: var(--grey-900);
|
|
||||||
padding: 16px 8px;
|
|
||||||
`
|
|
||||||
|
|
||||||
const DetailLabel = styled.span`
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: 0.14px;
|
||||||
|
|
||||||
|
@media (max-width: ${breakpoints.sm}px) {
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const DetailValue = styled.span`
|
// const DetailsList = styled.div`
|
||||||
font-size: 14px;
|
// display: flex;
|
||||||
`
|
// flex-direction: column;
|
||||||
|
// gap: 2px;
|
||||||
|
// margin-top: 24px;
|
||||||
|
// `
|
||||||
|
|
||||||
|
// const DetailItem = styled.div`
|
||||||
|
// display: flex;
|
||||||
|
// justify-content: space-between;
|
||||||
|
// background-color: var(--grey-900);
|
||||||
|
// padding: 16px 8px;
|
||||||
|
// `
|
||||||
|
|
||||||
|
// const DetailLabel = styled.span`
|
||||||
|
// font-size: 14px;
|
||||||
|
// `
|
||||||
|
|
||||||
|
// const DetailValue = styled.span`
|
||||||
|
// font-size: 14px;
|
||||||
|
// `
|
||||||
|
|
||||||
export default OperatorDetails
|
export default OperatorDetails
|
||||||
|
|
|
@ -126,6 +126,16 @@ const Container = styled.main`
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.section-title {
|
||||||
|
margin-top: 60px;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 40px;
|
||||||
|
letter-spacing: 0.32px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
@ -135,10 +145,19 @@ const DropdownContainer = styled.div`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
max-width: 911px;
|
max-width: 911px;
|
||||||
|
flex-wrap: wrap;
|
||||||
margin: 70px auto 0 auto;
|
margin: 70px auto 0 auto;
|
||||||
|
|
||||||
& > div:first-of-type {
|
@media (max-width: 768px) {
|
||||||
|
display: grid;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
border-left: 1px solid white;
|
border-left: 1px solid white;
|
||||||
|
border-right: 1px solid white;
|
||||||
|
|
||||||
|
margin: 60px auto 0 auto;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue