Improve screen usage on large devices

Toxantron · Dec 6, 2018 · 054f79c · 054f79c
1 parent 056ad68
commit 054f79c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/css/scrumonline.css b/src/css/scrumonline.css
@@ -127,7 +127,23 @@ div.card, div.card-flip {
 
 /* Card flip */
 div.card-overview {
-  perspective: 1000;
+  perspective: 1000px;
+  margin-right: -40px;
+}
+div.card-overview:first-child {
+  margin-left: 15px;
+}
+div.card-overview div.card-container {
+  float: left;  
+  width: 175px;
+}
+@media(min-width: 992px) {
+  div.card-overview {
+    margin-right: -60px;
+  }
+  div.card-overview div.card-container {
+    width: 210px;
+  }
 }
 div.card.front, div.card.back {
   -webkit-backface-visibility: hidden;

diff --git a/src/templates/master.php b/src/templates/master.php
@@ -28,7 +28,7 @@
 <!-- Live poll view and statistics -->
 <div class="row" ng-if="master.teamComplete">
   <div class="card-overview">
-    <div ng-repeat="vote in master.votes track by vote.id" class="col-lg-2 col-sm-3 col-xs-4">        
+    <div ng-repeat="vote in master.votes track by vote.id">        
       <div class="card-container">
         <div class="deletable-card">
           <div class="card-flip" ng-class="{flipped: master.flipped}">