erudit 2.0.0-dev.7

package/app/components/SiteAside.vue

@@ -0,0 +1,382 @@
+<script lang="ts" setup>
+import { previewVisible } from '@app/scripts/preview/state';
+import {
+    AsideType,
+    clickTargets,
+    forcedAside,
+    switchVisible,
+} from '@app/scripts/aside';
+
+const props = defineProps<{
+    type: AsideType;
+}>();
+
+const $style = useCssModule();
+
+const switchElement = ref<HTMLElement>();
+const asideElement = ref<HTMLElement>();
+
+const canShowSwitch = computed(
+    () => switchVisible.value && !forcedAside.value && !previewVisible.value,
+);
+const asideForceVisible = computed(() => props.type === forcedAside.value);
+
+const typeClass = props.type === AsideType.Major ? $style.major : $style.minor;
+
+onMounted(() => {
+    clickTargets[props.type].push(
+        ...[switchElement.value!, asideElement.value!],
+    );
+});
+
+function switchClick() {
+    forcedAside.value = props.type;
+}
+</script>
+
+<template>
+    <div
+        ref="switchElement"
+        @click="switchClick"
+        :class="[
+            $style.asideSwitch,
+            typeClass,
+            canShowSwitch ? $style.visible : '',
+        ]"
+    >
+        <MyIcon name="aside-open" />
+    </div>
+
+    <aside
+        ref="asideElement"
+        :class="[
+            $style.aside,
+            typeClass,
+            asideForceVisible ? $style.forceVisible : '',
+        ]"
+    >
+        <slot></slot>
+        <div :class="$style.innerShadow"></div>
+    </aside>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+@use '$/def/z';
+@use '$/def/size';
+
+// !!
+// !!
+// !! Rewrite the whole logic based on coords relative to main content. It will be 1000% easier. See how <Preview> is implemented!
+// !!
+// !!
+
+@function maxLayoutEdge() {
+    @return calc(
+        50% - min(var(--wMainMax), calc(100% - 2 * var(--wAside))) / 2
+    );
+}
+
+@mixin ___asidePositionLogic {
+    /* For God's sake, don't ever touch this code */
+
+    --_pos: var(--_posHidden); // Start with hidden position (mobile first)
+
+    --_posHidden: calc(-1 * var(--wAside));
+    --_posVisible: var(--_posVisibleCorner);
+
+    --_posVisibleCorner: 0;
+    --_posVisibleMax: calc(#{maxLayoutEdge()} - var(--wAside));
+
+    &.major.forceVisible,
+    &.minor.forceVisible {
+        --_pos: var(--_posVisible); // Always visible when forced
+    }
+
+    &.major {
+        left: var(--_pos);
+
+        @include bp.above('aside1') {
+            --_posVisible: var(--_posVisibleCorner);
+            --_pos: var(--_posVisible);
+        }
+
+        @include bp.above('aside2') {
+            --_posVisible: var(--_posVisibleMax);
+        }
+    }
+
+    &.minor {
+        right: var(--_pos);
+
+        @include bp.above('aside2') {
+            --_posVisible: var(--_posVisibleMax);
+            --_pos: var(--_posVisible);
+        }
+    }
+}
+
+.aside {
+    //
+    // Global
+    //
+
+    position: fixed;
+    z-index: z.$aside;
+    top: 0;
+
+    width: var(--wAside);
+    height: 100dvh;
+
+    background: var(--bgAside);
+    backdrop-filter: initial;
+
+    --shadowColor: #{rgba(black, 0.065)};
+
+    @include transition(left, right, background, backdrop-filter, box-shadow);
+
+    @include dark {
+        --shadowColor: #{rgba(white, 0.075)};
+    }
+
+    //
+
+    @include ___asidePositionLogic;
+
+    //
+    // Global States
+    //
+
+    @mixin asideVisible {
+    }
+
+    @mixin asideHidden {
+    }
+
+    @mixin asideModal {
+        background: color-mix(
+            in srgb,
+            color-mix(in srgb, var(--bgAside), black 0%),
+            transparent 22%
+        );
+        backdrop-filter: blur(10px);
+
+        box-shadow:
+            0px 0px 15px 15px rgba(0, 0, 0, 0.1),
+            0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+        @include dark {
+            background: color-mix(in srgb, var(--bgAside), transparent 10%);
+
+            box-shadow:
+                0px 0px 15px 15px rgba(255, 255, 255, 0.025),
+                0px 0px 8px 0px rgba(255, 255, 255, 0.03);
+        }
+    }
+
+    &.major {
+        //
+        // Major Aside
+        //
+
+        box-shadow: -1px 0px 2px 0px var(--shadowColor);
+
+        @include bp.above('aside1') {
+            //
+            // Major Visible
+            //
+
+            @include asideVisible;
+        }
+
+        @include bp.below('aside1') {
+            //
+            // Major Hidden
+            //
+
+            @include asideHidden;
+
+            &.forceVisible {
+                //
+                // Major Modal
+                //
+
+                @include asideModal;
+            }
+        }
+    }
+
+    &.minor {
+        //
+        // Minor Aside
+        //
+
+        box-shadow: 1px 0px 2px 0px var(--shadowColor);
+
+        @include bp.above('aside2') {
+            //
+            // Minor Visible
+            //
+
+            @include asideVisible;
+        }
+
+        @include bp.below('aside2') {
+            //
+            // Minor Hidden
+            //
+
+            @include asideHidden;
+
+            &.forceVisible {
+                //
+                // Minor Modal
+                //
+
+                @include asideModal;
+            }
+        }
+    }
+}
+
+//
+//
+//
+
+@mixin ___switchPositionLogic {
+    /* For God's sake, don't ever touch this code */
+
+    --_switchSize: calc(var(--iconSize) + 2 * var(--p) + var(--m));
+
+    --_pos: var(--_posHidden);
+
+    --_posVisible: calc(var(--_posHidden) + var(--_switchSize));
+    --_posHidden: var(--_posBehindCorner);
+
+    --_posBehindCorner: calc(-1 * var(--_switchSize));
+    --_posBehindMajorAside: calc(var(--wAside) - var(--_switchSize));
+    --_posBehindFullLayout: calc(#{maxLayoutEdge()} - var(--_switchSize));
+
+    &.visible {
+        --_pos: var(--_posVisible);
+    }
+
+    &.major {
+        left: var(--_pos);
+
+        @include bp.above('aside1') {
+            --_posHidden: var(--_posBehindMajorAside);
+            --_posVisible: var(--_posHidden);
+        }
+    }
+
+    &.minor {
+        right: var(--_pos);
+
+        @include bp.above('aside2') {
+            --_posVisible: var(--_posHidden);
+        }
+    }
+
+    &.major,
+    &.minor {
+        @include bp.above('aside2') {
+            --_posHidden: var(--_posBehindFullLayout);
+        }
+    }
+}
+
+.asideSwitch {
+    --iconSize: 36px;
+    --p: 12px;
+    --m: var(--gapBig);
+
+    //
+
+    position: fixed;
+    z-index: z.$asideSwitch;
+    bottom: 0;
+
+    font-size: var(--iconSize);
+    padding: var(--p);
+    margin: var(--gapBig);
+
+    background: #8c8c8c;
+    color: var(--bgMain);
+    box-shadow: 0px 0px 20px 20px var(--bgMain);
+    opacity: 0.95;
+
+    cursor: pointer;
+
+    @include transition(left, right, opacity, box-shadow);
+
+    @include dark {
+        background: #8c8c8c;
+    }
+
+    &:hover {
+        opacity: 1;
+    }
+
+    &.minor {
+        svg {
+            transform: scaleX(-1);
+        }
+    }
+
+    @mixin invisible {
+        box-shadow: none; /* TODO: Fix missing fade-out transition! */
+    }
+
+    //
+
+    @include ___switchPositionLogic;
+
+    &:not(.visible) {
+        @include invisible;
+    }
+    &.major {
+        @include bp.above('aside1') {
+            @include invisible;
+        }
+    }
+    @include bp.above('aside2') {
+        @include invisible;
+    }
+}
+
+//
+//
+//
+
+.innerShadow {
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    width: 30px;
+    height: 100%;
+    pointer-events: none;
+    touch-action: none;
+    box-shadow: -1px 0px 2px 0px
+        color-mix(in srgb, var(--invert), transparent 93%) inset;
+
+    @include transition(box-shadow);
+
+    .major & {
+        right: 0;
+
+        @include bp.below('aside1') {
+            box-shadow: none;
+        }
+    }
+
+    .minor & {
+        left: 0;
+        transform: scaleX(-1);
+
+        @include bp.below('aside2') {
+            box-shadow: none;
+        }
+    }
+}
+</style>

package/app/components/SiteMain.vue

@@ -0,0 +1,35 @@
+<template>
+    <main :class="$style.main" erudit-main>
+        <ClientOnly>
+            <Preview />
+        </ClientOnly>
+        <div :class="$style.mainInner">
+            <slot></slot>
+        </div>
+    </main>
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+@use 'bitran/public/scss/def' as bitranDef;
+
+.main {
+    --_pMainBase: var(--gapBig);
+    --_pMainX: var(--_pMainBase);
+    --_pMainY: calc(var(--_pMainBase) / 2);
+
+    position: relative;
+    min-height: 100dvh;
+    background: var(--bgMain);
+    font-size: 18px;
+
+    @include bp.below('mobile') {
+        --_pMainBase: #{bitranDef.$asideFullWidth};
+        font-size: 15px;
+    }
+
+    .mainInner {
+        padding: var(--_pMainY) 0;
+    }
+}
+</style>

package/app/components/ads/BannerTemplate.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    bannerId: string;
+}>();
+
+const { getElementId, registerBanner } = useDarkMagic();
+const phrase = await usePhrases('ads_replacer', '_language_code');
+
+onMounted(() => {
+    registerBanner(props.bannerId);
+});
+</script>
+
+<template>
+    <section :class="$style.darkMagicContainer">
+        <div :id="getElementId(bannerId)">
+            <div :class="$style.darkMagicReplacer">
+                <MyIcon name="pirate" />
+                <div v-html="phrase.ads_replacer"></div>
+            </div>
+        </div>
+    </section>
+</template>
+
+<style lang="scss" module>
+.darkMagicContainer {
+    --maxHeight: 300px;
+
+    > div {
+        width: 100%;
+        max-height: var(--maxHeight);
+    }
+}
+
+.darkMagicReplacer {
+    max-height: var(--maxHeight);
+    height: var(--maxHeight);
+    width: 100%;
+    background: var(--bgAccent);
+    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1) inset;
+    color: var(--textMuted);
+
+    @include dark {
+        box-shadow: 0px 0px 3px 1px rgba(white, 0.025) inset;
+    }
+
+    strong {
+        color: inherit;
+    }
+}
+</style>

package/app/components/ads/BottomBanner.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+</script>
+
+<template>
+    <AdsBannerTemplate
+        :bannerId="eruditConfig.ads!.bottomBlockId!"
+        :class="$style.darkMagicBottom"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/def/bp';
+@use '$/partials/darkMagic';
+
+.darkMagicBottom {
+    --maxHeight: 300px;
+
+    padding: var(--_pMainY) var(--_pMainX);
+    padding-top: var(--gapBig);
+
+    @include darkMagic.replacer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--gapBig);
+        font-size: 22px;
+
+        [my-icon] {
+            font-size: 60px;
+        }
+
+        @include bp.below('mobile') {
+            flex-direction: column;
+            gap: var(--gap);
+            font-size: 16px;
+            text-align: center;
+
+            [my-icon] {
+                font-size: 68px;
+            }
+        }
+    }
+}
+</style>

package/app/components/ads/LeftBanner.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+</script>
+
+<template>
+    <AdsBannerTemplate
+        :bannerId="eruditConfig.ads!.leftBlockId!"
+        :class="$style.darkMagicLeft"
+    />
+</template>
+
+<style lang="scss" module>
+@use '$/partials/darkMagic';
+
+.darkMagicLeft {
+    --maxHeight: 300px;
+
+    padding: var(--gap);
+    border-top: 1px solid var(--border);
+
+    @media (max-height: 1080px) {
+        --maxHeight: 200px;
+    }
+
+    @media (max-height: 700px) {
+        --maxHeight: 100px;
+        [my-icon] {
+            display: none;
+        }
+    }
+
+    @media (max-height: 350px) {
+        display: none;
+    }
+
+    @include darkMagic.replacer {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--gap);
+        text-align: center;
+        font-size: 0.95em;
+
+        [my-icon] {
+            font-size: 46px;
+        }
+    }
+}
+</style>

package/app/components/aside/AsideListItem.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { MyIconName } from '#my-icons';
+
+defineProps<{
+    link?: string;
+    icon?: MyIconName;
+    main?: string;
+    active?: boolean;
+    secondary?: string;
+}>();
+
+const nuxtLink = defineNuxtLink({});
+</script>
+
+<template>
+    <component
+        :is="link ? nuxtLink : 'div'"
+        :to="link"
+        :class="[$style.asideListItem, active ? $style.active : '']"
+    >
+        <slot>
+            <MyIcon v-if="icon" :name="icon" />
+            <div :class="$style.main">{{ main }}</div>
+            <div v-if="secondary" :class="$style.secondary">
+                {{ secondary }}
+            </div>
+        </slot>
+    </component>
+</template>
+
+<style lang="scss" module>
+.asideListItem {
+    display: flex;
+    align-items: center;
+    gap: var(--gap);
+    padding: var(--gap);
+    height: 60px;
+    border-bottom: 1px solid var(--border);
+    color: var(--textMuted);
+    text-decoration: none;
+    background: transparent;
+    cursor: pointer;
+    @include transition(color, background);
+
+    &:hover {
+        color: var(--text);
+        background: var(--bgAccent);
+    }
+
+    [my-icon] {
+        position: relative;
+        top: 1px;
+        flex-shrink: 0;
+        font-size: 20px;
+    }
+
+    .secondary {
+        font-weight: 500;
+        color: var(--textDimmed);
+    }
+
+    [my-icon],
+    .main {
+        @include transition(color);
+    }
+
+    &.active {
+        [my-icon],
+        .main {
+            color: var(--brand);
+        }
+    }
+}
+</style>

package/app/components/aside/AsideMajor.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import eruditConfig from '#erudit/config';
+
+import PaneSwitch from './major/PaneSwitch.vue';
+
+const { panes, activePane, getPaneOrder } = useMajorPane();
+
+function paneStyle(paneKey: MajorPaneKey) {
+    const thisPaneOrder = getPaneOrder(paneKey);
+    const activePaneOrder = getPaneOrder(activePane.value);
+
+    return {
+        left: `calc(${Math.sign(thisPaneOrder - activePaneOrder)} * var(--wAside))`,
+        opacity: thisPaneOrder === activePaneOrder ? 1 : 0,
+    };
+}
+</script>
+
+<template>
+    <div :class="$style.asideInner">
+        <AsideMajorSiteInfo />
+        <PaneSwitch />
+        <div :class="$style.paneHolder">
+            <component
+                v-for="(pane, paneKey) of panes"
+                :is="pane.content"
+                :class="$style.pane"
+                :style="paneStyle(paneKey)"
+            />
+        </div>
+        <AdsLeftBanner v-if="eruditConfig.ads?.leftBlockId" />
+    </div>
+</template>
+
+<style lang="scss" module>
+.asideInner {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.paneHolder {
+    flex: 1;
+    position: relative;
+    overflow-x: hidden;
+}
+
+.pane {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    @include transition(left, opacity);
+}
+</style>