From add41c197b5f16e8bfe27d51045389c1a9ebaee6 Mon Sep 17 00:00:00 2001
From: Pitros <xpitrosx@gmail.com>
Date: Fri, 5 Feb 2016 17:54:26 +0100
Subject: [PATCH] Improve responsive layout, simplify styles

---
 .../stylesheets/sass/_components/_profile.scss   | 16 ++++++----------
 .../stylesheets/sass/_components/_songlist.scss  | 13 +++----------
 .../stylesheets/sass/_components/_track.scss     | 14 ++++++--------
 app/views/profile/profile.html                   |  6 +++---
 4 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/app/public/stylesheets/sass/_components/_profile.scss b/app/public/stylesheets/sass/_components/_profile.scss
index 294d0c39..8116e755 100644
--- a/app/public/stylesheets/sass/_components/_profile.scss
+++ b/app/public/stylesheets/sass/_components/_profile.scss
@@ -1,25 +1,21 @@
 .profile {
   overflow: hidden;
   margin-bottom: 25px;
+    display: flex;
 }
 
 .profile_box {
   display: inline-block;
-  float: right;
-  width: 590px;
   margin: 0 5px 0 5px;
+    flex: 1 0 300px;
 }
 
 .profile_pic {
-  float: left;
-  display: inline-block;
-  position: relative;
-  overflow: hidden;
-  margin: 0 5px 0px 5px;
-  width: 300px;
-  height: 300px;
+    margin: 0 5px 0 5px;
+    flex: 0 1 300px;
+    min-width: 150px;
 }
 
 .profile_description {
-  font-size: 12px;
+    font-size: 12px;
 }
\ No newline at end of file
diff --git a/app/public/stylesheets/sass/_components/_songlist.scss b/app/public/stylesheets/sass/_components/_songlist.scss
index 7607ccaf..b2cb8cf8 100644
--- a/app/public/stylesheets/sass/_components/_songlist.scss
+++ b/app/public/stylesheets/sass/_components/_songlist.scss
@@ -6,7 +6,6 @@
 }
 
 .songList_item {
-  display: inline-block;
   position: relative;
   overflow: hidden;
   margin: 0 5px 30px 5px;
@@ -29,19 +28,16 @@
 .songList_item_container_artwork {
   position: relative;
   width: 100%;
-  height: 210px;
-  background: $sectionBackground;
   border: 1px solid $separatorDarkColor;
 }
 
 .songList_item_artwork {
   display: block;
   width: 100%;
-  margin: 0 0 10px 0;
 }
 
 .songList_item_song_button {
-  display: table;
+  display: flex;
   font-size: 50px;
   width: 100%;
   cursor: pointer;
@@ -53,11 +49,8 @@
   transition: all 200ms linear;
   -webkit-transform: scale(0);
   opacity: 0;
-
-  & .fa {
-    display: table-cell;
-    vertical-align: middle;
-  }
+    align-items: center;
+    justify-content: center;
 
   & .fa:last-child {
     display: none;
diff --git a/app/public/stylesheets/sass/_components/_track.scss b/app/public/stylesheets/sass/_components/_track.scss
index 66252512..b0b9157d 100644
--- a/app/public/stylesheets/sass/_components/_track.scss
+++ b/app/public/stylesheets/sass/_components/_track.scss
@@ -3,18 +3,16 @@
         display: flex;
 
         & .additionalInfo {
-            width: 300px;
-            flex-shrink: 0;
+            min-width: 150px;
+            flex: 0 1 300px;
         }
 
         & .trackCover {
-            width: 300px;
-            height: 300px;
             position: relative;
+            font-size: 0;
 
             & img {
-                width: 300px;
-                height: 300px;
+                width: 100%;
             }
 
             & .details {
@@ -23,7 +21,7 @@
                 bottom: 0;
                 width: 100%;
                 text-align: center;
-                font-size: 1.4em;
+                font-size: 14px;
                 color: #FFF;
                 padding: 5px;
                 background: rgba(0,0,0,0.6);
@@ -39,7 +37,7 @@
 
         & .content {
             padding: 0 10px;
-            width: 100%;
+            flex: 1 0 300px;
 
             & .user_name {
                 cursor: pointer;
diff --git a/app/views/profile/profile.html b/app/views/profile/profile.html
index 61acbbd0..d327906d 100644
--- a/app/views/profile/profile.html
+++ b/app/views/profile/profile.html
@@ -1,15 +1,15 @@
 <div class="profileView">
 
     <div class="profile">
+        <div class="profile_pic">
+            <img ng-src="{{ showBigArtwork (profile_data.avatar_url) }}" alt="{{ profile_data.username }}" class="songList_item_artwork">
+        </div>
         <div class="profile_box">
             <button ng-click="changeFollowing()" ng-mouseover="hoverIn()" ng-mouseleave="setFollowButtonText()" ng-class="{active: isFollowing}" class="button follow_button">{{follow_button_text}}</button>
             <h1 class="selectable-text">{{profile_data.username}}</h1>
             <h3>Followers: {{followers_count}}</h3>
             <p class="profile_description selectable-text" text-collapse text-max-height="205" text-to-collapse="{{profile_data.description}}"></p>
         </div>
-        <div class="profile_pic">
-            <img ng-src="{{ showBigArtwork (profile_data.avatar_url) }}" alt="{{ profile_data.username }}" class="songList_item_artwork">
-        </div>
     </div>
 
     <!-- Song list wrapper -->