Merge pull request codex-team#294 from codex-team/layout-sticky

Dobrunia · web-flow · commit 6eb350289c0a · 2025-02-04T01:00:37.000+03:00
Layout sticky
diff --git a/codex-ui/dev/pages/layout/Navbar.vue b/codex-ui/dev/pages/layout/Navbar.vue
@@ -15,17 +15,15 @@ import { Navbar } from '../../../src/vue';
 
 <style scoped>
 .navbar-wrapper {
-  width: 600px;
-  min-height: 400px;
+  height: 800px;
   position: relative;
   background-color: var(--base--bg-secondary);
   border-radius: var(--radius-m);
   border: 1px solid var(--base--border);
 
   .navbar {
-      z-index: 1;
-      top: var(--layout-navbar-height);
-      border-radius: var(--radius-m) var(--radius-m) 0 0;
+    top: var(--layout-navbar-height);
+    border-radius: var(--radius-m) var(--radius-m) 0 0;
   }
 }
 </style>
diff --git a/codex-ui/src/styles/z-axis.pcss b/codex-ui/src/styles/z-axis.pcss
@@ -2,4 +2,5 @@
   --z-popover: 3;
   --z-navbar: calc(var(--z-popover) + 1);
   --z-popup: calc(var(--z-navbar) + 1);
+  --z-note-header: var(--z-navbar);
 }
diff --git a/codex-ui/src/vue/components/tabbar/Tab.vue b/codex-ui/src/vue/components/tabbar/Tab.vue
@@ -73,9 +73,8 @@ withDefaults(
   display: inline-block;
   min-width: var(--min-width);
   text-decoration: none;
-
   max-width: max-content;
-
+  user-select: none;
   flex: 1;
   flex-shrink: 1;
 
diff --git a/codex-ui/src/vue/layout/page-block/PageBlock.vue b/codex-ui/src/vue/layout/page-block/PageBlock.vue
@@ -57,6 +57,8 @@ defineProps({
 
   &__content {
     max-width: var(--layout-content-width);
+    flex-grow: 1;
+    min-width: 0;
     padding: var(--spacing-xxl) var(--spacing-ml);
     box-sizing: border-box;
 
diff --git a/src/application/services/useLayout.ts b/src/application/services/useLayout.ts
diff --git a/src/presentation/components/note-header/NoteHeader.vue b/src/presentation/components/note-header/NoteHeader.vue
@@ -22,6 +22,10 @@
   transition: opacity 100ms;
   justify-content: space-between;
   padding: var(--spacing-s) var(--spacing-m);
+  position: sticky;
+  top: var(--layout-navbar-height);
+  background-color: var(--base--bg-primary);
+  z-index: var(--z-note-header);
 
   &__left {
     color: var(--base--text-secondary);
diff --git a/src/presentation/layouts/Fullpage.vue b/src/presentation/layouts/Fullpage.vue
diff --git a/src/presentation/layouts/Layout.vue b/src/presentation/layouts/Layout.vue
diff --git a/src/presentation/layouts/ThreeColsLayout.vue b/src/presentation/layouts/ThreeColsLayout.vue
diff --git a/src/presentation/pages/History.vue b/src/presentation/pages/History.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div :class="$style['history']">
       <div :class="$style['history__page-header']">
         <Heading
@@ -47,12 +47,11 @@
         </Container>
       </div>
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
-import { Heading, Container, Row, Avatar, Button } from 'codex-ui/vue';
-import ThreeColsLayout from '../layouts/ThreeColsLayout.vue';
+import { Heading, Container, Row, Avatar, Button, PageBlock } from 'codex-ui/vue';
 import useNoteHistory from '@/application/services/useNoteHistory';
 import useNavbar from '@/application/services/useNavbar';
 import useNote from '@/application/services/useNote';
diff --git a/src/presentation/pages/HistoryVersion.vue b/src/presentation/pages/HistoryVersion.vue
@@ -34,17 +34,19 @@
         </Button>
       </template>
     </NoteHeader>
-    <Editor
-      v-if="isEditorReady"
-      ref="editor"
-      v-bind="editorConfig"
-    />
+    <PageBlock>
+      <Editor
+        v-if="isEditorReady"
+        ref="editor"
+        v-bind="editorConfig"
+      />
+    </PageBlock>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue';
-import { Editor, Button, Avatar } from 'codex-ui/vue';
+import { Editor, Button, Avatar, PageBlock } from 'codex-ui/vue';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import useHistory from '@/application/services/useNoteHistory';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <router-link
       v-if="user"
       to="/new"
@@ -49,17 +49,15 @@
     <NoteList
       v-else-if="user !== undefined"
     />
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { useAppState } from '@/application/services/useAppState';
-import { Container, Row, Button, Heading } from 'codex-ui/vue';
+import { Container, Row, Button, Heading, PageBlock } from 'codex-ui/vue';
 import Hammer from '../components/pictures/Hammer.vue';
-
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 import NoteList from '@/presentation/components/note-list/NoteList.vue';
 import useAuth from '@/application/services/useAuth';
 
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div
       v-if="noteSettings"
       class="note-settings"
@@ -93,7 +93,7 @@
     <div v-else>
       Loading...
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
@@ -105,8 +105,7 @@ import { useI18n } from 'vue-i18n';
 import { computed, ref, onMounted, watch } from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import Team from '@/presentation/components/team/Team.vue';
-import { Section, Row, Switch, Button, Heading, Fieldset, Input, Card } from 'codex-ui/vue';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
+import { Section, Row, Switch, Button, Heading, Fieldset, Input, Card, PageBlock } from 'codex-ui/vue';
 import { getTitle } from '@/infrastructure/utils/note';
 import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div :class="$style['page-header']">
       <Heading :level="1">
         {{ t('userSettings.title') }}
@@ -157,12 +157,12 @@
         </div>
       </Fieldset>
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, LightColorShemeIcon, DarkColorShemeIcon, Container, Input } from 'codex-ui/vue';
+import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, LightColorShemeIcon, DarkColorShemeIcon, Container, Input, PageBlock } from 'codex-ui/vue';
 import { Hammer } from '@/presentation/components/pictures';
 import { useRouter } from 'vue-router';
 import useAuth from '@/application/services/useAuth';
@@ -171,7 +171,6 @@ import { useAppState } from '@/application/services/useAppState';
 import { useHead } from 'unhead';
 import { ref } from 'vue';
 import useNavbar from '@/application/services/useNavbar';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 
 const { user, userEditorTools } = useAppState();
 const { t } = useI18n();
diff --git a/src/presentation/pages/marketplace/AddTool.vue b/src/presentation/pages/marketplace/AddTool.vue
@@ -167,7 +167,6 @@ async function setCover(event: Event) {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxl);
-  width: var(--layout-content-width);
 }
 
 .add-tool-button {
diff --git a/src/presentation/pages/marketplace/MarketplacePage.vue b/src/presentation/pages/marketplace/MarketplacePage.vue
@@ -1,6 +1,6 @@
 <template>
-  <ThreeColsLayout>
-    <template #left-col>
+  <PageBlock>
+    <template #left>
       <VerticalMenu
         class="menu"
         :items="verticalMenuItems"
@@ -9,13 +9,12 @@
     <template #default>
       <router-view />
     </template>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
-import { VerticalMenu, type VerticalMenuItem } from 'codex-ui/vue';
+import { VerticalMenu, type VerticalMenuItem, PageBlock } from 'codex-ui/vue';
 import { computed, Ref } from 'vue';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
diff --git a/src/presentation/pages/marketplace/MarketplaceTools.vue b/src/presentation/pages/marketplace/MarketplaceTools.vue
@@ -42,7 +42,6 @@ const { tools } = useMarketplace();
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxl);
-  width: var(--layout-content-width);
 
   &__subheader {
     margin-bottom: var(--spacing-l);

Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,5 @@`
`2`	`2`	`--z-popover: 3;`
`3`	`3`	`--z-navbar: calc(var(--z-popover) + 1);`
`4`	`4`	`--z-popup: calc(var(--z-navbar) + 1);`
	`5`	`+ --z-note-header: var(--z-navbar);`
`5`	`6`	`}`