feat: update components styles

inomdzhon · Apr 26, 2020 · 51a1767 · 51a1767
1 parent d9cea57
commit 51a1767
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/client/index.css b/client/index.css
@@ -9,7 +9,6 @@ body {
   left: 0;
   bottom: 0;
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   padding: 2vmax 1vmax;
@@ -18,19 +17,28 @@ body {
   box-sizing: border-box;
 }
 
+.keypress__content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5vmax;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
 .keypress__item {
-  padding: 1vmax;
+  padding: 0.5vmax;
 }
 
 .keypress__item_type_plus {
   padding: 0;
 }
 
 .keypress-item {
-  padding: 1vmax;
+  padding: 0.5vmax;
   font-family: Arial, -apple-system, sans-serif;
   font-weight: 700;
-  font-size: 4vmax;
+  font-size: 3vmax;
   line-height: 1;
   text-transform: uppercase;
   color: #fff;
@@ -41,7 +49,7 @@ body {
 .keypress-item-plus {
   font-family: Arial, -apple-system, sans-serif;
   font-weight: 700;
-  font-size: 4vmax;
+  font-size: 3vmax;
   line-height: 1;
   color: #fff;
 }
diff --git a/client/index.html b/client/index.html
@@ -9,19 +9,9 @@
 </head>
 <body>
 
-<div id="root" class="keypress"></div>
-
-<template id="keypress-item">
-  <div class="keypress__item">
-    <div class="keypress-item"></div>
-  </div>
-</template>
-
-<template id="keypress-item-plus">
-  <div class="keypress__item keypress__item_type_plus">
-    <div class="keypress-item-plus">+</div>
-  </div>
-</template>
+<div id="root" class="keypress">
+  <div class="keypress__content js-content"></div>
+</div>
 
 <script type="text/javascript" src="./index.js"></script>
 

diff --git a/client/index.js b/client/index.js
@@ -25,6 +25,7 @@ function computeKeyPressed(type, keyCode) {
 }
 
 const elemRoot = document.getElementById('root');
+const elemContent = elemRoot.querySelector('.js-content');
 
 function renderKeysPressed() {
   const result = [];
@@ -33,5 +34,5 @@ function renderKeysPressed() {
     result.push(`<div class="keypress__item"><div class="keypress-item">${value}</div></div>`);
   });
 
-  elemRoot.innerHTML = result.join(`<div class="keypress__item keypress__item_type_plus"><div class="keypress-item-plus">+</div></div>`);
+  elemContent.innerHTML = result.join(`<div class="keypress__item keypress__item_type_plus"><div class="keypress-item-plus">+</div></div>`);
 }