Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

🐛 Fix viewport size when collapsing sidebar

Browse source
This commit is contained in:
Andrés Moya 2020-06-09 08:15:41 +02:00 • committed by Andrey Antukh
parent 006bacfef0
commit 5f373df569
5 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/resources/styles/main/partials/left-toolbar.scss
View file

@ -5,13 +5,15 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-left-toolbar: 40px;
.left-toolbar {
background-color: $color-gray-50;
bottom: 0;
height: 100%;
position: fixed;
left: 0;
width: 40px;
width: $width-left-toolbar;
z-index: 11;
}
@ -76,4 +78,4 @@
}

4
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -5,6 +5,8 @@
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>
$width-settings-bar: 15rem;
.settings-bar {
background-color: $color-gray-50;
border-left: 1px solid $color-gray-60;
@ -12,7 +14,7 @@
height: 100%;
position: fixed;
right: 0;
width: 15rem;
width: $width-settings-bar;
z-index: 10;
&.settings-bar-left {

15
frontend/resources/styles/main/partials/workspace.scss
View file

@ -25,7 +25,6 @@
display: flex;
justify-content: space-between;
&.separator {
border-top: 1px solid $color-gray-10;
padding: 0px;
@ -61,19 +60,18 @@
background-color: $color-canvas;
display: flex;
height: 100%;
width: calc(100% - 520px);
width: calc(100% - #{$width-left-toolbar} - 2 * #{$width-settings-bar});
padding: 0;
margin: 0;
position: fixed;
right: 240px;
right: $width-settings-bar;
&.scrolling {
cursor: grab;
}
&.no-tool-bar-right {
padding-right: 0;
width: calc(100% - 230px);
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
right: 0;
.coordinates {
@ -82,8 +80,7 @@
}
&.no-tool-bar-left {
padding-left: 0;
width: calc(100% - 230px);
width: calc(100% - #{$width-left-toolbar} - #{$width-settings-bar});
&.no-tool-bar-right {
width: 100%;
@ -96,7 +93,7 @@
bottom: -10px;
padding-left: 5px;
position: fixed;
right: 248px;
right: calc(#{$width-settings-bar} + 10px);
text-align: center;
width: 100px;
padding-bottom: 2px;
@ -201,8 +198,6 @@
fill: $color-primary-dark;
}
.multiuser-cursor {
align-items: center;
display: flex;

2
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -40,7 +40,7 @@
[{:keys [page file layout project] :as params}]
(let [left-sidebar? (not (empty? (keep layout [:layers :sitemap
:document-history :libraries])))
right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options])))
right-sidebar? (not (empty? (keep layout [:icons :element-options])))
classes (classnames
:no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?))

4
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -393,10 +393,10 @@
(events/unlistenByKey key5)
)))
options (mf/deref refs/workspace-page-options)
]
options (mf/deref refs/workspace-page-options)]
(mf/use-effect on-mount)
(mf/use-effect (mf/deps layout) on-resize)
[:svg.viewport
{:preserveAspectRatio "xMidYMid meet"