smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial support for mobile devices (#787)

Browse source 
* Initial support for mobile devices

No editing yet, but UI looks nice and you can open the canvas menu

* Add support for editing shape color, etc

* Allow the mobile menus to cover the shape selector

* Hopefully fix test error

* Fix touch on canvas

* Fix safe area handling & remove unused Island
This commit is contained in:
Jed Fox 2020-02-20 18:44:38 -05:00 • committed by GitHub
parent 9439908b92
commit 7a7a73b78d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 358 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/styles.scss
View file

@ -2,11 +2,16 @@
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
--ui-font: Arial, Helvetica, sans-serif;
font-family: var(--ui-font);
color: var(--text-color-primary);
-webkit-text-size-adjust: 100%;
}
canvas {
touch-action: none;
user-select: none;
// following props improve blurriness at certain devicePixelRatios.
// AFAIK it doesn't affect export (in fact, export seems sharp either way).
@ -24,6 +29,11 @@ canvas {
right: 0;
}
.panelRow {
display: flex;
justify-content: space-between;
}
.panelColumn {
display: flex;
flex-direction: column;
@ -91,6 +101,7 @@ input:focus {
button,
.buttonList label {
user-select: none;
background-color: #e9ecef;
border: 0;
border-radius: 4px;
@ -128,6 +139,47 @@ button,
}
}
.App-toolbar {
padding: var(--spacing);
padding-bottom: #{"max(var(--spacing), env(safe-area-inset-bottom))"};
padding-left: #{"max(var(--spacing), env(safe-area-inset-left))"};
padding-right: #{"max(var(--spacing), env(safe-area-inset-right))"};
width: 100%;
box-sizing: border-box;
overflow: auto;
position: absolute;
bottom: 0;
}
.App-toolbar-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.App-toolbar,
.App-mobile-menu {
--spacing: 0.5rem;
background: #fcfcfc;
border-top: 1px solid #ccc;
}
.App-mobile-menu {
--bottom: calc(3rem - 1px + max(var(--spacing), env(safe-area-inset-bottom)));
display: grid;
position: fixed;
width: 100%;
bottom: var(--bottom);
z-index: 4;
max-height: calc(100% - var(--bottom));
overflow-y: scroll;
}
.App-mobile-menu .App-mobile-menu-scroller {
background: #fcfcfc;
box-shadow: none;
--padding: calc(4 * var(--space-factor));
padding: var(--padding);
padding-left: #{"max(var(--padding), env(safe-area-inset-left))"};
padding-right: #{"max(var(--padding), env(safe-area-inset-right))"};
}
.App-menu {
display: grid;
}
@ -303,3 +355,13 @@ button,
transform: translateX(-50%);
padding: 10px 20px;
}
@media (max-width: 600px), (max-height: 500px) {
aside {
display: none;
}
.scroll-back-to-content {
bottom: 70px;
bottom: calc(70px + env(safe-area-inset-bottom));
}
}