Skip to content

Commit 34fafca

Browse files
author
Andriy Borovets
committed
fix: added responsive UI to docs page. Fixed the UI of search modal
1 parent 928dbad commit 34fafca

File tree

3 files changed

+33
-26
lines changed

3 files changed

+33
-26
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ public
33
node_modules
44
*DS_Store
55
*.env
6+
/.idea

‎src/components/search/SearchModal.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,15 @@ const SearchModal = ({ onClose }) => {
5757
const { docsSections } = config
5858

5959
return (
60-
<div className='fixed z-30 inset-0 min-h-screen'>
60+
<div className='w-full md:w-auto mx-auto md-ml-0 fixed z-30 inset-0 min-h-screen'>
6161
<div className='flex items-start md:items-end justify-center h-full pt-4 px-4 pb-20 text-center sm:block sm:p-0'>
6262
<div className="fixed inset-0 transition-opacity" aria-hidden="true">
6363
<div className="absolute inset-0 p-8" onClick={onClose} style={{
6464
background: 'rgba(0, 0, 0, 0.25)'
65-
}}></div>
65+
}}/>
6666
</div>
6767
<div
68-
className='shadow-xl transform transition-all inline-block bg-white rounded-lg text-left flex flex-col px-5 py-2 w-full md:w-auto mx-0 md:mx-auto max-w-xl my-8'
68+
className='mx-auto shadow-xl transform transition-all inline-block bg-white rounded-lg text-left flex flex-col px-5 py-2 w-full md:w-auto mx-0 md:mx-auto max-w-xl my-8'
6969
role="dialog"
7070
aria-modal="true"
7171
aria-labelledby="modal-headline"

‎src/pages/docs.js

+29-23
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ import SearchBox from '../components/SearchBox'
1010

1111
const PageTile = ({ title, subtitle, image, link }) => (
1212
<Link to={link} colorClassName="text-black hover:text-qripink">
13-
<div className='bg-white shadow-md rounded-lg text-center p-8' style={{
13+
<div className='bg-white shadow-md rounded-lg text-center p-8 flex items-center justify-center sm:block' style={{
1414
boxShadow: '0px 0px 5px rgba(0, 0, 0, 0.15)'
1515
}}>
16-
<img src={image} className='mx-auto mb-4'/>
17-
<div className='font-bold text-3xl mb-2'>{title}</div>
18-
<div className='font-light text-qrigray-400'>{subtitle}</div>
16+
<img src={image} className='h-12 w-12 mr-5 sm:mx-auto sm:mb-4'/>
17+
<div>
18+
<div className='text-md font-bold mb-2 sm:text-3xl'>{title}</div>
19+
<div className='font-light text-sm text-qrigray-400 sm:text-md'>{subtitle}</div>
20+
</div>
1921
</div>
2022
</Link>
2123
)
@@ -56,26 +58,27 @@ const DocsPage = ({ onSearchClick, location }) => (
5658
description: 'Documentation for Qri Desktop and Qri CLI'
5759
}} />
5860
<div className='flex-grow flex-shrink-0'>
59-
<img src='/img/new-docs/yellow-aura.svg' className='absolute z-0'/>
61+
<img src='/img/new-docs/yellow-aura.svg' className='hidden sm:block absolute z-0 w-full'/>
62+
<img src='/img/new-docs/yellow-aura-mobile.svg' className='w-full block sm:hidden absolute z-0'/>
6063
<DocsHeader onSearchClick={onSearchClick} location={location} transparent sticky={false} border={false} />
6164
<div className='z-10 relative'>
6265
<div className='py-24 max-w-screen-lg mx-auto'>
6366
{/* Start Splash */}
6467
<div className='text-center relative'>
65-
<div className='absolute h-0'>
68+
<div className='absolute h-0 hidden md:block'>
6669
<img src='/img/new-docs/blob-green.svg' className='relative -bottom-4 -left-4'/>
6770
</div>
68-
<div className='font-black text-6xl text-qritile-600 mb-10 inline-block'>
71+
<div className='w-full px-5 font-black text-4xl text-qritile-600 mb-10 inline-block md:text-6xl sm:px-0 sm:w-auto'>
6972
<div className='mb-9'>
70-
<div className='absolute h-0'>
73+
<div className='absolute h-0 hidden md:block'>
7174
<img src='/img/new-docs/nodes-1.svg' className='relative -top-20 -left-16'/>
7275
</div>
7376
How can we <span className='text-qripink-600'>help</span> you?
7477
</div>
7578
<div onClick={onSearchClick} >
7679
<SearchBox size='lg' disabled/>
7780
</div>
78-
<div className='absolute h-0 bottom-20 -right-16'>
81+
<div className='absolute h-0 bottom-20 -right-16 hidden md:block'>
7982
<img src='/img/new-docs/blob-orange.svg'/>
8083
</div>
8184
</div>
@@ -84,26 +87,26 @@ const DocsPage = ({ onSearchClick, location }) => (
8487

8588
{/* Start Popular Pages Section */}
8689
<div className='text-center mb-20 relative'>
87-
<div className='text-xl font-bold'>Popular Pages</div>
90+
<div className='text-xl text-center font-bold'>Popular Pages</div>
8891
<div className='my-2 mx-auto'>
89-
<div className="flex flex-wrap -mx-6 overflow-hidden">
90-
<div className="my-3 px-6 py-3 w-1/3 overflow-hidden">
92+
<div className="w-full flex flex-wrap px-5 md:px-0 overflow-hidden">
93+
<div className="my-3 px-1 md:px-6 py-3 w-full md:w-1/3 overflow-hidden">
9194
<PageTile
9295
image='/img/new-docs/page-clock.svg'
9396
title='Quickstart'
9497
subtitle='Dive in and start making datasets'
9598
link='/docs/guides/transforms/scrape-data-from-a-website'
9699
/>
97100
</div>
98-
<div className="my-3 px-6 py-3 w-1/3 overflow-hidden">
101+
<div className="my-3 px-1 md:px-6 py-3 w-full md:w-1/3 overflow-hidden">
99102
<PageTile
100103
image='/img/new-docs/page-cloud.svg'
101104
title='What is Qri?'
102105
subtitle='Learn Qri Core Concepts and Terms'
103106
link='/docs/concepts/understanding-qri/what-is-qri'
104107
/>
105108
</div>
106-
<div className="my-3 px-6 py-3 w-1/3 overflow-hidden">
109+
<div className="my-3 px-1 md:px-6 py-3 w-full md:w-1/3 overflow-hidden">
107110
<PageTile
108111
image='/img/new-docs/page-reference.svg'
109112
title='Reference'
@@ -113,16 +116,16 @@ const DocsPage = ({ onSearchClick, location }) => (
113116
</div>
114117
</div>
115118
</div>
116-
<div className='absolute h-0 bottom-40 -right-36'>
119+
<div className='absolute h-0 bottom-40 -right-36 hidden md:block'>
117120
<img src='/img/new-docs/nodes-2.svg'/>
118121
</div>
119122
</div>
120123
{/* End Popular Pages Section */}
121124

122125
{/* Start Recommended Tutorials */}
123-
<div className='mx-auto relative'>
124-
<div className='w-1/2 mb-16'>
125-
<div className='font-bold text-4xl text-qritile-600 mb-4'>
126+
<div className='px-5 mx-auto relative lg:px-0'>
127+
<div className=' w-full mb-16 md:w-1/2'>
128+
<div className='font-bold text-3xl md:text-4xl text-qritile-600 mb-4'>
126129
Featured Docs
127130
</div>
128131
<div className='text-lg text-qrigray-1000'>
@@ -149,19 +152,22 @@ const DocsPage = ({ onSearchClick, location }) => (
149152
{/* End Recommended Tutorials */}
150153

151154
{/* Start Still Need Help? */}
152-
<div className='mx-auto py-32'>
153-
<div className='bg-qritile-600 rounded-lg flex text-white p-14'>
154-
<div className='w-3/5'>
155-
<div className='font-bold text-4xl mb-5'>Still have questions?</div>
155+
<div className='px-5 lg:px-0 mx-auto py-52'>
156+
<div className='bg-qritile-600 rounded-lg block text-center md:text-left md:flex text-white px-8 pt-10 pb-32 md:p-14'>
157+
<div className='w-full md:w-3/5'>
158+
<div className='font-bold text-3xl md:text-4xl mb-5'>Still have questions?</div>
156159
<div className='font-base text-lg mb-5'>If you need answers, come join our community chat on Discord. Our staff and other Qri users can help you get going!.</div>
157160
<Link to='https://discordapp.com/invite/thkJHKj'>
158161
<Button size='lg' type='secondary'>Come Hang Out!</Button>
159162
</Link>
160163
</div>
161164
<div className=''>
162-
<div className='absolute h-0'>
165+
<div className='absolute h-0 hidden md:block z-0'>
163166
<img src='/img/new-docs/docs-help.svg' className='relative -top-32 -left-16'/>
164167
</div>
168+
<div className='relative h-0 w-full block mx-auto md:hidden z-0'>
169+
<img src='/img/new-docs/docs-help.svg' className='absolute top-8 mx-auto'/>
170+
</div>
165171
</div>
166172
</div>
167173
</div>

0 commit comments

Comments
 (0)