Update Style

Ahoo-Wang · Feb 20, 2024 · ff3b8b4 · ff3b8b4
1 parent d15f1c3
commit ff3b8b4
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 67 deletions.
diff --git a/cosky-dashboard/src/app/components/authenticated/authenticated.component.html b/cosky-dashboard/src/app/components/authenticated/authenticated.component.html
@@ -11,19 +11,17 @@
   ~ limitations under the License.
   -->
 
-<nz-layout class="app-layout">
-  <nz-sider class="menu-sidebar"
-            nzCollapsible
-            nzWidth="168px"
+<nz-layout>
+  <nz-sider nzCollapsible
             nzBreakpoint="md"
             [(nzCollapsed)]="isCollapsed"
   >
-    <div class="sidebar-logo">
+    <div class="logo">
       <a href="https://github.com/Ahoo-Wang/CoSky" target="_blank">
-        <h1>{{title}}</h1>
+        <h1>{{ title }}</h1>
       </a>
     </div>
-    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
+    <ul nz-menu nzTheme="dark" nzMode="inline">
       <li nz-menu-item nzMatchRouter routerLink="/home">
         <i nz-icon nzType="dashboard"></i>
         <span>Dashboard</span>
@@ -62,10 +60,10 @@ <h1>{{title}}</h1>
       </li>
     </ul>
   </nz-sider>
-  <nz-layout class="right-layout">
+  <nz-layout class="content">
     <nz-header>
-      <div class="app-header">
-        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
+      <div>
+        <span class="trigger" (click)="isCollapsed = !isCollapsed">
             <i class="trigger"
                nz-icon
                [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
@@ -75,7 +73,7 @@ <h1>{{title}}</h1>
         <div style="float: right;padding-right: 100px">
           <a nz-dropdown [nzDropdownMenu]="signStatusMenu">
             <i nz-icon nzType="user" nzTheme="outline"></i>
-            {{currentUser.sub}}
+            {{ currentUser.sub }}
             <i nz-icon nzType="down"></i>
           </a>
           <nz-dropdown-menu #signStatusMenu="nzDropdownMenu">

diff --git a/cosky-dashboard/src/app/components/authenticated/authenticated.component.scss b/cosky-dashboard/src/app/components/authenticated/authenticated.component.scss
@@ -10,86 +10,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-:host {
-  display: flex;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.app-layout {
-  height: 100vh;
-}
-
-nz-sider {
-  overflow: auto;
-  height: 100%;
-  position: fixed;
-  left: 0;
-}
-
-.right-layout {
-  margin-left: 168px;
-}
-
-.header-trigger {
-  height: 64px;
-  padding: 20px 24px;
-  font-size: 20px;
+.trigger {
+  font-size: 18px;
+  line-height: 64px;
+  padding: 0 24px;
   cursor: pointer;
-  transition: all .3s, padding 0s;
+  transition: color 0.3s;
 }
 
-.sidebar-logo {
-  position: relative;
-  height: 64px;
-  overflow: hidden;
-  line-height: 64px;
-  background: #001529;
-  transition: all .3s;
+.trigger:hover {
+  color: #1890ff;
 }
 
-.sidebar-logo img {
-  display: inline-block;
+.logo {
   height: 32px;
-  width: 32px;
-  vertical-align: middle;
+  background: rgba(100, 100, 100, 0.2);
+  margin: 8px;
+  text-align: center;
 }
 
-.sidebar-logo h1 {
+.logo h1 {
   display: inline-block;
-  margin: 0 0 0 20px;
   color: #fff;
-  font-weight: 600;
+  line-height: 32px;
+
   font-size: 14px;
   font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   vertical-align: middle;
 }
 
 nz-header {
+  background: #fff;
   padding: 0;
-  width: 100%;
-  z-index: 2;
 }
 
-.app-header {
-  position: relative;
-  height: 64px;
-  padding: 0;
-  background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+nz-breadcrumb {
+  margin: 16px 0;
 }
 
 nz-content {
   margin: 24px;
+  height: 100%;
 }
 
-.inner-content {
-  //padding: 24px;
-  //background: #fff;
-  width: 100%;
-  height: 100%;
+.content{
+  min-height: 100vh;
 }
 
 nz-footer {

diff --git a/cosky-dashboard/src/app/components/authenticated/authenticated.component.ts b/cosky-dashboard/src/app/components/authenticated/authenticated.component.ts
@@ -24,7 +24,7 @@ import {NzMessageService} from "ng-zorro-antd/message";
   styleUrls: ['./authenticated.component.scss']
 })
 export class AuthenticatedComponent implements OnInit {
-  title = 'CoSky Dashboard';
+  title = 'CoSky';
   isCollapsed = false;
   currentUser: TokenPayload;