PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added mobile view

Browse source
This commit is contained in:
Patrick Alvin Alcala 2025-10-06 15:59:36 +08:00
parent 721dce1622
commit b77686beac
2 changed files with 72 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/pages/IndexPage/Index.sass
View file

@ -19,14 +19,37 @@ h1
align-content: flex-start align-content: flex-start
gap: 0.5rem gap: 0.5rem
@media only screen and (max-width: views.$tablet)
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: center
align-items: center
align-content: flex-start
text-align: center
gap: 0.5rem
&__main &__main
font-size: 3.25rem font-size: 3.25rem
margin: 0 1rem 0 0 margin: 0 1rem 0 0
@media only screen and (max-width: views.$tablet)
padding: 2rem 0 0 0
font-size: 2.25rem
margin: 0 1rem 0 0
&__sub &__sub
font-weight: 700 font-weight: 700
font-size: 2.75rem font-size: 2.75rem
@media only screen and (max-width: views.$tablet)
font-weight: 700
font-size: 1.75rem
&__paragraph &__paragraph
padding: 4rem 0 0 0 padding: 4rem 0 0 0
font-size: 1.25rem font-size: 1.25rem
@media only screen and (max-width: views.$tablet)
padding: 3.25rem 0 0 0
font-size: 1rem

62
src/pages/IndexPage/Index.tsx
View file

@ -75,25 +75,61 @@ export default () => {
</Column> </Column>
</Row> </Row>
</Display> </Display>
<Display mobile>
<Row>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
<section class="title">
<h1 class="title__main">Secure e-Signature</h1>
<span class="title__sub">for Office of the City Building Official</span>
<p class="title__paragraph">A paperless and effortless solution on signing permits</p>
</section>
<Column gap={0.5}>
<Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
<Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
</Column>
</Row>
</Display>
</Padding> </Padding>
<Footer> <Display desktop tablet>
<Row content="split"> <Footer>
<Row gap={0.5}> <Row content="split">
<Image avif={ocboAvif} webp={ocboWebp} size={30}></Image> <Row gap={0.5}>
<Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
<Row gap={0.25}>
<Copyright year="2025" name="Office of the City Building Official" />
<span>Davao City, Philippines</span>
</Row>
</Row>
<Row gap={0.25}> <Row gap={0.25}>
<Copyright year="2025" name="Office of the City Building Official" /> <span>Developed by:</span>
<span>Davao City, Philippines</span> <Image avif={patAvif} webp={patWebp} size={90}></Image>
<span>Pat Alcala</span>
</Row> </Row>
</Row> </Row>
</Footer>
</Display>
<Row gap={0.25}> <Display mobile>
<span>Developed by:</span> <Footer>
<Image avif={patAvif} webp={patWebp} size={90}></Image> <Column>
<span>Pat Alcala</span> <Column gap={0.25}>
</Row> <Copyright year="2025" name="Office of the City Building Official" />
</Row> <span>Davao City, Philippines</span>
</Footer>
<Row gap={0.25}>
<span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
<span>Pat Alcala</span>
</Row>
</Column>
</Column>
</Footer>
</Display>
</Page> </Page>
</> </>
) )