tomru/pdfer
1
0
Fork 0
mirror of https://github.com/tomru/pdfer.git synced 2026-03-03 06:27:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

more styling

Browse Source
This commit is contained in:
Thomas Ruoff
2021-02-28 23:28:05 +01:00
parent fcb453b243
commit 0aaccf6966
7 changed files with 53 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/App.tsx
View File

@@ -7,8 +7,6 @@ import { generatePdf, getLatest, removeLatest } from './apiHelper'
import { ILatest } from '../interfaces/ILatest' import { ILatest } from '../interfaces/ILatest'
import { IDocProps } from '../interfaces/IDocProps' import { IDocProps } from '../interfaces/IDocProps'
//import './App.css';
export default function App() { export default function App() {
const [options, setOptions] = useState<IDocProps>({ const [options, setOptions] = useState<IDocProps>({
address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt', address: 'Max Mustermann\nMusterstrasse\n12345 Musterstadt',
@@ -79,20 +77,16 @@ export default function App() {
} }
return ( return (
<div className="flex flex-col space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100"> <div className="flex space-x-5 py-3 sm:px-2 lg:px-3 bg-gray-100">
<div className="flex space-x-5"> <div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden">
<div className=" flex-grow flex flex-col shadow sm:rounded-md sm:overflow-hidden"> <LetterOptions onChange={_onChange} {...options} />
<LetterOptions onChange={_onChange} {...options} /> <div className="flex space-x-3 p-3">
<div className="flex space-x-3 p-3"> <Button onClick={_onGenerate}>PDF Erstellen</Button>
<Button onClick={_onGenerate}>PDF Erstellen</Button> <Button onClick={_onClear}>Alles Löschen</Button>
<Button onClick={_onClear}>Alles Löschen</Button>
</div>
</div> </div>
<LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
</div>
<div className="flex flex-col space-y-5">
<Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} /> <Preview pdfUrl={pdfUrl} pdfIsLoading={pdfIsLoading} pdfError={pdfError} />
</div> </div>
<LatestList latest={latest} onSelect={_onSelectLatest} onRemove={_onRemoveLatest} />
</div> </div>
) )
} }

2
components/Button.tsx
View File

@@ -11,7 +11,7 @@ export default function Button({
<button <button
type="button" type="button"
onClick={onClick} onClick={onClick}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" className="inline-flex items-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
> >
{children} {children}
</button> </button>

6
components/Input.tsx
View File

@@ -15,14 +15,14 @@ export default function Input({
}) { }) {
return ( return (
<> <>
<label htmlFor={name} className="block text-sm font-medium text-gray-700"> <label htmlFor={name} className="pb-label">
{text} {text}
</label> </label>
<div className="mt-1 flex rounded-md shadow-sm"> <div className="pb-input_wrapper">
<input <input
type="text" type="text"
name={name} name={name}
className="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300" className="pb-input"
placeholder={placeholder} placeholder={placeholder}
value={value} value={value}
onChange={onchange.bind(null, name)} onChange={onchange.bind(null, name)}

25
components/LatestList.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react' import React from 'react'
import { ILatest } from '../interfaces/ILatest' import { ILatest } from '../interfaces/ILatest'
import Button from './Button'
export default function LatestList({ export default function LatestList({
latest, latest,
@@ -19,19 +18,29 @@ export default function LatestList({
const subject = item.subject const subject = item.subject
const hrefId = `#item-${item.id}` const hrefId = `#item-${item.id}`
return ( return (
<li key={item.id}> <li key={item.id} className="flex flex-col">
<a href={hrefId} onClick={() => onSelect(item)}> <hr className="border-gray-200 mt-3 mb-4" />
<div>{subject}</div> <div className="flex flex-row items-center">
<div>{created.toLocaleDateString()}</div> <a href={hrefId} onClick={() => onSelect(item)}>
</a> <div className="text-base">{subject}</div>
<Button onClick={() => onRemove(item)}>Remove</Button> <div className="text-sm">{created.toLocaleString()}</div>
</a>
<a
className="m-2 text-gray-400 hover:text-gray-600 cursor-pointer"
onClick={() => onRemove(item)}
href="#"
title="Löschen"
>
❌
</a>
</div>
</li> </li>
) )
}) })
return ( return (
<div> <div>
<h4>Vergangene Briefe:</h4> <h4 className="text-lg mb-4">Vergangene Briefe:</h4>
<ul>{latestElements}</ul> <ul>{latestElements}</ul>
</div> </div>
) )

9
components/Select.tsx
View File

@@ -15,15 +15,10 @@ export default function Select({
}) { }) {
return ( return (
<> <>
<label htmlFor={name} className="block text-sm font-medium text-gray-700"> <label htmlFor={name} className="pb-label">
{text} {text}
</label> </label>
<select <select name={name} className="pb-select" onChange={onchange.bind(null, name)} value={value}>
name={name}
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
onChange={onchange.bind(null, name)}
value={value}
>
{options.map((option) => ( {options.map((option) => (
<option value={option.value} key={option.value}> <option value={option.value} key={option.value}>
{option.name} {option.name}

4
components/TextAreaInput.tsx
View File

@@ -17,7 +17,7 @@ export default function TextAreaInput({
}) { }) {
return ( return (
<> <>
<label htmlFor={name} className="block text-sm font-medium text-gray-700"> <label htmlFor={name} className="pb-label">
{text} {text}
</label> </label>
<div className="mt-1"> <div className="mt-1">
@@ -25,7 +25,7 @@ export default function TextAreaInput({
id="about" id="about"
name="about" name="about"
rows={10} rows={10}
className={`shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md ${styles}`} className={`pb-textarea ${styles}`}
placeholder={placeholder} placeholder={placeholder}
onChange={onchange.bind(null, name)} onChange={onchange.bind(null, name)}
value={value} value={value}

21
styles/index.css
View File

@@ -2,6 +2,26 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.pb-label {
@apply block text-sm font-medium text-gray-700;
}
.pb-textarea {
@apply shadow-sm focus:ring-indigo-500 focus:border-indigo-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md;
}
.pb-select {
@apply mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
}
.pb-input_wrapper {
@apply mt-1 flex rounded-md shadow-sm;
}
.pb-input {
@apply focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-md sm:text-sm border-gray-300;
}
.Collapsible { .Collapsible {
background-color: #ddd; background-color: #ddd;
border-radius: 2px; border-radius: 2px;
@@ -31,4 +51,5 @@
background-color: #fff; background-color: #fff;
padding-top: 12px; padding-top: 12px;
padding-left: 12px; padding-left: 12px;
padding-right: 2px;
} }