Fixed volume slider alignment

ktoodev · Jul 30, 2020 · 9c00a95 · 9c00a95
1 parent adf0ab7
commit 9c00a95
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 19 deletions.
diff --git a/dist/player.js b/dist/player.js
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "author": "davidmpurdy",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.10.4",
+    "@babel/core": "^7.10.5",
     "@babel/preset-env": "^7.10.4",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.1.0",
@@ -25,7 +25,7 @@
     "style-loader": "^1.1.3",
     "svg-inline-loader": "^0.8.2",
     "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {

diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
@@ -0,0 +1,18 @@
+// slider
+$slider-padding-top:10px;
+$slider-padding-right: 20px;
+$slider-padding-bottom: $slider-padding-top;
+$slider-padding-left:0;
+
+$track_width: 6px;
+$handle_height: 20px;
+$handle_width: $handle_height;
+
+$track_color: gray;
+$handle_color: white;
+
+
+
+// loader
+$loader-dash-offset: 187;
+$loader-anim-duration: 1.4s;
diff --git a/src/scss/loader.scss b/src/scss/loader.scss
@@ -1,9 +1,7 @@
-
-$offset: 187;
-$duration: 1.4s;
+@import 'vars';
 
 .spinner {
-  animation: rotator $duration linear infinite;
+  animation: rotator $loader-anim-duration linear infinite;
   width: 40px;
   height: auto;
 }
@@ -14,21 +12,21 @@ $duration: 1.4s;
 }
 
 .path {
-  stroke-dasharray: $offset;
+  stroke-dasharray: $loader-dash-offset;
   stroke-dashoffset: 0;
   transform-origin: center;
   animation:
-    dash $duration ease-in-out infinite,
+    dash $loader-anim-duration ease-in-out infinite,
 }
 
 @keyframes dash {
- 0% { stroke-dashoffset: $offset; }
+ 0% { stroke-dashoffset: $loader-dash-offset; }
  50% {
-   stroke-dashoffset: $offset/4;
+   stroke-dashoffset: $loader-dash-offset/4;
    transform:rotate(135deg);
  }
  100% {
-   stroke-dashoffset: $offset;
+   stroke-dashoffset: $loader-dash-offset;
    transform:rotate(450deg);
  }
 }
diff --git a/src/scss/player-styles.scss b/src/scss/player-styles.scss
@@ -1,3 +1,4 @@
+@import 'vars';
 
 .td_player_container {
 
@@ -23,8 +24,10 @@
     flex-basis:25%;
     min-width:100px;
     flex-grow:1;
-    padding:10px 20px 10px 0;
+    //padding:$slider-padding-top $slider-padding-right $slider-padding-bottom $slider-padding-left;
     max-width: 300px;
+    display: grid;
+    min-height: 35px;
   }
 
   .transport-button {

diff --git a/src/scss/slider.scss b/src/scss/slider.scss
@@ -15,12 +15,7 @@
  * http://api.jqueryui.com/slider/#theming
  */
 
-$track_width: 6px;
-$handle_height: 20px;
-$handle_width: $handle_height;
-
-$track_color: gray;
-$handle_color: white;
+@import 'vars';
 
 .td_player_container {