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 styleEl: HTMLStyleElement | null = null;
|
||||
const canUseDeviceOrientation = !window.DeviceOrientationEvent;
|
||||
const canUseDeviceOrientation = !!window.DeviceOrientationEvent;
|
||||
const className = '_flipOnDeviceOrientation';
|
||||
const variableName = `--MI-flip_on_device_orientation_transform`;
|
||||
|
||||
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)' : '';
|
||||
window.document.body.style.setProperty(variableName, transform);
|
||||
window.document.documentElement.style.setProperty(variableName, transform);
|
||||
}
|
||||
|
||||
function registerListener() {
|
||||
|
|
|
@ -170,7 +170,6 @@ $avatarSize: 58px;
|
|||
.avatar {
|
||||
width: $avatarSize;
|
||||
height: $avatarSize;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.names {
|
||||
|
@ -179,10 +178,12 @@ $avatarSize: 58px;
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
margin-top: -4px;
|
||||
margin: -4px -2px 0 8px;
|
||||
padding-right: 16px;
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
||||
}
|
||||
|
||||
.name {
|
||||
|
@ -191,11 +192,8 @@ $avatarSize: 58px;
|
|||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 16px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
padding-right: 16px;
|
||||
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.username {
|
||||
|
@ -204,11 +202,8 @@ $avatarSize: 58px;
|
|||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
width: fit-content;
|
||||
max-width: calc(100% - 16px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: visible;
|
||||
padding-right: 16px;
|
||||
mask-image: linear-gradient(90deg,#000,#000 calc(100% - 16px),#0000);
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
|
Loading…
Reference in New Issue