Add media query for accordion height

open-learning-exchange · Jun 10, 2022 · 748e747 · 748e747
1 parent f12a337
commit 748e747
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/src/app/dashboard/dashboard-tile-accordion-layout.component.html b/src/app/dashboard/dashboard-tile-accordion-layout.component.html
@@ -1,10 +1,10 @@
 <mat-accordion>
  <mat-expansion-panel (opened)="showAccordion = true" (closed)="showAccordion = false">
  <mat-expansion-panel-header class="accent-color">
- <mat-panel-title class="accent-color">
+ <mat-panel-title>
  <planet-dashboard-left-tile [cardTitle]="cardTitle" [cardType]="cardType" [link]="link" [emptyLink]="emptyLink">
  </planet-dashboard-left-tile>
- </mat-panel-title>
+  </mat-panel-title>
  </mat-expansion-panel-header>
  <planet-dashboard-right-tile [cardTitle]="cardTitle" [cardType]="cardType" [link]="link" [emptyLink]="emptyLink"
  [itemData]="itemData" (droppedEvent)="drop($event)" (removeEvent)="removeFromShelf($event)">

diff --git a/src/app/dashboard/dashboard-tile.scss b/src/app/dashboard/dashboard-tile.scss
@@ -6,9 +6,11 @@
  // For Firefox. Otherwise grid tile will expand to fit text.
  min-width: 0;
 
- .dashboard-card {
- height: 100%;
- padding: 0;
+ @media (min-width: 601px) {
+ .dashboard-card {
+ height: 100%;
+ padding: 0;
+ }
  }
 
  .dashboard-card > planet-dashboard-row-layout {
@@ -78,20 +80,10 @@
  }
  }
 
- // planet-dashboard-accordion-layout & .dashboard-card {
- // height: auto;
- // }
-
-
  .dashboard-card > planet-dashboard-accordion-layout {
  display: block;
  }
 
- planet-dashboard-accordion-layout {
- height: 100%;
- padding: 0;
- }
-
  planet-dashboard-accordion-layout & .left-tile {
  &,
  & planet-dashboard-tile-title {
@@ -100,6 +92,10 @@
  }
  }
 
+ mat-expansion-panel-header:hover {
+ background: revert;
+ } 
+
  planet-dashboard-accordion-layout & .right-tile {
  overflow: hidden;
 
@@ -110,13 +106,12 @@
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
+ .delete-item {
+ position: absolute;
+ right: 1rem;
+ }
  }
  }
  }
 
- // planet-dashboard-accordion-layout & mat-accordion {
- // height: 100%;
- // margin: 0;
- // }
-
 }