add monster media queries

2012-09-19 14:20:58 +02:00 · 2012-09-19 14:20:58 +02:00 · e4fc61b562
commit e4fc61b562
parent 3fa52d627f
4 changed files with 231 additions and 15 deletions
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -22,7 +22,7 @@ GIT

 GIT
  remote: git://github.com/travis-ci/travis-api.git
-  revision: d708b79e135d3e7d672bd66b0754524ff8eb7cbf
+  revision: e5ed22843f93d26c383a92f696baf13e520e2f74
  branch: sf-use-services
  specs:
    travis-api (0.0.1)
--- a/assets/stylesheets/layout.sass
+++ b/assets/stylesheets/layout.sass
@ -2,6 +2,7 @@

 body > div
  display: table
+  table-layout: fixed
  width: 100%
  height: 100%
  overflow: hidden
@ -11,18 +12,21 @@ body > div
  position: relative

 #left
-  width: 30%
+  width: 350px
+  min-width: 350px
  padding-right: 10px
  background: inline-image('ui/background-left.png') repeat-y right top

 #main
+  width: 100%
+  min-width: 650px
  padding: 20px 48px 40px 32px
-  width: 70%
  &.maximized
    padding: 60px 100px 30px 440px

 #right
  width: 205px
+  min-width: 205px
  padding: 20px 20px 20px 10px
  background-color: $color-bg-sidebar
  border-bottom: 1px solid $color-border-light
@ -37,8 +41,89 @@ body > div
  overflow: hidden
  background: inline-image('icons/clock.png') no-repeat 1px 2px

+@media screen
+  #left
+    min-width: 300px
+  #main
+    padding:
+      left: 22px
+      right: 38px
+
+@media screen and (min-width: 1340px)
+  #left
+    min-width: 305px
+
+@media screen and (min-width: 1350px)
+  #left
+    min-width: 310px
+
+@media screen and (min-width: 1360px)
+  #left
+    min-width: 315px
+
+@media screen and (min-width: 1370px)
+  #left
+    min-width: 320px
+
+@media screen and (min-width: 1380px)
+  #left
+    min-width: 325px
+
+@media screen and (min-width: 1390px)
+  #left
+    min-width: 330px
+
+@media screen and (min-width: 1400px)
+  #left
+    min-width: 345px
+
+@media screen and (min-width: 1410px)
+  #left
+    min-width: 350px
+
+@media screen and (min-width: 1420px)
+  #left
+    min-width: 355px
+
+@media screen and (min-width: 1430px)
+  #left
+    min-width: 360px
+
@media screen and (min-width: 1440px)
  .duration_label
    display: inline
    background: none
+  #left
+    min-width: 365px
+  #main
+    padding:
+      left: 32px
+      right: 48px

+@media screen and (min-width: 1450px)
+  #left
+    min-width: 370px
+
+@media screen and (min-width: 1455px)
+  #left
+    min-width: 375px
+
+@media screen and (min-width: 1460px)
+  #left
+    min-width: 380px
+
+@media screen and (min-width: 1465px)
+  #left
+    min-width: 385px
+
+@media screen and (min-width: 1470px)
+  #left
+    min-width: 390px
+
+@media screen and (min-width: 1475px)
+  #left
+    min-width: 395px
+
+@media screen and (min-width: 1480px)
+  #left
+    min-width: 400px
--- a/assets/stylesheets/right/slider.sass
+++ b/assets/stylesheets/right/slider.sass
@ -29,6 +29,7 @@

  #right
    width: 0
+    min-width: 0
    padding: 0
    *:not(#slider):not(.icon):not(.ember-view)
      display: none
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@ -1776,43 +1776,47 @@ span.loading {
 /* line 3, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 body > div {
  display: table;
+  table-layout: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }

-/* line 9, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 10, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 #left, #main, #right {
  display: table-cell;
  position: relative;
 }

-/* line 13, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 14, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 #left {
-  width: 30%;
+  width: 350px;
+  min-width: 350px;
  padding-right: 10px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAAAFCAMAAACKJ3hCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjkxQTBDNjlGQTA4MTFFMThBMjVCOTE4RjhGRDQ1RUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjkxQTBDNkFGQTA4MTFFMThBMjVCOTE4RjhGRDQ1RUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCOTFBMEM2N0ZBMDgxMUUxOEEyNUI5MThGOEZENDVFQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCOTFBMEM2OEZBMDgxMUUxOEEyNUI5MThGOEZENDVFQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkxtmEIAAAAeUExUReXo7v////7+/vj4+Nra2srKyvHx8f39/ejo6Pz8/K+NVjwAAAAxSURBVHja7NO5EQAgDMCwhC+w/8L0DEAljeA7RwCPOfbqp1qmFmAQMAgYBH4OcgUYALTwAOeh7Y3cAAAAAElFTkSuQmCC') repeat-y right top;
 }

-/* line 18, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 20, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 #main {
+  width: 100%;
+  min-width: 650px;
  padding: 20px 48px 40px 32px;
-  width: 70%;
 }
-/* line 21, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 24, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 #main.maximized {
  padding: 60px 100px 30px 440px;
 }

-/* line 24, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 27, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 #right {
  width: 205px;
+  min-width: 205px;
  padding: 20px 20px 20px 10px;
  background-color: #f2f4f9;
  border-bottom: 1px solid #dddddd;
 }

-/* line 32, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+/* line 36, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
 .duration_label {
  display: inline-block;
  width: 12px;
@ -1822,12 +1826,137 @@ body > div {
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAMAAADXT/YiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTI2NkQwNUJGQTFFMTFFMUI3NjdBMTM2OEJENTE2OUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTI2NkQwNUNGQTFFMTFFMUI3NjdBMTM2OEJENTE2OUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MjY2RDA1OUZBMUUxMUUxQjc2N0ExMzY4QkQ1MTY5QyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MjY2RDA1QUZBMUUxMUUxQjc2N0ExMzY4QkQ1MTY5QyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po6IR4AAAACEUExURf///4yMjJGRkc/Pz/r6+vT09I6Ojo+Pj5OTk/Hx8fn5+d7e3r+/v8HBwdHR0dPT05CQkJubm8LCwvz8/MzMzLe3t+Hh4e7u7piYmMXFxc3Nze/v79bW1vv7+7m5uc7OzsvLy8jIyP7+/t3d3ZKSkpmZmcDAwNTU1L29vcbGxqOjo42NjQzW+lwAAABTSURBVHjaFMEFFoJQAEXB+z4NkoqElEjK/vfncQYm11uNNmgVO9iWbngH8EwsoeDujPVnXsjovnpAjl7YUUhoMCV/jdg1VH1Q6ITUl3+5b34CDACspgP1+FhqGgAAAABJRU5ErkJggg==') no-repeat 1px 2px;
 }

+@media screen {
+  /* line 45, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 300px;
+  }
+
+  /* line 47, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #main {
+    padding-left: 22px;
+    padding-right: 38px;
+  }
+}
+@media screen and (min-width: 1340px) {
+  /* line 53, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 305px;
+  }
+}
+@media screen and (min-width: 1350px) {
+  /* line 57, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 310px;
+  }
+}
+@media screen and (min-width: 1360px) {
+  /* line 61, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 315px;
+  }
+}
+@media screen and (min-width: 1370px) {
+  /* line 65, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 320px;
+  }
+}
+@media screen and (min-width: 1380px) {
+  /* line 69, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 325px;
+  }
+}
+@media screen and (min-width: 1390px) {
+  /* line 73, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 330px;
+  }
+}
+@media screen and (min-width: 1400px) {
+  /* line 77, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 345px;
+  }
+}
+@media screen and (min-width: 1410px) {
+  /* line 81, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 350px;
+  }
+}
+@media screen and (min-width: 1420px) {
+  /* line 85, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 355px;
+  }
+}
+@media screen and (min-width: 1430px) {
+  /* line 89, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 360px;
+  }
+}
@media screen and (min-width: 1440px) {
-  /* line 41, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  /* line 93, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
  .duration_label {
    display: inline;
    background: none;
  }
+
+  /* line 96, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 365px;
+  }
+
+  /* line 98, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #main {
+    padding-left: 32px;
+    padding-right: 48px;
+  }
+}
+@media screen and (min-width: 1450px) {
+  /* line 104, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 370px;
+  }
+}
+@media screen and (min-width: 1455px) {
+  /* line 108, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 375px;
+  }
+}
+@media screen and (min-width: 1460px) {
+  /* line 112, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 380px;
+  }
+}
+@media screen and (min-width: 1465px) {
+  /* line 116, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 385px;
+  }
+}
+@media screen and (min-width: 1470px) {
+  /* line 120, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 390px;
+  }
+}
+@media screen and (min-width: 1475px) {
+  /* line 124, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 395px;
+  }
+}
+@media screen and (min-width: 1480px) {
+  /* line 128, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/layout.sass */
+  #left {
+    min-width: 400px;
+  }
 }
 /* line 3, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/_mixins/ansi.sass */
 .ansi .bold {
@ -5259,19 +5388,20 @@ pre#log .fold.open {
 /* line 30, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
 .maximized #right {
  width: 0;
+  min-width: 0;
  padding: 0;
 }
-/* line 33, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
+/* line 34, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
 .maximized #right *:not(#slider):not(.icon):not(.ember-view) {
  display: none;
 }
-/* line 36, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
+/* line 37, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
 .maximized #slider {
  left: -20px;
  width: 20px;
  z-index: 50;
 }
-/* line 40, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
+/* line 41, /Users/sven/Development/projects/travis/travis-ember/assets/stylesheets/right/slider.sass */
 .maximized #slider .icon {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAKCAMAAABL52QCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTkwNzJBNjlGQTEyMTFFMUEzNzhDNjZGM0QyMzVGNUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTkwNzJBNkFGQTEyMTFFMUEzNzhDNjZGM0QyMzVGNUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOTA3MkE2N0ZBMTIxMUUxQTM3OEM2NkYzRDIzNUY1QiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBOTA3MkE2OEZBMTIxMUUxQTM3OEM2NkYzRDIzNUY1QiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pg53hAIAAAAGUExURZmZmf///4PuMxkAAAACdFJOU/8A5bcwSgAAACBJREFUeNpiYAQCBgYwwQAmGMAECoCIQGWhKoEUQIABAAKoABVX+f43AAAAAElFTkSuQmCC');
  border-width: 5px 5px 5px 0;