From 161e514358434508f68411dc43a1a00e6c34385c Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Fri, 25 Oct 2019 14:18:09 +0200
Subject: [PATCH] bugfix: fix scroll bar flickering bugfix: scrollable splash
screen
---
.../nehubaContainer/nehubaContainer.style.css | 2 -
.../splashScreen/splashScreen.style.css | 3 +-
.../splashScreen/splashScreen.template.html | 84 ++++++++++---------
3 files changed, 46 insertions(+), 43 deletions(-)
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
index 7013d42d1..5023c2001 100644
--- a/src/ui/nehubaContainer/nehubaContainer.style.css
+++ b/src/ui/nehubaContainer/nehubaContainer.style.css
@@ -3,8 +3,6 @@
width:100%;
height:100%;
position:relative;
- /* n.b. needed for scrolling splash screen */
- overflow: auto;
}
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
index 49774d566..105dc67a4 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
@@ -1,8 +1,9 @@
:host
{
- display: block;
+ display: inline-block;
overflow: auto;
height: 100%;
+ width: 100%;
}
.font-stretch
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
index a63adbeb7..71a731611 100644
--- a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -1,43 +1,47 @@
-<div
- #parentContainer
- class="m-5 d-flex flex-row flex-wrap justify-content-center align-items-stretch pe-none">
- <mat-card
- (mousedown)="activatedTemplate$.next(template)"
- matRipple
- *ngFor="let template of loadedTemplate$ | async | filterNull"
- class="m-3 col-md-12 col-lg-6 pe-all mw-400px">
- <mat-card-header>
- <mat-card-title class="text-nowrap font-stretch">
- {{ template.properties.name }}
- </mat-card-title>
- </mat-card-header>
- <img
- [src]="template.properties.name | getTemplateImageSrcPipe"
- [srcset]="template.properties.name | getTemplateImageSrcPipe | imgSrcSetPipe"
- sizes="(max-width:576px) 90vw;(max-width: 768px) 50vw; 400px"
- [alt]="'Screenshot of ' + template.properties.name"
- mat-card-image />
- <mat-card-content>
- {{ template.properties.description }}
- </mat-card-content>
+<!-- n.b. div wrapper is required for scrolling to work properly -->
+<div class="h-100 w-100 overflow-auto">
- <mat-card-content>
- <mat-card-subtitle class="text-nowrap">
- Parcellations available
- </mat-card-subtitle>
- <button
- (mousedown)="$event.stopPropagation()"
- (click)="$event.stopPropagation(); selectTemplateParcellation(template, parcellation)"
- *ngFor="let parcellation of template.parcellations"
- mat-button
- color="primary">
- {{ parcellation.name }}
- </button>
- </mat-card-content>
+ <div
+ #parentContainer
+ class="p-5 w-100 d-flex flex-row flex-wrap justify-content-center align-items-stretch pe-all">
+ <mat-card
+ (mousedown)="activatedTemplate$.next(template)"
+ matRipple
+ *ngFor="let template of loadedTemplate$ | async | filterNull"
+ class="m-3 col-md-12 col-lg-6 pe-all mw-400px">
+ <mat-card-header>
+ <mat-card-title class="text-nowrap font-stretch">
+ {{ template.properties.name }}
+ </mat-card-title>
+ </mat-card-header>
+ <img
+ [src]="template.properties.name | getTemplateImageSrcPipe"
+ [srcset]="template.properties.name | getTemplateImageSrcPipe | imgSrcSetPipe"
+ sizes="(max-width:576px) 90vw;(max-width: 768px) 50vw; 400px"
+ [alt]="'Screenshot of ' + template.properties.name"
+ mat-card-image />
+ <mat-card-content>
+ {{ template.properties.description }}
+ </mat-card-content>
- <!-- required... or on ripple, angular adds 16px margin to the bottom -->
- <!-- see https://github.com/angular/components/issues/10898 -->
- <mat-card-footer>
- </mat-card-footer>
- </mat-card>
+ <mat-card-content>
+ <mat-card-subtitle class="text-nowrap">
+ Parcellations available
+ </mat-card-subtitle>
+ <button
+ (mousedown)="$event.stopPropagation()"
+ (click)="$event.stopPropagation(); selectTemplateParcellation(template, parcellation)"
+ *ngFor="let parcellation of template.parcellations"
+ mat-button
+ color="primary">
+ {{ parcellation.name }}
+ </button>
+ </mat-card-content>
+
+ <!-- required... or on ripple, angular adds 16px margin to the bottom -->
+ <!-- see https://github.com/angular/components/issues/10898 -->
+ <mat-card-footer>
+ </mat-card-footer>
+ </mat-card>
+ </div>
</div>
\ No newline at end of file
--
GitLab