Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-11 23:31:21 -05:00
Code Issues Activity

🐛 Fix header z-index in viewer mode fullscreen

Browse source
This commit is contained in:
Eva 2022-01-26 08:49:57 +01:00 • committed by Andrés Moya
parent f6cf8d2b1b
commit 7ac2a55315
4 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/resources/styles/main/layouts/handoff.scss
View file

@ -18,13 +18,14 @@ $width-settings-bar: 16rem;
} }
} }
.fullscreen .handoff-layout:not(.force-visible) { .fullscreen.handoff-layout:not(.force-visible) {
.viewer-header { .viewer-header {
width: 100%; width: 100%;
position: fixed; position: fixed;
top: -48px; top: -48px;
left: 0; left: 0;
transition: top 400ms ease 300ms; transition: top 400ms ease 300ms;
z-index: 25;
&::after { &::after {
content: " "; content: " ";
@ -49,7 +50,14 @@ $width-settings-bar: 16rem;
.handoff-layout { .handoff-layout {
.viewer-section { .viewer-section {
flex-wrap: nowrap; flex-wrap: nowrap;
&.fullscreen{
.settings-bar,
.settings-bar {
padding-top:48px;
}
}
} }
.settings-bar { .settings-bar {
transition: width 0.2s; transition: width 0.2s;
&.expanded { &.expanded {
@ -78,7 +86,7 @@ $width-settings-bar: 16rem;
.handoff-svg-container { .handoff-svg-container {
display: grid; display: grid;
width: 100%; width: 100%;
height: calc(100% - 35px); height: 100%;
overflow: auto; overflow: auto;
align-items: center; align-items: center;
justify-content: safe center; justify-content: safe center;

2
frontend/resources/styles/main/layouts/viewer.scss
View file

@ -22,7 +22,7 @@
top: -48px; top: -48px;
left: 0; left: 0;
transition: top 400ms ease 300ms; transition: top 400ms ease 300ms;
z-index: 1;
&::after { &::after {
content: " "; content: " ";
position: absolute; position: absolute;

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

@ -8,7 +8,9 @@
.viewer-section { .viewer-section {
height: calc(100vh - 48px); height: calc(100vh - 48px);
&.fullscreen{
height: 100vh;
}
grid-row: 1 / span 2; grid-row: 1 / span 2;
grid-column: 1 / span 1; grid-column: 1 / span 1;

3
frontend/src/app/main/ui/viewer.cljs
View file

@ -234,7 +234,8 @@
:show? (:show-thumbnails local false) :show? (:show-thumbnails local false)
:page page :page page
:index index}] :index index}]
[:section.viewer-section {:id "viewer-section"} [:section.viewer-section {:id "viewer-section"
:class (if fullscreen? "fullscreen" "")}
(cond (cond
(empty? frames) (empty? frames)
[:section.empty-state [:section.empty-state