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

(css) vertical-center modals, bullet as separator

This commit is contained in:
Rigel Kent 2019-12-20 20:14:58 +01:00
parent 223b24e618
commit 3921166d78
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
4 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/shared/buttons/action-dropdown.component.ts
View File

@ -23,7 +23,7 @@ export class ActionDropdownComponent<T> {
@Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = [] @Input() actions: DropdownAction<T>[] | DropdownAction<T>[][] = []
@Input() entry: T @Input() entry: T
@Input() placement = 'bottom-left' @Input() placement = 'bottom-left auto'
@Input() buttonSize: DropdownButtonSize = 'normal' @Input() buttonSize: DropdownButtonSize = 'normal'
@Input() buttonDirection: DropdownDirection = 'horizontal' @Input() buttonDirection: DropdownDirection = 'horizontal'

2
client/src/app/shared/video/video-miniature.component.html
View File

@ -20,7 +20,7 @@
<my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle> <my-date-toggle *ngIf="displayOptions.date" [date]="video.publishedAt"></my-date-toggle>
<span class="views"> <span class="views">
<ng-container *ngIf="displayOptions.date && displayOptions.views"> - </ng-container> <ng-container *ngIf="displayOptions.date && displayOptions.views"> • </ng-container>
<ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container> <ng-container i18n *ngIf="displayOptions.views">{{ video.views | myNumberFormatter }} views</ng-container>
</span> </span>
</span> </span>

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

@ -43,7 +43,7 @@
<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>
@ -54,7 +54,7 @@
<div class="video-info-first-row-bottom"> <div class="video-info-first-row-bottom">
<div i18n class="d-none d-md-block video-info-date-views"> <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> 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">

21
client/src/sass/bootstrap.scss vendored
View File

@ -37,7 +37,28 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
} }
} }
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
min-width: 500px;
width: 40vw;
max-width: 900px;
}
}
.modal { .modal {
text-align: center;
.modal-content { .modal-content {
background-color: var(--mainBackgroundColor); background-color: var(--mainBackgroundColor);
} }