Small style fixes

This commit is contained in:
Chocobozzz 2017-12-12 14:41:59 +01:00
parent 4a7eeb62f1
commit b2731bff28
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
12 changed files with 49 additions and 13 deletions

View File

@ -9,7 +9,7 @@
"outDir": "dist", "outDir": "dist",
"deployUrl": "client/", "deployUrl": "client/",
"assets": [ "assets": [
{ "glob": "**/*", "input": "./assets/images", "output": "./client/assets/" } { "glob": "**/*", "input": "./assets/images", "output": "./client/assets/images" }
], ],
"index": "index.html", "index": "index.html",
"main": "main.ts", "main": "main.ts",

View File

@ -12,7 +12,7 @@
<my-video-thumbnail [video]="video"></my-video-thumbnail> <my-video-thumbnail [video]="video"></my-video-thumbnail>
<div class="video-info"> <div class="video-info">
<div class="video-info-name">{{ video.name }}</div> <a class="video-info-name" [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name">{{ video.name }}</a>
<span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span> <span class="video-info-date-views">{{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views</span>
</div> </div>

View File

@ -43,7 +43,7 @@
.video { .video {
display: flex; display: flex;
height: 130px; min-height: 130px;
padding-bottom: 20px; padding-bottom: 20px;
input[type=checkbox] { input[type=checkbox] {
@ -68,6 +68,10 @@
flex-grow: 1; flex-grow: 1;
.video-info-name { .video-info-name {
@include disable-default-a-behaviour;
color: #000;
display: block;
font-size: 16px; font-size: 16px;
font-weight: $font-semibold; font-weight: $font-semibold;
} }
@ -76,6 +80,10 @@
font-size: 13px; font-size: 13px;
} }
} }
.video-buttons {
min-width: 190px;
}
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {

View File

@ -4,6 +4,7 @@ import { NotificationsService } from 'angular2-notifications'
import 'rxjs/add/observable/from' import 'rxjs/add/observable/from'
import 'rxjs/add/operator/concatAll' import 'rxjs/add/operator/concatAll'
import { Observable } from 'rxjs/Observable' import { Observable } from 'rxjs/Observable'
import { AuthService } from '../../core/auth'
import { ConfirmService } from '../../core/confirm' import { ConfirmService } from '../../core/confirm'
import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { AbstractVideoList } from '../../shared/video/abstract-video-list'
import { Video } from '../../shared/video/video.model' import { Video } from '../../shared/video/video.model'
@ -21,6 +22,7 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit
constructor (protected router: Router, constructor (protected router: Router,
protected route: ActivatedRoute, protected route: ActivatedRoute,
protected authService: AuthService,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
protected confirmService: ConfirmService, protected confirmService: ConfirmService,
private videoService: VideoService) { private videoService: VideoService) {

View File

@ -12,6 +12,10 @@
<ul *dropdownMenu class="dropdown-menu"> <ul *dropdownMenu class="dropdown-menu">
<li> <li>
<a routerLink="/account/settings" class="dropdown-item" title="My account">
My account
</a>
<a (click)="logout($event)" class="dropdown-item" title="Log out" href="#"> <a (click)="logout($event)" class="dropdown-item" title="Log out" href="#">
Log out Log out
</a> </a>

View File

@ -2,6 +2,7 @@ import { OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { NotificationsService } from 'angular2-notifications' import { NotificationsService } from 'angular2-notifications'
import { Observable } from 'rxjs/Observable' import { Observable } from 'rxjs/Observable'
import { AuthService } from '../../core/auth'
import { SortField } from './sort-field.type' import { SortField } from './sort-field.type'
import { VideoPagination } from './video-pagination.model' import { VideoPagination } from './video-pagination.model'
import { Video } from './video.model' import { Video } from './video.model'
@ -17,9 +18,10 @@ export abstract class AbstractVideoList implements OnInit {
videos: Video[] = [] videos: Video[] = []
loadOnInit = true loadOnInit = true
protected notificationsService: NotificationsService protected abstract notificationsService: NotificationsService
protected router: Router protected abstract authService: AuthService
protected route: ActivatedRoute protected abstract router: Router
protected abstract route: ActivatedRoute
protected abstract currentRoute: string protected abstract currentRoute: string
@ -28,6 +30,10 @@ export abstract class AbstractVideoList implements OnInit {
abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}> abstract getVideosObservable (): Observable<{ videos: Video[], totalVideos: number}>
get user () {
return this.authService.getUser()
}
ngOnInit () { ngOnInit () {
// Subscribe to route changes // Subscribe to route changes
const routeParams = this.route.snapshot.params const routeParams = this.route.snapshot.params

View File

@ -43,12 +43,15 @@
align-items: center; align-items: center;
.video-info-name { .video-info-name {
margin-right: 30px;
font-size: 27px; font-size: 27px;
font-weight: $font-semibold; font-weight: $font-semibold;
flex-grow: 1; flex-grow: 1;
} }
.video-info-actions { .video-info-actions {
min-width: 215px;
.action-button { .action-button {
@include peertube-button; @include peertube-button;
@include grey-button; @include grey-button;
@ -219,16 +222,12 @@
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1200px) {
.other-videos { .other-videos {
display: none; display: none;
} }
}
@media screen and (max-width: 800px) {
.video-bottom { .video-bottom {
margin: 20px 0 0 0;
.video-info { .video-info {
margin-right: 0; margin-right: 0;
@ -250,3 +249,9 @@
} }
} }
} }
@media screen and (max-width: 800px) {
.video-bottom {
margin: 20px 0 0 0;
}
}

View File

@ -60,6 +60,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
private markdownService: MarkdownService private markdownService: MarkdownService
) {} ) {}
get user () {
return this.authService.getUser()
}
ngOnInit () { ngOnInit () {
this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt') this.videoService.getVideos({ currentPage: 1, itemsPerPage: 5 }, '-createdAt')
.subscribe( .subscribe(
@ -204,7 +208,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
} }
isVideoBlacklistable () { isVideoBlacklistable () {
return this.video.isBlackistableBy(this.authService.getUser()) return this.video.isBlackistableBy(this.user)
} }
getAvatarPath () { getAvatarPath () {
@ -264,7 +268,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
this.video = video this.video = video
let observable let observable
if (this.video.isVideoNSFWForUser(this.authService.getUser())) { if (this.video.isVideoNSFWForUser(this.user)) {
observable = this.confirmService.confirm( observable = this.confirmService.confirm(
'This video contains mature or explicit content. Are you sure you want to watch it?', 'This video contains mature or explicit content. Are you sure you want to watch it?',
'Mature or explicit content' 'Mature or explicit content'

View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core' import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { NotificationsService } from 'angular2-notifications' import { NotificationsService } from 'angular2-notifications'
import { AuthService } from '../../core/auth'
import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { AbstractVideoList } from '../../shared/video/abstract-video-list'
import { SortField } from '../../shared/video/sort-field.type' import { SortField } from '../../shared/video/sort-field.type'
import { VideoService } from '../../shared/video/video.service' import { VideoService } from '../../shared/video/video.service'
@ -18,6 +19,7 @@ export class VideoRecentlyAddedComponent extends AbstractVideoList implements On
constructor (protected router: Router, constructor (protected router: Router,
protected route: ActivatedRoute, protected route: ActivatedRoute,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
protected authService: AuthService,
private videoService: VideoService) { private videoService: VideoService) {
super() super()
} }

View File

@ -2,6 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { NotificationsService } from 'angular2-notifications' import { NotificationsService } from 'angular2-notifications'
import { Subscription } from 'rxjs/Subscription' import { Subscription } from 'rxjs/Subscription'
import { AuthService } from '../../core/auth'
import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { AbstractVideoList } from '../../shared/video/abstract-video-list'
import { VideoService } from '../../shared/video/video.service' import { VideoService } from '../../shared/video/video.service'
@ -21,6 +22,7 @@ export class VideoSearchComponent extends AbstractVideoList implements OnInit, O
constructor (protected router: Router, constructor (protected router: Router,
protected route: ActivatedRoute, protected route: ActivatedRoute,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
protected authService: AuthService,
private videoService: VideoService) { private videoService: VideoService) {
super() super()
} }

View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core' import { Component, OnInit } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router' import { ActivatedRoute, Router } from '@angular/router'
import { NotificationsService } from 'angular2-notifications' import { NotificationsService } from 'angular2-notifications'
import { AuthService } from '../../core/auth'
import { AbstractVideoList } from '../../shared/video/abstract-video-list' import { AbstractVideoList } from '../../shared/video/abstract-video-list'
import { SortField } from '../../shared/video/sort-field.type' import { SortField } from '../../shared/video/sort-field.type'
import { VideoService } from '../../shared/video/video.service' import { VideoService } from '../../shared/video/video.service'
@ -18,6 +19,7 @@ export class VideoTrendingComponent extends AbstractVideoList implements OnInit
constructor (protected router: Router, constructor (protected router: Router,
protected route: ActivatedRoute, protected route: ActivatedRoute,
protected notificationsService: NotificationsService, protected notificationsService: NotificationsService,
protected authService: AuthService,
private videoService: VideoService) { private videoService: VideoService) {
super() super()
} }

View File

@ -322,6 +322,7 @@ $control-bar-height: 34px;
border-left-color: #ffffff; border-left-color: #ffffff;
transform: translateZ(0); transform: translateZ(0);
animation: spinner 1.4s infinite linear; animation: spinner 1.4s infinite linear;
overflow: hidden;
&:before { &:before {
animation: none !important; animation: none !important;