diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index 8a6085ae4..d8a742862 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -27,6 +27,12 @@ } } + &.other { + img { + filter: var(--filter); + } + } + } img { diff --git a/src/core/features/search/components/global-search-result/global-search-result.html b/src/core/features/search/components/global-search-result/global-search-result.html index 46c186d82..dfb49fe48 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.html +++ b/src/core/features/search/components/global-search-result/global-search-result.html @@ -11,7 +11,7 @@ -
+
diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss index 566a5a56d..824d1823c 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.scss +++ b/src/core/features/search/components/global-search-result/global-search-result.scss @@ -21,6 +21,7 @@ margin-bottom: 0px; --padding: 0px; background: transparent; + flex-shrink: 0; } ion-icon, .result-icon { @@ -28,6 +29,7 @@ height: var(--core-global-search-result-icon-size); margin-inline-end: var(--spacing-2); + flex-shrink: 0; } } @@ -61,20 +63,33 @@ } - .result-context { + .result-context-wrapper { display: flex; - justify-items: center; - align-items: center; - color: var(--core-global-search-result-context-color); - margin-top: var(--spacing-2); - font-size: 12px; + flex-wrap: wrap; + flex-direction: row; - ion-icon { - margin-inline-end: var(--spacing-1); - } + .result-context { + display: flex; + justify-items: center; + align-items: center; + color: var(--core-global-search-result-context-color); + margin-top: var(--spacing-2); + margin-inline-end: var(--spacing-4); + font-size: 12px; + + ion-icon { + margin-inline-end: var(--spacing-1); + flex-shrink: 0; + } + + core-format-text { + color: var(--core-global-search-result-context-color); + } + + span { + white-space: normal; + } - + .result-context { - margin-inline-start: var(--spacing-4); } } diff --git a/src/core/features/search/stories/components/components.module.ts b/src/core/features/search/stories/components/components.module.ts index bfece68ca..1e59da784 100644 --- a/src/core/features/search/stories/components/components.module.ts +++ b/src/core/features/search/stories/components/components.module.ts @@ -20,13 +20,11 @@ import { CommonModule } from '@angular/common'; import { CoreSearchGlobalSearchResultsPageComponent, } from '@features/search/stories/components/global-search-results-page/global-search-results-page'; -import { CoreSearchGlobalSearchResultComponent } from '@features/search/components/global-search-result/global-search-result'; import { CoreSharedModule } from '@/core/shared.module'; @NgModule({ declarations: [ CoreSearchGlobalSearchResultsPageComponent, - CoreSearchGlobalSearchResultComponent, ], imports: [ CoreSharedModule, diff --git a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts index 8e4dd3dd3..6154c5d22 100644 --- a/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts +++ b/src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts @@ -107,6 +107,26 @@ export class CoreSearchGlobalSearchResultsPageComponent { iconurl: 'https://master.mm.moodledemo.net/theme/image.php?theme=boost&component=core&image=i%2Fsection', }, }, + { + id: 8, + url: '', + title: 'This item has long text everywhere, so make sure that it looks good anyways. ' + + 'Even if the screen you\'re using is also big, this should still be a problem because this text is *really* long.', + content: 'You would normally see lorem ipsum here, but we decided to just write some gibberish here to make it more ' + + 'real. We all know that lorem ipsum is fabricated text, and even though it serves its purpose, it isn\'t as ' + + 'engaging as some real, hand-crafted text (not sure why this should be engaging, anyways).', + context: { + courseName: 'And it\'s not just the title, either. Other things like the Course title also take more than ' + + 'you would expect in a normal site (or even not so normal).', + userName: 'To top it off, it has a user name as well! What is this madness? Well, at some point you just have to ' + + 'get creative. Honestly, I\'m surprised if you\'re even reading this. Kudos to you for being thorough.', + }, + module: { + name: 'book', + iconurl: 'assets/img/mod/book.svg', + area: '', + }, + }, ]; /**