Commit 90888373 authored by marcheing's avatar marcheing

Add content detailed section css

Also modified the player box css to be separated from the map view
player
Signed-off-by: Diego de Araújo Martinez Camarinha's avatarDiego Araújo <diegoamc@protonmail.ch>
parent 7e266f06
Pipeline #3685399 passed with stage
in 11 minutes and 10 seconds
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="5.5 -3.5 64 64" enable-background="new 5.5 -3.5 64 64" xml:space="preserve">
<g>
<circle fill="#FFFFFF" cx="37.785" cy="28.501" r="28.836"/>
<path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314
c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143
c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429
c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2
c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657
c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913
c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971
c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344
c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187
l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657
c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2
c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629
c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686
C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2
c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113
c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686
c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313
c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"/>
</g>
</svg>
.content-detailed-section {
@include is-container;
.autoplay-section {
@include grid-col-row;
margin-bottom: 20px;
.autoplay-label {
color: $brand-gray-medium;
display: inline-block;
float: left;
font-family: $primary-font;
font-size: 16px;
font-weight: bold;
line-height: 24px;
padding-right: 8px;
}
.switch.tiny {
display: inline;
}
}
.callout {
border-left: none;
border-right: none;
border-top: none;
padding-top: 0;
}
.content-box {
@include grid-col-row;
position: relative;
text-align: center;
img {
width: 100%;
}
}
.gifplayer {
max-height: 641.25px;
}
.player-box {
width: 100%;
}
.map-player-box {
position: relative;
text-align: center;
height: 270px;
width: 480px;
.gifplayer, .video-js {
max-height: 270px;
}
}
.video-js {
height: auto !important;
width: 100%;
max-height: 641.25px;
padding-top: 56.25%;
.vjs-big-play-button {
$big-play-width: 60px;
$big-play-height: 60px;
line-height: ($big-play-width * 0.9);
height: $big-play-height;
width: $big-play-width;
left: 50%;
top: 50%;
margin-left: -($big-play-width / 2);
margin-top: -($big-play-height / 2);
/* IE8 - has no alpha support */
background-color: $brand-red;
/* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba($brand-red, 0.7);
border: 4px solid #fff;
border-radius: 50%;
}
&:hover .vjs-big-play-button,
.vjs-big-play-button:focus {
background-color: rgba($brand-red-hover, 0.7);
}
.vjs-control {
&:focus:before,
&:hover:before,
&:focus {
background-color: rgba($brand-red, 0.7);
}
}
.vjs-slider {
background-color: $brand-gray-medium;
background-color: rgba($brand-gray-medium, 0.5);
}
.vjs-play-progress,
.vjs-volume-level,
.vjs-slider-bar {
background-color: $brand-red;
}
.vjs-load-progress {
/* For IE8 we'll lighten the color */
background: ligthen($brand-gray-medium, 25%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($brand-gray-medium, 0.5);
div {
/* For IE8 we'll lighten the color */
background: ligthen($brand-gray-medium, 50%);
/* Otherwise we'll rely on stacked opacities */
background: rgba($brand-gray-medium, 0.75);
}
}
}
.vjs-fullscreen {
max-height: none;
}
}
.content-details {
margin-top: 40px;
margin-bottom: 40px;
.content-title {
@extend .h2 !optional;
font-family: $primary-font;
}
.content-author {
font-family: $secondary-font;
margin-bottom: 0;
a {
color: $black;
text-transform: uppercase;
&:hover {
color: $brand-red-hover;
}
}
}
.content-views {
margin-bottom: 0;
margin-top: 10px;
}
.contest-sponsors {
img {
margin-bottom: 5px;
max-height: 100px;
&:not(:last-child) {
margin-right: 5px;
}
}
}
.content-tags, .content-contests {
@extend .title-call;
font-family: $primary-font;
line-height: 1.5;
margin-bottom: 0;
margin-top: 8px;
a {
color: black;
font-weight: normal;
&:after {
content: ', ';
}
&:last-child:after {
content: '';
}
}
}
.left-col, .right-col {
@include grid-col(12);
@include breakpoint(large){
@include grid-col(6);
}
h2, h3, p {
margin-bottom: 0;
}
}
.right-col {
@include breakpoint(large){
text-align: right;
}
}
}
.content-icons-group {
margin-top: 10px;
.has-tip {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
border-bottom: none;
cursor: initial;
height: 40px;
vertical-align: middle;
width: 40px;
&:not(:last-child) {
margin-right: 10px;
}
}
.ic-premio {
background-image: url('ic-premio-preto.svg');
}
.ic-destaque {
background-image: url('ic-destaque-preto.svg');
}
.ic-mapa {
background-image: url('ic-mapa-preto.svg');
&:hover {
background-image: url('ic-mapa-preto-hover.svg');
}
}
}
.video-license {
margin-left: 10px;
&:before {
background: url('ic-cc.svg') no-repeat left center;
background-size: contain;
content: '';
width: 20px;
height: 20px;
padding-left: 25px;
}
}
.content-rating {
@extend .content-views;
.has-tip {
border-bottom: none;
cursor: pointer;
}
> .has-tip {
cursor: initial;
}
}
/******relacionados*******/
.tabs-content {
@include grid-row;
border: none;
padding: 0;
&> .tabs-panel {
padding: 0;
}
}
.tabs-panel {
@include grid-col(12);
// margin-bottom: 40px;
}
.related-content {
@include is-container();
.content-sub-container {
@include grid-col-row;
margin-bottom: 40px;
}
}
.content-button-group {
span {
@extend .h3;
font-size: 24px;
margin-right: 20px;
}
a {
@extend .h3;
color: $black;
&:hover,
&:focus {
color: $brand-red;
}
&:not(:last-child) {
margin-right: 20px;
}
&.is-active {
color: $brand-red;
border-bottom: 3px solid $brand-red;
}
}
}
.inline-grid {
.tabs-title {
&:not(:last-child) {
margin-right: 20px;
}
a {
@extend h3;
color: #000;
padding: 0;
&:hover {
color: $brand-red;
}
}
> a:focus, > a[aria-selected='true'] {
background-color: #fff;
}
&:hover {
color: $brand-red;
}
&.is-active a {
border-bottom: 3px solid $brand-red;
color: $brand-red;
}
}
}
.tabs {
border: none;
}
.comments-list {
@include grid-col(12);
@include breakpoint(large) {
@include grid-col(10);
}
}
.comment-box {
@include media-object-container;
border-top: 1px solid $brand-gray-medium;
margin: 0;
padding-top: 25px;
.comments-list > &:last-of-type {
border-bottom: 1px solid $brand-gray-medium;
margin-bottom: 20px;
}
.comment-box-section {
@include media-object-section(20px);
.thumbnail {
border: none;
box-shadow: none;
width: 75px;
&:hover,
&:focus {
box-shadow: none;
}
img {
border-radius: 50%;
}
}
.comment-author {
color: $brand-red;
}
p {
font-size: 14px;
}
.comment-likes {
cursor: pointer;
margin-left: 20px;
&:before {
background: url('ic-like.svg') no-repeat left center;
content: '';
width: 18px;
height: 20px;
padding-left: 23px;
}
&:hover:before {
background-image: url('ic-like-hover.svg');
}
}
}
}
.comment-compose-box {
@extend .comment-box;
border-top: none;
padding-bottom: 25px;
width: 100%;
.input-section {
text-align: right;
width: 100%;
textarea {
font-size: 14px;
}
}
}
......@@ -56,4 +56,5 @@
@import 'main';
@import 'header';
@import 'form-section';
@import 'content-detailed';
@import 'footer';
<div>
<div class="player-box">
<%# FIXME: Poltergeist server won't recognize the video source if put on a source tag %>
<video id="video-<%= content.id %>" class="video-js" controls preload="none" width="<%= video.instance.width %>" height="<%= video.instance.height %>" data-setup="{}" src="<%= video.url %>" type="video/mp4">
<video id="video-<%= content.id %>" class="video-js" controls preload="none" data-setup="{}" src="<%= video.url %>" type="video/mp4">
<p class="vjs-no-js">
<%= t('video_js_support_message_html') %>
<%= t('.video_js_support_message_html') %>
</p>
</video>
</div>
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