aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-04-21 16:40:45 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-04-26 21:23:19 +0200
commit09223546a4d882a9dbfdbd95d551e48af7bee123 (patch)
tree9ee8159046068725662b42955b599b4b7734e385 /client/src/app/videos
parent383bfc8356d444cbed1dab7e5c1b3bb16becfdfd (diff)
downloadPeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.gz
PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.tar.zst
PeerTube-09223546a4d882a9dbfdbd95d551e48af7bee123.zip
Client Better design for video watch
Diffstat (limited to 'client/src/app/videos')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.html153
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.scss166
2 files changed, 181 insertions, 138 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>
diff --git a/client/src/app/videos/video-watch/video-watch.component.scss b/client/src/app/videos/video-watch/video-watch.component.scss
index 92192221f..cd9d71fb4 100644
--- a/client/src/app/videos/video-watch/video-watch.component.scss
+++ b/client/src/app/videos/video-watch/video-watch.component.scss
@@ -32,102 +32,136 @@
32} 32}
33 33
34#video-info { 34#video-info {
35 border-top: 1px solid rgba(0, 0, 0, 0.1); 35 .video-name-views {
36 margin-top: 10px; 36 font-weight: bold;
37 padding-top: 5px; 37 font-size: 18px;
38 38 height: $video-watch-title-height;
39 #video-name-actions { 39 line-height: $video-watch-title-height;
40 40 padding: 0 30px;
41 #video-name {
42 font-size: 20px;
43 }
44 41
45 .btn .glyphicon { 42 .video-views {
46 position: relative; 43 text-align: right;
47 top: 2px;
48 } 44 }
45 }
49 46
50 #rates { 47 .video-small-blocks {
51 display: inline-block; 48 height: 150px;
52 margin-right: 20px; 49 color: $video-watch-info-color;
50 border-color: $video-watch-border-color;
51 border-width: 1px 0px;
52 border-style: solid;
53
54 .video-small-block {
55 height: $video-watch-info-height;
56 display: flex;
57 flex-direction: column;
58 justify-content: center;
59 text-align: center;
60
61 a {
62 cursor: pointer;
63 transition: color 0.3s;
64
65 &, &:hover {
66 color: inherit;
67 text-decoration:none;
68 }
53 69
54 // Remove focus style 70 &:hover {
55 .btn:focus { 71 color: #000 !important;
56 outline: 0; 72 }
57 } 73 }
58 74
59 .activated-btn { 75 .option .glyphicon {
60 color: #333; 76 font-size: 22px;
61 background-color: #e6e6e6; 77 color: inherit;
62 border-color: #8c8c8c; 78 opacity: 0.9;
79 margin-bottom: 10px;
63 } 80 }
64 81
65 .not-interactive-btn { 82 .video-small-block-text {
66 cursor: default; 83 font-size: 15px;
67 84 font-weight: bold;
68 &:hover, &:focus, &:active {
69 color: #333;
70 background-color: #fff;
71 border-color: #ccc;
72 box-shadow: none;
73 outline: 0;
74 }
75 } 85 }
76 } 86 }
77 87
78 #share, #more { 88 .video-small-block:not(:last-child) {
79 font-weight: bold; 89 border-width: 0 1px 0 0;
80 opacity: 0.85; 90 border-color: $video-watch-border-color;
91 border-style: solid;
81 } 92 }
82 93
83 #more-menu .dropdown-item .glyphicon { 94 .video-small-block-author {
84 margin-right: 5px; 95 font-size: 15px;
96 font-weight: bold;
85 } 97 }
86 }
87 98
88 #video-by-date { 99 .video-small-block-share, .video-small-block-more {
89 font-size: 13px; 100 a.option {
90 opacity: 0.6; 101 display: block;
91 102
92 a { 103 .glyphicon {
93 color: black; 104 display: block;
105 }
106 }
94 } 107 }
95 108
96 #video-date:before { 109 .video-small-block-more .video-small-block-dropdown {
97 content: '\002022'; 110 position: relative;
98 margin: 0 5px; 111
112 .dropdown-item .glyphicon {
113 margin-right: 5px;
114 }
99 } 115 }
100 }
101 116
102 #video-tags-views { 117 .video-small-block-rating {
103 margin-top: 10px;
104 118
105 a { 119 .video-small-block-like {
106 margin-right: 5px; 120 margin-bottom: 10px;
107 } 121 }
108 122
109 #video-views { 123 .video-small-block-text {
110 font-weight: bold; 124 vertical-align: top;
111 } 125 }
112 }
113 126
114 #video-category { 127 .glyphicon {
115 margin-top: 10px; 128 font-size: 18px;
129 margin: 0 10px 0 0;
130 }
116 131
117 #category-label { 132 .interactive {
118 font-weight: bold; 133 cursor: pointer;
134 transition: color 0.3s;
135
136 &.activated, &:hover {
137 color: #000;
138 }
139 }
119 } 140 }
120 } 141 }
121 142
122 #video-licence #licence-label, #video-language #language-label { 143 .video-details {
123 font-weight: bold; 144 margin-top: 30px;
124 }
125 145
126 #video-description { 146 .video-details-date-description {
127 margin-top: 10px; 147 padding-left: 30px;
128 148
129 #description-label { 149 .video-details-date {
150 font-weight: bold;
151 margin-bottom: 30px;
152 }
153 }
154
155 .video-details-attributes {
130 font-weight: bold; 156 font-weight: bold;
157 font-size: 12px;
158
159 .video-details-attribute-label {
160 color: $video-watch-info-color;
161 display: inline-block;
162 width: 60px;
163 margin-right: 5px;
164 }
131 } 165 }
132 } 166 }
133} 167}