pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace scroll bar hiding hack with scrollbar-width: none

Browse Source
This commit is contained in:
Fornax
2022-04-14 19:35:08 +02:00
parent 13eed9f125
commit a39b68cbfb
2 changed files with 15 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
svelte/src/file_viewer/FileViewer.svelte
View File

@@ -372,7 +372,7 @@ const keyboard_event = evt => {
</div> </div>
{/if} {/if}
<div id="headerbar" class="headerbar" class:embedded> <div id="headerbar" class="headerbar">
<button <button
on:click={toolbar_toggle} on:click={toolbar_toggle}
class="button_toggle_toolbar round" class="button_toggle_toolbar round"
@@ -404,10 +404,6 @@ const keyboard_event = evt => {
{/if} {/if}
</div> </div>
<!-- {#if ads_enabled}
<UkrainePopup></UkrainePopup>
{/if} -->
{#if is_list && view === "file"} {#if is_list && view === "file"}
<ListNavigator <ListNavigator
bind:this={list_navigator} bind:this={list_navigator}
@@ -422,7 +418,7 @@ const keyboard_event = evt => {
<CustomBanner src={custom_header} border_top={true}></CustomBanner> <CustomBanner src={custom_header} border_top={true}></CustomBanner>
<div class="file_preview_row"> <div class="file_preview_row">
<div id="toolbar" class="toolbar" class:toolbar_visible><div><div> <div id="toolbar" class="toolbar" class:toolbar_visible>
{#if view === "file"} {#if view === "file"}
<FileStats file={file}></FileStats> <FileStats file={file}></FileStats>
<hr/> <hr/>
@@ -553,7 +549,7 @@ const keyboard_event = evt => {
</button> </button>
{/if} {/if}
<br/> <br/>
</div></div></div> </div>
<div bind:this={file_preview_background} <div bind:this={file_preview_background}
class="file_preview" class="file_preview"
@@ -649,8 +645,10 @@ const keyboard_event = evt => {
text-align: left; text-align: left;
padding: 4px; padding: 4px;
} }
.headerbar.embedded { @media(max-height: 600px) {
padding: 2px; .headerbar {
padding: 1px;
}
} }
/* Headerbar components */ /* Headerbar components */
@@ -717,7 +715,9 @@ const keyboard_event = evt => {
.toolbar { .toolbar {
position: absolute; position: absolute;
width: 8em; width: 8em;
overflow: hidden; overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
left: -8em; left: -8em;
bottom: 0; bottom: 0;
top: 0; top: 0;
@@ -726,26 +726,11 @@ const keyboard_event = evt => {
transition: left 0.5s, right 0.5s; transition: left 0.5s, right 0.5s;
z-index: 1; z-index: 1;
} }
.toolbar::-webkit-scrollbar {
display: none;
}
.toolbar.toolbar_visible { left: 0; } .toolbar.toolbar_visible { left: 0; }
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
.toolbar > div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: -30px;
overflow-y: scroll;
overflow-x: hidden;
}
.toolbar > div > div {
position: absolute;
left: 0;
top: 0;
width: 8em;
height: auto;
text-align: center;
}
.toolbar_button { .toolbar_button {
text-align: left; text-align: left;
width: calc(100% - 6px); width: calc(100% - 6px);

2
svelte/src/file_viewer/viewers/Video.svelte
View File

@@ -219,7 +219,7 @@ h1 {
vertical-align: middle; vertical-align: middle;
border-radius: 8px; border-radius: 8px;
} }
@media(max-height: 600px) { @media(max-height: 500px) {
.container { .container {
flex-direction: row; flex-direction: row;
} }