From bd6f93abd1d8293a4888ffb9a09789fc00ea3a5f Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Mon, 2 Dec 2019 20:29:25 +0800
Subject: [PATCH] Feature: Make pin-grid-layout standalone as mixin

---
 pinry-spa/src/components/Pins.vue             | 70 +------------------
 .../src/components/utils/pin-grid-layout.scss | 70 +++++++++++++++++++
 2 files changed, 72 insertions(+), 68 deletions(-)
 create mode 100644 pinry-spa/src/components/utils/pin-grid-layout.scss

diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index fee576e..ced9303 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -305,73 +305,7 @@ $avatar-height: 30px;
   }
 }
 
-/*pin container size fit*/
-/* Generated by python code:
-/* def fn(x):
-/*     gutter = 15
-/*     image_width = 240
-/*     border_width_of_parent = 24
-/*     size = image_width * x + gutter * (x - 1)
-/*     width = size + border_width_of_parent * 2
-/*     print(template % (width, size))
-/*
-/* for i in range(1, 12):
-/*     fn(i)
-*/
+@import './utils/pin-grid-layout';
+@include screen-grid-layout("#pins-container")
 
-@media screen and (min-width: 288px) {
-  #pins-container {
-    max-width: 240px;
-  }
-}
-@media screen and (min-width: 543px) {
-  #pins-container {
-    max-width: 495px;
-  }
-}
-@media screen and (min-width: 798px) {
-  #pins-container {
-    max-width: 750px;
-  }
-}
-@media screen and (min-width: 1053px) {
-  #pins-container {
-    max-width: 1005px;
-  }
-}
-@media screen and (min-width: 1308px) {
-  #pins-container {
-    max-width: 1260px;
-  }
-}
-@media screen and (min-width: 1563px) {
-  #pins-container {
-    max-width: 1515px;
-  }
-}
-@media screen and (min-width: 1818px) {
-  #pins-container {
-    max-width: 1770px;
-  }
-}
-@media screen and (min-width: 2073px) {
-  #pins-container {
-    max-width: 2025px;
-  }
-}
-@media screen and (min-width: 2328px) {
-  #pins-container {
-    max-width: 2280px;
-  }
-}
-@media screen and (min-width: 2583px) {
-  #pins-container {
-    max-width: 2535px;
-  }
-}
-@media screen and (min-width: 2838px) {
-  #pins-container {
-    max-width: 2790px;
-  }
-}
 </style>
diff --git a/pinry-spa/src/components/utils/pin-grid-layout.scss b/pinry-spa/src/components/utils/pin-grid-layout.scss
new file mode 100644
index 0000000..26a3e6a
--- /dev/null
+++ b/pinry-spa/src/components/utils/pin-grid-layout.scss
@@ -0,0 +1,70 @@
+/*pin container size fit*/
+/* Generated by python code:
+/* def fn(x):
+/*     gutter = 15
+/*     image_width = 240
+/*     border_width_of_parent = 24
+/*     size = image_width * x + gutter * (x - 1)
+/*     width = size + border_width_of_parent * 2
+/*     print(template % (width, size))
+/*
+/* for i in range(1, 12):
+/*     fn(i)
+*/
+@mixin screen-grid-layout($selector) {
+  @media screen and (min-width: 288px) {
+    #{$selector} {
+      max-width: 240px;
+    }
+  }
+  @media screen and (min-width: 543px) {
+    #{$selector} {
+      max-width: 495px;
+    }
+  }
+  @media screen and (min-width: 798px) {
+    #{$selector} {
+      max-width: 750px;
+    }
+  }
+  @media screen and (min-width: 1053px) {
+    #{$selector} {
+      max-width: 1005px;
+    }
+  }
+  @media screen and (min-width: 1308px) {
+    #{$selector} {
+      max-width: 1260px;
+    }
+  }
+  @media screen and (min-width: 1563px) {
+    #{$selector} {
+      max-width: 1515px;
+    }
+  }
+  @media screen and (min-width: 1818px) {
+    #{$selector} {
+      max-width: 1770px;
+    }
+  }
+  @media screen and (min-width: 2073px) {
+    #{$selector} {
+      max-width: 2025px;
+    }
+  }
+  @media screen and (min-width: 2328px) {
+    #{$selector} {
+      max-width: 2280px;
+    }
+  }
+  @media screen and (min-width: 2583px) {
+    #{$selector} {
+      max-width: 2535px;
+    }
+  }
+  @media screen and (min-width: 2838px) {
+    #{$selector} {
+      max-width: 2790px;
+    }
+  }
+}