added to navbar
This commit is contained in:
parent
18bc7f6124
commit
75ab688a36
|
@ -2,14 +2,14 @@ import type { Directive } from 'vue';
|
||||||
|
|
||||||
let initialized = false;
|
let initialized = false;
|
||||||
let styleEl: HTMLStyleElement | null = null;
|
let styleEl: HTMLStyleElement | null = null;
|
||||||
const canUseDeviceOrientation = !window.DeviceOrientationEvent;
|
const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
|
||||||
const className = '_flipOnDeviceOrientation';
|
const className = '_flipOnDeviceOrientation';
|
||||||
const variableName = `--MI-flip_on_device_orientation_transform`;
|
const variableName = `--MI-flip_on_device_orientation_transform`;
|
||||||
|
|
||||||
function handleOrientationChange(event: DeviceOrientationEvent) {
|
function handleOrientationChange(event: DeviceOrientationEvent) {
|
||||||
const isUpsideDown = event.beta ? event.beta < -15 : false;
|
const isUpsideDown = event.beta ? event.beta < 5 : false;
|
||||||
const transform = isUpsideDown ? 'scale(-1, -1)' : '';
|
const transform = isUpsideDown ? 'scale(-1, -1)' : '';
|
||||||
window.document.body.style.setProperty(variableName, transform);
|
window.document.documentElement.style.setProperty(variableName, transform);
|
||||||
}
|
}
|
||||||
|
|
||||||
function registerListener() {
|
function registerListener() {
|
||||||
|
|
|
@ -170,7 +170,6 @@ $avatarSize: 58px;
|
||||||
.avatar {
|
.avatar {
|
||||||
width: $avatarSize;
|
width: $avatarSize;
|
||||||
height: $avatarSize;
|
height: $avatarSize;
|
||||||
margin-right: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.names {
|
.names {
|
||||||
|
@ -179,10 +178,12 @@ $avatarSize: 58px;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: start;
|
align-items: start;
|
||||||
margin-top: -4px;
|
margin: -4px -2px 0 8px;
|
||||||
|
padding-right: 16px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
|
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
@ -191,11 +192,8 @@ $avatarSize: 58px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
max-width: calc(100% - 16px);
|
max-width: 100%;
|
||||||
overflow-x: hidden;
|
overflow: visible;
|
||||||
overflow-y: visible;
|
|
||||||
padding-right: 16px;
|
|
||||||
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
|
@ -204,11 +202,8 @@ $avatarSize: 58px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
max-width: calc(100% - 16px);
|
max-width: 100%;
|
||||||
overflow-x: hidden;
|
overflow: visible;
|
||||||
overflow-y: visible;
|
|
||||||
padding-right: 16px;
|
|
||||||
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
|
|
Loading…
Reference in New Issue