acid-info
/
logos-ordinals-dashboard
mirror of https://github.com/acid-info/logos-ordinals-dashboard.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: support mobile design

This commit is contained in:
jinhojang6 2024-10-02 23:24:44 +09:00
parent 09c0fa728f
commit 98dbbc9834
No known key found for this signature in database
GPG Key ID: 1762F21FE8B543F8
5 changed files with 109 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Dropdown/Dropdown.tsx
View File

@ -97,7 +97,11 @@ const Dropdown: React.FC<DropdownProps> = ({
const DropdownContainer = styled.div`
position: relative;
display: inline-block;
width: 200px;
width: 150px;
@media (max-width: 768px) {
width: 100%;
}
`
const DropdownHeader = styled.div<{ isExpanded: boolean }>`
@ -109,11 +113,9 @@ const DropdownHeader = styled.div<{ isExpanded: boolean }>`
line-height: 20px;
cursor: pointer;
border: 1px solid white;
border-left: none;
background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')};
color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
outline: 1px solid white;
&:hover {
background-color: white;

44
src/components/Footer/Footer.tsx
View File

@ -6,8 +6,16 @@ interface FooterProps {}
const Footer: React.FC<FooterProps> = () => {
return (
<Container>
<span className="logo">Logos Operators</span>
<nav className="footer-nav">
<FirstRow>
<span className="logo">Logos Operators</span>
<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">
Terms of Use
</a>
@ -20,13 +28,7 @@ const Footer: React.FC<FooterProps> = () => {
<a href="https://logos.co/manifesto" target="_blank">
Manifesto
</a>
</nav>
<span className="ift">
Built by{' '}
<a href="https://free.technology/" target="_blank">
IFT
</a>
</span>
</div>
</Container>
)
}
@ -68,9 +70,29 @@ const Container = styled.footer`
text-decoration: underline;
}
@media (max-width: 991px) {
@media (max-width: 768px) {
flex-direction: column-reverse;
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;
}
`

8
src/components/Header/Header/Header.tsx
View File

@ -42,11 +42,19 @@ const Container = styled.header`
align-items: center;
justify-content: space-between;
position: relative;
@media (max-width: 768px) {
margin-top: 24px;
}
`
const Logo = styled.img`
object-fit: contain;
width: 89px;
@media (max-width: 768px) {
width: 74px;
}
`
const UserActions = styled.div`

68
src/components/Operator/OperatorDetails/OperatorDetails.tsx
View File

@ -105,7 +105,7 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
</AttributeItem>
</AttributesFullGrid>
<DetailsList>
{/* <DetailsList>
{isIncripted &&
operatorInfo.map((info, index) => (
<DetailItem key={index}>
@ -113,7 +113,7 @@ const OperatorDetails: React.FC<OperatorDetailsProps> = ({
<DetailValue>{info.value}</DetailValue>
</DetailItem>
))}
</DetailsList>
</DetailsList> */}
</OperatorInfo>
</Container>
)
@ -125,9 +125,8 @@ const Container = styled.section`
gap: 0 16px;
width: 100%;
@media (max-width: ${breakpoints.md}px) {
@media (max-width: ${breakpoints.sm}px) {
grid-template-columns: repeat(1, 1fr);
margin-top: 40px;
}
`
@ -137,12 +136,12 @@ const OperatorImage = styled.div`
& > img {
width: 100%;
height: auto;
min-height: 400px;
aspect-ratio: 1 / 1;
}
grid-column: 1 / 13;
@media (max-width: ${breakpoints.md}px) {
@media (max-width: ${breakpoints.sm}px) {
grid-column: 1 / 2;
}
`
@ -150,7 +149,7 @@ const OperatorImage = styled.div`
const OperatorInfo = styled.div`
grid-column: 15 / 25;
@media (max-width: ${breakpoints.md}px) {
@media (max-width: ${breakpoints.sm}px) {
grid-column: 1 / 2;
}
`
@ -190,6 +189,14 @@ const OperatorTitle = styled.h1`
font-weight: 400;
line-height: 40px;
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`
@ -238,28 +245,37 @@ const ArchetypeSection = styled.div`
padding: 16px 8px;
margin-top: 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;
line-height: 20px;
letter-spacing: 0.14px;
@media (max-width: ${breakpoints.sm}px) {
margin-top: 16px;
margin-bottom: 16px;
}
`
const DetailValue = styled.span`
font-size: 14px;
`
// 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;
// `
// const DetailValue = styled.span`
// font-size: 14px;
// `
export default OperatorDetails

21
src/containers/Explore/ExploreContainer.tsx
View File

@ -126,6 +126,16 @@ const Container = styled.main`
font-size: 40px;
line-height: 48px;
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;
max-width: 911px;
flex-wrap: wrap;
margin: 70px auto 0 auto;
& > div:first-of-type {
@media (max-width: 768px) {
display: grid;
width: 100%;
border-left: 1px solid white;
border-right: 1px solid white;
margin: 60px auto 0 auto;
grid-template-columns: repeat(2, 1fr);
}
`