Merge branch 'dev' into release

* dev:
  fix(style): Fix alignment of elements in progress bar
  fix(layout): One column in info tab on small screens
  fix(layout): Fix adaptive font-sizes for large screens
  fix(layout): Fix overlapping breakpoints for small screens

src/sass/_base.scss

@@ -43,12 +43,15 @@ textarea {
 
 // Scale text font up on very wide screens (1200px)
 @media screen and (min-width: $screen-lg-desktop) {
-  span,
   legend,
   input,
   select,
   button,
-  .time {
+  h2,
+  h3,
+  .badge,
+  .share-select-option,
+  .chapter span {
     font-size: $font-size-wide-screen;
   }
 }

src/sass/_markers.scss

@@ -13,7 +13,7 @@
   width: $marker-width;
   margin-left: - ($marker-width/2);
   background: $marker-background;
-  @media screen and (max-width: $screen-phone) {
+  @media screen and (max-width: $screen-xxs-max) {
     height: $progress-bar-height-mobile;
   }
 }

src/sass/_progressbar.scss

@@ -80,7 +80,7 @@ progress[aria-valuenow]:before  {
   height: $progress-wrapper-height;
   font-weight: $font-weight-light;
   // Height of progress wrapper on small screens
-  @media screen and (max-width: $screen-phone) {
+  @media screen and (max-width: $screen-xxs-max) {
     height: $progress-wrapper-height-mobile;
   }
   .progress-info {
@@ -99,7 +99,7 @@ progress[aria-valuenow]:before  {
       height: 100%;
 
       // > 360px
-      @media all and (max-width: $screen-tiny-phone) {
+      @media all and (max-width: $screen-xxs-max) {
         @include flex(1 0px);
         @include order(2);
       }
@@ -110,28 +110,35 @@ progress[aria-valuenow]:before  {
       margin-top: 8px;
       color: $player-base-highlight-color;
       background-color: $player-contrast-color;
-      @media all and (min-width: $screen-desktop) {
-        margin-top: 5px;
+      @media all and (min-width: $screen-md-min) {
+        margin-top: 4px;
+      }
+      @media screen and (min-width: $screen-lg-min) {
+        font-size: $font-size-wide-screen;
       }
     }
     .chapter-title {
       display: block;
-      padding: 11px 20px 0 15px;
+      padding: 11px $padding-base-horizontal 0 15px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       font-weight: $font-weight-bold;
+      @media screen and (min-width: $screen-lg-min) {
+        font-size: $font-size-wide-screen;
+        padding: $padding-base-vertical $padding-base-horizontal 0 15px;
+      }
     }
   }
   .time {
     font-family: $font-family-monospace;
     font-weight: $font-weight-normal;
-    padding-top: 12px;
+    padding-top: 11px;
     height: 100%;
     vertical-align: middle;
 
     // > 768px
-    @media all and (max-width: $screen-tablet) {
+    @media all and (max-width: $screen-xs-max) {
       font-size: $font-size-small;
       padding-top: 12px;
     }
@@ -143,7 +150,7 @@ progress[aria-valuenow]:before  {
       text-align: left;
       color: $progress-bar-time-current;
 
-      @media all and (max-width: $screen-phone) {
+      @media all and (max-width: $screen-xxs-max) {
         @include flex(0 76px);
         padding-left: $padding-small-horizontal !important;
       }
@@ -157,7 +164,8 @@ progress[aria-valuenow]:before  {
       padding-right: $padding-base-horizontal;
       text-align: right;
       color: $progress-bar-time-duration;
-      @media all and (max-width: $screen-phone) {
+
+      @media all and (max-width: $screen-xxs-max) {
         padding-right: $padding-small-horizontal !important;
       }
       // > 768px
@@ -186,7 +194,7 @@ progress[aria-valuenow]:before  {
     top: 0;
     left: 0;
     // Height of the progressbar on small screens
-    @media screen and (max-width: $screen-phone) {
+    @media screen and (max-width: $screen-xxs-max) {
       height: $progress-bar-height-mobile;
     }
   }
@@ -208,7 +216,7 @@ progress[aria-valuenow]:before  {
   background-repeat: repeat-x;
   margin: 0 auto;
   // Position of the buffer on small screens
-  @media screen and (max-width: $screen-phone) {
+  @media screen and (max-width: $screen-xxs-max) {
     top: $progress-bar-height-mobile + 6px;
     height: $buffer-height * 2;
   }
@@ -225,7 +233,7 @@ progress[aria-valuenow]:before  {
   width: $progress-bar-height;
   z-index: 100;
   // Dimensions of the scrubber/handle on small screens
-  @media screen and (max-width: $screen-phone) {
+  @media screen and (max-width: $screen-xxs-max) {
     height: $progress-bar-height-mobile;
   }
   .inner-handle {
@@ -242,7 +250,7 @@ progress[aria-valuenow]:before  {
       transform: scale(1.0, 1.5);
     }
     // Dimensions of the scrubber/handle on small screens
-    @media screen and (max-width: $screen-phone) {
+    @media screen and (max-width: $screen-xxs-max) {
       height: $progress-bar-height-mobile;
       &:hover {
         transform: scaleY(1.3);

src/sass/_tabs.scss

@@ -82,7 +82,7 @@ $tab-header-height-mobile:  50px;
     padding: $padding-large-vertical 0 0 0 !important;
     width: 100%;
     height: $tab-header-height;
-    @media screen and (max-width: $screen-phone) {
+    @media screen and (max-width: $screen-xxs-max) {
       padding: $padding-base-vertical 0 0 0 !important;
       height: $tab-header-height-mobile;
     }
@@ -117,7 +117,7 @@ $tab-header-height-mobile:  50px;
     margin-top: $tab-header-height;
     margin-bottom: $margin-base-horizontal;
 
-    @media screen and (max-width: $screen-phone) {
+    @media screen and (max-width: $screen-xxs-max) {
       margin-top: $tab-header-height-mobile;
     }
   }
@@ -127,7 +127,7 @@ $tab-header-height-mobile:  50px;
 }
 
 .tab {
-  @media all and (max-width: $screen-phone) {
+  @media all and (max-width: $screen-xxs-max) {
     header {
       margin: 0;
     }

src/sass/_titlebar.scss

@@ -96,7 +96,7 @@
 .titlebar {
 
   // < 480px
-  @media all and (max-width: $screen-phone - 1px) {
+  @media all and (max-width: $screen-xxs-max) {
     .coverart {
       @include flex(1 100%);
       @include order(1);

src/sass/_variables.scss

@@ -147,7 +147,7 @@ $font-size-base:              13px !default;
 $font-size-small:             floor($font-size-base * 0.847) !default; //  11px
 $font-size-large:             ceil($font-size-base * 1.125) !default;
 $font-size-xlarge:            ceil($font-size-base * 1.5) !default;  // ~19.5px
-$font-size-wide-screen:       1.15vw; // Adaptive font-size used for wide screens
+$font-size-wide-screen:       $font-size-large;
 $font-size-icons:             ceil($font-size-base * 1.63 ) !default;
 $font-size-mobile-icons:      ceil($font-size-base * 2.15) !default;
 $font-size-social-icons:      ceil($font-size-base * 3.46) !default;
@@ -221,7 +221,8 @@ $controlbar-active-triangle-size: 8px !default;
 
 // Extra small and very old phone sceen
 $screen-xxs:                  360px !default;
-$screen-tiny-phone:           $screen-xxs !default;
+$screen-xxs-min:              $screen-xxs !default
+$screen-tiny-phone:           $screen-xxs-min !default;
 
 // Extra small screen / phone
 $screen-xs:                   480px !default;
@@ -247,6 +248,7 @@ $screen-lg-min:               $screen-lg !default;
 $screen-lg-desktop:           $screen-lg-min !default;
 
 // So media queries don't overlap when required, provide a maximum
+$screen-xxs-max:              ($screen-xs-min - 1) !default;
 $screen-xs-max:               ($screen-sm-min - 1) !default;
 $screen-sm-max:               ($screen-md-min - 1) !default;
 $screen-md-max:               ($screen-lg-min - 1) !default;
@@ -268,7 +270,7 @@ $play-button-margin:          auto;
 $play-button-margin-big:      0.375em;
 
 // Image in Info Tab
-$info-image-width:            400px;
+$info-image-width:            350px;
 
 // Share Tab: Button Image
 $share-image-border-width:    10px;

src/sass/modules/_downloads.scss

@@ -28,7 +28,7 @@
 
 .download {
   margin: 0 auto 20px auto;
-  @media screen and (max-width: $screen-phone) {
+  @media screen and (max-width: $screen-xxs-max) {
     margin: 0 auto;
   }
 

src/sass/modules/_info.scss

@@ -12,7 +12,7 @@
     @include order(2);
   }
   // The aside element will move under the section (.main) element
-  @media all and (min-width: $screen-phone) {
+  @media all and (min-width: $screen-sm-min) {
     .aside {
       @include flex(1 0px);
       margin-top: $margin-base-vertical;
@@ -37,7 +37,7 @@
   // Container for image
   .poster-image {
     margin: $margin-small-vertical $margin-base-horizontal 16px;
-    @media all and (max-width: $screen-phone) {
+    @media all and (max-width: $screen-xxs-max) {
       margin: $margin-small-horizontal;
     }
     img {

src/sass/modules/_share.scss

@@ -9,7 +9,7 @@ $button-width: $share-image-width + ($share-image-border-width * 2);
     .main {
       // Top offset for fixed tab-header
       margin: $tab-header-height 0 $margin-base-vertical 0;
-      @media all and (max-width: $screen-phone) {
+      @media all and (max-width: $screen-xxs-max) {
         margin: $tab-header-height 0 $margin-small-vertical 0;
       }
     }
@@ -47,7 +47,7 @@ $button-width: $share-image-width + ($share-image-border-width * 2);
         padding-right: $padding-base-horizontal;
         width: 5vw;
       }
-      @media all and (max-width: $screen-phone) {
+      @media all and (max-width: $screen-xxs-max) {
         td.share-radio {
           padding: $padding-small-vertical $padding-small-horizontal !important;
         }
@@ -73,7 +73,7 @@ $button-width: $share-image-width + ($share-image-border-width * 2);
       margin-bottom: $margin-base-horizontal;
       > h3 {
         margin: 0 $margin-base-horizontal $margin-small-horizontal $margin-base-horizontal;
-        @media all and (max-width: $screen-phone) {
+        @media all and (max-width: $screen-xxs-max) {
           margin: 0 $margin-small-horizontal $margin-small-horizontal $margin-small-horizontal;
         }
       }