Merge pull request #17 from edumudu/feature/#16

#16 use grid and fixes game info
edumudu · Jul 13, 2020 · 04788d9 · 04788d9
2 parents 836ed3d + 45957d8
commit 04788d9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/client/src/scss/geral.scss b/client/src/scss/geral.scss
@@ -11,6 +11,9 @@ body {
   font-family: 'Nunito', sans-serif;
   color: #ebebeb;
   background-color: $bg-color;
+
+  display: grid;
+  grid-template-rows: $game_info_height auto;
 }
 
 a { 
@@ -25,6 +28,22 @@ a {
   justify-content: center;
   perspective: 1000px;
   padding: 30px 30px 0;
+  height: calc(100vh - #{$game_info_height});
+  overflow-y: auto;
+
+  // For mozila
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
+
+  &::-webkit-scrollbar {
+    background-color: transparent; 
+    width: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
 }
 
 .card {

diff --git a/client/src/scss/scoreboard.scss b/client/src/scss/scoreboard.scss
@@ -1,8 +1,11 @@
 #game-info {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30px 80px 0;
+  padding: 30px 80px 30px;
+  box-shadow: 0 0 4px #fff;
 
   #restart-button {
     display: none;

diff --git a/client/src/scss/variables.scss b/client/src/scss/variables.scss
@@ -3,4 +3,6 @@ $card-bg: #0b0b0b;
 $green: #1ddf16;
 $success: #00b894;
 $danger: #d63031;
-$info: #3498db;
+$info: #3498db;
+
+$game_info_height: 134px;