Skip to content

Commit

Permalink
Update sample and test suite styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@wojtekmaj
wojtekmaj committed Oct 12, 2023
1 parent e1e4635 commit 77022f6
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 187 deletions.
72 changes: 43 additions & 29 deletions sample/vite4/Sample.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,74 @@
body {
margin: 0;
background-color: #525659;
font-family:
Segoe UI,
Tahoma,
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

.Example input,
.Example button {
font: inherit;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}

.Example header {
background-color: #323639;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
padding: 20px;
color: white;
header {
background-color: #f6f8fa;
border-bottom: 1px solid #d0d7de;
padding: 1rem;
position: sticky;
top: 0;
z-index: 10;
}

.Example header h1 {
font-size: inherit;
header h1 {
font-size: 1rem;
margin: 0;
}

.Example__container {
main {
padding: 2rem 1rem;
}

input,
button {
font: inherit;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

main {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 0;
padding: 10px;
gap: 2rem;
}

.Example__container__load {
margin-top: 1em;
color: white;
.load {
}

.Example__container__document {
.document {
width: 100%;
max-width: calc(100% - 2em);
margin: 1em 0;
max-width: 100%;
}

.Example__container__document .react-pdf__Document {
.document .react-pdf__Document {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}

.Example__container__document .react-pdf__Page {
margin: 1em 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
.document .react-pdf__Page {
border: 1px solid #d0d7de;
}

.Example__container__document .react-pdf__message {
.document .react-pdf__message {
padding: 20px;
color: white;
}
40 changes: 21 additions & 19 deletions sample/vite4/Sample.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type PDFFile = string | File | null;

export default function Sample() {
const [file, setFile] = useState<PDFFile>('./sample.pdf');
const [numPages, setNumPages] = useState<number>();
const [numPages, setNumPages] = useState<number>(0);
const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
const [containerWidth, setContainerWidth] = useState<number>();

Expand All @@ -53,27 +53,29 @@ export default function Sample() {
}

return (
<div className="Example">
<>
<header>
<h1>react-pdf sample page</h1>
</header>
<div className="Example__container">
<div className="Example__container__load">
<label htmlFor="file">Load from file:</label>{' '}
<input onChange={onFileChange} type="file" />
</div>
<div className="Example__container__document" ref={setContainerRef}>
<Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
{Array.from(new Array(numPages), (el, index) => (
<Page
key={`page_${index + 1}`}
pageNumber={index + 1}
width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
/>
))}
</Document>
</div>
<div className="container">
<main>
<div className="load">
<label htmlFor="file">Load from file:</label>{' '}
<input id="file" onChange={onFileChange} type="file" accept="application/pdf" />
</div>
<div className="document" ref={setContainerRef}>
<Document file={file} onLoadSuccess={onDocumentLoadSuccess} options={options}>
{Array.from({ length: numPages }, (_, index) => (
<Page
key={`page_${index + 1}`}
pageNumber={index + 1}
width={containerWidth ? Math.min(containerWidth, maxWidth) : maxWidth}
/>
))}
</Document>
</div>
</main>
</div>
</div>
</>
);
}
180 changes: 47 additions & 133 deletions test/Test.css
View file
Original file line number Diff line number Diff line change
@@ -1,165 +1,79 @@
body {
margin: 0;
font-family:
Segoe UI,
Tahoma,
sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial,
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

.Test header {
background-color: #323639;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
padding: 20px;
color: white;
}

.Test header h1 {
font-size: inherit;
margin: 0;
}

.Test__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
margin: 10px 0;
padding: 10px;
}

.Test__container > * > * {
margin: 10px;
}

.Test__container__options {
display: flex;
flex-basis: 400px;
flex-grow: 1;
flex-wrap: wrap;
margin: 0;
}

.Test__container__options input,
.Test__container__options button {
font: inherit;
}

.Test__container__options fieldset {
border: 1px solid black;
flex-grow: 1;
position: relative;
top: -10px;
}

.Test__container__options fieldset legend {
font-weight: 600;
}

.Test__container__options fieldset legend + * {
margin-top: 0 !important;
}

.Test__container__options fieldset label {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
display: block;
}

.Test__container__options fieldset label:not(:first-of-type) {
margin-top: 1em;
header {
background-color: #f6f8fa;
border-bottom: 1px solid #d0d7de;
padding: 1rem;
position: sticky;
top: 0;
z-index: 10;
}

.Test__container__options fieldset input[type='checkbox'] + label,
.Test__container__options fieldset input[type='radio'] + label {
font-weight: normal;
display: inline-block;
header h1 {
font-size: 1rem;
margin: 0;
}

.Test__container__options fieldset form:not(:first-child),
.Test__container__options fieldset div:not(:first-child) {
margin-top: 1em;
main {
padding: 2rem 1rem;
}

.Test__container__options fieldset form:not(:last-child),
.Test__container__options fieldset div:not(:last-child) {
margin-bottom: 1em;
input,
button {
font: inherit;
}

.Test__container__content {
.container {
display: flex;
max-width: 100%;
flex-basis: 420px;
flex-direction: column;
flex-grow: 100;
align-items: stretch;
}

.Test__container__content__toc {
max-width: 100%;
max-height: 16vh;
margin-bottom: 20px;
border: 1px solid black;
overflow: auto;
flex-wrap: wrap;
gap: 1rem;
}

.Test__container__content__toc .react-pdf__message {
padding: 20px;
aside {
flex-basis: 400px;
}

.Test__container__content__document {
max-width: 100%;
max-height: 55vh;
aside {
padding: 1rem;
border-right: 1px solid #d0d7de;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
background-color: #525659;
overflow: auto;
}

.Test__container__content__document .react-pdf__Page {
max-width: calc(100% - 2em);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
margin: 1em;
gap: 1rem;
}

.Test__container__content__document .react-pdf__Page__textContent mark {
opacity: 0.5;
background: #ff0;
box-shadow: 0px 2px 10px #ff0;
color: transparent;
white-space: pre;
}

.Test__container__content__document .react-pdf__message {
padding: 20px;
color: white;
}

.Test__container__content__controls {
max-width: 100%;
aside fieldset {
margin: 0;
padding: 0;
border: none;
display: flex;
margin-top: 1em;
align-self: center;
}

.Test__container__content__controls span {
flex-grow: 1;
margin: 0 1em;
text-align: center;
flex-direction: column;
gap: 1rem;
}

.Test__container__content__controls button {
width: 80px;
aside fieldset legend {
width: 100%;
padding: 0;
font-size: 1.1rem;
font-weight: 500;
float: left;
}

.Test__container__content__thumbnails {
main {
display: flex;
margin-top: 1em;
gap: 1em;
overflow: auto;
}

.Test__container__content__thumbnails .react-pdf__Thumbnail {
border: 1px solid black;
flex-direction: column;
align-items: center;
gap: 2rem;
}
8 changes: 4 additions & 4 deletions test/Test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,12 +233,12 @@ export default function Test() {
};

return (
<div className="Test">
<>
<header>
<h1>react-pdf test page</h1>
</header>
<div className="Test__container">
<aside className="Test__container__options">
<div className="container">
<aside>
<LoadingOptions file={file} setFile={setFile} setRender={setRender} />
<PassingOptions file={file} passMethod={passMethod} setPassMethod={setPassMethod} />
<LayerOptions
Expand Down Expand Up @@ -337,6 +337,6 @@ export default function Test() {
</Document>
</main>
</div>
</div>
</>
);
}
Loading

0 comments on commit 77022f6

Please sign in to comment.