From 29324e783e752a1c167f866f5956760d61ea77d9 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Thu, 22 Aug 2019 15:27:05 -0500
Subject: [PATCH] Use mat-fab for the round button
---
src/app/dars/audit/audit.component.html | 22 ++++++++++---------
.../metadata-mobile-view.component.html | 18 ++++++++-------
src/assets/sass/general.scss | 18 ++++-----------
3 files changed, 26 insertions(+), 32 deletions(-)
diff --git a/src/app/dars/audit/audit.component.html b/src/app/dars/audit/audit.component.html
index e14c7ff..7e28f61 100644
--- a/src/app/dars/audit/audit.component.html
+++ b/src/app/dars/audit/audit.component.html
@@ -167,8 +167,8 @@
<div class="subrequirement-status-wrapper">
<p *ngIf="reqBody.contentType === 'okSubrequirementTLine' || reqBody.contentType === 'noSubrequirementTLine'">
- <cse-audit-symbol
- *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols"
+ <cse-audit-symbol
+ *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols"
[symbol]="symbol"
></cse-audit-symbol>
</p>
@@ -258,12 +258,14 @@
</mat-accordion>
</section>
- <button (click)="scrollTop();"
- class="audit-scrolltop"
- [hidden]="!scrolling"
- aria-label="Scroll to top"
- matTooltip="Scroll to top"
- matTooltipPosition="above">
- <i class="material-icons">arrow_upward</i>
- </button>
+ <button
+ (click)="scrollTop();"
+ class="audit-scrolltop"
+ *ngIf="scrolling"
+ mat-fab
+ aria-label="Scroll to top"
+ matTooltip="Scroll to top"
+ matTooltipPosition="above">
+ <i class="material-icons">arrow_upward</i>
+ </button>
</mat-card>
\ No newline at end of file
diff --git a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html b/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html
index 1c33eee..a9c1755 100644
--- a/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html
+++ b/src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html
@@ -38,14 +38,16 @@
</button>
</div>
</mat-card-footer>
- <button (click)="scrollTop();"
- class="audit-scrolltop"
- [hidden]="!scrolling"
- aria-label="Scroll to top"
- matTooltip="Scroll to top"
- matTooltipPosition="above">
- <i class="material-icons">arrow_upward</i>
- </button>
</mat-card>
+ <button
+ (click)="scrollTop();"
+ class="audit-scrolltop"
+ *ngIf="scrolling"
+ mat-fab
+ aria-label="Scroll to top"
+ matTooltip="Scroll to top"
+ matTooltipPosition="above">
+ <i class="material-icons">arrow_upward</i>
+ </button>
</div>
</div>
diff --git a/src/assets/sass/general.scss b/src/assets/sass/general.scss
index 4c50984..6c4e932 100644
--- a/src/assets/sass/general.scss
+++ b/src/assets/sass/general.scss
@@ -423,24 +423,14 @@ main {
// Scroll to the top
.audit-scrolltop {
- background-color: #c5050c;
- width: 55px;
- height: 55px;
- position: fixed;
+ position: fixed !important;
right: 24px;
bottom: 30px;
- color: #fff;
- text-align: center;
- font-weight: 800;
- border-radius: 50%;
- line-height: 6em;
- border: none;
- cursor: pointer;
z-index: 999;
- transform: translate(0, 20px);
transition: all 0.5s;
- &:hover {
- background-color: #a70007;
+ &:hover,
+ &:focus {
+ background-color: #920309;
}
}
--
GitLab