mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-12-18 20:04:17 +01:00
Tighten landing page file picker layout
This commit is contained in:
Anthony Stirling
parent
d854497266
commit
b1443fb0da
83
frontend/src/components/shared/LandingPage.css
Normal file
83
frontend/src/components/shared/LandingPage.css
Normal file
@ -0,0 +1,83 @@
|
||||
.landing-dropzone {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: min(54rem, 88vw);
|
||||
height: 95%;
|
||||
border-radius: 0.25rem 0.25rem 0 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
filter: var(--drop-shadow-filter);
|
||||
background-color: var(--landing-paper-bg);
|
||||
transition: background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.landing-dropzone__sheet {
|
||||
position: relative;
|
||||
width: min(100%, 32rem);
|
||||
margin: 0 auto;
|
||||
padding: clamp(1.75rem, 4vw, 2.5rem);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--landing-inner-paper-border);
|
||||
background-color: var(--landing-inner-paper-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: clamp(1rem, 2.5vw, 1.5rem);
|
||||
min-height: clamp(24rem, 45vh, 32rem);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.landing-dropzone__badge {
|
||||
position: absolute;
|
||||
top: clamp(0.75rem, 2vw, 1.25rem);
|
||||
right: clamp(0.75rem, 2vw, 1.25rem);
|
||||
height: clamp(2rem, 4vw, 2.5rem);
|
||||
width: auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.landing-dropzone__body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: clamp(1rem, 2.5vw, 1.5rem);
|
||||
}
|
||||
|
||||
.landing-dropzone__brand {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.landing-dropzone__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.6rem;
|
||||
width: 100%;
|
||||
max-width: 20rem;
|
||||
margin: clamp(0.5rem, 2vw, 0.9rem) auto;
|
||||
}
|
||||
|
||||
.landing-dropzone__hint {
|
||||
font-size: 0.8rem;
|
||||
color: var(--accent-interactive);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.landing-dropzone {
|
||||
width: min(95vw, 32rem);
|
||||
}
|
||||
|
||||
.landing-dropzone__sheet {
|
||||
padding: clamp(1.5rem, 6vw, 2rem);
|
||||
min-height: clamp(22rem, 55vh, 30rem);
|
||||
}
|
||||
|
||||
.landing-dropzone__actions {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,8 @@ import { useFileHandler } from '../../hooks/useFileHandler';
|
||||
import { useFilesModalContext } from '../../contexts/FilesModalContext';
|
||||
import { BASE_PATH } from '../../constants/app';
|
||||
|
||||
import './LandingPage.css';
|
||||
|
||||
const LandingPage = () => {
|
||||
const { addFiles } = useFileHandler();
|
||||
const fileInputRef = React.useRef<HTMLInputElement>(null);
|
||||
@ -43,17 +45,7 @@ const LandingPage = () => {
|
||||
onDrop={handleFileDrop}
|
||||
accept={["application/pdf", "application/zip", "application/x-zip-compressed"]}
|
||||
multiple={true}
|
||||
className="w-4/5 flex items-center justify-center h-[95%]"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: '50%',
|
||||
transform: 'translateX(-50%)',
|
||||
bottom: 0,
|
||||
borderRadius: '0.25rem 0.25rem 0 0',
|
||||
filter: 'var(--drop-shadow-filter)',
|
||||
backgroundColor: 'var(--landing-paper-bg)',
|
||||
transition: 'background-color 0.4s ease',
|
||||
}}
|
||||
className="landing-dropzone"
|
||||
activateOnClick={false}
|
||||
styles={{
|
||||
root: {
|
||||
@ -63,41 +55,18 @@ const LandingPage = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
|
||||
}}
|
||||
>
|
||||
<div className="landing-dropzone__sheet dropzone-inner">
|
||||
<img
|
||||
className="landing-dropzone__badge"
|
||||
src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg` : `${BASE_PATH}/branding/StirlingPDFLogoNoTextLight.svg`}
|
||||
alt="Stirling PDF Logo"
|
||||
style={{
|
||||
height: 'auto',
|
||||
pointerEvents: 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
|
||||
style={{
|
||||
borderRadius: '0.5rem',
|
||||
backgroundColor: 'var(--landing-inner-paper-bg)',
|
||||
borderColor: 'var(--landing-inner-paper-border)',
|
||||
borderWidth: '1px',
|
||||
borderStyle: 'solid',
|
||||
}}
|
||||
>
|
||||
{/* Logo positioned absolutely in top right corner */}
|
||||
|
||||
|
||||
{/* Centered content container */}
|
||||
<div className="flex flex-col items-center gap-4 flex-none w-full">
|
||||
<div className="landing-dropzone__body">
|
||||
{/* Stirling PDF Branding */}
|
||||
<Group gap="xs" align="center">
|
||||
<Group gap="xs" align="center" className="landing-dropzone__brand">
|
||||
<img
|
||||
src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
|
||||
alt="Stirling PDF"
|
||||
@ -107,15 +76,7 @@ const LandingPage = () => {
|
||||
|
||||
{/* Add Files + Native Upload Buttons */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '0.6rem',
|
||||
width: '80%',
|
||||
marginTop: '0.8rem',
|
||||
marginBottom: '0.8rem'
|
||||
}}
|
||||
className="landing-dropzone__actions"
|
||||
onMouseLeave={() => setIsUploadHover(false)}
|
||||
>
|
||||
<Button
|
||||
@ -152,7 +113,7 @@ const LandingPage = () => {
|
||||
border: '1px solid var(--landing-button-border)',
|
||||
borderRadius: '1rem',
|
||||
height: '38px',
|
||||
width: isUploadHover ? 'calc(100% - 50px)' : '58px',
|
||||
width: isUploadHover ? 'calc(100% - 58px - 0.6rem)' : '58px',
|
||||
minWidth: '58px',
|
||||
paddingLeft: isUploadHover ? '1rem' : 0,
|
||||
paddingRight: isUploadHover ? '1rem' : 0,
|
||||
@ -187,8 +148,7 @@ const LandingPage = () => {
|
||||
|
||||
{/* Instruction Text */}
|
||||
<span
|
||||
className="text-[var(--accent-interactive)]"
|
||||
style={{ fontSize: '.8rem' }}
|
||||
className="landing-dropzone__hint"
|
||||
>
|
||||
{t('fileUpload.dropFilesHere', 'Drop files here or click the upload button')}
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user