sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make container fullscreen (#117)

Browse Source 
make container fullscreen
This commit is contained in:
David Luzar 2020-01-04 19:17:17 +01:00 committed by GitHub
commit dcf252f03c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 1051 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

936
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -20,6 +20,7 @@
"@types/react-dom": "16.9.4", "@types/react-dom": "16.9.4",
"husky": "3.1.0", "husky": "3.1.0",
"lint-staged": "9.5.0", "lint-staged": "9.5.0",
"node-sass": "^4.13.0",
"prettier": "1.19.1", "prettier": "1.19.1",
"typescript": "3.7.4" "typescript": "3.7.4"
}, },

2
src/index.tsx
View File

@ -13,7 +13,7 @@ import {
import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex"; import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
import "./styles.css"; import "./styles.scss";
type ExcalidrawElement = ReturnType<typeof newElement>; type ExcalidrawElement = ReturnType<typeof newElement>;
type ExcalidrawTextElement = ExcalidrawElement & { type ExcalidrawTextElement = ExcalidrawElement & {

102
src/styles.css
View File

@ -1,102 +0,0 @@
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
font-family: "Virgil";
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
font-display: swap;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
}
.sidePanel {
width: 230px;
background-color: #eee;
padding: 10px;
}
.sidePanel h4 {
margin: 10px 0 10px 0;
}
.sidePanel .panelTools {
display: flex;
}
.sidePanel .panelColumn {
display: flex;
flex-direction: column;
}
.tool input[type="radio"] {
display: none;
}
.tool input[type="radio"] + .toolIcon {
background-color: #ddd;
width: 41px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.tool input[type="radio"]:hover + .toolIcon {
background-color: #e7e5e5;
}
.tool input[type="radio"]:checked + .toolIcon {
background-color: #bdbebc;
}
label {
margin-right: 6px;
}
label span {
display: inline-block;
}
input[type="number"] {
width: 30px;
}
input[type="color"] {
margin: 2px;
}
input {
margin-right: 5px;
}
button {
background-color: #ddd;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2px 0;
padding: 5px;
outline: none;
}
button:hover {
background-color: #e7e5e5;
border-color: #d6d4d4;
}
button:active {
background-color: #bdbebc;
border-color: #bdbebc;
}
button:disabled {
cursor: not-allowed;
}

115
src/styles.scss Normal file
View File

@ -0,0 +1,115 @@
/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
@font-face {
font-family: "Virgil";
src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
font-display: swap;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sidePanel {
width: 230px;
background-color: #eee;
padding: 10px;
overflow-y: auto;
h4 {
margin: 10px 0 10px 0;
}
.panelTools {
display: flex;
justify-content: space-between;
label {
margin: 0;
}
}
.panelColumn {
display: flex;
flex-direction: column;
}
}
.tool {
input[type="radio"] {
display: none;
}
input[type="radio"] {
& + .toolIcon {
background-color: #ddd;
width: 41px;
height: 41px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
&:hover + .toolIcon {
background-color: #e7e5e5;
}
&:checked + .toolIcon {
background-color: #bdbebc;
}
}
}
label {
margin-right: 6px;
span {
display: inline-block;
}
}
input[type="number"] {
width: 30px;
}
input[type="color"] {
margin: 2px;
}
input {
margin-right: 5px;
}
button {
background-color: #ddd;
border: 1px solid #ccc;
border-radius: 4px;
margin: 2px 0;
padding: 5px;
outline: none;
&:hover {
background-color: #e7e5e5;
border-color: #d6d4d4;
}
&:active {
background-color: #bdbebc;
border-color: #bdbebc;
}
&:disabled {
cursor: not-allowed;
}
}