fixed styles

ilya-korotya · Aug 27, 2017 · 5ac6afc · 5ac6afc
1 parent 9410273
commit 5ac6afc
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 5 deletions.
diff --git a/js/artist/artist--view.js b/js/artist/artist--view.js
@@ -14,7 +14,7 @@ export default class ArtistView extends AbstractView {
     <div class="main-wrap">
       <div class="main-timer"></div>
       ${titleArtist}
-      <div class="player-wrapper"></div>
+      <div class="player-wrapper  player-wrapper--artist"></div>
       ${formArtist}
     </div>
   </section>`;
@@ -28,7 +28,6 @@ export default class ArtistView extends AbstractView {
     });
   }
 
-
   nextLevel() {
 
   }

diff --git a/js/genre/genre--view.js b/js/genre/genre--view.js
@@ -21,6 +21,7 @@ export default class GenreView extends AbstractView {
 
   bind() {
     this.ansverButton = this.element.querySelector(`.genre-answer-send`);
+    this.ansverButton.classList.add(`genre-answer-send--disable`);
     this.ansverButton.disabled = true;
 
     this.ansverButton.addEventListener(`click`, (evt) => {

diff --git a/js/genre/genre.js b/js/genre/genre.js
@@ -30,6 +30,11 @@ export default class Genre {
 
     this.view.changeInput = () => {
       this.view.ansverButton.disabled = !this.view.answers.find((answer) => answer.checked === true);
+      if (this.view.ansverButton.disabled) {
+        this.view.ansverButton.classList.add(`genre-answer-send--disable`);
+      } else {
+        this.view.ansverButton.classList.remove(`genre-answer-send--disable`);
+      }
     };
 
     const allPlayers = (this.view.element.querySelectorAll(`.player-wrapper`));

diff --git a/sass/main/--level/genre.scss b/sass/main/--level/genre.scss
@@ -1,11 +1,17 @@
 .genre-answer {
   display: flex;
   margin: 18px 0;
+  margin-left: 50px;
 }
 
 .player-wrapper {
   height: 55px;
   width: 410px;
+
+  &--artist{
+    width: 100%;
+    margin-left: 20px;
+  }
 }
 
 .genre-answer input[type=checkbox] {
@@ -17,6 +23,10 @@
   background: url("/img/icon-note-inactive.png") no-repeat;
   height: 49px;
   width: 35px;
+  cursor: pointer;
+  &:hover{
+    transform: scale(1.1);
+  }
 }
 
 input[type=checkbox]:checked + .genre-answer-check {
@@ -33,8 +43,16 @@ input[type=checkbox]:checked + .genre-answer-check {
   margin: 20px auto 0;
   padding: 0 20px;
   text-align: center;
-}
+  cursor: pointer;
+
+  &:hover{
+    color: $color-orange;
+  }
 
-.genre-answer-send:hover {
-  color: $color-orange;
+  &--disable {
+    border-color: #a0a0a0;
+    &:hover{
+      color: $color-text-dark;
+    }
+  }
 }
diff --git a/sass/main/--welcome/main--welcome.scss b/sass/main/--welcome/main--welcome.scss
@@ -26,6 +26,7 @@
   text-indent: -100em;
   transform-origin: center;
   width: 0;
+  cursor: pointer;
 }
 
 .main-play:hover {

diff --git a/sass/player/player.scss b/sass/player/player.scss
@@ -17,6 +17,10 @@
   width: 39px;
   margin-left: -50px;
   font-size: 0;
+  cursor: pointer;
+  &:hover{
+    transform: scale(1.1);
+  }
 }
 
 .player-status{