Improve css style (#14909)

Signed-off-by: AllForNothing <sshijun@vmware.com>
2024-12-27 19:17:47 +01:00 · 2021-05-19 12:49:38 +08:00 · 2021-05-19 12:49:38 +08:00 · 1896df2cfb
commit 1896df2cfb
parent 294ee52d7a
13 changed files with 39 additions and 18 deletions
--- a/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
+++ b/src/portal/src/app/base/harbor-shell/harbor-shell.component.html
@ -62,7 +62,7 @@
                            {{'SIDE_NAV.SYSTEM_MGMT.REPLICATION' | translate}}
                        </a>
                        <a clrVerticalNavLink routerLink="/harbor/distribution/instances" routerLinkActive="active">
-                            <clr-icon shape="share"></clr-icon>
+                            <clr-icon shape="share" clrVerticalNavIcon></clr-icon>
                            {{'SIDE_NAV.DISTRIBUTIONS.NAME' | translate}}
                        </a>
                        <a *ngIf="!withAdmiral" clrVerticalNavLink routerLink="/harbor/labels"
--- a/src/portal/src/app/base/left-side-nav/projects/projects.component.scss
+++ b/src/portal/src/app/base/left-side-nav/projects/projects.component.scss
@ -1,6 +1,5 @@
@import "../../../shared/mixin";
 .header-title {
-    margin-top: 34px;
    margin-bottom: -34px;
 }

@ -31,4 +30,4 @@
 }
 .position-r{
    position: relative;
-}
+}
--- a/src/portal/src/app/base/left-side-nav/projects/statictics/statistics-panel.component.html
+++ b/src/portal/src/app/base/left-side-nav/projects/statictics/statistics-panel.component.html
@ -38,7 +38,7 @@
            <h4 class="head">{{'STATISTICS.STORAGE_USED' | translate }}</h4>
            <div class="storage-used font-weight-700">
                <div>
-                    <span class="size-number margin-right-5px">{{getSizeNumber()}}</span><span *ngIf="getSizeNumber()">{{getSizeUnit()}}</span>
+                    <span class="size-number margin-right-5px">{{getSizeNumber()}}</span><span>{{getSizeUnit()}}</span>
                </div>
            </div>
        </div>
--- a/src/portal/src/app/base/left-side-nav/projects/statictics/statistics-panel.component.scss
+++ b/src/portal/src/app/base/left-side-nav/projects/statictics/statistics-panel.component.scss
@ -7,11 +7,6 @@
  margin-right: 0.5rem;
  margin-top: 0;
 }
-
-.card:last-child{
-  width: 10rem;
-  margin-right: 0;
-}
 .flex-end {
  justify-content: flex-end;
 }
--- a/src/portal/src/app/base/project/project-detail/project-detail.component.html
+++ b/src/portal/src/app/base/project/project-detail/project-detail.component.html
@ -1,6 +1,6 @@
 <span class="back-icon"><</span>
 <a *ngIf="hasSignedIn" (click)="backToProject()" class="backStyle">{{'PROJECT_DETAIL.PROJECTS' | translate}}</a>
-<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']"> {{'SEARCH.BACK' | translate}}</a>
+<a *ngIf="!hasSignedIn" [routerLink]="['/harbor', 'sign-in']" class="backStyle"> {{'SEARCH.BACK' | translate}}</a>
 <div class="clr-row">
    <div  class="clr-col-4">
        <h1 class="custom-h2 center" sub-header-title>
@ -32,7 +32,7 @@
                    <div *ngIf="projectQuota">
                        <h3 class="mt-0 clr-display-inline-block">
                            <span class="size-number">{{getSizeNumber()}}</span>
-                            <span *ngIf="getSizeNumber()">{{getSizeUnit()}}</span>
+                            <span>{{getSizeUnit()}}</span>
                        </h3>
                        <span class="of">{{ 'QUOTA.OF' | translate }}</span>
                        <span>{{ projectQuota?.hard?.storage ===-1? ('QUOTA.UNLIMITED' | translate) : getIntegerAndUnit(projectQuota?.hard?.storage, projectQuota?.used?.storage).partNumberHard }}</span>
--- a/src/portal/src/app/base/project/tag-feature-integration/tag-feature-integration.component.html
+++ b/src/portal/src/app/base/project/tag-feature-integration/tag-feature-integration.component.html
@ -1,11 +1,11 @@
 <div class="btn-group btn-tag-integration">
-    <div class="radio btn">
+    <div class="radio btn" routerLink="tag-retention" routerLinkActive="checked">
        <input type="radio" name="btn-group-demo-radios" id="btn-retention">
-        <label class="p-0" for="btn-retention"><a class="strategy-nav-link" routerLink="tag-retention" routerLinkActive="active" >{{'TAG_RETENTION.TAG_RETENTION' | translate}}</a></label>
+        <label class="strategy-nav-link" for="btn-retention">{{'TAG_RETENTION.TAG_RETENTION' | translate}}</label>
    </div>
-    <div class="radio btn">
+    <div class="radio btn" routerLink="immutable-tag" routerLinkActive="checked">
        <input type="radio" name="btn-group-demo-radios" id="btn-immutable">
-        <label class="p-0" for="btn-immutable"><a class="strategy-nav-link" routerLink="immutable-tag" routerLinkActive="active" >{{'PROJECT_DETAIL.IMMUTABLE_TAG' | translate}}</a></label>
+        <label class="strategy-nav-link" for="btn-immutable">{{'PROJECT_DETAIL.IMMUTABLE_TAG' | translate}}</label>
    </div>
 </div>
 <router-outlet></router-outlet>
--- a/src/portal/src/app/base/project/tag-feature-integration/tag-feature-integration.component.scss
+++ b/src/portal/src/app/base/project/tag-feature-integration/tag-feature-integration.component.scss
@ -10,3 +10,6 @@
    text-decoration: none;
  }
 }
+.checked {
+  color: #fff;
+}
--- a/src/portal/src/app/shared/components/push-image/push-image.scss
+++ b/src/portal/src/app/shared/components/push-image/push-image.scss
@ -40,7 +40,7 @@
 }

 .btn-font {
-    font-size: 13px !important;
+    font-size: 14px !important;
 }
 .hide{
    display:none;
--- a/src/portal/src/app/shared/units/utils.spec.ts
+++ b/src/portal/src/app/shared/units/utils.spec.ts
@ -65,7 +65,7 @@ describe('functions in utils.ts should work', () => {
  it('function getSizeUnit() should work', () => {
    expect(getSizeUnit).toBeTruthy();
    expect(getSizeUnit(4564)).toEqual('KB');
-    expect(getSizeUnit(10)).toEqual('B');
+    expect(getSizeUnit(10)).toEqual('Byte');
    expect(getSizeUnit(4564000)).toEqual('MB');
    expect(getSizeUnit(4564000000)).toEqual('GB');
  });
--- a/src/portal/src/app/shared/units/utils.ts
+++ b/src/portal/src/app/shared/units/utils.ts
@ -607,7 +607,7 @@ export function getSizeUnit(size: number): string  {
    } else if (Math.pow(1024, 3) <= size && size < Math.pow(1024, 4)) {
        return "GB";
    } else {
-        return "B";
+        return "Byte";
    }
 }

--- a/src/portal/src/css/common.scss
+++ b/src/portal/src/css/common.scss
@ -255,3 +255,23 @@ artifact-list-tab {
 .central-block-loading {
  background-color: $central-block-loading-bg-color;
 }
+.backStyle {
+  color: $back-link-color;
+}
+.back-icon {
+  color: $back-link-color;
+}
+.breadcrumb a {
+  color: $back-link-color;
+}
+.arrow-block a{
+  color: $back-link-color;
+}
+.onback {
+  color: $back-link-color;
+}
+app-tag-feature-integration {
+  .checked {
+    background-color: $radio-button-checked;
+  }
+}
--- a/src/portal/src/css/dark-theme.scss
+++ b/src/portal/src/css/dark-theme.scss
@ -41,4 +41,6 @@ $label-hover-bg-color: #28404d;
 $nav-divider-bg-color: #fafafa;
 $label-color-input: #ddd;
 $central-block-loading-bg-color: rgba(0, 0, 0, 0.5);
+$back-link-color: #4aaed9!important;
+$radio-button-checked: #4aaed9;
@import "./common.scss";
--- a/src/portal/src/css/light-theme.scss
+++ b/src/portal/src/css/light-theme.scss
@ -43,4 +43,6 @@ $label-hover-bg-color: #eee;
 $nav-divider-bg-color: #000;
 $label-color-input: #5d5d5d;
 $central-block-loading-bg-color: rgba(255, 255, 255, 0.5);
+$back-link-color: none;
+$radio-button-checked: #0072a3;
@import "./common.scss";