rework design of panels and headlines on startpage

3 files changed, 133 insertions, 44 deletions

diff --git a/configs/conferences/33c3/dot.png b/configs/conferences/33c3/dot.png
new file mode 100644
index 0000000..6b2dc92
--- /dev/null
+++ b/configs/conferences/33c3/dot.png
diff --git a/configs/conferences/33c3/main.less b/configs/conferences/33c3/main.less
index d683b5b..5cca25e 100644
--- a/configs/conferences/33c3/main.less
+++ b/configs/conferences/33c3/main.less
@@ -33,21 +33,6 @@ body {
 	padding: @navbar-height 0
 }
 
-.panel-default {
-	color: @dark-grey;
-	a {
-		color: @dark-grey;
-	}
-}
-.panel-primary {
-	background-color: @light-grey;
-	border-color: @light-grey;
-	color: white;
-	a {
-		color: white;
-	}
-}
-
 h1, h2, body.overview .room a.title, body.overview .panel-primary a, .navbar-brand {
 	font-family: sans-serif;
 }
@@ -62,13 +47,119 @@ h1, h2, body.overview .room a.title, body.overview .panel-primary a, .navbar-bra
 		text-transform: uppercase;
 		font-weight: bold;
 
-		margin: 60px 0 30px 0;
+		margin: 100px 0 30px 0;
 
 		span {
 			background-color: black;
 			padding: 0 15px;
 		}
 	}
+
+	.room {
+		a, a:hover {
+			text-decoration: none;
+			color: white;
+		}
+
+		.panel {
+			background: none;
+			border: none;
+
+			&:hover {
+				text-decoration: none;
+
+				.panel-body {
+					border-top: 1px solid white;
+					border-bottom: 1px solid white;
+				}
+
+				.panel-body .program-schedule .next-talk {
+					border-bottom: 1px solid white;
+				}
+			}
+
+			.panel-title {
+				color: white;
+			}
+
+			.panel-primary {
+				background-color: @light-grey;
+				border-color: @light-grey;
+				color: white;
+				a {
+					color: white;
+				}
+			}
+
+			.panel-heading {
+				background: none;
+				border: none;
+
+				display: block !important;
+
+				text-transform: uppercase;
+				font-weight: bold;
+
+				padding: 8px 15px;
+
+				a {
+					color: white;
+				}
+			}
+
+			.panel-body {
+				padding: 0;
+				border-top: 1px solid @darker-grey;
+				border-bottom: 1px solid @darker-grey;
+
+				position: relative;
+				margin-bottom: 48px + 16px;
+
+				.program-schedule {
+					padding: 15px 10px;
+					overflow: hidden;
+					font-size: 18px;
+
+					.current-talk strong {
+						display: none;
+					}
+					.next-talk {
+						display: block;
+						position: absolute;
+
+						overflow: hidden;
+
+						bottom: -48px;
+						left: 0;
+						right: 0;
+						height: 48px;
+						margin: 0;
+
+						line-height: 48px;
+						padding-left: 16px;
+
+						border-bottom: 1px solid @darker-grey;
+					}
+				}
+			}
+		}
+	}
+
+	.recordings {
+		.panel {
+			background: none;
+			border: 1px solid @dark-grey;
+			border-radius: 0;
+
+			&:hover {
+				border-color: white;
+			}
+
+			a {
+				color: white;
+			}
+		}
+	}
 }
 
 .navbar-brand {
@@ -170,3 +261,7 @@ body.multiview .cell {
 	text-decoration: underline;
 	color: @brand-primary;
 }
+
+.schedule .block.pause {
+	color: black !important;
+}
diff --git a/template/overview.phtml b/template/overview.phtml
index bbb9568..3332fb9 100644
--- a/template/overview.phtml
+++ b/template/overview.phtml
@@ -44,49 +44,43 @@
 					<? endif ?>
 				">
 
-					<div class="panel panel-default">
-						<div class="panel-heading">
-							<div class="panel-title">
-								<a href="<?=h($room->getLink())?>">
+					<a href="<?=h($room->getLink())?>">
+						<div class="panel panel-default">
+							<div class="panel-heading">
+								<div class="panel-title">
 									<?=h($room->getDisplay())?>
-								</a>
+								</div>
 							</div>
-						</div>
 
-						<div class="panel-body">
-							<? if($room->hasPreview()): ?>
+							<div class="panel-body">
+								<? if($room->hasPreview()): ?>
 
-								<a href="<?=h($room->getLink())?>">
 									<img
 										class="preview"
 										src="<?=h($room->getThumb())?>"
 										alt="<?=h($room->getDisplay())?>"
 										width="213" height="120"
 									/>
-								</a>
 
-							<? endif ?>
+								<? endif ?>
 
-							<a href="<?=h($room->getLink())?>" class="title">
-								<?=h($room->getDisplay())?>
-							</a>
+								<? if($room->hasSchedule()): ?>
+									<? $upcoming = @$upcomingTalksPerRoom[ $room->getScheduleName() ] ?: [] ?>
+									<div class="program-schedule">
+										<div class="talk current-talk" title="<?=h(@$upcoming['current']['title'] ?: 'none') ?>">
+											<strong>Now:</strong>
+											<span class="t"><?=h(@$upcoming['current']['title'] ?: 'none') ?></span>
+										</div>
 
-							<? if($room->hasSchedule()): ?>
-								<? $upcoming = @$upcomingTalksPerRoom[ $room->getScheduleName() ] ?: [] ?>
-								<div class="program-schedule">
-									<div class="talk current-talk">
-										<strong>Now:</strong>
-										<span class="t"><?=h(@$upcoming['current']['title'] ?: 'none') ?></span>
+										<div class="talk next-talk" title="<?=h(@$upcoming['next']['title'] ?: 'none') ?>">
+											<strong>Next Talk:</strong>
+											<span class="t"><?=h(@$upcoming['next']['title'] ?: 'none') ?></span>
+										</div>
 									</div>
-
-									<div class="talk next-talk">
-										<strong>Next Talk:</strong>
-										<span class="t"><?=h(@$upcoming['next']['title'] ?: 'none') ?></span>
-									</div>
-								</div>
-							<? endif ?>
+								<? endif ?>
+							</div>
 						</div>
-					</div>
+					</a>
 				</div>
 				<? $idx++ ?>
 			<? endforeach ?>