mirror of https://github.com/Chocobozzz/PeerTube
Replace glyphicon chevron
parent
3e3b360c53
commit
c2faa073d1
|
@ -41,7 +41,7 @@
|
||||||
<td>
|
<td>
|
||||||
<a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
|
<a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
|
||||||
{{ follow.follower.name + '@' + follow.follower.host }}
|
{{ follow.follower.name + '@' + follow.follower.host }}
|
||||||
<span class="glyphicon glyphicon-new-window"></span>
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
<td>
|
<td>
|
||||||
<a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
|
<a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
|
||||||
{{ follow.following.name + '@' + follow.following.host }}
|
{{ follow.following.name + '@' + follow.following.host }}
|
||||||
<span class="glyphicon glyphicon-new-window"></span>
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
<td>
|
<td>
|
||||||
<a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
|
<a [href]="redundancy.url" i18n-title title="Open video in a new tab" target="_blank" rel="noopener noreferrer">
|
||||||
{{ redundancy.name }}
|
{{ redundancy.name }}
|
||||||
<span class="glyphicon glyphicon-new-window"></span>
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
<div class="actor-info">
|
<div class="actor-info">
|
||||||
<a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
|
<a [href]="follow.follower.url" class="actor-names" rel="noopener noreferrer" target="_blank" i18n-title title="Follower page">
|
||||||
<div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
|
<div class="actor-display-name">{{ follow.follower.name + '@' + follow.follower.host }}</div>
|
||||||
<span class="glyphicon glyphicon-new-window"></span>
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="muted">
|
<div class="muted">
|
||||||
|
|
|
@ -11,9 +11,11 @@
|
||||||
>{{ video.originInstanceHost }}</a>
|
>{{ video.originInstanceHost }}</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
i18n-title title="Open the video on the origin instance" class="glyphicon glyphicon-new-window"
|
i18n-title title="Open the video on the origin instance"
|
||||||
target="_blank" rel="noopener noreferrer" [href]="video.url"
|
target="_blank" rel="noopener noreferrer" [href]="video.url"
|
||||||
></a>
|
>
|
||||||
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">
|
<div *ngIf="!!video.originallyPublishedAt" class="attribute attribute-originally-published-at">
|
||||||
|
|
|
@ -33,12 +33,6 @@ a.attribute-value {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.glyphicon-new-window {
|
|
||||||
color: pvar(--inputPlaceholderColor);
|
|
||||||
margin-left: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 1600px) {
|
@media screen and (max-width: 1600px) {
|
||||||
.attributes .attribute {
|
.attributes .attribute {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
|
@ -8,12 +8,12 @@
|
||||||
|
|
||||||
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
|
<div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
|
||||||
<ng-container i18n>Show more</ng-container>
|
<ng-container i18n>Show more</ng-container>
|
||||||
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
|
<span *ngIf="descriptionLoading === false" class="chevron-down"></span>
|
||||||
<my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
|
<my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
|
<div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
|
||||||
<ng-container i18n>Show less</ng-container>
|
<ng-container i18n>Show less</ng-container>
|
||||||
<span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-up"></span>
|
<span *ngIf="descriptionLoading === false" class="chevron-up"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,13 +17,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.glyphicon,
|
|
||||||
.description-loading {
|
.description-loading {
|
||||||
@include margin-left(3px);
|
@include margin-left(5px);
|
||||||
}
|
|
||||||
|
|
||||||
.description-loading {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-info-description-more {
|
.video-info-description-more {
|
||||||
|
@ -31,11 +26,6 @@
|
||||||
font-weight: $font-semibold;
|
font-weight: $font-semibold;
|
||||||
color: pvar(--greyForegroundColor);
|
color: pvar(--greyForegroundColor);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
.glyphicon {
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="dropdown-toggle-indicator">
|
<div class="dropdown-toggle-indicator">
|
||||||
<span class="glyphicon glyphicon-chevron-down"></span>
|
<span class="chevron-down"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -106,6 +106,7 @@ my-notification {
|
||||||
}
|
}
|
||||||
|
|
||||||
.logged-in-more {
|
.logged-in-more {
|
||||||
|
|
||||||
@mixin display-hints($is-mobile: false) {
|
@mixin display-hints($is-mobile: false) {
|
||||||
background-color: rgba(255, 255, 255, 0.15);
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
|
||||||
|
@ -114,18 +115,16 @@ my-notification {
|
||||||
display: inherit !important;
|
display: inherit !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
> .dropdown-toggle {
|
||||||
max-width: 88% !important;
|
max-width: 88% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$main-radius: 25px;
|
|
||||||
|
|
||||||
@include margin-left(13px);
|
@include margin-left(13px);
|
||||||
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border-radius: $main-radius;
|
border-radius: 25px;
|
||||||
transition: all .1s ease-in-out;
|
transition: all .1s ease-in-out;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -157,7 +156,6 @@ my-notification {
|
||||||
|
|
||||||
.dropdown-toggle-indicator {
|
.dropdown-toggle-indicator {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 0;
|
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
@ -165,21 +163,17 @@ my-notification {
|
||||||
right: -35px;
|
right: -35px;
|
||||||
top: -8px;
|
top: -8px;
|
||||||
color: #808080;
|
color: #808080;
|
||||||
width: $main-radius;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-toggle {
|
.dropdown-toggle::after {
|
||||||
&::after {
|
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-toggle:first-child {
|
> .dropdown-toggle:first-child {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 5px 7px;
|
padding: 5px 7px;
|
||||||
border-radius: $main-radius;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -396,13 +390,6 @@ my-actor-avatar {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
width: calc(100vw - 30px);
|
width: calc(100vw - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:hover,
|
|
||||||
.dropdown-item:active {
|
|
||||||
&.settings-sensitive my-global-icon ::ng-deep svg {
|
|
||||||
margin-top: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
my-global-icon {
|
my-global-icon {
|
||||||
|
|
|
@ -63,6 +63,7 @@ const icons = {
|
||||||
'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
|
'exit-fullscreen': require('!!raw-loader?!../../../assets/images/feather/minimize.svg').default,
|
||||||
film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
|
film: require('!!raw-loader?!../../../assets/images/feather/film.svg').default,
|
||||||
edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
|
edit: require('!!raw-loader?!../../../assets/images/feather/edit-2.svg').default,
|
||||||
|
'external-link': require('!!raw-loader?!../../../assets/images/feather/external-link.svg').default,
|
||||||
sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
|
sensitive: require('!!raw-loader?!../../../assets/images/feather/eye.svg').default,
|
||||||
unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
|
unsensitive: require('!!raw-loader?!../../../assets/images/feather/eye-off.svg').default,
|
||||||
refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
|
refresh: require('!!raw-loader?!../../../assets/images/feather/refresh-cw.svg').default,
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
|
|
||||||
<ng-container *ngIf="isMenuDisplayed()">
|
<ng-container *ngIf="isMenuDisplayed()">
|
||||||
<button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
|
<button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
|
||||||
<span class="glyphicon glyphicon-chevron-down"></span>
|
<span class="chevron-down"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
|
<button class="btn btn-outline-secondary btn-sm" [ngClass]="{ 'route-active': active }"
|
||||||
ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
|
ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
|
||||||
>
|
>
|
||||||
<span class="glyphicon glyphicon-chevron-down"></span>
|
<span class="chevron-down"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div ngbDropdownMenu>
|
<div ngbDropdownMenu>
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
<td>
|
<td>
|
||||||
<a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
|
<a [href]="'https://' + serverBlock.blockedServer.host" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
|
||||||
{{ serverBlock.blockedServer.host }}
|
{{ serverBlock.blockedServer.host }}
|
||||||
<span class="glyphicon glyphicon-new-window"></span>
|
<my-global-icon iconName="external-link"></my-global-icon>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td>{{ serverBlock.createdAt | date: 'short' }}</td>
|
<td>{{ serverBlock.createdAt | date: 'short' }}</td>
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
|
After Width: | Height: | Size: 388 B |
|
@ -308,6 +308,25 @@ table {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
my-global-icon[iconName=external-link] {
|
||||||
|
margin: 0 3px;
|
||||||
|
width: 13px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
color: pvar(--inputPlaceholderColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-down {
|
||||||
|
@include chevron-down(0.55rem, 0.20em);
|
||||||
|
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-up {
|
||||||
|
@include chevron-up(0.55rem, 0.20em);
|
||||||
|
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
/* offsetTop for scrollToAnchor */
|
/* offsetTop for scrollToAnchor */
|
||||||
|
|
||||||
.anchor {
|
.anchor {
|
||||||
|
|
|
@ -570,6 +570,7 @@
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
height: $size;
|
height: $size;
|
||||||
width: $size;
|
width: $size;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin chevron-right ($size, $border-width) {
|
@mixin chevron-right ($size, $border-width) {
|
||||||
|
@ -579,6 +580,20 @@
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin chevron-down ($size, $border-width) {
|
||||||
|
@include chevron($size, $border-width);
|
||||||
|
|
||||||
|
bottom: 0.15em;
|
||||||
|
transform: rotate(135deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin chevron-up ($size, $border-width) {
|
||||||
|
@include chevron($size, $border-width);
|
||||||
|
|
||||||
|
top: 0.15em;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
@mixin chevron-left ($size, $border-width) {
|
@mixin chevron-left ($size, $border-width) {
|
||||||
@include chevron($size, $border-width);
|
@include chevron($size, $border-width);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue