-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
5. Get basic layout of the application set up
- Loading branch information
Showing
8 changed files
with
46 additions
and
229 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,38 +1,28 @@ | ||
.App { | ||
text-align: center; | ||
} | ||
|
||
.App-logo { | ||
height: 40vmin; | ||
pointer-events: none; | ||
.app { | ||
display: flex; | ||
flex-direction: column; | ||
height: 100%; | ||
overflow: hidden; | ||
background-color: var(--color-background-canvas); | ||
} | ||
|
||
@media (prefers-reduced-motion: no-preference) { | ||
.App-logo { | ||
animation: App-logo-spin infinite 20s linear; | ||
} | ||
.app__main { | ||
flex: 1 1 auto; | ||
overflow: hidden; | ||
} | ||
|
||
.App-header { | ||
background-color: #282c34; | ||
min-height: 100vh; | ||
.app__placeholder { | ||
height: 100%; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
font-size: calc(10px + 2vmin); | ||
color: white; | ||
} | ||
|
||
.App-link { | ||
color: #61dafb; | ||
align-items: center; | ||
text-align: center; | ||
padding: var(--padding); | ||
} | ||
|
||
@keyframes App-logo-spin { | ||
from { | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform: rotate(360deg); | ||
} | ||
.app__footer { | ||
flex: 0 0; | ||
padding: var(--padding); | ||
border-top: 1px solid var(--color-gray-3); | ||
background-color: var(--color-gray-1); | ||
} |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,20 @@ | ||
@import '~@pdftron/webviewer-react-toolkit/dist/css/style.css'; | ||
@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap'); | ||
|
||
html, | ||
body, | ||
#root { | ||
height: 100%; | ||
} | ||
|
||
html { | ||
background-color: var(--color-background-canvas); | ||
} | ||
|
||
body { | ||
margin: 0; | ||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | ||
sans-serif; | ||
font-family: Lato; | ||
color: var(--color-font-primary); | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
} | ||
|
||
code { | ||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', | ||
monospace; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
eb3a163
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Step 5 - Basic Layout of Application
First, we are going to set the worker path for CoreControls in
src/index.tsx
and remove the serviceWorker that is provided by default with Create React App (service workers can be useful, but we are removing it to simplify the demo).View the changes here.
We are going to fix the styling of
src/index.css
in order to make the app mobile-friendly and to add some of the CSS variables provided by the toolkit.View the changes here.
We can now overwrite the content of
src/App.tsx
to set up the basic content of the app. We are going to add some components from the toolkit, such as Button and ButtonGroup.View the changes here.
Now that the content of App is set up, we can style it by changing
src/App.css
. We will use some variables from the toolkit in order to keep styling consistent.View the changes here.
Finally, delete all the unused files that were generated by Create React App. These are
src/logo.svg
,src/serviceWorker.ts
andsrc/setupTests.ts
.