[#47] create mixins for common layout styles

Author: Kreezag

assets/mixins.scss

@@ -1,3 +1,19 @@
+@mixin layout {
+  @apply relative min-h-screen bg-white dark:bg-gray-800;
+}
+
+@mixin layout-sidebar {
+  @apply w-10 md:w-14 lg:w-16 fixed h-screen z-50;
+}
+
+@mixin layout-head {
+  @apply left-10 md:left-14 lg:left-16 h-12 right-0 fixed justify-between border-b border-gray-200 dark:border-gray-700 px-4 bg-white dark:bg-gray-800 z-50;
+}
+
+@mixin layout-body {
+  @apply flex flex-col flex-1 pt-12;
+}
+
 @mixin text-muted {
   @apply text-gray-600 dark:text-gray-400;
 }
@@ -10,10 +26,6 @@
   @apply text-2xs sm:text-xs md:text-sm lg:text-base;
 }
 
-@mixin border-style {
-  @apply border-gray-300 dark:border-gray-500 divide-gray-300 dark:divide-gray-500;
-}
-
 @mixin loading {
     position: absolute;
     display: inline-block;

components/LayoutSidebar/LayoutSidebar.vue

@@ -84,7 +84,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .layout-sidebar {
-  @apply bg-gray-200 dark:bg-gray-800 flex flex-col justify-between z-50 w-full h-full sticky top-0 h-screen max-h-screen;
+  @apply bg-gray-200 dark:bg-gray-800 flex flex-col justify-between;
 }
 
 .layout-sidebar__nav {

components/PageHeader/PageHeader.vue

@@ -45,10 +45,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .page-header {
-  @apply p-3 flex justify-between border-b border-gray-200 dark:border-gray-700;
+  @apply flex justify-between;
 }
 
 .page-header__title {
+  @apply flex items-center flex-row;
 }
 
 .page-header__controls {

components/ProfilerPage/ProfilerPage.vue

@@ -223,9 +223,7 @@ export default defineComponent({
 }
 
 .profiler-page__edge {
-  @apply bg-gray-800 absolute border border-gray-300 dark:border-gray-600;
-
-  z-index: 9999;
+  @apply bg-gray-800 absolute border border-gray-300 dark:border-gray-600 z-50;
 }
 
 .profiler-page__edge-title {

components/ProfilerPageCallGraph/ProfilerPageCallGraph.vue

@@ -189,12 +189,10 @@ export default defineComponent({
 
 .profiler-page-call-graph--fullscreen {
   @apply rounded-none mt-0 top-0 left-0 fixed w-full h-full;
-  z-index: 9998;
 }
 
 .profiler-page-call-graph__toolbar {
   @apply absolute top-5 left-5 flex bg-gray-200 p-2 rounded gap-x-5;
-  z-index: 9999;
 }
 
 .profiler-page-call-graph__toolbar--right {

layouts/default.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="main-layout">
-    <div class="main-layout__sidebar-wrap">
-      <LayoutSidebar
-        :is-connected="isConnected"
-        :api-version="apiVersion"
-        :client-version="clientVersion"
-      />
-    </div>
+    <LayoutSidebar
+      class="main-layout__sidebar"
+      :is-connected="isConnected"
+      :api-version="apiVersion"
+      :client-version="clientVersion"
+    />
 
     <div class="main-layout__content">
       <slot />
@@ -75,23 +74,29 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "assets/mixins";
+
 .main-layout {
   @apply flex min-h-screen items-stretch relative;
 }
 
-.main-layout__sidebar-wrap {
-  @apply w-10 md:w-14 lg:w-16 flex-none border-r border-gray-200 dark:border-gray-700;
+.main-layout__sidebar {
+  @apply w-10 md:w-14 lg:w-16 flex-none border-r border-gray-200 dark:border-gray-700 z-50 w-full h-full sticky top-0 h-screen max-h-screen;
+}
+
+.main-layout__header {
+  @apply flex-none w-full h-10;
 }
 
 .main-layout__content {
-  @apply flex flex-col h-full flex-1 w-full min-h-screen;
+  @apply flex flex-col h-full flex-1 w-full min-h-screen absolute top-0 left-0 pl-10 md:pl-14 lg:pl-16;
 
   & > div {
     @apply flex flex-col h-full flex-1;
   }
 }
 
 .main-layout__sidebar {
-  @apply w-10 md:w-14 lg:w-16 fixed h-screen;
+  @include layout-sidebar;
 }
 </style>

pages/http-dumps/[id].vue

@@ -1,6 +1,10 @@
 <template>
   <main class="http-dumps-event">
-    <PageHeader button-title="Delete event" @delete="onDelete">
+    <PageHeader
+      class="http-dumps-event__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
       <NuxtLink to="/">Home</NuxtLink>&nbsp;/
       <NuxtLink to="/http-dumps">Http dumps</NuxtLink>&nbsp;/
       <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
@@ -12,7 +16,9 @@
       <div></div>
     </div>
 
-    <HttpDumpPage v-if="event" :event="event" />
+    <div class="http-dumps-event__body">
+      <HttpDumpPage v-if="event" :event="event" />
+    </div>
   </main>
 </template>
 
@@ -71,9 +77,7 @@ export default defineComponent({
   },
   computed: {
     event() {
-      return this.serverEvent
-        ? normalizeHttpDumpEvent(this.serverEvent)
-        : null;
+      return this.serverEvent ? normalizeHttpDumpEvent(this.serverEvent) : null;
     },
   },
   methods: {
@@ -89,9 +93,19 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "assets/mixins";
 .http-dumps-event {
-  @apply h-full w-full;
+  @include layout;
+}
+
+.http-dumps-event__head {
+  @include layout-head;
 }
+
 .http-dumps-event__loading {
   @include loading;
+  @include layout-body;
+}
+
+.http-dumps-event__body {
+  @include layout-body;
 }
 </style>

pages/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="events-page">
-    <PageHeader button-title="Clear events" @delete="clearEvents">
+    <PageHeader
+      class="events-page__head"
+      button-title="Clear events"
+      @delete="clearEvents"
+    >
       <NuxtLink to="/" :disabled="!title">Home</NuxtLink>
 
       <template v-if="title">
@@ -137,12 +141,17 @@ export default defineComponent({
 @import "assets/mixins";
 
 .events-page {
-  @apply h-full w-full;
+  @include layout;
+}
+
+.events-page__head {
+  @include layout-head;
 }
 
 .events-page__events {
+  @include layout-body;
   @include border-style;
-  @apply flex flex-col divide-y divide-y-2 divide-gray-200 dark:divide-gray-600;
+  @apply divide-y divide-y-2 divide-gray-200 dark:divide-gray-600;
 }
 
 .events-page__event {
@@ -152,7 +161,8 @@ export default defineComponent({
 }
 
 .events-page__welcome {
-  @apply flex-1 p-4 flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-800 w-full h-full min-h-screen;
+  @include layout-body;
+  @apply flex-1 flex flex-col justify-center items-center bg-gray-50 dark:bg-gray-800 min-h-screen;
 }
 
 .events-page__btn-stop-events {

pages/inspector/[id].vue

@@ -1,8 +1,12 @@
 <template>
   <main class="inspector-event">
-    <PageHeader button-title="Delete event" @delete="onDelete">
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/
-      <NuxtLink to="/inspector">Inspector</NuxtLink>&nbsp;/
+    <PageHeader
+      class="inspector-event__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
+      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/inspector">Inspector</NuxtLink>&nbsp;/&nbsp;
       <NuxtLink :disabled="true">{{ event.id }}</NuxtLink>
     </PageHeader>
 
@@ -12,7 +16,9 @@
       <div></div>
     </div>
 
-    <InspectorPage v-if="event" :event="event" />
+    <div class="inspector-event__body">
+      <InspectorPage v-if="event" :event="event" />
+    </div>
   </main>
 </template>
 
@@ -89,9 +95,19 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import "assets/mixins";
 .inspector-event {
-  @apply h-full w-full;
+  @include layout;
+}
+
+.inspector-event__head {
+  @include layout-head;
 }
+
 .inspector-event__loading {
   @include loading;
+  @include layout-body;
+}
+
+.inspector-event__body {
+  @include layout-body;
 }
 </style>

pages/profiler/[id].vue

@@ -1,8 +1,12 @@
 <template>
   <main class="profiler-event">
-    <PageHeader button-title="Delete event" @delete="onDelete">
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/
-      <NuxtLink to="/profiler">Profiler</NuxtLink>&nbsp;/
+    <PageHeader
+      class="profiler-event__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
+      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/profiler">Profiler</NuxtLink>&nbsp;/&nbsp;
       <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
     </PageHeader>
 
@@ -12,7 +16,9 @@
       <div></div>
     </div>
 
-    <ProfilerPage v-if="event" :event="event" />
+    <div class="profiler-event__body">
+      <ProfilerPage v-if="event" :event="event" />
+    </div>
   </main>
 </template>
 
@@ -85,23 +91,21 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import "assets/mixins";
-.profiler-event {
-  @apply h-full w-full;
 
-  > main {
-    @apply flex flex-col md:flex-row;
-  }
-
-  .call-stack__wrapper {
-    @apply w-full md:w-1/6 border-r border-gray-300 dark:border-gray-500;
-  }
+.profiler-event {
+  @include layout;
+}
 
-  .info__wrapper {
-    @apply w-full h-full flex flex-col md:w-5/6 divide-y divide-gray-300 dark:divide-gray-500;
-  }
+.profiler-event__head {
+  @include layout-head;
 }
 
 .profiler-event__loading {
   @include loading;
+  @include layout-body;
+}
+
+.profiler-event__body {
+  @include layout-body;
 }
 </style>