Merge pull request #321 from Pitros/visual-changes

Smaller graphical changes - player, following page, top frame, loading

Author: weblancaster

app/index.html

@@ -153,14 +153,14 @@ <h4 id="playerUser" class="player_user"></h4>
                 </div>
                 <div class="player_controls">
                         <span class="player_prevSong" ng-click="prevSong($event)">
-                            <i class="fa fa-step-backward"></i>
+                            <i class="fa fa-step-backward thin"></i>
                         </span>
                         <span class="player_play-pause" ng-click="playPause($event)">
                             <i class="fa fa-play"></i>
-                            <i class="fa fa-pause" ></i>
+                            <i class="fa fa-pause thin" ></i>
                         </span>
                         <span class="player_nextSong" ng-click="nextSong($event)">
-                            <i class="fa fa-step-forward"></i>
+                            <i class="fa fa-step-forward thin"></i>
                         </span>
                 </div>
                 <div class="player_volume">

app/public/stylesheets/sass/_components/_config.scss

@@ -7,6 +7,7 @@ $separatorDarkColor: #000;
 $scColor: #f50;
 $transitionValue: all 0.5s ease;
 $transitionFastValue: all 0.25s ease;
+$transitionInstantValue: all 0.1s ease-out;
 
 // HELPERS
 .ui-db {

app/public/stylesheets/sass/_components/_following.scss

@@ -1,4 +1,9 @@
-.following {}
+.following {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
 
 .following_item {
   display: inline-block;

app/public/stylesheets/sass/_components/_loader.scss

@@ -1,11 +1,12 @@
 .box-loader {
   display: block;
   height: 35px;
-  width: 250px;
+  width: 300px;
   position: absolute;
+  text-align: center;
   top: 50%;
   left: 50%;
-  margin-left: -125px;
+  margin-left: -150px;
   margin-top: -17px;
 
   & > h4 {

app/public/stylesheets/sass/_components/_player.scss

@@ -29,7 +29,7 @@
 .player_details {
   width: 300px;
   flex: 1;
-  padding: 0 10px;
+  padding: 0 5px;
 }
 
 .player_user {
@@ -58,6 +58,9 @@
   & .fa {
     font-size: 20px;
     color: #FFF;
+    &.thin::before {
+      -webkit-text-stroke: 1px #000;
+    }
   }
 }
 
@@ -144,8 +147,12 @@
   box-sizing: content-box;
 
   &:hover {
-    & .player_progress_bar::before, & .player_progress_bar::after {
-      opacity: 1;
+    & .player_progress_bar::before {
+        background: rgba(255, 255, 255, 0.2);
+    }
+
+    & .player_progress_bar::after {
+        transform: scale(1);
     }
   }
 
@@ -161,10 +168,9 @@
       display: block;
       height: 4px;
       width: 100%;
-      background: rgba(255, 255, 255, 0.29);
+      background: rgba(0, 0, 0, 0.15);
       z-index: -1;
-      transition: $transitionFastValue;
-      opacity: 0;
+      transition: $transitionInstantValue;
     }
 
     &::after {
@@ -179,8 +185,8 @@
       background: rgb(255, 122, 0);
       border-radius: 50%;
       box-shadow: 0 0 2px 0 #000;
-      opacity: 0;
-      transition: $transitionFastValue;
+      transform: scale(0);
+      transition: $transitionInstantValue;
     }
   }
 }

app/public/stylesheets/sass/_components/_topFrame.scss

@@ -21,13 +21,16 @@
 }
 .windowAction_item {
   float: left;
-  margin: 0 10px;
+  margin: 10px 10px 0;
   font-size: 10px;
   cursor: pointer;
   border-radius: 15px;
   padding: 2px 4px;
   letter-spacing: 0;
-  margin-top: 10px;
+
+  &:hover .fa {
+    color: $defaultColor;
+  }
 
   & .fa {
     cursor: pointer;
@@ -75,15 +78,22 @@
 
   & li {
     margin: 0;
-    padding: 8px 10px 8px;
+    padding: 7px 10px 7px;
     border-radius: 0;
     &:hover {
-      background: $separatorCleanColor;
+      background: #2C2C2C;
+      .fa {
+        color: #FFF;
+      }
     }
   }
 
+  & #minimizeApp {
+      padding: 10px 10px 4px;
+  }
+
   & #closeApp {
-    padding: 8px 15px 8px;
+    padding: 6px 20px 8px;
     background: #390000;
     &:hover {
       background: #530000;
@@ -149,12 +159,12 @@
 
 @media (max-width: 940px) {
   .topbarSearch {
-    width: 15%;
+    width: 25%;
   }
 }
 
 @media (min-width: 940px) {
   .topbarSearch {
-    width: 25%;
+    width: 35%;
   }
 }