mirrors/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2025-12-23 10:11:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fix floating menu positioning behavior when web page has scrollbars (#263) (#341)

Browse source 
* Fix color picker position on scrolled window

* Robust fix with proper usage of CSS stacking contexts

* Fix mobile device scaling

Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
0HyperCube 2021-08-12 00:56:18 +01:00 • committed by GitHub
parent 9cd6d57337
commit 02fd00da10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/public/index.html
View file

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=1366, initial-scale=1">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

6
frontend/src/components/window/MainWindow.vue
View file

@ -14,8 +14,10 @@
<style lang="scss">
.main-window {
height: 100%;
overflow: auto;
min-height: 100%;
// Creates a new stacking context for the app UI so that floating menus (which use `position: fixed` to leave their spawner element's stacking context) have an app-centric stacking context
// Without this, floating menus would default to the web page's stacking context, which causes the floating menus to stay fixed when the page is scrolled and get offset from the app UI
transform: translate(0, 0);
}
.title-bar-row {

5
frontend/src/components/workspace/Workspace.vue
View file

@ -24,6 +24,7 @@
<style lang="scss">
.workspace-grid-subdivision {
min-height: 28px;
min-width: 0;
flex: 1 1 0;
&.folded {
@ -33,13 +34,15 @@
}
.workspace-grid-resize-gutter {
flex: 0 0 4px;
flex: 0 0 auto;
&.layout-row {
height: 4px;
cursor: ns-resize;
}
&.layout-col {
width: 4px;
cursor: ew-resize;
}
}