Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace classic navbar w/ new

Browse Source
This commit is contained in:
Freeplay 2023-05-11 19:46:42 -04:00
parent 91345ceed1
commit 547848d663
2 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/client/src/ui/_common_/navbar.vue
View File

@ -1,5 +1,5 @@
<template>
<header class="mvcprjjd" :class="{ iconOnly }">
<header class="mvcprjjd sidebar" :class="{ iconOnly }">
<div class="body">
<div class="top">
<div
@ -236,16 +236,13 @@ function more(ev: MouseEvent) {
.mvcprjjd {
$nav-width: 250px;
$nav-icon-only-width: 80px;
flex: 0 0 $nav-width;
width: $nav-width;
box-sizing: border-box;
> .body {
position: fixed;
position: sticky;
top: 0;
left: 0;
z-index: 1001;
width: $nav-icon-only-width;
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
height: calc(var(--vh, 1vh) * 100);
@ -260,17 +257,15 @@ function more(ev: MouseEvent) {
&:not(.iconOnly) {
> .body {
margin-left: -200px;
padding-left: 200px;
box-sizing: content-box;
width: $nav-width;
> .top {
position: sticky;
top: 0;
position: relative;
z-index: 1;
padding: 2rem 0;
background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
> .banner {
position: absolute;
top: 0;

61
packages/client/src/ui/classic.vue
View File

@ -13,9 +13,7 @@
class="columns"
:class="{ fullView, withGlobalHeader: showMenuOnTop }"
>
<div v-if="!showMenuOnTop" class="sidebar">
<XSidebar />
</div>
<XSidebar v-if="!showMenuOnTop"/>
<div v-else ref="widgetsLeft" class="widgets left">
<XWidgets
:place="'left'"
@ -57,7 +55,7 @@
<script lang="ts" setup>
import { defineAsyncComponent, markRaw, ref, onMounted, provide } from "vue";
import XSidebar from "./classic.sidebar.vue";
import XSidebar from "./_common_/navbar.vue";
import XCommon from "./_common_/common.vue";
import type { ComputedRef } from "vue";
import type { PageMetadata } from "@/scripts/page-metadata";
@ -236,6 +234,9 @@ onMounted(() => {
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
--navBg: transparent;
--X14: var(--acrylicBg);
&.wallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: var(--blur, blur(4px));
@ -250,7 +251,7 @@ onMounted(() => {
&.fullView {
margin: 0;
> .sidebar {
> :deep(.sidebar) {
display: none;
}
@ -266,6 +267,50 @@ onMounted(() => {
}
}
> :deep(.sidebar) {
margin-left: -200px;
padding-left: 200px;
box-sizing: content-box;
.banner {
pointer-events: none;
mask: radial-gradient(farthest-side at top, hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 0.3%,
hsla(0, 0%, 0%, 0.951) 1.4%,
hsla(0, 0%, 0%, 0.896) 3.2%,
hsla(0, 0%, 0%, 0.825) 5.8%,
hsla(0, 0%, 0%, 0.741) 9.3%,
hsla(0, 0%, 0%, 0.648) 13.6%,
hsla(0, 0%, 0%, 0.55) 18.9%,
hsla(0, 0%, 0%, 0.45) 25.1%,
hsla(0, 0%, 0%, 0.352) 32.4%,
hsla(0, 0%, 0%, 0.259) 40.7%,
hsla(0, 0%, 0%, 0.175) 50.2%,
hsla(0, 0%, 0%, 0.104) 60.8%,
hsla(0, 0%, 0%, 0.049) 72.6%,
hsla(0, 0%, 0%, 0.013) 85.7%,
hsla(0, 0%, 0%, 0) 100%) !important;
-webkit-mask: radial-gradient(farthest-side at top, hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 0.3%,
hsla(0, 0%, 0%, 0.951) 1.4%,
hsla(0, 0%, 0%, 0.896) 3.2%,
hsla(0, 0%, 0%, 0.825) 5.8%,
hsla(0, 0%, 0%, 0.741) 9.3%,
hsla(0, 0%, 0%, 0.648) 13.6%,
hsla(0, 0%, 0%, 0.55) 18.9%,
hsla(0, 0%, 0%, 0.45) 25.1%,
hsla(0, 0%, 0%, 0.352) 32.4%,
hsla(0, 0%, 0%, 0.259) 40.7%,
hsla(0, 0%, 0%, 0.175) 50.2%,
hsla(0, 0%, 0%, 0.104) 60.8%,
hsla(0, 0%, 0%, 0.049) 72.6%,
hsla(0, 0%, 0%, 0.013) 85.7%,
hsla(0, 0%, 0%, 0) 100%) !important;
width: 125% !important;
left: -12.5% !important;
height: 125% !important;
}
}
> .main {
min-width: 0;
width: 750px;
@ -292,10 +337,6 @@ onMounted(() => {
}
}
> .sidebar {
margin-top: 16px;
}
&.withGlobalHeader {
> .main {
margin-top: 0;
@ -313,7 +354,7 @@ onMounted(() => {
@media (max-width: 850px) {
margin: 0;
> .sidebar {
> :deep(.sidebar) {
border-right: solid 0.5px var(--divider);
}