media helpers

Author: btroncone

src/app/operators/components/operator/operator.component.html

@@ -6,7 +6,9 @@
 </app-operator-header>
 <section class="main-operator-container mat-typography">
   <h3 class="short-description" [innerHTML]="shortDescription"></h3>
-  <img class="marble-diagram mat-elevation-z2" [src]="marbleUrl" *ngIf="marbleUrl"/>
+  <div class="marble-wrapper mat-elevation-z2">
+    <img class="marble-diagram" [src]="marbleUrl" *ngIf="marbleUrl"/>
+  </div>
   <h2 class="examples-header"> Examples </h2>
   <div
     class="code-example"

src/app/operators/components/operator/operator.component.scss

@@ -1,6 +1,7 @@
+@import '../../../../styles/media-helpers';
+
 .main-operator-container {
   padding: 5px;
-  // height: 1000px;
   display: flex;
   flex-direction: column;
   padding: 0 16px;
@@ -31,6 +32,15 @@
   margin: 32px 0 16px;
 }
 
+.marble-wrapper {
+  background-color: white;
+  text-align: center;
+}
+
 .marble-diagram {
-  max-width: 100%;
+  max-width: 640px;
+
+  @media #{$mat-sm-down} {
+    max-width: 100%;
+  }
 }

src/styles/_media-helpers.scss

@@ -0,0 +1,8 @@
+$mat-xs: 'screen and (max-width: 599px)';
+$mat-sm: 'screen and (min-width: 600px) and (max-width: 959px)';
+$mat-sm-down: 'screen and (max-width: 960px)';
+$mat-mat-up: 'screen and (min-width: 961px)';
+$mat-md: 'screen and (min-width: 960px) and (max-width: 1279px)';
+$mat-mat-down: 'screen and (max-width: 1279px)';
+$mat-lg: 'screen and (min-width: 1280px) and (max-width: 1919px)';
+$mat-xl: 'screen and (min-width: 1920px) and (max-width: 5000px)';