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

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

This commit is contained in:
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-first-row">
<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>
<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="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">
<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 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 class="video-actions-rates">
@ -75,8 +77,8 @@
<span *ngIf="video.dislikes" class="count">{{ video.dislikes }}</span>
</div>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button action-button-support">
<my-global-icon iconName="support"></my-global-icon>
<div *ngIf="video.support" (click)="showSupportModal()" class="action-button">
<my-global-icon iconName="heart"></my-global-icon>
<span class="icon-text" i18n>Support</span>
</div>
@ -114,6 +116,16 @@
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></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>

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