Feat: auto hiding headerbar in preview to enlarge the preview window #3024
Conversation
| /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */ | ||
| #previewer .preview { | ||
| height: calc(100% - 4em) !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
We don't need to use 100vh in style.css anymore, so just delete this one.
| @@ -153,7 +153,6 @@ main .spinner .bounce2 { | |||
|
|
|||
| #previewer { | |||
| background-color: rgba(0, 0, 0, 0.99); | |||
| padding-top: 4em; | |||
There was a problem hiding this comment.
to enlarge the preview box, we don't need padding top any more.
| @@ -166,15 +165,25 @@ main .spinner .bounce2 { | |||
| #previewer header { | |||
| background: none; | |||
| color: #fff; | |||
| border-bottom: 0px; | |||
| box-shadow: 0px 0px 0px; | |||
| z-index: 19999; | |||
There was a problem hiding this comment.
This z-index will show the headerbar above the preview box. Preview box's z-index is 9999.
And the border-bottom, box-shadow will show a tiny line in the bottom of headerbar. So just erase it.
|
|
||
| #previewer header > title { | ||
| white-space: nowrap; | ||
| text-shadow: 1px 1px 1px #000000; |
There was a problem hiding this comment.
This add a shadow to the button and text in headerbar. Then we can see them clearly when browse white pics.
| @@ -188,7 +197,7 @@ main .spinner .bounce2 { | |||
|
|
|||
| #previewer .preview { | |||
| text-align: center; | |||
| height: calc(100vh - 4em); | |||
| height: 100%; | |||
There was a problem hiding this comment.
This is to enlarge the preview box to full screen.
| @@ -247,7 +262,7 @@ main .spinner .bounce2 { | |||
| #previewer > button { | |||
| margin: 0; | |||
| position: fixed; | |||
| top: calc(50% + 1.85em); | |||
| top: 50%; | |||
There was a problem hiding this comment.
To adjust the left and right arrow's position since we don't have headerbar on the top.
| #previewer .preview audio { | ||
| width: 95%; | ||
| height: 88%; | ||
| } |
There was a problem hiding this comment.
To adjust the audio player's position to the middle bottom.
| @@ -6,7 +6,7 @@ | |||
| @mousemove="toggleNavigation" | |||
| @touchstart="toggleNavigation" | |||
| > | |||
| <header-bar> | |||
| <header-bar v-if="showNav"> | |||
There was a problem hiding this comment.
Just hide the headerbar with the left and right arrow.
In the preview, the headerbar is always on the screen. It makes the pic can't show in full screen of browser. I change it to a common way, auto hide the transparent headerbar with the left and right arrow. and enlarge the preview box to show pic, video.
before:
after:
