made the website less broken on phones. closes #141

static/style.css

@@ -6,6 +6,8 @@
 }
 
 .table-top-aligned tr { vertical-align: top; }
+
+@media (min-width: 768px) {
 	.footer {
 		position: fixed;
 		bottom: 0;
@@ -13,3 +15,15 @@
 		height: 30px;
 		background-color: #f5f5f5;
 	}
+}
+
+@media (max-width: 767px) {
+	.footer {
+		position: relative;
+		margin-top: -80px; /* negative value of footer height */
+		height: 80px;
+		clear:both;
+		padding-top:20px;
+		background-color: #f5f5f5;
+	}
+}

templates/lecture.html

@@ -23,10 +23,8 @@
 	</div>
 	<div class="panel-body">
 		<div class="row" style="padding: 0px;">
-			<div class="col-sm-6 col-xs-12" style="padding-bottom: 5px;">
+			<div class="col-xs-12" style="padding-bottom: 5px;">
 				<a href="{{url_for('course', handle=course.handle)}}#lecture-{{lecture.id}}" class="btn btn-default" >Zur Veranstaltungsseite</a>
-			</div>
-			<div class="col-sm-6 col-xs-12">
 				<ul class="list-inline pull-right">
 					<li><button class="btn btn-default" id="hintnewchapter">Kapitelmarker vorschlagen</button></li>
 					<li>{{ video_embed_btn(lecture.id) }}</li>

templates/macros.html

@@ -119,7 +119,7 @@ $('#embedcodebtn').popover(
 {% macro lecture_list_item(lecture,videos,global_permissions) %}
 <li class="list-group-item" id="lecture-{{lecture.id}}">
 	<div class="row">
-		<img class="col-sm-2 col-xs-12"src="{{ config.VIDEOPREFIX }}/{{lecture.titlefile}}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
+		<img style="margin-bottom: 10px" class="col-sm-2 col-xs-12"src="{{ config.VIDEOPREFIX }}/{{lecture.titlefile}}" alt="Vorschaubild" onerror="this.src='{{url_for('static',filename='no-thumbnail.png')}}'; this.onerror=''; ">
 		<span class="col-sm-3 col-xs-12">
 			<ul class="list-unstyled">
 				<li>{{ moderator_editor(['lectures',lecture.id,'title'], lecture.title) }}</li>