fix: css

artemnih · Oct 6, 2021 · 8500028 · 8500028
1 parent 2022aa3
commit 8500028
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 47 deletions.
diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html
@@ -1,6 +1,6 @@
 <div class="nxe-breadcrumbs-container">
-    <span *ngFor="let crumb of breadcrumbs; let last = last">
-        <span (click)="click(crumb)" class="nxe-breadcrumb">{{ crumb.name }}</span>
+    <span *ngFor="let crumb of breadcrumbs; last as last">
+        <button (click)="click(crumb)" class="nxe-breadcrumb-button">{{ crumb.name }}</button>
         <span *ngIf="!last" class="nxe-breadcrumb-separator">
             <i class="fa fa-angle-right" aria-hidden="true"></i>
         </span>

diff --git a/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss b/projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.scss
@@ -1,10 +1,20 @@
 .nxe-breadcrumbs-container {
-    margin: 5px 10px;
+    width: 100%;
+    border: 1px solid red;
+    padding: 10px;
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box; /* Firefox, other Gecko */
+    box-sizing: border-box; /* Opera/IE 8+ */
 
-    .nxe-breadcrumb {
+    .nxe-breadcrumb-button {
         cursor: pointer;
         padding: 5px 5px;
         border-radius: 5px;
+        background: transparent;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
 
         &:hover {
             background-color: #d7edff;

diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.html
@@ -1,5 +1,7 @@
 <div class="nxe-explorer-container">
     <nxe-menu-bar></nxe-menu-bar>
     <nxe-breadcrumbs></nxe-breadcrumbs>
-    <nxe-icons></nxe-icons>
+    <div class="nxe-explorer-view-container">
+        <nxe-icons></nxe-icons>
+    </div>
 </div>
diff --git a/projects/ngx-explorer/src/lib/components/explorer/explorer.component.scss b/projects/ngx-explorer/src/lib/components/explorer/explorer.component.scss
@@ -0,0 +1,14 @@
+.nxe-explorer-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.nxe-explorer-view-container {
+    flex-grow: 1;
+    overflow: auto;
+}
+
+.nxe-breadcrumbs-container {
+    border-bottom: 0px !important;
+}
diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.html b/projects/ngx-explorer/src/lib/components/icons/icons.component.html
@@ -1,9 +1,10 @@
 <div class="nxe-icons-container">
-    <div class="nxe-icons-wrapper" [ngClass]="{'nxe-icon-selected':isSelected(item)}" *ngFor="let item of items" (dblclick)="open($event, item)"
-        (click)="select($event, item)">
-        <div class="nxe-icon">
-            <i [className]="icons[item.type]"></i>
+    <div class="nxe-icons-wrapper" *ngFor="let item of items" (dblclick)="open($event, item)" (click)="select($event, item)">
+        <div class="nxe-icons-wrapper-inner" [ngClass]="{'nxe-icon-selected':isSelected(item)}">
+            <div class="nxe-icon">
+                <i [className]="icons[item.type]"></i>
+            </div>
+            <div class="nxe-icon-text">{{ getDisplayName(item.data) }}</div>
         </div>
-        <div class="nxe-icon-text">{{ getDisplayName(item.data) }}</div>
     </div>
 </div>
diff --git a/projects/ngx-explorer/src/lib/components/icons/icons.component.scss b/projects/ngx-explorer/src/lib/components/icons/icons.component.scss
@@ -2,54 +2,64 @@
 
 .nxe-icons-container {
     display: flex;
+    flex-wrap: wrap;
+    border: 1px solid blue;
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box; /* Firefox, other Gecko */
+    box-sizing: border-box; /* Opera/IE 8+ */
 
     .nxe-icons-wrapper {
-        padding-bottom: 5px;
+        margin: 10px 10px 0px 10px;
+        height: 110px;
         width: 80px;
-        border-radius: 5px;
-        text-align: center;
-        border: 1px solid transparent;
-        margin: 0px 5px;
-        height: 100%;
-
-        &:hover {
-            cursor: pointer;
-        }
-
-        .nxe-icon {
-            margin-top: 5px;
+        display: inline-block;
+        flex-grow: 0;
 
-            i {
-                font-size: 50px;
-                color: #bbb;
-                font-weight: 500;
+        .nxe-icons-wrapper-inner {
+            border: 1px solid transparent;
+            padding-bottom: 5px;
+            text-align: center;
+            border-radius: 5px;
 
-                &.fa {
-                    -webkit-text-stroke: 2px white;
-                }
+            &:hover {
+                cursor: pointer;
             }
-        }
-
-        &.nxe-icon-selected {
-            background-color: #f1f9ff;
-            border: 1px solid #94cfff;
 
             .nxe-icon {
+                margin-top: 5px;
+
                 i {
+                    font-size: 50px;
+                    color: #bbb;
+                    font-weight: 500;
+
                     &.fa {
-                        -webkit-text-stroke: 2px #f1f9ff;
+                        -webkit-text-stroke: 2px white;
+                    }
+                }
+            }
+
+            &.nxe-icon-selected {
+                background-color: #f1f9ff;
+                border: 1px solid #94cfff;
+
+                .nxe-icon {
+                    i {
+                        &.fa {
+                            -webkit-text-stroke: 2px #f1f9ff;
+                        }
                     }
                 }
             }
         }
-    }
 
-    .nxe-icon-text {
-        text-align: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
+        .nxe-icon-text {
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
     }
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,3 +1,5 @@
-<!-- <nxe-icons></nxe-icons> -->
-
-<nxe-explorer></nxe-explorer>
+<div class="demo-main">
+    <div class="demo-container">
+        <nxe-explorer></nxe-explorer>
+    </div>
+</div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,14 @@
+.demo-main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.demo-container {
+    width: 50%;
+    height: 400px;
+    border: 1px solid #ccc;
+}