jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

* 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 Keavon Chambers
parent 6c14c5e04e
commit 18091dd3cd
3 changed files with 9 additions and 4 deletions
Show Stats 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;
}
}