chore(masonry): Add media queries to masonry cards

yannbf · yannbf · commit 78e0d4fce7a6 · 2017-06-05T01:05:08.000-03:00
diff --git a/src/pages/miscellaneous/masonry-cards/README.md b/src/pages/miscellaneous/masonry-cards/README.md
@@ -0,0 +1 @@
+This was inspired by [this tutorial](https://www.joshmorony.com/creating-a-pinterest-layout-in-ionic/) created by Josh Morony.
diff --git a/src/pages/miscellaneous/masonry-cards/masonry-cards.scss b/src/pages/miscellaneous/masonry-cards/masonry-cards.scss
@@ -3,6 +3,7 @@ page-masonry-cards {
         column-count: 2;
     }
 
+
     .pin {
         display: inline-block;
     }
@@ -24,4 +25,26 @@ page-masonry-cards {
         padding: 8px;
         border-bottom: 1px solid #eee;
     }
+
+    // Media queries
+    @media (min-width: 480px) {
+        .pins {
+            column-count: 3;
+        }
+        .item ion-avatar img {
+            width:  7vw !important;
+            height: 7vw !important;
+        }
+    }
+
+    @media (min-width: 640px) {
+        .pins {
+            column-count: 4;
+        }
+        .item ion-avatar img {
+            width:  5vw !important;
+            height: 5vw !important;
+            margin: 6px;
+        }
+    }
 }
diff --git a/src/pages/miscellaneous/miscellaneous.ts b/src/pages/miscellaneous/miscellaneous.ts
@@ -41,7 +41,7 @@ export class MiscellaneousListPage {
                 page: 'FlashCardPage'
             },
             {
-                title: 'Masonry Cards',
+                title: 'Pinterest Masonry Cards',
                 page: 'MasonryCardsPage'
             },
             {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+This was inspired by [this tutorial](https://www.joshmorony.com/creating-a-pinterest-layout-in-ionic/) created by Josh Morony.`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ export class MiscellaneousListPage {`
`41`	`41`	`page: 'FlashCardPage'`
`42`	`42`	`},`
`43`	`43`	`{`
`44`		`- title: 'Masonry Cards',`
	`44`	`+ title: 'Pinterest Masonry Cards',`
`45`	`45`	`page: 'MasonryCardsPage'`
`46`	`46`	`},`
`47`	`47`	`{`