diff options
| -rw-r--r-- | assets/css/_program.less | 94 | ||||
| -rw-r--r-- | assets/css/_room.less | 33 | ||||
| -rw-r--r-- | assets/css/_structure.less | 20 | ||||
| -rw-r--r-- | assets/img/stripes/gap.png | bin | 217 -> 227 bytes | |||
| -rw-r--r-- | assets/js/lustiges-script.js | 25 | ||||
| -rw-r--r-- | config.php | 9 | ||||
| -rw-r--r-- | template/assemblies/program.phtml | 16 | ||||
| -rw-r--r-- | template/page.phtml | 2 |
8 files changed, 162 insertions, 37 deletions
diff --git a/assets/css/_program.less b/assets/css/_program.less new file mode 100644 index 0000000..db87d04 --- /dev/null +++ b/assets/css/_program.less @@ -0,0 +1,94 @@ +.program { + &.scroll-container { + overflow: hidden; + overflow-x: scroll; + } + + .scroll-element { + position: relative; + } + + .room { + overflow: hidden; + } + + .now { + position: absolute; + left: 0; + width: 150px; + height: 500px; + background-color: @program-now-bg; + font-size: 14px; + + //z-index: -5; + + span { + display: block; + position: absolute; + right: -28px; + color: @program-now; + } + } + + .block { + overflow: hidden; + float: left; + height: 100px; + + /* and now for small screens: */ + @media all and (max-width: @screen-xs-max) { + height: 75px; + } + + + padding: 10px; + border: 1px solid white; + + h3 { + margin: 0; + padding: 0; + + /* and now for small screens: */ + @media all and (max-width: @screen-xs-max) { + font-size: 22px; + } + } + + h4 { + margin: 3px 0; + color: @program-room; + a { + color: @program-room; + } + } + + h5 { + color: @program-author; + } + + &.event h3 { + overflow: hidden; + } + + &.gap { + background-image: url(../img/stripes/gap.png); + background-color: @program-gap-bg; + color: @program-gap; + } + + &.daychange { + background-image: url(../img/stripes/gap.png); + background-color: @program-daychange-bg; + color: @program-daychange; + } + + &.pause { + background-color: @program-pause-bg; + color: @program-pause; + } + } + + .room.highlight .block { + background-color: @program-selected-room; + } +} diff --git a/assets/css/_room.less b/assets/css/_room.less index 91e71c0..17d9742 100644 --- a/assets/css/_room.less +++ b/assets/css/_room.less @@ -28,25 +28,30 @@ margin: 0 auto; } -.functions-wrap #switcher { - .row { - margin-bottom: @padding-large-vertical; - } +.functions-wrap +{ + #switcher { + .row { + margin-bottom: @padding-large-vertical; + } - .btn-group { - margin-bottom: @padding-base-vertical; + .btn-group { + margin-bottom: @padding-base-vertical; + } } -} -.functions-wrap .chat { - text-align: center; - overflow: hidden; + #chat { + text-align: center; + overflow: hidden; - > div { - margin: 25px; + > div { + margin: 25px; - > a { - font-size: @jumbo-font-size; + > a { + font-size: @jumbo-font-size; + } } } } + +@import "_program.less"; diff --git a/assets/css/_structure.less b/assets/css/_structure.less index 1f38fbf..8a616a8 100644 --- a/assets/css/_structure.less +++ b/assets/css/_structure.less @@ -5,9 +5,27 @@ @img: '../img/'; -@jumbo-font-size: 52px; +@jumbo-font-size: 52px; @jumbo-line-height: 45px; +@program-now: @brand-danger; +@program-now-bg: fade(lighten(@brand-danger, 20%), 60%); + +@program-room: darken(@brand-primary, 15%); +@program-author: #444; + +@program-selected-room: lighten(@brand-success, 10%); + +@program-daychange: white; +@program-daychange-bg: fade(white, 30%); + +@program-gap: white; +@program-gap-bg: fade(white, 30%); + +@program-pause: white; +@program-pause-bg: lighten(black, 85%); + + // website configuration styles .navbar { diff --git a/assets/img/stripes/gap.png b/assets/img/stripes/gap.png Binary files differindex 99df7ee..1ad5fa1 100644 --- a/assets/img/stripes/gap.png +++ b/assets/img/stripes/gap.png diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index 6d1d8c5..96e9f2c 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -190,9 +190,18 @@ $(function() { $now = $program.find('.now'), scrollLock = false, rewindTimeout, - rewindTime = 10000, /* 10 seconds after manual navigation */ - scrollDuration = 500, /* 1/2s animation on the scolling element */ - updateTimer = 500; /* update now-pointer placement every 1/2s */ + + /* 10 seconds after manual navigation */ + rewindTime = 10000, + + /* 1/2s animation on the scolling element */ + scrollDuration = 500, + + /* update now-pointer placement every 1/2s */ + updateTimer = 500, + + /* offset to the browsers realtime (for simulation) */ + offset = $('.js-settings').data('scheduleoffset'); $program.on('mouseenter mouseleave touchstart touchend', function(e) { if(e.type == 'mouseleave' || e.type == 'touchend') { @@ -208,11 +217,8 @@ $(function() { // program now-marker & scrolling function updateProgramView(initial) { var - // offset to the browsers realtime (for simulation - offset = $('.program').data('offset'), - // corrected "now" timestamp in unix-counting (seconds, not microseconds) - now = (Date.now() / 1000) - offset; + now = (Date.now() / 1000) + offset; // only check the first room (shouldn't matter anyway) // find the newest block that starts in the past @@ -327,11 +333,8 @@ $(function() { function updateProgtamTeaser() { var - // offset to the browsers realtime (for simulation - offset = $lecture.data('offset'), - // corrected "now" timestamp in unix-counting (seconds, not microseconds) - now = (Date.now() / 1000) - offset; + now = (Date.now() / 1000) + offset; $.each(programData, function(room, talks) { var currentTalk, nextTalk; @@ -147,7 +147,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array( * Name des Raums im Fahrplan * Wenn diese Zeile auskommentiert ist wird der Raum-Slug verwendet */ - //'SCHEDULE_NAME' => 'saal-1', + 'SCHEDULE_NAME' => 'Saal 1', /** * Feedback anzeigen (boolean) @@ -242,6 +242,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array( 'PREVIEW' => true, 'TRANSLATION' => true, 'SCHEDULE' => true, + 'SCHEDULE_NAME' => 'Saal 2', 'FEEDBACK' => true, 'SUBTITLES' => true, 'IRC' => true, @@ -269,6 +270,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array( 'PREVIEW' => true, 'TRANSLATION' => true, 'SCHEDULE' => true, + 'SCHEDULE_NAME' => 'Saal G', 'FEEDBACK' => true, 'SUBTITLES' => true, 'IRC' => true, @@ -296,6 +298,7 @@ $GLOBALS['CONFIG']['ROOMS'] = array( 'PREVIEW' => true, 'TRANSLATION' => true, 'SCHEDULE' => true, + 'SCHEDULE_NAME' => 'Saal 6', 'FEEDBACK' => true, 'SUBTITLES' => true, 'IRC' => true, @@ -377,8 +380,8 @@ $GLOBALS['CONFIG']['SCHEDULE'] = array( * Diese folgende Beispiel-Zeile Simuliert, dass das * Konferenz-Datum 2014-12-29 auf den heutigen Tag 2015-02-24 verschoben ist. */ - // 'SIMULATE_OFFSET' => strtotime(/* Conference-Date */ '2014-12-29') - strtotime(/* Today */ '2015-02-24'), - 'SIMULATE_OFFSET' => 0, + 'SIMULATE_OFFSET' => strtotime(/* Conference-Date */ '2014-12-28') - strtotime(/* Today */ '2015-03-01'), + //'SIMULATE_OFFSET' => 0, ); diff --git a/template/assemblies/program.phtml b/template/assemblies/program.phtml index 496fa83..ce69c51 100644 --- a/template/assemblies/program.phtml +++ b/template/assemblies/program.phtml @@ -4,16 +4,16 @@ foreach(reset($program) as $event) $width += $event['duration']; ?> -<div class="program scroll-container" data-offset="<?=h($GLOBALS['CONFIG']['SCHEDULE_OFFSET'])?>"> +<div class="program scroll-container"> <div class="scroll-element"> <div class="now"><span>now</span></div> <? foreach($program as $name => $events): ?> - <div class="room <? if($name == $room): ?>highlight<? endif ?>" style="width: <?=$width * $GLOBALS['CONFIG']['SCHEDULE_SCALE'] ?>px"> + <div class="room <? if($name == get("ROOMS.$room.SCHEDULE_NAME", $room)): ?>highlight<? endif ?>" style="width: <?=$width / get('SCHEDULE.SCALE')?>px"> <? foreach($events as $event): ?> <div class="block <?=h(@$event['special'] ?: 'event')?>" - style="width: <?=h($event['duration'] * $GLOBALS['CONFIG']['SCHEDULE_SCALE'])?>px" + style="width: <?=h($event['duration'] / get('SCHEDULE.SCALE'))?>px" data-start="<?=intval($event['start'])?>" data-end="<?=intval($event['end'])?>" > @@ -32,15 +32,17 @@ foreach(reset($program) as $event) <? else: ?> <h4><?=h(strftime('%H:%M', $event['start']))?> - – + – <?=h(strftime('%H:%M', $event['end']))?> in - <?=h($GLOBALS['CONFIG']['ROOMS'][$name])?> + <a href="<?=h(link_player($room))?>"> + <?=h(get("ROOMS.$room.DISPLAY"))?> + </a> </h4> <h3> <a - href="<?=h(link_player($name))?>" - title="Switch to <?=h($GLOBALS['CONFIG']['ROOMS'][$name])?>" + href="<?=h(link_player($room))?>" + title="Switch to <?=h(get("ROOMS.$room.DISPLAY"))?>" ><?=h($event['title'])?></a> </h3> <h5>by <?=h($event['speaker'])?></h5> diff --git a/template/page.phtml b/template/page.phtml index 2815c77..bebc64b 100644 --- a/template/page.phtml +++ b/template/page.phtml @@ -57,7 +57,7 @@ <? include("$assemblies/footer.phtml") ?> <span class="js-settings" - data-scheduleoffset="<?=h(get('SCHEDULE.OFFSET', 0))?>" + data-scheduleoffset="<?=h(get('SCHEDULE.SIMULATE_OFFSET', 0))?>" ></span> </body> </html> |
