diff options
author | MaZderMind | 2015-03-02 14:55:37 +0100 |
---|---|---|
committer | MaZderMind | 2015-03-02 14:55:37 +0100 |
commit | 3b16385db8037630296947828f47b2c6b8a68cab (patch) | |
tree | 5141e7cb648b34d043ed7f061f05f4f321f1b2a3 | |
parent | 7f8942ef509ca3fa4e625beef00e023e25c6e94a (diff) |
Multitude of Smartphone-Fixes
-rw-r--r-- | assets/css/_bootstrap-selection.less | 2 | ||||
-rw-r--r-- | assets/css/_mejs_hacks.less | 2 | ||||
-rw-r--r-- | assets/css/_overview.less | 15 | ||||
-rw-r--r-- | assets/css/_program.less | 20 | ||||
-rw-r--r-- | assets/css/_room.less | 17 | ||||
-rw-r--r-- | assets/css/_structure.less | 26 | ||||
-rw-r--r-- | config.php | 2 | ||||
-rw-r--r-- | template/overview.phtml | 11 | ||||
-rw-r--r-- | template/relive.phtml | 8 |
9 files changed, 81 insertions, 22 deletions
diff --git a/assets/css/_bootstrap-selection.less b/assets/css/_bootstrap-selection.less index 14cf9eb..2c50792 100644 --- a/assets/css/_bootstrap-selection.less +++ b/assets/css/_bootstrap-selection.less @@ -30,7 +30,7 @@ //@import "bootstrap-3.3.2/badges.less"; //@import "bootstrap-3.3.2/jumbotron.less"; //@import "bootstrap-3.3.2/thumbnails.less"; -//@import "bootstrap-3.3.2/alerts.less"; +@import "bootstrap-3.3.2/alerts.less"; //@import "bootstrap-3.3.2/progress-bars.less"; //@import "bootstrap-3.3.2/media.less"; //@import "bootstrap-3.3.2/list-group.less"; diff --git a/assets/css/_mejs_hacks.less b/assets/css/_mejs_hacks.less index eaca5dd..c3f71a3 100644 --- a/assets/css/_mejs_hacks.less +++ b/assets/css/_mejs_hacks.less @@ -29,7 +29,7 @@ &.error .error { opacity: 1; display: block; } } - .mejs-controls { + &.mejs-video .mejs-controls { @factor: 1.5; visibility: visible !important; diff --git a/assets/css/_overview.less b/assets/css/_overview.less index c5d6ea4..5d2f0d1 100644 --- a/assets/css/_overview.less +++ b/assets/css/_overview.less @@ -19,6 +19,10 @@ .preview { float: left; margin-right: @padding-base-horizontal; + + @media (max-width: @screen-xs-min) { + margin-bottom: @padding-base-vertical; + } } a.title { @@ -35,6 +39,12 @@ .program-schedule .talk { display: block; } + + @media (max-width: @screen-xs-min) { + .program-schedule { + clear: both; + } + } } &.has-preview { @@ -47,6 +57,11 @@ .recordings a { font-size: @jumbo-font-size; line-height: @jumbo-line-height; + + @media (max-width: @screen-xs-min) { + font-size: @jumbo-font-size-xs; + } + display: block; text-align: center; diff --git a/assets/css/_program.less b/assets/css/_program.less index db87d04..fe5b34c 100644 --- a/assets/css/_program.less +++ b/assets/css/_program.less @@ -36,33 +36,45 @@ height: 100px; /* and now for small screens: */ - @media all and (max-width: @screen-xs-max) { + @media (max-width: @screen-xs-max) { height: 75px; } padding: 10px; - border: 1px solid white; + border: 1px solid @program-border; h3 { margin: 0; padding: 0; + font-size: 18px; /* and now for small screens: */ - @media all and (max-width: @screen-xs-max) { - font-size: 22px; + @media (max-width: @screen-xs-max) { + font-size: 16px; } } h4 { + margin: 3px 0; color: @program-room; + font-size: 14px; + + @media (max-width: @screen-xs-max) { + font-size: 15px; + } + a { color: @program-room; } } h5 { + @media (max-width: @screen-xs-max) { + margin: 0; + } + color: @program-author; } diff --git a/assets/css/_room.less b/assets/css/_room.less index e7b3af3..728ed9b 100644 --- a/assets/css/_room.less +++ b/assets/css/_room.less @@ -1,8 +1,9 @@ -.tab-content { - border-left: 1px solid #ddd; - border-bottom: 1px solid #ddd; - border-right: 1px solid #ddd; - +@media (min-width: @screen-sm-min) { + .tab-content { + border-left: 1px solid #ddd; + border-bottom: 1px solid #ddd; + border-right: 1px solid #ddd; + } } .player-wrap.tab-content { @@ -51,7 +52,11 @@ margin: 25px; > a { - font-size: @jumbo-font-size; + font-size: 18px; + + @media (min-width: @screen-sm-min) { + font-size: @jumbo-font-size; + } } } } diff --git a/assets/css/_structure.less b/assets/css/_structure.less index 3f7c10e..cd6d746 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -5,13 +5,15 @@ @img: '../img/'; -@grid-float-breakpoint: 0; +@grid-float-breakpoint: @screen-xs-min; -@jumbo-font-size: 52px; -@jumbo-line-height: 45px; +@jumbo-font-size: 52px; +@jumbo-font-size-xs: 2.5em; +@jumbo-line-height: 45px; @program-now: @brand-danger; @program-now-bg: fade(lighten(@brand-danger, 5%), 60%); +@program-border: lighten(@brand-primary, 50%); @program-room: darken(@brand-primary, 15%); @program-author: #444; @@ -30,7 +32,7 @@ // website configuration styles -.navbar { +nav { .navbar-brand > img { float: left; margin-right: @navbar-padding-horizontal; @@ -42,10 +44,24 @@ } body { - padding: 50px 0; + padding: 50px 0 30px 0; + + @media (max-width: @grid-float-breakpoint) { + padding: 120px 0 30px 0; + } } +@media (max-width: @screen-sm-min) { + nav { + position: absolute !important; + } + + footer { + display: none; + } +} + body.overview { @import "_overview.less"; } @@ -372,7 +372,7 @@ $GLOBALS['CONFIG']['SCHEDULE'] = array( /** * Skalierung der Programm-Vorschau in Sekunden pro Pixel */ - 'SCALE' => 5, + 'SCALE' => 7, /** * Simuliere das Verhalten als wäre die Konferenz bereits heute diff --git a/template/overview.phtml b/template/overview.phtml index fc9e80b..9210d47 100644 --- a/template/overview.phtml +++ b/template/overview.phtml @@ -16,13 +16,18 @@ <? $count = count($rooms); ?> <? foreach($rooms as $idx => $room): ?> <div class=" - room room-<?=h($room)?> + room room-<?=h($room)?> clearfix <? /* when the count is odd and this is the last item - make it full width */ ?> <? if($count % 2 == 1 && $idx == $count - 1): ?> - col-sm-12 wide + col-xs-12 wide <? else: ?> - col-md-6 col-sm-12 narrow + <? if(get("ROOMS.$room.PREVIEW") && get("ROOMS.$room.SCHEDULE") && has("SCHEDULE")): ?> + col-md-6 + <? else: ?> + col-sm-6 + <? endif ?> + narrow <? endif ?> <? if(get("ROOMS.$room.PREVIEW")): ?> diff --git a/template/relive.phtml b/template/relive.phtml index d263f8e..86b5b3f 100644 --- a/template/relive.phtml +++ b/template/relive.phtml @@ -1,6 +1,12 @@ <div class="container"> <h1><?=h($title)?></h1> - <h2 style="color: red;">Extreme Beta !!!</h1> + + <div class="row"> + <div class="alert alert-danger" role="alert"> + <i class="fa fa-exclamation-circle"></i> + <strong>Danger!</strong> Extreme Beta!!! + </div> + </div> <div class="event-previews relive"> |