Ver Fonte

Added default image height/width ratio to prevent sudden shift of details window on image load

Taddeus Kroes há 12 anos atrás
pai
commit
5e48f328a5
2 ficheiros alterados com 7 adições e 0 exclusões
  1. 1 0
      guide.coffee
  2. 6 0
      style.sass

+ 1 - 0
guide.coffee

@@ -227,6 +227,7 @@ ProgramDetailsView = Backbone.View.extend(
                     @alignMiddle()
 
                     # Align again after images are loaded
+                    @$('.content img').load(-> $(@).css(height: 'auto'))
                     @$('.content img').load(=> @alignMiddle())
             )
         else

+ 6 - 0
style.sass

@@ -254,6 +254,7 @@ $loader-size: 66px
 
 $details-width: 500px
 $details-initial-offset: 150px
+$img-ratio: 310px / 550px
 
 .program-details .content
     position: absolute
@@ -272,6 +273,11 @@ $details-initial-offset: 150px
     *
         max-width: $details-width
 
+    // Set default image height, to be overwritten with 'auto' when the image
+    // is loaded. This prevents a shift of the details window on image load.
+    img
+        height: $details-width * $img-ratio
+
     .properties
         padding-left: 15px
         margin-top: 1px