OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

(css) improve video-watch title display on small screens

pull/2324/head
Rigel Kent 2019-12-04 09:29:20 +01:00 committed by Chocobozzz
parent 41f8f6207a
commit 7fc441cc4e
2 changed files with 74 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -39,20 +39,22 @@
<div class="video-info"> <div class="video-info">
<div class="video-info-first-row"> <div class="video-info-first-row">
<div> <div>
<div class="d-block d-md-none"> <!-- only shown on medium devices, has its conterpart for larger viewports below --> <div class="d-block d-md-none"> <!-- only shown on medium devices, has its counterpart for larger viewports below -->
<h1 class="video-info-name">{{ video.name }}</h1> <h1 class="video-info-name">{{ video.name }}</h1>
<div i18n class="video-info-date-views"> <div i18n class="video-info-date-views">
Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span> Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
</div> </div>
</div> </div>
<div class="d-flex justify-content-between align-items-md-end"> <div class="d-flex justify-content-between flex-direction-column">
<div class="d-none d-md-block"> <div class="d-none d-md-block">
<h1 class="video-info-name">{{ video.name }}</h1> <h1 class="video-info-name">{{ video.name }}</h1>
<div i18n class="video-info-date-views">
Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
</div> </div>
<div class="video-info-first-row-bottom">
<div i18n class="d-none d-md-block video-info-date-views">
Published <my-date-toggle [date]="video.publishedAt"></my-date-toggle> <span class="views"> - {{ video.views | myNumberFormatter }} views</span>
</div> </div>
<div class="video-actions-rates"> <div class="video-actions-rates">
@ -75,8 +77,8 @@
<span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span> <span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
</div> </div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support"> <div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
<my-global-icon iconName="support"></my-global-icon> <my-global-icon iconName="heart"></my-global-icon>
<span class="icon-text" i18n>Support</span> <span class="icon-text" i18n>Support</span>
</div> </div>
@ -114,6 +116,16 @@
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
</div> </div>
</div> </div>
<div
class="video-info-likes-dislikes-bar"
*ngIf="video.likes !== 0 || video.dislikes !== 0"
[ngbTooltip]="likesBarTooltipText"
placement="bottom"
>
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
</div>
</div>
</div> </div>

14
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -108,6 +108,10 @@ $player-factor: 1.7; // 16/9
border-radius: 0; border-radius: 0;
} }
.flex-direction-column {
flex-direction: column;
}
#video-not-found { #video-not-found {
height: 300px; height: 300px;
line-height: 300px; line-height: 300px;
@ -142,6 +146,13 @@ $player-factor: 1.7; // 16/9
flex-grow: 1; flex-grow: 1;
} }
.video-info-first-row-bottom {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
width: 100%;
}
.video-info-date-views { .video-info-date-views {
flex-grow: 1; flex-grow: 1;
margin-bottom: 10px; margin-bottom: 10px;
@ -209,8 +220,9 @@ $player-factor: 1.7; // 16/9
} }
.video-actions-rates { .video-actions-rates {
margin: 20px 0 10px 0; margin: 0 0 10px 0;
align-items: start; align-items: start;
width: max-content;
.video-actions { .video-actions {
height: 40px; // Align with the title height: 40px; // Align with the title