From 5225fc67e96488b437033a98c6ccba2f72361c14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Thu, 27 Jun 2019 11:57:27 +0200
Subject: [PATCH] Fix search bar on the top when scrolling
---
.../comment-list/comment-list.component.html | 4 ++--
.../comment-list/comment-list.component.scss | 20 +++++++++++++++----
.../comment-list/comment-list.component.ts | 10 ++++++++++
3 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 4f4b3ded6..498c28dd2 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="row" id="search-container" *ngIf="comments.length > 2">
+<div fxLayout="row" [ngClass]="{'search-container' : !scroll, 'search-container-fixed' : scroll}" *ngIf="comments.length > 2" (window:scroll)="checkScroll()">
<mat-label fxLayoutAlign="center center">
<mat-icon class="search-icon">search</mat-icon>
</mat-label>
@@ -74,8 +74,8 @@
<div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 3">
<button mat-fab class="fab-extended" (click)="openCreateDialog()">
- {{'comment-list.add-comment' | translate}}
<mat-icon class="add">add</mat-icon>
+ {{'comment-list.add-comment' | translate}}
</button>
</div>
diff --git a/src/app/components/shared/comment-list/comment-list.component.scss b/src/app/components/shared/comment-list/comment-list.component.scss
index 94ba56841..ae1600939 100644
--- a/src/app/components/shared/comment-list/comment-list.component.scss
+++ b/src/app/components/shared/comment-list/comment-list.component.scss
@@ -12,19 +12,31 @@ input {
box-sizing: border-box;
padding: 0 10px 0 5px;
width: 100%;
- background-color: var(--surface);
+ background-color: var(--dialog);
border: none;
outline: none;
min-height: 60px;
font-size: large;
border-radius: 5px;
- color: var(--on-surface);
+ color: var(--on-secondary);
+}
+
+.search-container {
+ border-radius: 5px;
+ background-color: var(--dialog);
+ margin-bottom: 2%;
}
-#search-container {
+.search-container-fixed {
border-radius: 5px;
- background-color: var(--surface);
+ background-color: var(--dialog);
margin-bottom: 2%;
+ position: fixed;
+ top: 10px;
+ right: center;
+ width: 92%;
+ max-width: 800px;
+ z-index: 1;
}
.search-icon {
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 7c6c9e85a..9cd24e353 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -1,3 +1,4 @@
+import { element } from 'protractor';
import { Component, Input, OnInit } from '@angular/core';
import { Comment } from '../../../models/comment';
import { CommentService } from '../../../services/http/comment.service';
@@ -39,6 +40,7 @@ export class CommentListComponent implements OnInit {
correct = 'correct';
currentFilter = '';
commentVoteMap = new Map<string, Vote>();
+ scroll = false;
constructor(private commentService: CommentService,
private translateService: TranslateService,
@@ -79,6 +81,14 @@ export class CommentListComponent implements OnInit {
});
}
+ checkScroll(): void {
+ if (document.documentElement.scrollTop >= 65) {
+ this.scroll = true;
+ } else {
+ this.scroll = false;
+ }
+ }
+
searchComments(term: string): void {
if (term && term.length > 2) {
this.hideCommentsList = true;
--
GitLab