amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client): Fix #6526

Browse Source
This commit is contained in:
syuilo 2020-07-15 18:22:19 +09:00
parent 9d3beb3174
commit e7f1ab2d01
4 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/client/app.vue
View File

@ -375,7 +375,8 @@ export default Vue.extend({
$left-widgets-hide-threshold: 1600px; $left-widgets-hide-threshold: 1600px;
$right-widgets-hide-threshold: 1090px; $right-widgets-hide-threshold: 1090px;
min-height: 100vh; // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
padding-top: $header-height; padding-top: $header-height;
@ -544,7 +545,8 @@ export default Vue.extend({
> .content { > .content {
> * { > * {
min-height: calc(100vh - #{$header-height}); // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
box-sizing: border-box; box-sizing: border-box;
padding: var(--margin); padding: var(--margin);
@ -597,7 +599,8 @@ export default Vue.extend({
&.fixed { &.fixed {
position: sticky; position: sticky;
overflow: auto; overflow: auto;
height: calc(100vh - #{$header-height}); // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc((var(--vh, 1vh) * 100) - #{$header-height});
top: $header-height; top: $header-height;
} }
@ -620,7 +623,8 @@ export default Vue.extend({
> .container { > .container {
position: sticky; position: sticky;
height: min-content; height: min-content;
min-height: calc(100vh - #{$header-height}); // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
padding: var(--margin) 0; padding: var(--margin) 0;
box-sizing: border-box; box-sizing: border-box;

3
src/client/components/sidebar.vue
View File

@ -353,7 +353,8 @@ export default Vue.extend({
left: 0; left: 0;
z-index: 1001; z-index: 1001;
width: $nav-width; width: $nav-width;
height: 100vh; // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow: auto;
background: var(--navBg); background: var(--navBg);

3
src/client/deck.vue
View File

@ -211,7 +211,8 @@ export default Vue.extend({
--margin: var(--marginHalf); --margin: var(--marginHalf);
display: flex; display: flex;
height: 100vh; // ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: $deckMargin 0 $deckMargin $deckMargin; padding: $deckMargin 0 $deckMargin $deckMargin;

10
src/client/init.ts
View File

@ -59,6 +59,16 @@ if (localStorage.getItem('theme') == null) {
applyTheme(lightTheme); applyTheme(lightTheme);
} }
//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
// TODO: いつの日にか消したい
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
window.addEventListener('resize', () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});
//#endregion
//#region Detect the user language //#region Detect the user language
let lang = localStorage.getItem('lang'); let lang = localStorage.getItem('lang');