feat(4ps): update layout

mixcore · Jan 11, 2024 · 75bcfca · 75bcfca
1 parent f485a22
commit 75bcfca
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 13 deletions.
diff --git a/libs/mix-share/src/modules/database/database-detail/database-detail.component.html b/libs/mix-share/src/modules/database/database-detail/database-detail.component.html
@@ -67,7 +67,7 @@
       <div class="data-detail-page__content">
         <!-- Main Content -->
         @defer(when activeTabIndex === 0) {
-        <div class="data-detail-page__main-content"
+        <div class="data-detail-page__main-content sm:container"
              [class.hidden]="activeTabIndex !== 0">
           <mix-database-info [form]="form"></mix-database-info>
         </div>
@@ -77,7 +77,7 @@
 
         <!-- Columns -->
         @defer(when activeTabIndex === 1) {
-        <div class="data-detail-page__main-content"
+        <div class="data-detail-page__main-content sm:container"
              [class.hidden]="activeTabIndex !== 1">
           <mix-database-entity [columns]="data?.columns ?? []"
                                (columnsChange)="onColumnsChange($event)"></mix-database-entity>
@@ -89,7 +89,7 @@
 
         <!-- Relationships -->
         @defer(when activeTabIndex === 2) {
-        <div class="data-detail-page__main-content"
+        <div class="data-detail-page__main-content sm:container"
              [class.hidden]="activeTabIndex !== 2">
           <mix-database-relationship [relationships]="data?.relationships ?? []"
                                      (deleteRelation)="onDeleteRelationship($event)"
@@ -102,7 +102,7 @@
 
         <!-- Permissions -->
         @defer(when activeTabIndex === 3) {
-        <div class="data-detail-page__main-content"
+        <div class="data-detail-page__main-content sm:container"
              [class.hidden]="activeTabIndex !== 3">
           <mix-database-permission [form]="form"></mix-database-permission>
         </div>
@@ -113,7 +113,7 @@
 
         <!-- Migrations -->
         @defer(when activeTabIndex === 4) {
-        <div class="data-detail-page__main-content"
+        <div class="data-detail-page__main-content sm:container"
              [class.hidden]="activeTabIndex !== 4">
           <mix-database-migration [dbSysName]="data?.systemName"></mix-database-migration>
         </div>

diff --git a/libs/mix-share/src/modules/layout/mix-layout.component.html b/libs/mix-share/src/modules/layout/mix-layout.component.html
@@ -8,12 +8,13 @@
               max="100"
               style="height: 3px"></progress>
   </div>
+
   <aside id="sidebar">
     <mix-main-side-menu [showDetail]="expand()"
                         (expandChange)="onExpandChange()"></mix-main-side-menu>
   </aside>
 
-  <main class="shadow flex flex-col h-full overflow-auto rounded-tl-xl rounded-bl-xl"
+  <main class="shadow flex flex-col h-full overflow-auto rounded-none md:rounded-tl-xl md:rounded-bl-xl"
         id="canvas">
     <mix-main-toolbar [showExpandBtn]="!expand()"
                       (expandChange)="onExpandChange()"></mix-main-toolbar>

diff --git a/libs/mix-share/src/modules/layout/mix-layout.component.scss b/libs/mix-share/src/modules/layout/mix-layout.component.scss
@@ -19,10 +19,33 @@
 
   #sidebar {
     contain: strict;
+    background-color: #eaf0f3;
   }
 
   .shadow {
     box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 2px 0px,
       rgba(0, 0, 0, 0.06) -4px 4px 8px 0px;
   }
 }
+
+@media only screen and (max-width: 890px) {
+  .main-layout {
+    display: flex;
+    --sidebar-reserved-width: 100vw;
+
+    &.--collapse {
+      --sidebar-reserved-width: 0px;
+    }
+
+    #sidebar {
+      width: var(--sidebar-reserved-width);
+      contain: strict;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      z-index: 5;
+      height: 100%;
+      transition: all 0.3s;
+    }
+  }
+}
diff --git a/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.html b/libs/mix-share/src/modules/scheduler/schedulers/schedulers.component.html
@@ -29,23 +29,23 @@
         <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
           <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
             <tr>
-              <th class="px-6 py-3"
+              <th class="px-6 py-3 whitespace-nowrap"
                   scope="col">
                 Job name
               </th>
-              <th class="px-6 py-3"
+              <th class="px-6 py-3 whitespace-nowrap"
                   scope="col">
                 Job Type
               </th>
-              <th class="px-6 py-3"
+              <th class="px-6 py-3 whitespace-nowrap"
                   scope="col">
                 Start At
               </th>
-              <th class="px-6 py-3"
+              <th class="px-6 py-3 whitespace-nowrap"
                   scope="col">
                 End At
               </th>
-              <th class="px-6 py-3"
+              <th class="px-6 py-3 whitespace-nowrap"
                   scope="col">
                 Action
               </th>
@@ -54,12 +54,14 @@
           <tbody>
             <tr *ngFor="let job of state.data"
                 class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
-              <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+              <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white "
                   scope="row">
                 {{ job.name }}
               </th>
               <td class="px-6 py-4">
-                {{ job.jobName | formatJobName }}
+                <span class="whitespace-nowrap">
+                  {{ job.jobName | formatJobName }}
+                </span>
               </td>
               <td class="px-6 py-4">
               </td>

diff --git a/libs/share-styles/src/styles/dialog.scss b/libs/share-styles/src/styles/dialog.scss
@@ -104,3 +104,33 @@ ngneat-dialog {
     }
   }
 }
+
+@media only screen and (max-width: 890px) {
+  .ngneat-dialog-backdrop {
+    padding: 0px !important;
+
+    .ngneat-dialog-content {
+      width: 100vw !important;
+      min-width: 100vw !important;
+      max-width: 100vw !important;
+      height: 100vh !important;
+      min-height: 100vh !important;
+      --dialog-content-border-radius: 0px !important;
+
+      .mix-dialog {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        min-height: 100vh;
+
+        &__footer {
+          margin-top: auto;
+        }
+
+        &__content {
+          flex-grow: 1;
+        }
+      }
+    }
+  }
+}