From b2804abc406b9360a51eca41782317e5bd4b50b1 Mon Sep 17 00:00:00 2001
From: pnogal <paulina.nogal@wisc.edu>
Date: Fri, 26 Oct 2018 11:46:05 -0500
Subject: [PATCH] Add mobile style
---
src/app/degree-planner/degree-planner.component.html | 4 ++--
src/app/degree-planner/degree-planner.component.scss | 6 ++++++
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/src/app/degree-planner/degree-planner.component.html b/src/app/degree-planner/degree-planner.component.html
index 91f0a5b..7ee158f 100644
--- a/src/app/degree-planner/degree-planner.component.html
+++ b/src/app/degree-planner/degree-planner.component.html
@@ -30,10 +30,10 @@
</mat-form-field>
</div>
<div fxFlex="20"><button mat-button class="btn-primary">Check Plan (DARS)</button></div>
- <div fxFlex><button id="menu-toggle-btn" mat-button (click)="sidenav.toggle()">
+ <button id="menu-toggle-btn" mat-button (click)="sidenav.toggle()">
<i *ngIf="sidenav.opened" class="material-icons">chevron_right</i>
<i *ngIf="!sidenav.opened" class="material-icons">chevron_left</i>
- </button></div>
+ </button>
</div>
<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="start stretch" style="margin: 24px">
diff --git a/src/app/degree-planner/degree-planner.component.scss b/src/app/degree-planner/degree-planner.component.scss
index 41545d8..f662b5b 100644
--- a/src/app/degree-planner/degree-planner.component.scss
+++ b/src/app/degree-planner/degree-planner.component.scss
@@ -16,6 +16,9 @@ mat-sidenav {
}
#menu-toggle-btn {
+ position: absolute;
+ right: 0px;
+ top: 20px;
border-radius: 50% 0 0 50%;
padding: 8px;
background-color: #F0F0F0;
@@ -23,6 +26,9 @@ mat-sidenav {
@media screen and (max-width: 600px) {
#menu-toggle-btn {
+ position: relative;
+ top: 0;
+ right: 0;
border-radius: 50%;
padding: 12px;
}
--
GitLab