diff options
author | Chocobozzz <florian.bigard@gmail.com> | 2017-04-21 16:40:45 +0200 |
---|---|---|
committer | Chocobozzz <florian.bigard@gmail.com> | 2017-04-26 21:23:19 +0200 |
commit | 09223546a4d882a9dbfdbd95d551e48af7bee123 (patch) | |
tree | 9ee8159046068725662b42955b599b4b7734e385 /client/src/app/videos/video-watch/video-watch.component.html | |
parent | 383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (diff) | |
download | PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.gz PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.zst PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.zip |
Client Better design for video watch
Diffstat (limited to 'client/src/app/videos/video-watch/video-watch.component.html')
-rw-r--r-- | client/src/app/videos/video-watch/video-watch.component.html | 153 |
1 files changed, 81 insertions, 72 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html index ed26b513e..989de0de4 100644 --- a/client/src/app/videos/video-watch/video-watch.component.html +++ b/client/src/app/videos/video-watch/video-watch.component.html | |||
@@ -31,52 +31,36 @@ | |||
31 | </div> | 31 | </div> |
32 | 32 | ||
33 | <div *ngIf="video !== null" id="video-info"> | 33 | <div *ngIf="video !== null" id="video-info"> |
34 | <div class="row" id="video-name-actions"> | 34 | <div class="row video-name-views"> |
35 | <div class="col-md-6"> | 35 | <div id="video-name" class="col-md-8"> |
36 | <div class="row"> | 36 | {{ video.name }} |
37 | <div id="video-name" class="col-md-12"> | 37 | </div> |
38 | {{ video.name }} | ||
39 | </div> | ||
40 | </div> | ||
41 | 38 | ||
42 | <div class="row"> | 39 | <div class="col-md-4 pull-right video-views"> |
43 | <div class="col-md-12" id="video-by-date"> | 40 | {{ video.views}} views |
44 | <span id="video-by"> | ||
45 | from | ||
46 | <a [routerLink]="['/videos/list', { field: 'author', search: video.author }]" class="video-miniature-author"> | ||
47 | {{ video.by }} | ||
48 | </a> | ||
49 | </span> | ||
50 | <span id="video-date">on {{ video.createdAt | date:'short' }}</span> | ||
51 | </div> | ||
52 | </div> | ||
53 | </div> | 41 | </div> |
42 | </div> | ||
54 | 43 | ||
55 | <div id="video-actions" class="col-md-6 text-right"> | 44 | <div class="row video-small-blocks"> |
56 | <div id="rates"> | 45 | <div class="col-md-3 video-small-block video-small-block-author"> |
57 | <button | 46 | <a title="Access to all videos of this user" [routerLink]="['/videos/list', { field: 'author', search: video.author }]"> |
58 | id="likes" class="btn btn-default" | 47 | {{ video.by }} |
59 | [ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'like' }" (click)="setLike()" | 48 | </a> |
60 | > | 49 | </div> |
61 | <span class="glyphicon glyphicon-thumbs-up"></span> {{ video.likes }} | ||
62 | </button> | ||
63 | |||
64 | <button | ||
65 | id="dislikes" class="btn btn-default" | ||
66 | [ngClass]="{ 'not-interactive-btn': !isUserLoggedIn(), 'activated-btn': userRating === 'dislike' }" (click)="setDislike()" | ||
67 | > | ||
68 | <span class=" glyphicon glyphicon-thumbs-down"></span> {{ video.dislikes }} | ||
69 | </button> | ||
70 | </div> | ||
71 | 50 | ||
72 | <button id="share" class="btn btn-default" (click)="showShareModal()"> | 51 | <div class="col-md-3 video-small-block video-small-block-share"> |
73 | <span class="glyphicon glyphicon-share"></span> Share | 52 | <a class="option" (click)="showShareModal()" title="Share the video"> |
74 | </button> | 53 | <span class="glyphicon glyphicon-share"></span> |
54 | <span class="video-small-block-text">Share</span> | ||
55 | </a> | ||
56 | </div> | ||
75 | 57 | ||
76 | <div class="btn-group" dropdown> | 58 | <div class="col-md-3 video-small-block video-small-block-more"> |
77 | <button id="single-button" type="button" id="more" class="btn btn-default" dropdownToggle> | 59 | <div class="video-small-block-dropdown" dropdown dropup="true" placement="right"> |
78 | <span class="glyphicon glyphicon-option-horizontal"></span> More | 60 | <a class="option" title="Access to more options" dropdownToggle> |
79 | </button> | 61 | <span class="glyphicon glyphicon-option-horizontal"></span> |
62 | <span class="video-small-block-text">More</span> | ||
63 | </a> | ||
80 | 64 | ||
81 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> | 65 | <ul *dropdownMenu class="dropdown-menu" id="more-menu" role="menu" aria-labelledby="single-button"> |
82 | <li *ngIf="canUserUpdateVideo()" role="menuitem"> | 66 | <li *ngIf="canUserUpdateVideo()" role="menuitem"> |
@@ -87,7 +71,7 @@ | |||
87 | 71 | ||
88 | <li role="menuitem"> | 72 | <li role="menuitem"> |
89 | <a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)"> | 73 | <a class="dropdown-item" title="Get magnet URI" href="#" (click)="showMagnetUriModal($event)"> |
90 | <span class="glyphicon glyphicon-magnet"></span> Magnet | 74 | <span class="glyphicon glyphicon-magnet"></span> Magnet |
91 | </a> | 75 | </a> |
92 | </li> | 76 | </li> |
93 | 77 | ||
@@ -111,45 +95,70 @@ | |||
111 | </ul> | 95 | </ul> |
112 | </div> | 96 | </div> |
113 | </div> | 97 | </div> |
114 | </div> | ||
115 | 98 | ||
116 | <div id="video-tags-views" class="row"> | 99 | <div class="col-md-3 video-small-block video-small-block-rating"> |
117 | <div class="col-md-8"> | 100 | <div class="video-small-block-like"> |
118 | <a *ngFor="let tag of video.tags" [routerLink]="['/videos/list', { field: 'tags', search: tag }]" class="label label-primary"> | 101 | <span |
119 | {{ tag }} | 102 | class="glyphicon glyphicon-thumbs-up" title="Like this video" |
120 | </a> | 103 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'like' }" (click)="setLike()" |
121 | </div> | 104 | ></span> |
122 | 105 | ||
123 | <div id="video-views" class="col-md-4 text-right"> | 106 | <span class="video-small-block-text"> |
124 | {{ video.views }} views | 107 | {{ video.likes }} |
125 | </div> | 108 | </span> |
126 | </div> | 109 | </div> |
127 | 110 | ||
128 | <div id="video-category" class="row"> | 111 | <div class="video-small-block-dislike"> |
129 | <div class="col-md-12"> | 112 | <span |
130 | <span id="category-label">Category:</span> | 113 | class="glyphicon glyphicon-thumbs-down" title="Dislike this video" |
131 | {{ video.categoryLabel }} | 114 | [ngClass]="{ 'interactive': isUserLoggedIn(), 'activated': userRating === 'dislike' }" (click)="setDislike()" |
132 | </div> | 115 | ></span> |
133 | </div> | ||
134 | 116 | ||
135 | <div id="video-licence" class="row"> | 117 | <span class="video-small-block-text"> |
136 | <div class="col-md-12"> | 118 | {{ video.dislikes }} |
137 | <span id="licence-label">Licence:</span> | 119 | </span> |
138 | {{ video.licenceLabel }} | 120 | </div> |
139 | </div> | 121 | </div> |
140 | </div> | 122 | </div> |
141 | 123 | ||
142 | <div id="video-language" class="row"> | 124 | <div class="row video-details"> |
143 | <div class="col-md-12"> | 125 | <div class="video-details-date-description col-md-9"> |
144 | <span id="language-label">Language:</span> | 126 | <div class="video-details-date"> |
145 | {{ video.languageLabel }} | 127 | Published on {{ video.createdAt | date:'short' }} |
128 | </div> | ||
129 | |||
130 | <div class="video-details-description"> | ||
131 | {{ video.description }} | ||
132 | </div> | ||
146 | </div> | 133 | </div> |
147 | </div> | ||
148 | 134 | ||
149 | <div id="video-description" class="row"> | 135 | <div class="video-details-attributes col-md-3"> |
150 | <div class="col-md-12"> | 136 | <div class="video-details-attribute"> |
151 | <div id="description-label">Description</div> | 137 | <span class="video-details-attribute-label"> |
152 | {{ video.description }} | 138 | Category: |
139 | </span> | ||
140 | <span class="video-details-attribute-value"> | ||
141 | {{ video.categoryLabel }} | ||
142 | </span> | ||
143 | </div> | ||
144 | |||
145 | <div class="video-details-attribute"> | ||
146 | <span class="video-details-attribute-label"> | ||
147 | Licence: | ||
148 | </span> | ||
149 | <span class="video-details-attribute-value"> | ||
150 | {{ video.licenceLabel }} | ||
151 | </span> | ||
152 | </div> | ||
153 | |||
154 | <div class="video-details-attribute"> | ||
155 | <span class="video-details-attribute-label"> | ||
156 | Language: | ||
157 | </span> | ||
158 | <span class="video-details-attribute-value"> | ||
159 | {{ video.languageLabel }} | ||
160 | </span> | ||
161 | </div> | ||
153 | </div> | 162 | </div> |
154 | </div> | 163 | </div> |
155 | </div> | 164 | </div> |