Improve accessibility
This commit is contained in:
Chocobozzz
parent
5ccf98a4ec
commit
dc9c9500bf
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="results-filter collapse-transition" [ngbCollapse]="isSearchFilterCollapsed">
|
||||
<div class="results-filter" [ngbCollapse]="isSearchFilterCollapsed" [animation]="true">
|
||||
<my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>
|
||||
|
||||
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
<div class="root-header">
|
||||
|
||||
<div class="top-left-block">
|
||||
<span class="icon icon-menu" role="button" [title]="getToggleTitle()" (click)="menu.toggleMenu()"></span>
|
||||
<span role="button" tabindex="0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()">
|
||||
<span class="icon icon-menu"></span>
|
||||
</span>
|
||||
|
||||
<a class="peertube-title c-hand" (click)="goToDefaultRoute()">
|
||||
<a class="peertube-title c-hand" [routerLink]="getDefaultRoute()">
|
||||
<span class="icon icon-logo"></span>
|
||||
<span class="instance-name">{{ instanceName }}</span>
|
||||
</a>
|
||||
|
|
@ -22,7 +24,7 @@
|
|||
<div class="sub-header-container">
|
||||
<my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
|
||||
|
||||
<div id="content" tabindex="-1" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
|
||||
<div id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">
|
||||
|
||||
<div class="main-row">
|
||||
|
||||
|
|
|
|||
|
|
@ -83,10 +83,6 @@ export class AppComponent implements OnInit, AfterViewInit {
|
|||
return this.serverConfig.instance.name
|
||||
}
|
||||
|
||||
goToDefaultRoute () {
|
||||
return this.router.navigateByUrl(this.redirectService.getDefaultRoute())
|
||||
}
|
||||
|
||||
ngOnInit () {
|
||||
document.getElementById('incompatible-browser').className += ' browser-ok'
|
||||
|
||||
|
|
@ -135,6 +131,10 @@ export class AppComponent implements OnInit, AfterViewInit {
|
|||
this.pluginService.initializeCustomModal(this.customModal)
|
||||
}
|
||||
|
||||
getDefaultRoute () {
|
||||
return this.redirectService.getDefaultRoute()
|
||||
}
|
||||
|
||||
getToggleTitle () {
|
||||
if (this.menu.isDisplayed()) return $localize`Close the left menu`
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
|
||||
[container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
|
||||
>
|
||||
<div ngbDropdownToggle>
|
||||
<button class="border-0 text-start" ngbDropdownToggle>
|
||||
<my-actor-avatar [actor]="user.account" actorType="account" size="34"></my-actor-avatar>
|
||||
|
||||
<div class="logged-in-info">
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="dropdown-toggle-indicator">
|
||||
<span class="chevron-down"></span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div ngbDropdownMenu>
|
||||
<a
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<a
|
||||
<button
|
||||
myPluginSelector pluginSelectorId="menu-user-dropdown-language-item"
|
||||
ngbDropdownItem ngbDropdownToggle class="dropdown-item" (click)="openLanguageChooser()"
|
||||
>
|
||||
<my-global-icon iconName="language" aria-hidden="true"></my-global-icon>
|
||||
<span i18n>Interface:</span>
|
||||
<span class="ms-auto muted">{{ currentInterfaceLanguage }}</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<a ngbDropdownItem ngbDropdownToggle class="dropdown-item" routerLink="/my-account/settings" fragment="video-languages-subtitles"
|
||||
#settingsLanguagesSubtitles (click)="onActiveLinkScrollToAnchor(settingsLanguagesSubtitles)">
|
||||
|
|
@ -57,12 +57,12 @@
|
|||
<span class="ms-auto muted">{{ nsfwPolicy }}</span>
|
||||
</a>
|
||||
|
||||
<a ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
|
||||
<button ngbDropdownItem class="dropdown-item" (click)="toggleUseP2P()">
|
||||
<my-global-icon iconName="p2p" aria-hidden="true"></my-global-icon>
|
||||
<ng-container i18n>Help share videos</ng-container>
|
||||
|
||||
<my-input-switch class="ms-auto" [checked]="user.p2pEnabled"></my-input-switch>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
|
|
@ -100,9 +100,9 @@
|
|||
</div>
|
||||
|
||||
<div *ngIf="!isLoggedIn" class="login-buttons-block">
|
||||
<my-login-link className="peertube-button-link orange-button w-100"></my-login-link>
|
||||
<my-login-link className="peertube-button-link orange-button w-100 text-truncate"></my-login-link>
|
||||
|
||||
<a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button">
|
||||
<a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link create-account-button text-truncate">
|
||||
<my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -252,8 +252,6 @@ my-actor-avatar {
|
|||
|
||||
> a,
|
||||
> my-login-link {
|
||||
@include ellipsis;
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,15 +3,16 @@
|
|||
<div *ngIf="unreadNotifications >= 100" class="unread-notifications">99+</div>
|
||||
</ng-template>
|
||||
|
||||
<div
|
||||
<button
|
||||
[ngbPopover]="popContent" autoClose="outside" placement="bottom" container={this} popoverClass="popover-notifications"
|
||||
i18n-title title="View your notifications" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
|
||||
i18n-title title="View your notifications"
|
||||
class="border-0 text-start" [ngClass]="{ 'notification-inbox-popover': true, 'shown': opened, 'hidden': isInMobileView }"
|
||||
#popover="ngbPopover" (shown)="onPopoverShown()" (hidden)="onPopoverHidden()"
|
||||
>
|
||||
<ng-container *ngTemplateOutlet="notificationNumber"></ng-container>
|
||||
|
||||
<my-global-icon iconName="bell"></my-global-icon>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div *ngIf="isInMobileView" i18n-title title="View your notifications" class="notification-inbox-link">
|
||||
<ng-container *ngTemplateOutlet="notificationNumber"></ng-container>
|
||||
|
|
|
|||
|
|
@ -25,15 +25,11 @@
|
|||
</ng-template>
|
||||
</ng-container>
|
||||
|
||||
<my-global-icon
|
||||
*ngIf="!isMaximized" role="button" [ngbTooltip]="maximizeInText"
|
||||
class="maximize-button" iconName="fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
|
||||
></my-global-icon>
|
||||
<button (click)="onMaximizeClick()" class="maximize-button border-0 m-3" [disabled]="disabled">
|
||||
<my-global-icon *ngIf="!isMaximized" [ngbTooltip]="maximizeInText" iconName="fullscreen"></my-global-icon>
|
||||
|
||||
<my-global-icon
|
||||
*ngIf="isMaximized" role="button" [ngbTooltip]="maximizeOutText"
|
||||
class="maximize-button" iconName="exit-fullscreen" (click)="onMaximizeClick()" [ngClass]="{ disabled: disabled }"
|
||||
></my-global-icon>
|
||||
<my-global-icon *ngIf="isMaximized" [ngbTooltip]="maximizeOutText" iconName="exit-fullscreen"></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div [ngbNavOutlet]="nav"></div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ $input-border-radius: 3px;
|
|||
}
|
||||
|
||||
.nav-preview {
|
||||
padding: 10px;
|
||||
padding: 10px 0;
|
||||
|
||||
border: 1px solid pvar(--inputBorderColor);
|
||||
border-top: 1px dashed pvar(--inputBorderColor);
|
||||
|
|
@ -38,14 +38,9 @@ $input-border-radius: 3px;
|
|||
border-bottom: 2px solid pvar(--mainColor);
|
||||
|
||||
.maximize-button {
|
||||
@include margin-left(15px);
|
||||
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
|
||||
&:not(.disabled) {
|
||||
cursor: pointer;
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover,
|
||||
&:active {
|
||||
opacity: 1;
|
||||
|
|
@ -105,10 +100,6 @@ $input-border-radius: 3px;
|
|||
|
||||
padding: 20px 0;
|
||||
width: 100% !important;
|
||||
|
||||
.maximize-button {
|
||||
@include margin-right(15px);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<h2 *ngIf="displayInstanceName" class="instance-name">{{ about?.instance.name }}</h2>
|
||||
|
||||
<div *ngIf="displayInstanceShortDescription" class="instance-short-description">{{ about?.instance.shortDescription }}</div>
|
||||
<div *ngIf="displayInstanceShortDescription" class="instance-short-description ellipsis-multiline-3">{{ about?.instance.shortDescription }}</div>
|
||||
|
||||
<ngb-accordion #accordion="ngbAccordion" [closeOthers]="true">
|
||||
<ngb-panel *ngIf="panels.features" id="instance-features">
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
}
|
||||
|
||||
.instance-short-description {
|
||||
@include ellipsis-multiline(1rem, 3, inherit);
|
||||
|
||||
font-size: 1rem;
|
||||
margin: 25px 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.no-class {
|
||||
.inherit-parent {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
position: inherit;
|
||||
|
|
|
|||
|
|
@ -14,14 +14,17 @@ export class LinkComponent implements OnInit {
|
|||
@Input() title?: string
|
||||
|
||||
@Input() className?: string
|
||||
@Input() inheritParentCSS = false
|
||||
|
||||
@Input() tabindex: string | number
|
||||
|
||||
builtClasses: string
|
||||
|
||||
ngOnInit () {
|
||||
this.builtClasses = this.className
|
||||
? this.className
|
||||
: 'no-class'
|
||||
this.builtClasses = this.className || ''
|
||||
|
||||
if (!this.builtClasses || this.inheritParentCSS) {
|
||||
this.builtClasses += ' inherit-parent'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="feed" *ngIf="syndicationItems && syndicationItems.length !== 0">
|
||||
<button class="feed border-0 p-0" *ngIf="syndicationItems && syndicationItems.length !== 0">
|
||||
<my-global-icon
|
||||
role="button" aria-label="Open syndication dropdown" i18n-aria-label
|
||||
*ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
|
||||
|
|
@ -9,4 +9,4 @@
|
|||
<ng-template #feedsList>
|
||||
<a *ngFor="let item of syndicationItems" [href]="item.url" target="_blank" rel="noopener noreferrer">{{ item.label }}</a>
|
||||
</ng-template>
|
||||
</div>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -3,15 +3,19 @@
|
|||
|
||||
.feed {
|
||||
width: 100%;
|
||||
color: inherit;
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
color: pvar(--mainForegroundColor);
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
my-global-icon {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,9 @@
|
|||
</p>
|
||||
</ng-template>
|
||||
|
||||
<span
|
||||
role="button"
|
||||
class="help-tooltip-button"
|
||||
<button
|
||||
class="help-tooltip-button p-0 border-0 mx-1"
|
||||
[title]="title"
|
||||
tabindex=0
|
||||
popoverClass="help-popover"
|
||||
[attr.aria-pressed]="isPopoverOpened"
|
||||
[ngbPopover]="tooltipTemplate"
|
||||
|
|
@ -36,4 +34,4 @@
|
|||
(onShown)="onPopoverShown()"
|
||||
>
|
||||
<my-global-icon [iconName]="iconName"></my-global-icon>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
.help-tooltip-button {
|
||||
@include disable-outline;
|
||||
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
margin: 5px;
|
||||
|
||||
my-global-icon {
|
||||
@include apply-svg-color(pvar(--greyForegroundColor));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,10 @@
|
|||
<ng-template #modal let-hide="close">
|
||||
<div class="modal-header">
|
||||
<h4 i18n class="modal-title">Share</h4>
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
|
||||
|
||||
<button class="border-0 p-0" (click)="hide()">
|
||||
<my-global-icon iconName="cross" aria-label="Close" role="button" ></my-global-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -150,89 +153,85 @@
|
|||
<div [ngbNavOutlet]="nav"></div>
|
||||
|
||||
<div class="filters">
|
||||
<div>
|
||||
<div class="form-group start-at" *ngIf="!video.isLive">
|
||||
<div class="form-group start-at" *ngIf="!video.isLive">
|
||||
<my-peertube-checkbox
|
||||
inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
|
||||
i18n-labelText labelText="Start at"
|
||||
></my-peertube-checkbox>
|
||||
|
||||
<my-timestamp-input
|
||||
[timestamp]="customizations.startAt"
|
||||
[maxTimestamp]="video.duration"
|
||||
[disabled]="!customizations.startAtCheckbox"
|
||||
[(ngModel)]="customizations.startAt"
|
||||
>
|
||||
</my-timestamp-input>
|
||||
</div>
|
||||
|
||||
<div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
|
||||
<my-peertube-checkbox
|
||||
inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
|
||||
i18n-labelText labelText="Auto select subtitle"
|
||||
></my-peertube-checkbox>
|
||||
|
||||
<div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
|
||||
<select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
|
||||
<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="isInVideoEmbedTab()">
|
||||
<my-peertube-checkbox
|
||||
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
|
||||
i18n-labelText labelText="Only display embed URL"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
|
||||
|
||||
<div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
|
||||
<div class="form-group stop-at" *ngIf="!video.isLive">
|
||||
<my-peertube-checkbox
|
||||
inputName="startAt" [(ngModel)]="customizations.startAtCheckbox"
|
||||
i18n-labelText labelText="Start at"
|
||||
inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
|
||||
i18n-labelText labelText="Stop at"
|
||||
></my-peertube-checkbox>
|
||||
|
||||
<my-timestamp-input
|
||||
[timestamp]="customizations.startAt"
|
||||
[timestamp]="customizations.stopAt"
|
||||
[maxTimestamp]="video.duration"
|
||||
[disabled]="!customizations.startAtCheckbox"
|
||||
[(ngModel)]="customizations.startAt"
|
||||
[disabled]="!customizations.stopAtCheckbox"
|
||||
[(ngModel)]="customizations.stopAt"
|
||||
>
|
||||
</my-timestamp-input>
|
||||
</div>
|
||||
|
||||
<div *ngIf="videoCaptions.length !== 0" class="form-group video-caption-block">
|
||||
<div class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="subtitleCheckbox" [(ngModel)]="customizations.subtitleCheckbox"
|
||||
i18n-labelText labelText="Auto select subtitle"
|
||||
></my-peertube-checkbox>
|
||||
|
||||
<div class="peertube-select-container" [ngClass]="{ disabled: !customizations.subtitleCheckbox }">
|
||||
<select [(ngModel)]="customizations.subtitle" [disabled]="!customizations.subtitleCheckbox" class="form-control">
|
||||
<option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="isInVideoEmbedTab()">
|
||||
<my-peertube-checkbox
|
||||
inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
|
||||
i18n-labelText labelText="Only display embed URL"
|
||||
inputName="autoplay" [(ngModel)]="customizations.autoplay"
|
||||
i18n-labelText labelText="Autoplay"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<my-plugin-placeholder pluginId="share-modal-video-settings"></my-plugin-placeholder>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="muted" [(ngModel)]="customizations.muted"
|
||||
i18n-labelText labelText="Muted"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
|
||||
<div>
|
||||
<div class="form-group stop-at" *ngIf="!video.isLive">
|
||||
<my-peertube-checkbox
|
||||
inputName="stopAt" [(ngModel)]="customizations.stopAtCheckbox"
|
||||
i18n-labelText labelText="Stop at"
|
||||
></my-peertube-checkbox>
|
||||
<div class="form-group" *ngIf="!video.isLive">
|
||||
<my-peertube-checkbox
|
||||
inputName="loop" [(ngModel)]="customizations.loop"
|
||||
i18n-labelText labelText="Loop"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<my-timestamp-input
|
||||
[timestamp]="customizations.stopAt"
|
||||
[maxTimestamp]="video.duration"
|
||||
[disabled]="!customizations.stopAtCheckbox"
|
||||
[(ngModel)]="customizations.stopAt"
|
||||
>
|
||||
</my-timestamp-input>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="autoplay" [(ngModel)]="customizations.autoplay"
|
||||
i18n-labelText labelText="Autoplay"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="muted" [(ngModel)]="customizations.muted"
|
||||
i18n-labelText labelText="Muted"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="!video.isLive">
|
||||
<my-peertube-checkbox
|
||||
inputName="loop" [(ngModel)]="customizations.loop"
|
||||
i18n-labelText labelText="Loop"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="originUrl" [(ngModel)]="customizations.originUrl"
|
||||
i18n-labelText labelText="Use origin instance URL"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
<div *ngIf="!isLocalVideo() && !isInVideoEmbedTab()" class="form-group">
|
||||
<my-peertube-checkbox
|
||||
inputName="originUrl" [(ngModel)]="customizations.originUrl"
|
||||
i18n-labelText labelText="Use origin instance URL"
|
||||
></my-peertube-checkbox>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="isInVideoEmbedTab()">
|
||||
|
|
@ -280,9 +279,11 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
|
||||
<div (click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed" role="button" class="advanced-filters-button"
|
||||
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic">
|
||||
|
||||
<button
|
||||
class="border-0 p-0 mt-4 mx-auto fw-semibold d-block"
|
||||
(click)="isAdvancedCustomizationCollapsed = !isAdvancedCustomizationCollapsed"
|
||||
[attr.aria-expanded]="!isAdvancedCustomizationCollapsed" aria-controls="collapseBasic"
|
||||
>
|
||||
<ng-container *ngIf="isAdvancedCustomizationCollapsed">
|
||||
<span class="chevron-down"></span>
|
||||
|
||||
|
|
@ -298,7 +299,7 @@
|
|||
Less customization
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,12 +42,7 @@ my-input-text {
|
|||
}
|
||||
|
||||
.advanced-filters-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-weight: $font-semibold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.video-caption-block {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail">
|
||||
<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail" tabindex="-1">
|
||||
<ng-container *ngTemplateOutlet="aContent"></ng-container>
|
||||
</a>
|
||||
|
||||
<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail">
|
||||
<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail" tabindex="-1">
|
||||
<ng-container *ngTemplateOutlet="aContent"></ng-container>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
<div [ngbNavOutlet]="resolutionNav"></div>
|
||||
|
||||
<div class="advanced-filters collapse-transition" [ngbCollapse]="isAdvancedCustomizationCollapsed">
|
||||
<div class="advanced-filters" [ngbCollapse]="isAdvancedCustomizationCollapsed" [animation]="true">
|
||||
<div ngbNav #navMetadata="ngbNav" class="nav-tabs nav-metadata">
|
||||
<ng-container ngbNavItem>
|
||||
<a ngbNavLink i18n>Format</a>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
|
||||
<div class="first-row">
|
||||
<div class="active-filters">
|
||||
<div
|
||||
class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed" role="button"
|
||||
<button
|
||||
class="pastille filters-toggle" (click)="areFiltersCollapsed = !areFiltersCollapsed"
|
||||
[attr.aria-expanded]="!areFiltersCollapsed" aria-controls="collapseBasic"
|
||||
[ngClass]="{ active: !areFiltersCollapsed }"
|
||||
>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<ng-container i18n *ngIf="!areFiltersCollapsed">Hide filters</ng-container>
|
||||
|
||||
<my-global-icon iconName="chevrons-up"></my-global-icon>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
*ngFor="let activeFilter of filters.getActiveFilters()" (click)="resetFilter(activeFilter.key, activeFilter.canRemove)"
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="collapse-transition" [ngbCollapse]="areFiltersCollapsed">
|
||||
<div [ngbCollapse]="areFiltersCollapsed" [animation]="true">
|
||||
<div class="filters">
|
||||
<div class="form-group">
|
||||
<label class="with-description" for="languageOneOf" i18n>Languages:</label>
|
||||
|
|
|
|||
|
|
@ -50,6 +50,10 @@
|
|||
padding: 4px 15px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline: pvar(--mainColor) auto 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.filters-toggle {
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
|
||||
<div class="w-100 d-flex flex-column">
|
||||
<my-link
|
||||
[internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget"
|
||||
[title]="video.name"class="video-miniature-name" [ngClass]="{ 'blur-filter': isVideoBlur }" tabindex="-1"
|
||||
[internalLink]="videoRouterLink" [href]="videoHref" [target]="videoTarget" [inheritParentCSS]="true"
|
||||
[title]="video.name" class="video-miniature-name" className="ellipsis-multiline-2" [ngClass]="{ 'blur-filter': isVideoBlur }"
|
||||
>
|
||||
{{ video.name }}
|
||||
</my-link>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</span>
|
||||
</span>
|
||||
|
||||
<a tabindex="-1" *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
|
||||
<a *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
|
||||
<ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container>
|
||||
<ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ my-actor-avatar {
|
|||
}
|
||||
|
||||
.video-miniature-name {
|
||||
@include ellipsis-multiline($video-miniature-row-name-font-size, 2);
|
||||
font-size: $video-miniature-row-name-font-size;
|
||||
}
|
||||
|
||||
.video-miniature-created-at-views,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="miniature" [ngClass]="{ 'no-videos': playlist.videosLength === 0, 'to-manage': toManage, 'display-as-row': displayAsRow }">
|
||||
<my-link
|
||||
[internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
|
||||
[internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
|
||||
[title]="playlist.description" class="miniature-thumbnail"
|
||||
>
|
||||
<img alt="" [attr.aria-labelledby]="playlist.displayName" [attr.src]="playlist.thumbnailUrl" />
|
||||
|
|
@ -16,8 +16,8 @@
|
|||
|
||||
<div class="miniature-info">
|
||||
<my-link
|
||||
[internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget"
|
||||
[title]="playlist.description" class="miniature-name" tabindex="-1"
|
||||
[internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" [inheritParentCSS]="true"
|
||||
[title]="playlist.description" class="miniature-name" className="ellipsis-multiline-2"
|
||||
>
|
||||
{{ playlist.displayName }}
|
||||
</my-link>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
display: flex;
|
||||
|
||||
.miniature-name {
|
||||
@include ellipsis-multiline($video-miniature-row-name-font-size, 2);
|
||||
font-size: $video-miniature-row-name-font-size;
|
||||
}
|
||||
|
||||
.miniature-thumbnail {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/nav';
|
||||
|
|
@ -203,7 +204,6 @@ body {
|
|||
display: flex !important;
|
||||
align-items: center;
|
||||
height: 30px !important;
|
||||
padding: 10px 15px !important;
|
||||
}
|
||||
|
||||
.nav.nav-pills {
|
||||
|
|
@ -260,19 +260,6 @@ body {
|
|||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.collapse-transition {
|
||||
// Animation when we show/hide the filters
|
||||
transition: max-height 0.3s;
|
||||
display: block !important;
|
||||
overflow: hidden !important;
|
||||
max-height: 0;
|
||||
|
||||
&.show {
|
||||
max-height: 1500px;
|
||||
overflow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
font-size: 18px;
|
||||
|
||||
|
|
@ -389,3 +376,8 @@ body {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-truncate {
|
||||
// Prevent invalid height in parent: https://stackoverflow.com/a/22425601
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,30 +3,6 @@
|
|||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.link-orange {
|
||||
color: pvar(--mainForegroundColor);
|
||||
font-weight: $font-semibold;
|
||||
border-bottom: 0.18em solid pvar(--mainColor);
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.underline-orange {
|
||||
display: inline-block;
|
||||
border-bottom: 0.19em solid pvar(--mainColor);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.muted {
|
||||
@include muted;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.pt-badge {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
@use '_badges' as *;
|
||||
@use '_icons' as *;
|
||||
@use '_variables' as *;
|
||||
@use '_mixins' as *;
|
||||
|
||||
.link-orange {
|
||||
color: pvar(--mainForegroundColor);
|
||||
font-weight: $font-semibold;
|
||||
border-bottom: 0.18em solid pvar(--mainColor);
|
||||
display: inline-block;
|
||||
line-height: 1.1;
|
||||
|
||||
&:hover {
|
||||
color: pvar(--mainForegroundColor);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.underline-orange {
|
||||
display: inline-block;
|
||||
border-bottom: 0.19em solid pvar(--mainColor);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
.muted {
|
||||
@include muted;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
@mixin ellipsis-multiline($number-of-lines) {
|
||||
display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
|
||||
-webkit-line-clamp: $number-of-lines;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ellipsis-multiline-2 {
|
||||
@include ellipsis-multiline(2);
|
||||
}
|
||||
|
||||
.ellipsis-multiline-3 {
|
||||
@include ellipsis-multiline(3);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
|
|
@ -3,3 +3,4 @@
|
|||
@use './_custom-bootstrap-helpers';
|
||||
@use './_forms';
|
||||
@use './_menu';
|
||||
@use './_text';
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ $input-focus-bg: pvar(--inputBackgroundColor);
|
|||
$input-btn-focus-width: 0;
|
||||
$input-btn-focus-color: inherit;
|
||||
$input-focus-border-color: #ced4da;
|
||||
$input-focus-box-shadow: 0 0 0 0.25rem pvar(--mainColorLightest);
|
||||
|
||||
$input-group-addon-color: pvar(--mainForegroundColor);
|
||||
$input-group-addon-bg: pvar(--greyBackgroundColor);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
@mixin miniature-name {
|
||||
@include ellipsis-multiline(1.1em, 2);
|
||||
@include peertube-word-wrap(false);
|
||||
|
||||
font-size: 1.1em;
|
||||
transition: color 0.2s;
|
||||
font-weight: $font-semibold;
|
||||
color: pvar(--mainForegroundColor);
|
||||
|
|
|
|||
|
|
@ -8,13 +8,16 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
&:focus:not(.focus-visible) {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin disable-outline {
|
||||
&:focus:not(.focus-visible) {
|
||||
outline: none;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -24,20 +27,6 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2, $line-height: $font-size) {
|
||||
display: block;
|
||||
/* Fallback for non-webkit */
|
||||
display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
|
||||
-webkit-line-clamp: $number-of-lines;
|
||||
-webkit-box-orient: vertical;
|
||||
/* Fallback for non-webkit */
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: $font-size * $number-of-lines;
|
||||
}
|
||||
|
||||
@mixin muted {
|
||||
color: pvar(--greyForegroundColor) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,8 +40,7 @@ $ng-select-input-text: pvar(--mainForegroundColor);
|
|||
|
||||
&.ng-select-focused {
|
||||
&:not(.ng-select-opened) > .ng-select-container {
|
||||
border-color: #ccc !important;
|
||||
box-shadow: none !important;
|
||||
border-color: $ng-select-border !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue