watch view visual tweaks and search/comment placeholder dismiss on focus (#983)
- make the placeholder disappear on focus in the search bar - make the placeholder disappear on focus in the comment textarea - make the texarea resize automagically - refactor the watch view to use bootstrap 4's flexgrid - move action buttons of the watch view to the right of the video info - responsive tweaks and margin adjustments in the watch view
This commit is contained in:
Rigel Kent
GitHub
parent
649fa07756
commit
2d9fea161f
|
|
@ -92,6 +92,7 @@
|
|||
"ngx-clipboard": "11.1.3",
|
||||
"ngx-pipes": "^2.1.7",
|
||||
"ngx-qrcode2": "^0.0.9",
|
||||
"ngx-textarea-autosize": "^2.0.0",
|
||||
"node-sass": "^4.9.3",
|
||||
"npm-font-source-sans-pro": "^1.0.2",
|
||||
"path-browserify": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
#search-video {
|
||||
@include peertube-input-text($search-input-width);
|
||||
padding-left: 10px;
|
||||
margin-right: 15px;
|
||||
padding-right: 40px; // For the search icon
|
||||
|
||||
|
|
@ -10,6 +11,10 @@
|
|||
color: #000;
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
width: calc(100% - 150px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<img [src]="user.accountAvatarUrl" alt="Avatar" />
|
||||
|
||||
<div class="form-group">
|
||||
<textarea i18n-placeholder placeholder="Add comment..." formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
|
||||
<textarea i18n-placeholder placeholder="Add comment..." autosize
|
||||
formControlName="text" [ngClass]="{ 'input-error': formErrors['text'] }"
|
||||
(keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
|
||||
|
||||
</textarea>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,10 @@ form {
|
|||
|
||||
textarea {
|
||||
@include peertube-textarea(100%, 60px);
|
||||
|
||||
&:focus::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,38 +26,30 @@
|
|||
</div>
|
||||
|
||||
<!-- Video information -->
|
||||
<div *ngIf="video" class="margin-content video-bottom">
|
||||
<div class="video-info">
|
||||
<div *ngIf="video" class="container video-bottom">
|
||||
<div class="row fullWidth">
|
||||
<div class="col-12 col-md-9 video-info">
|
||||
<div class="video-info-first-row">
|
||||
<div>
|
||||
<div class="d-block d-sm-none"> <!-- only shown on small devices, has its conterpart for larger viewports below -->
|
||||
<div class="video-info-name">{{ video.name }}</div>
|
||||
|
||||
<div i18n class="video-info-date-views">
|
||||
{{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
|
||||
Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-info-channel">
|
||||
<a [routerLink]="[ '/video-channels', video.channel.name ]" i18n-title title="Go the channel page">
|
||||
{{ video.channel.displayName }}
|
||||
<div class="d-flex justify-content-between align-items-sm-end">
|
||||
<div class="d-none d-sm-block">
|
||||
<div class="video-info-name">{{ video.name }}</div>
|
||||
|
||||
<img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
|
||||
</a>
|
||||
|
||||
<my-subscribe-button [videoChannel]="video.channel" size="small"></my-subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="video-info-by">
|
||||
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
|
||||
<span i18n>By {{ video.byAccount }}</span>
|
||||
<img [src]="video.accountAvatarUrl" alt="Account avatar" />
|
||||
</a>
|
||||
|
||||
<my-help helpType="custom" i18n-customHtml customHtml="You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there."></my-help>
|
||||
<div i18n class="video-info-date-views">
|
||||
Published {{ video.publishedAt | myFromNow }} - {{ video.views | myNumberFormatter }} views
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="video-actions-rates">
|
||||
<div class="video-actions">
|
||||
<div class="video-actions fullWidth justify-content-end">
|
||||
<div
|
||||
*ngIf="isUserLoggedIn()" [ngClass]="{ 'activated': userRating === 'like' }" (click)="setLike()"
|
||||
class="action-button action-button-like" role="button" [attr.aria-pressed]="userRating === 'like'"
|
||||
|
|
@ -117,12 +109,37 @@
|
|||
|
||||
<div
|
||||
class="video-info-likes-dislikes-bar"
|
||||
*ngIf="video.likes !== 0 || video.dislikes !== 0" [ngbTooltip]="likesBarTooltipText">
|
||||
*ngIf="video.likes !== 0 || video.dislikes !== 0"
|
||||
placement="bottom"
|
||||
[ngbTooltip]="likesBarTooltipText">
|
||||
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="pt-3 border-top video-info-channel">
|
||||
<a [routerLink]="[ '/video-channels', video.channel.name ]" i18n-title title="Go the channel page">
|
||||
{{ video.channel.displayName }}
|
||||
|
||||
<img [src]="video.videoChannelAvatarUrl" alt="Video channel avatar" />
|
||||
</a>
|
||||
|
||||
<my-subscribe-button [videoChannel]="video.channel" size="small"></my-subscribe-button>
|
||||
</div>
|
||||
|
||||
<div class="video-info-by">
|
||||
<a [routerLink]="[ '/accounts', video.byAccount ]" i18n-title title="Go to the account page">
|
||||
<span i18n>By {{ video.byAccount }}</span>
|
||||
<img [src]="video.accountAvatarUrl" alt="Account avatar" />
|
||||
</a>
|
||||
|
||||
<my-help helpType="custom" i18n-customHtml customHtml="You can subscribe to this account via any ActivityPub-capable fediverse instance. For instance with Mastodon or Pleroma you can type in the search box <strong>@{{video.account.name}}@{{video.account.host}}</strong> and subscribe there."></my-help>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="video-info-description">
|
||||
<div class="video-info-description-html" [innerHTML]="videoHTMLDescription"></div>
|
||||
|
||||
|
|
@ -183,7 +200,7 @@
|
|||
<my-video-comments [video]="video" [user]="user"></my-video-comments>
|
||||
</div>
|
||||
|
||||
<div class="other-videos">
|
||||
<div class="ml-3 ml-sm-0 col-12 col-md-3 other-videos">
|
||||
<div i18n class="title-page title-page-single">
|
||||
Other videos
|
||||
</div>
|
||||
|
|
@ -193,13 +210,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="privacy-concerns" *ngIf="hasAlreadyAcceptedPrivacyConcern === false">
|
||||
<strong i18n>Friendly Reminder:</strong>
|
||||
<div class="privacy-concerns-text">
|
||||
<strong i18n>Friendly Reminder: </strong>
|
||||
<ng-container i18n>
|
||||
The sharing system used by this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
|
||||
the sharing system used by this video implies that some technical information about your system (such as a public IP address) can be sent to other peers.
|
||||
</ng-container>
|
||||
<a i18n i18n-title title="Get more information" target="_blank" rel="noopener noreferrer" href="/about/peertube">More information</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,12 +76,9 @@
|
|||
|
||||
.video-bottom {
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
.video-info {
|
||||
flex-grow: 1;
|
||||
margin-right: 40px;
|
||||
// Set min width for flex item
|
||||
min-width: 1px;
|
||||
|
||||
|
|
@ -284,10 +281,13 @@
|
|||
}
|
||||
|
||||
.video-info-likes-dislikes-bar {
|
||||
height: 5px;
|
||||
$likes-bar-height: 2px;
|
||||
height: $likes-bar-height;
|
||||
margin-top: -$likes-bar-height;
|
||||
width: 186px;
|
||||
background-color: #E5E5E5;
|
||||
margin-top: 25px;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
|
||||
.likes-bar {
|
||||
height: 100%;
|
||||
|
|
@ -439,19 +439,14 @@
|
|||
@media screen and (max-width: 1600px) {
|
||||
.video-bottom {
|
||||
.video-info {
|
||||
margin-right: 20px;
|
||||
|
||||
.video-info-first-row {
|
||||
flex-direction: column;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.video-actions-rates {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
align-items: start;
|
||||
|
||||
.video-info-likes-dislikes-bar {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { VideoWatchComponent } from './video-watch.component'
|
|||
import { NgxQRCodeModule } from 'ngx-qrcode2'
|
||||
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-blacklist.component'
|
||||
import { TextareaAutosizeModule } from 'ngx-textarea-autosize'
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -23,7 +24,8 @@ import { VideoBlacklistComponent } from '@app/videos/+video-watch/modal/video-bl
|
|||
SharedModule,
|
||||
ClipboardModule,
|
||||
NgbTooltipModule,
|
||||
NgxQRCodeModule
|
||||
NgxQRCodeModule,
|
||||
TextareaAutosizeModule
|
||||
],
|
||||
|
||||
declarations: [
|
||||
|
|
|
|||
|
|
@ -61,6 +61,13 @@ label {
|
|||
border-color: $red !important;
|
||||
}
|
||||
|
||||
.fullWidth {
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.glyphicon-black {
|
||||
color: black;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5127,6 +5127,12 @@ ngx-qrcode2@^0.0.9:
|
|||
dependencies:
|
||||
qrcode "^0.8.2"
|
||||
|
||||
ngx-textarea-autosize@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ngx-textarea-autosize/-/ngx-textarea-autosize-2.0.0.tgz#70d0bf770ebd62b5609c6552233d29c304f92ab8"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
ngx-window-token@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/ngx-window-token/-/ngx-window-token-1.0.0.tgz#12acb174fbbcffa5c60b3fea5a6ea78cc3304793"
|
||||
|
|
|
|||
Loading…
Reference in New Issue