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;
+ }
+ }
+ }
+ }
+}