diff options
Diffstat (limited to 'assets')
| -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 |
5 files changed, 146 insertions, 26 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; |
