Skip to content

GitLab

Commit da290785 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

added video overview thumbnails

parent 298c87bd
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 60 deletions
css/main.css
View file @ da290785
......@@ -6,6 +6,10 @@ body {
color: white;
}
p {
margin: 0px;
}
.container {
height:100vh;
display: grid;
......@@ -61,7 +65,7 @@ map {
}
.description {
padding: 15px 60px 15px 60px;
padding: 15px 60px;
}
h2 {
......@@ -72,52 +76,6 @@ h2 {
padding-bottom: 5px;
}
@media screen and (max-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px auto 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
content {
overflow-y: inherit;
}
.burger_menu {
display: block;
float:right;
width: 30px;
height: 25px;
margin: 18px;
}
}
/* .avatar-frame,.avatar-frame img{
width: 100px;
height: 100px;
border-radius: 60px;
} */
.grid__item {
position: relative;
width: 25%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
.grid {
display: flex;
flex-wrap: wrap;
......@@ -127,6 +85,16 @@ h2 {
padding: 1.5em 0 1em;
text-align: center;
user-select: none;
justify-content: center;
}
.grid__item {
position: relative;
width: 27%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
.profile-img {
......@@ -182,3 +150,45 @@ h1, h2, h3, h4, h5, h6 {
color: #7f7f7f;
color: rgba(255,255,255,.5);
}
@media screen and (max-width: 44.001em) {
.container {
height:100vh;
display: grid;
grid-template-rows: 80px auto 300px 1fr;
grid-template-columns: 100%;
grid-row-gap: 0px;
grid-template-areas:
"logo"
"navigation"
"map"
"content"
;
}
content {
overflow-y: inherit;
}
.burger_menu {
display: block;
float:right;
width: 30px;
height: 25px;
margin: 18px;
}
.description {
padding: 15px 20px;
}
.grid__item {
position: relative;
width: 30%;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 2em;
}
}
css/overview.css 0 → 100644
View file @ da290785
#video_item {
width: 100%;
display: inline-block;
position: relative;
margin: 10px 0px 0px 0px;
border: 1px solid rgba(255,255,255,0.25);
}
#video_item .video_thumb {
width: 70px;
height: 70px;
float: left;
position: relative;
margin-right: 10px;
}
#video_item .video_overlay {
visibility: visible;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
opacity: 0.7;
background-image: url('../images/controller-play.svg');
background-repeat: no-repeat;
background-position: 15px;
background-size: 50px;
}
#video_item:hover {
background: rgba(255,255,255,0.10);
}
#video_item .video_title {
padding: 5px;
font-size: 18px;
line-height: 20px;
}
#video_item .video_description {
}
.small {
color: rgba(255,255,255,.5);
font-size: 12px;
}
#video_item .video_duration {
float: right;
margin-right: 5px;
}
images/controller-play.svg 0 → 100644
View file @ da290785
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Play" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path fill="#FFFFFF" d="M15,10.001c0,0.299-0.305,0.514-0.305,0.514l-8.561,5.303C5.51,16.227,5,15.924,5,15.149V4.852 c0-0.777,0.51-1.078,1.135-0.67l8.561,5.305C14.695,9.487,15,9.702,15,10.001z"/>
</svg>
\ No newline at end of file
index.html
View file @ da290785
......@@ -6,6 +6,7 @@
<title>Ausstellung-Virtuell | Folge und Varianz</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/player.css">
<link rel="stylesheet" type="text/css" href="css/overview.css">
<script src='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='stylesheet' />
</head>
......@@ -32,12 +33,10 @@
<div class="overlay"></div>
<video id="video" width="100%" height="100%" poster="images/video1_poster.png">
<!-- Video here -->
<source src="https://cdn-storage.br.de/MUJIuUOVBwQIbtC2uKJDM6OhuLnC_2rc5H1S/_AJS/_A4f5y4p9U1S/89a94450e10911e7a0b0984be10adece_B.mp4" type="video/mp4">
<p>Error: your browser doesn't support HTML5 video.</p>
</video>
<!-- Markup to replace default interface -->
<div id="video-controls">
<div class="controls">
<button type="button" id="play-pause" class="icon play"><span class="icon-play" aria-hidden="true"></span></button>
......
js/main.js
View file @ da290785
......@@ -5,3 +5,11 @@ $( "#overview" ).click(function() {
$( "#about" ).click(function() {
$( "content" ).load( "about.html" );
});
$("#video_item").mouseenter(function() {
$(".video_overlay").show();
});
$("#video_item").mouseleave(function() {
$(".video_overlay").show();
});
overview.html
View file @ da290785
......@@ -8,19 +8,25 @@
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
<section class="overview">
<span class="overview_item">
<img src="images/video1_poster.png">
Titel
Beschreibung
Länge
</span>
</section>
<br><br>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_duration small">00:31:00</p>
</div>
<div id="video_item">
<div class="video_overlay"></div>
<div class="video_thumb" style="background-image: url('images/video1_poster.png'); background-size: cover;"></div>
<p class="video_title">Form und Farbe 1</p>
<p class="video_description small">Form follows function 1</p>
<p class="video_duration small">00:31:00</p>
</div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment