From 3f0ecb5ac6273165f41013c120c72b2f4db54df1 Mon Sep 17 00:00:00 2001
From: Aung Myo <aungmyo.zaw@code2lab.com>
Date: Tue, 25 Jul 2017 12:21:05 +0630
Subject: [PATCH] update home view card column

---
 app/views/home/index.html.erb | 44 ++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index cf8729f3..0e046691 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -25,11 +25,11 @@
 </div> -->
 <div class="row">
   <div class="col-md-8 col-lg-8">
-    <div class="card-columns">
+    <div class="card-columns" style="column-gap: 10px;">
 
       <% @employees.each do |employee| %>
 
-        <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-inverse card-primary mb-3 text-center" style="width: 15rem;height:15rem;">
+        <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-inverse card-primary mb-3 text-center" style="">
             <form id="form_<%=employee.emp_id%>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH"></form>
             <div class="card-block">
               <h4 class="card-title">
@@ -140,12 +140,44 @@
   .panel-body {
     padding: 5px !important;
   }
-  .card-columns {
-          column-count: 5;
-  }
+  /*.card-columns {
+    column-count: 4;
+    display: inline-block;
+  }*/
   .panel-title .glyphicon {
 
-        float: right;
+    float: right;
+  }
+  @media (min-width: 34em) {
+    .card-columns {
+      -webkit-column-count: 2;
+      -moz-column-count: 2;
+      column-count: 2;
+    }
+  }
+
+  @media (min-width: 48em) {
+    .card-columns {
+      -webkit-column-count: 3;
+      -moz-column-count: 3;
+      column-count: 3;
+    }
+  }
+
+  @media (min-width: 62em) {
+    .card-columns {
+      -webkit-column-count: 4;
+      -moz-column-count: 4;
+      column-count: 4;
+    }
+  }
+
+  @media (min-width: 75em) {
+    .card-columns {
+      -webkit-column-count: 5;
+      -moz-column-count: 5;
+      column-count: 5;
+    }
   }
 </style>
 <script type="text/javascript">