From 4e9e2b25e12cf346c8553a42f012644a1fa8d16a Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Thu, 11 May 2023 17:17:16 +0300 Subject: [PATCH 1/7] [Library & openaire-theme & Explore | explore-redesign]: Added search form in menu (navbar) in landing pages. 1. search.less: Added css for modifier .small-vertical for .input-wrapper of . 2. layout.service.ts: Added hasMenuSearchBarSubject: BehaviorSubject = new BehaviorSubject(false), parsing and getter/setter methods. 3. navigationBar.module.ts: Imported SearchInputModule. 4. navigationBar.component.ts: a. Added searchMode: boolean = false; and hasSearchBar: boolean = false; (and other helpful fields) b. Subscribe to queryParams to hide search bar and reset keyword | Subscribe to layoutService.hasMenuSearchBar to check if search should be included in navbar or not. c. Added methods "openSearch()" to show the search form and "goTo()" to trigger the search action and navigate to the search page. 5. navigationBar.component.html: Added
and search-icon button to show search bar | Added checks if searchMode is enabled (search form visible) or not. 6. app-routing.module.ts: In routes for landing pages added in data: hasMenuSearchBar: true. --- less/search.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/less/search.less b/less/search.less index 4a29f67..e514a3f 100644 --- a/less/search.less +++ b/less/search.less @@ -116,6 +116,14 @@ } } } + + &.small-vertical { + --search-input-icon-padding-vertical: 10px; + + & .search { + --input-padding-vertical: 10px; + } + } } .hook-inverse-misc() { From 856e4827243cbbfd71d8fbe636d0aa019e99867b Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 12 May 2023 17:27:11 +0300 Subject: [PATCH 2/7] Add background modifier in search-input --- less/search.less | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/less/search.less b/less/search.less index e514a3f..ff701ba 100644 --- a/less/search.less +++ b/less/search.less @@ -10,9 +10,14 @@ --search-input-border-focus: var(--search-input-border); --search-input-border-style-focus: var(--search-input-border-style); /* Icon */ + --search-input-icon-ratio: 1.3; --search-input-icon-color: @global-secondary-background; --search-input-icon-color-collapsed: @global-color; --search-input-icon-color-disabled: @global-muted-color; + --search-input-icon-display: inline; + --search-input-icon-background-color: transparent; + --search-input-icon-background-color-disabled: transparent; + --search-input-icon-background-padding: 0px; --search-input-divider: @global-border-width solid @global-border; --search-input-icon-padding-horizontal: 15px; --search-input-icon-padding-vertical: 16px; @@ -37,7 +42,7 @@ } &.collapsed { - width: calc(2 * var(--search-input-icon-padding-horizontal) + 26px); + width: calc(2 * (var(--search-input-icon-padding-horizontal) + var(--search-input-icon-background-padding)) + var(--search-input-icon-ratio)*20px); & .search-icon { color: var(--search-input-icon-color-collapsed); @@ -66,10 +71,22 @@ cursor: pointer; user-select: none; + & > icon { + padding: var(--search-input-icon-background-padding); + border-radius: 50%; + display: var(--search-input-icon-display); + background-color: var(--search-input-icon-background-color); + } + + &.disabled { color: var(--search-input-icon-color-disabled); cursor: default; pointer-events: none; + + & > icon { + background-color: var(--search-input-icon-background-color-disabled); + } } } @@ -115,13 +132,30 @@ --input-font-size: 14px; } } - } - &.small-vertical { - --search-input-icon-padding-vertical: 10px; + &.small-vertical { + --search-input-icon-padding-vertical: 10px; - & .search { - --input-padding-vertical: 10px; + & .search { + --input-padding-vertical: 10px; + } + } + + &.background { + --search-input-icon-ratio: 1; + --search-input-icon-color: @global-inverse-color; + --search-input-icon-color-collapsed: @global-inverse-color; + --search-input-icon-color-disabled: @global-meta-color; + --search-input-icon-display: inline-block; + --search-input-icon-background-color: @global-secondary-background; + --search-input-icon-background-color-disabled: @global-muted-color; + --search-input-icon-background-padding: 7px; + --search-input-icon-padding-horizontal: 10px; + --search-input-icon-padding-vertical: 10px; + + &.small-vertical { + --search-input-icon-padding-vertical: 6px; + } } } } From 976591a2476a8cd995fb26d6f797310ae9e8a788 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 12 May 2023 18:06:58 +0300 Subject: [PATCH 3/7] Add mofifier background in input also for action-icon --- less/input.less | 28 ++++++++++++++++++++++++++++ less/search.less | 2 +- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/less/input.less b/less/input.less index 58f3c1a..91bf11f 100644 --- a/less/input.less +++ b/less/input.less @@ -35,6 +35,10 @@ /* Action */ --input-action-icon-color: @global-secondary-background; --input-action-icon-color-disabled: @global-muted-color; + --input-action-icon-display: inline; + --input-action-icon-background-color: transparent; + --input-action-icon-background-color-disabled: transparent; + --input-action-icon-background-padding: 0px; } /** Input Wrapper */ @@ -151,10 +155,21 @@ cursor: pointer; user-select: none; + & > icon { + padding: var(--input-action-icon-background-padding); + border-radius: 50%; + display: var(--input-action-icon-display); + background-color: var(--input-action-icon-background-color); + } + &.disabled { color: var(--input-action-icon-color-disabled); cursor: default; pointer-events: none; + + & > icon { + background-color: var(--input-action-icon-background-color-disabled); + } } } @@ -317,6 +332,19 @@ &.normal-font-size { --input-font-size: 16px; } + + &.background { + --input-action-icon-color: @global-inverse-color; + --input-action-icon-color-disabled: @global-meta-color; + --input-action-icon-display: block; + --input-action-icon-background-color: @global-secondary-background; + --input-action-icon-background-color-disabled: @global-muted-color; + --input-action-icon-background-padding: 5px; + + &.small, &.small-vertical { + --input-action-icon-background-padding: 3px; + } + } } .uk-dropdown.options { diff --git a/less/search.less b/less/search.less index ff701ba..9cf4c12 100644 --- a/less/search.less +++ b/less/search.less @@ -146,7 +146,7 @@ --search-input-icon-color: @global-inverse-color; --search-input-icon-color-collapsed: @global-inverse-color; --search-input-icon-color-disabled: @global-meta-color; - --search-input-icon-display: inline-block; + --search-input-icon-display: block; --search-input-icon-background-color: @global-secondary-background; --search-input-icon-background-color-disabled: @global-muted-color; --search-input-icon-background-padding: 7px; From a49dca9a915f04fb85f86eb446d045056bbe229c Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 15 May 2023 14:41:19 +0300 Subject: [PATCH 4/7] Change input text color to black. Remove background from disabled action-icon and search-icon on background modifier --- less/input.less | 4 +--- less/search.less | 2 -- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/less/input.less b/less/input.less index 91bf11f..cddde85 100644 --- a/less/input.less +++ b/less/input.less @@ -5,7 +5,7 @@ --input-placeholder-color: @global-meta-color; --input-placeholder-weight: 400; --input-hint-color: @global-meta-color; - --input-color: @global-color; + --input-color: @global-emphasis-color; --input-border-radius: @global-border-radius; /* Size modifiers */ --input-padding-vertical: 12px; @@ -335,10 +335,8 @@ &.background { --input-action-icon-color: @global-inverse-color; - --input-action-icon-color-disabled: @global-meta-color; --input-action-icon-display: block; --input-action-icon-background-color: @global-secondary-background; - --input-action-icon-background-color-disabled: @global-muted-color; --input-action-icon-background-padding: 5px; &.small, &.small-vertical { diff --git a/less/search.less b/less/search.less index 9cf4c12..19db6de 100644 --- a/less/search.less +++ b/less/search.less @@ -145,10 +145,8 @@ --search-input-icon-ratio: 1; --search-input-icon-color: @global-inverse-color; --search-input-icon-color-collapsed: @global-inverse-color; - --search-input-icon-color-disabled: @global-meta-color; --search-input-icon-display: block; --search-input-icon-background-color: @global-secondary-background; - --search-input-icon-background-color-disabled: @global-muted-color; --search-input-icon-background-padding: 7px; --search-input-icon-padding-horizontal: 10px; --search-input-icon-padding-vertical: 10px; From 215d5922a4006e618c4df4d440c57a3da4356e41 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Fri, 30 Jun 2023 14:59:24 +0300 Subject: [PATCH 5/7] Add disabled for labels in input --- less/input.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/input.less b/less/input.less index 1a21c7a..65d1383 100644 --- a/less/input.less +++ b/less/input.less @@ -115,7 +115,7 @@ opacity: 1; } - &:disabled { + &:disabled, &.uk-disabled { background: transparent; color: var(--input-color-disabled); -webkit-text-fill-color: var(--input-color-disabled); From d32bb1873621bf452bbc6528c3d92474bf826789 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 4 Jul 2023 11:09:43 +0300 Subject: [PATCH 6/7] Add uk-border-box for box-sizing: border-box --- less/utility.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/less/utility.less b/less/utility.less index 1c4ffc6..472a40a 100644 --- a/less/utility.less +++ b/less/utility.less @@ -7,6 +7,10 @@ .hook-utility-misc() { /* Border */ + .uk-border-box { + box-sizing: border-box; + } + .uk-border { border: @border-width solid @border-color; } From 2fffe0fa672adcf5577461d10c30e34b00308c85 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 11 Jul 2023 16:04:32 +0300 Subject: [PATCH 7/7] Dropdown: Add mobile-dropdown. Create min height classes --- less/dropdown.less | 68 ++++++++++++++++++++++++++++++++++++++++++++++ less/height.less | 16 +++++++++++ 2 files changed, 84 insertions(+) diff --git a/less/dropdown.less b/less/dropdown.less index 4f5907f..d726932 100644 --- a/less/dropdown.less +++ b/less/dropdown.less @@ -21,6 +21,21 @@ @dropdown-nav-divider-margin: 5px; +/* Mobile Dropdown*/ +@dropdown-mobile-z-index: @global-z-index; +@dropdown-mobile-background: rgba(0, 0, 0, 0.8); +@dropdown-mobile-container-height: 70vh; +@dropdown-mobile-container-background: @global-inverse-color; +@dropdown-mobile-container-border-radius: 30px 30px 0 0; +@dropdown-mobile-container-border: @global-border; +@dropdown-mobile-container-border-width: @global-border-width; +@dropdown-mobile-container-padding-top: @global-medium-gutter + 10px; +@dropdown-mobile-container-divider-width: 60px; +@dropdown-mobile-container-divider-height: 4px; +@dropdown-mobile-container-divider-background: @dropdown-mobile-container-border; +@dropdown-mobile-container-divider-border-radius: 50px; +@dropdown-mobile-container-close-position: @global-small-gutter; + .hook-dropdown() { box-shadow: @dropdown-box-shadow; border: @dropdown-border-width solid @dropdown-border; @@ -51,4 +66,57 @@ .uk-dropdown-nav > li.uk-active > a { font-weight: @dropdown-nav-item-active-font-weight; } + + .uk-dropdown-mobile { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + height: 100vh; + z-index: @dropdown-mobile-z-index; + overflow-y: auto; + background: @dropdown-mobile-background; + display: none; + + &.uk-open { + display: block; + } + + & > .uk-dropdown-mobile-container { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: @dropdown-mobile-container-height; + background: @dropdown-mobile-container-background; + border-radius: @dropdown-mobile-container-border-radius; + border: @dropdown-mobile-container-border-width solid @dropdown-mobile-container-border; + padding-top: @dropdown-mobile-container-padding-top; + + &:before { + content: ''; + width: @dropdown-mobile-container-divider-width; + height: @dropdown-mobile-container-divider-height; + background: @dropdown-mobile-container-divider-background; + border-radius: @dropdown-mobile-container-divider-border-radius; + position: absolute; + top: 15px; + left: 50%; + transform: translate(-50%, -50%); + } + + & > .uk-close { + position: absolute; + right: @dropdown-mobile-container-close-position; + top: @dropdown-mobile-container-close-position; + } + + & > .uk-content { + box-sizing: border-box; + max-height: 100%; + overflow-y: auto; + } + } + } } diff --git a/less/height.less b/less/height.less index 11341dd..9f8e5e0 100644 --- a/less/height.less +++ b/less/height.less @@ -11,4 +11,20 @@ .uk-height-max-xsmall { max-height: @height-xsmall-height; } + + .uk-height-min-xsmall { + min-height: @height-xsmall-height; + } + + .uk-height-min-small { + min-height: @height-small-height; + } + + .uk-height-min-medium { + min-height: @height-medium-height; + } + + .uk-height-min-large { + min-height: @height-large-height; + } }