Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
ubezi
web-ausstellung-virtuell.de
Commits
da290785
Commit
da290785
authored
Dec 26, 2017
by
Jonas Heinrich
Browse files
added video overview thumbnails
parent
298c87bd
Changes
6
Hide whitespace changes
Inline
Side-by-side
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
1
fr
;
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
1
fr
;
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>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment