From bd67b660c8565a027c38bb0d7bb93a1097844bcf Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Sat, 31 Mar 2018 12:03:21 +0300 Subject: [PATCH] Updated Flex Layout package + Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled + Fixed: Expanded search bar style --- package-lock.json | 24 +++--- package.json | 2 +- .../search-bar/search-bar.component.html | 10 ++- .../search-bar/search-bar.component.scss | 80 +++++++++++-------- .../components/sidebar/sidebar.component.scss | 3 +- 5 files changed, 69 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8626eaf9..e685d432 100644 --- a/package-lock.json +++ b/package-lock.json @@ -185,9 +185,9 @@ } }, "@angular/flex-layout": { - "version": "5.0.0-beta.13", - "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.13.tgz", - "integrity": "sha1-ga1q1GEAOUbnxSKSCCGla6cpKoU=", + "version": "5.0.0-beta.14", + "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz", + "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==", "requires": { "tslib": "1.9.0" } @@ -578,7 +578,7 @@ "requires": { "angular-draggable-droppable": "2.0.0", "angular-resizable-element": "2.0.0", - "calendar-utils": "0.1.1", + "calendar-utils": "0.1.2", "date-fns": "1.29.0", "positioning": "1.3.1", "tslib": "1.9.0" @@ -1678,9 +1678,9 @@ "dev": true }, "calendar-utils": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.1.tgz", - "integrity": "sha512-75JPgUK7l7OTg4ZptJMuuIoQzLndc4tcGhBCFtEONr0AMlD7zFVZthOC6Sf29K8r81A1+BJ/tDIFlElgY4XFFw==" + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.2.tgz", + "integrity": "sha512-9j4Zd1itopNYTSWzFU4MqD2IDHMqznfxsGr8UWGh7hWv+lKzjRJz0LS29iAg5rHtP6+6x3ikQnhoMGqFUzoD2Q==" }, "callsite": { "version": "1.0.0", @@ -2145,7 +2145,7 @@ }, "compression": { "version": "1.7.2", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz", + "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz", "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=", "dev": true, "requires": { @@ -11161,7 +11161,7 @@ "minimist": "1.2.0", "mkdirp": "0.5.1", "source-map": "0.6.1", - "source-map-support": "0.5.3" + "source-map-support": "0.5.4" }, "dependencies": { "minimist": { @@ -11177,9 +11177,9 @@ "dev": true }, "source-map-support": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz", - "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==", + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.4.tgz", + "integrity": "sha512-PETSPG6BjY1AHs2t64vS2aqAgu6dMIMXJULWFBGbh2Gr8nVLbCFDo6i/RMMvviIQ2h1Z8+5gQhVKSn2je9nmdg==", "dev": true, "requires": { "source-map": "0.6.1" diff --git a/package.json b/package.json index 541bfb4c..b99b17bb 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@angular/common": "5.2.8", "@angular/compiler": "5.2.8", "@angular/core": "5.2.8", - "@angular/flex-layout": "5.0.0-beta.13", + "@angular/flex-layout": "5.0.0-beta.14", "@angular/forms": "5.2.8", "@angular/http": "5.2.8", "@angular/material": "5.2.4", diff --git a/src/@fuse/components/search-bar/search-bar.component.html b/src/@fuse/components/search-bar/search-bar.component.html index c78502a7..d5040d99 100644 --- a/src/@fuse/components/search-bar/search-bar.component.html +++ b/src/@fuse/components/search-bar/search-bar.component.html @@ -1,5 +1,7 @@ -
-
+
+ +
+
+
\ No newline at end of file diff --git a/src/@fuse/components/search-bar/search-bar.component.scss b/src/@fuse/components/search-bar/search-bar.component.scss index 5ec26450..3fad367d 100644 --- a/src/@fuse/components/search-bar/search-bar.component.scss +++ b/src/@fuse/components/search-bar/search-bar.component.scss @@ -3,6 +3,8 @@ :host { .fuse-search-bar { + display: flex; + flex: 0 1 auto; min-width: 64px; height: 64px; font-size: 13px; @@ -11,40 +13,49 @@ height: 56px; } - .fuse-search-bar-expander, - .fuse-search-bar-collapser { - cursor: pointer; - padding: 0 20px; - margin: 0; - width: 64px !important; - height: 64px !important; - line-height: 64px !important; + .fuse-search-bar-content { + display: flex; + flex: 1 1 auto; + align-items: center; + justify-content: flex-start; - @include media-breakpoint-down('sm') { - height: 56px !important; - line-height: 56px !important; + .fuse-search-bar-expander, + .fuse-search-bar-collapser { + cursor: pointer; + padding: 0 20px; + margin: 0; + width: 64px !important; + height: 64px !important; + line-height: 64px !important; + + @include media-breakpoint-down('sm') { + height: 56px !important; + line-height: 56px !important; + } } - } - .fuse-search-bar-loader { - width: 64px !important; - height: 64px !important; - line-height: 64px !important; - @include media-breakpoint-down('sm') { - height: 56px !important; - line-height: 56px !important; + .fuse-search-bar-loader { + width: 64px !important; + height: 64px !important; + line-height: 64px !important; + + @include media-breakpoint-down('sm') { + height: 56px !important; + line-height: 56px !important; + } } - } - .fuse-search-bar-collapser { - display: none; - } + .fuse-search-bar-collapser { + display: none; + } - #fuse-search-bar-input { - display: none; - min-height: 64px; - background-color: transparent; - font-size: 16px; + #fuse-search-bar-input { + display: none; + flex: 1 0 auto; + min-height: 64px; + background-color: transparent; + font-size: 16px; + } } &.expanded { @@ -55,12 +66,15 @@ left: 0; z-index: 10; - #fuse-search-bar-input { - display: block; - } + .fuse-search-bar-content { - .fuse-search-bar-collapser { - display: block; + #fuse-search-bar-input { + display: flex; + } + + .fuse-search-bar-collapser { + display: flex; + } } } } diff --git a/src/@fuse/components/sidebar/sidebar.component.scss b/src/@fuse/components/sidebar/sidebar.component.scss index b3853867..1ba10735 100644 --- a/src/@fuse/components/sidebar/sidebar.component.scss +++ b/src/@fuse/components/sidebar/sidebar.component.scss @@ -5,7 +5,8 @@ fuse-sidebar { position: absolute; top: 0; bottom: 0; - overflow: hidden; + overflow-x: hidden; + overflow-y: auto; width: 280px; min-width: 280px; max-width: 280px;