Merge pull request #7 from dmtrKovalenko/Fix-ui-bugs

Fixed not building. incorrect resizing on small devices
dmtrKovalenko · Nov 10, 2016 · 599b560 · 599b560
2 parents 35f2627 + 401ef4d
commit 599b560
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 11 deletions.
diff --git a/App/content/css/index.css b/App/content/css/index.css
@@ -7,7 +7,7 @@
     height: 300px;
 }
 
-@media(max-width:650px){
+@media(min-width:400px) and (max-width:650px){
     .track-card-container{
         margin-bottom: 150px;
     }

diff --git a/App/content/css/player.css b/App/content/css/player.css
@@ -19,26 +19,41 @@
 
 .title.flex-container{
     order: 2;
-    max-width: 45%;
+    max-width: 30%;
 }
 
 .slider.flex-container{
     order:3;
     width: 60%;
-    margin: 0 auto;
 }
 
 .controls.flex-container{
     order:4;
     margin-left: auto;
 }
 
+@media(max-width:400px){
+    .control-button{
+        margin-right: 5px;
+    }
+}
+
+@media(max-width:450px){
+    .artwork.flex-container{
+        display: none;
+        margin-left: 5px;
+    }
+}
+
 @media(max-width:550px){
     .control-button{
-        margin-right: 10px !important;
+        margin-right: 10px;
     }
     .controls.flex-container{
-        min-width: 150px;
+        min-width: 30%;
+    }
+    .title.flex-container{
+        max-width: 50%;
     }
 }
 
@@ -64,6 +79,14 @@
     .slider.flex-container{
         min-width: 400px;
     }
+    .controls.flex-container{
+        min-width: 170px;
+    }
+
+    .flex-container{
+        margin-left: 5px;
+        margin-right: 5px;
+    }
 }
 
 a.player-song-title, a.player-user-name{

diff --git a/App/index.html b/App/index.html
@@ -8,5 +8,5 @@
     </head>
     <body>
         <div id="app" />
-        <script type="text/javascript" src="../Build/bundle.js" charset="utf-8"></script>
+        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
 </html> 
diff --git a/package.json b/package.json
@@ -20,6 +20,10 @@
     "webpack": "^1.13.3"
   },
   "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.7",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
     "babel-preset-react-hmre": "^1.1.1",
     "css-loader": "^0.25.0",
     "react-hot-loader": "^3.0.0-beta.6",

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,8 +10,7 @@ var config = {
           './App/index.jsx'],
   output: {
     path: BUILD_DIR,
-    filename: 'bundle.js',
-    publicPath: BUILD_DIR
+    filename: 'bundle.js'
   },
   module : {
     loaders : [
@@ -31,9 +30,6 @@ var config = {
       },
     ]
   },
-  resolve: {
-    root: path.resolve('App'),
-  },
   plugins:[
       new webpack.HotModuleReplacementPlugin(),
   ],