CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3371 search: Improve styles for long items

Browse Source
This commit is contained in:
Noel De Martin 2023-10-05 16:41:18 +02:00
parent 42aa917cf8
commit c070ba5e42
5 changed files with 53 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/core/components/mod-icon/mod-icon.scss
View File

@ -27,6 +27,12 @@
}
}
&.other {
img {
filter: var(--filter);
}
}
}
img {

2
src/core/features/search/components/global-search-result/global-search-result.html
View File

@ -11,7 +11,7 @@
<core-format-text [text]="result.title"></core-format-text>
</h3>
<core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content"></core-format-text>
<div *ngIf="renderedContext" class="flex-row">
<div *ngIf="renderedContext" class="result-context-wrapper">
<div *ngIf="renderedContext.courseName" class="result-context">
<ion-icon name="fas-graduation-cap" aria-hidden="true"></ion-icon>
<core-format-text [text]="renderedContext.courseName"></core-format-text>

37
src/core/features/search/components/global-search-result/global-search-result.scss
View File

@ -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);
}
}

2
src/core/features/search/stories/components/components.module.ts
View File

@ -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,

20
src/core/features/search/stories/components/global-search-results-page/global-search-results-page.ts
View File

@ -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: '',
},
},
];
/**