aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-07-02 19:45:21 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-07-02 19:45:21 +0200
commit2b587cad93381a1901df3c993bf1db90bbb0891f (patch)
treed6b50fbafc2b900847f2eda848061fe2cb711a0e /client/src/app/shared
parent2d011d94aa4086af3a87e254552062599d8c50bd (diff)
downloadPeerTube-2b587cad93381a1901df3c993bf1db90bbb0891f.tar.gz
PeerTube-2b587cad93381a1901df3c993bf1db90bbb0891f.tar.zst
PeerTube-2b587cad93381a1901df3c993bf1db90bbb0891f.zip
align feed icons to the right for video listings
Diffstat (limited to 'client/src/app/shared')
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss10
-rw-r--r--client/src/app/shared/shared-main/feeds/feed.component.html8
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.html22
-rw-r--r--client/src/app/shared/shared-video-miniature/abstract-video-list.scss25
4 files changed, 37 insertions, 28 deletions
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index f37decdef..1a28dd981 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -7,13 +7,15 @@ my-small-loader ::ng-deep .root {
7 width: 20px; 7 width: 20px;
8} 8}
9 9
10span[class$=-button] {
11 > span {
12 margin-left: 5px;
13 }
14}
15
10.action-button { 16.action-button {
11 @include peertube-button-link; 17 @include peertube-button-link;
12 @include button-with-icon(21px, 0, -1px); 18 @include button-with-icon(21px, 0, -1px);
13
14 > span:nth-child(2) {
15 margin-left: 5px;
16 }
17} 19}
18 20
19.orange-button { 21.orange-button {
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index ac0b1f454..6b8013a9b 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,10 +1,6 @@
1<div class="video-feed" 1<div class="video-feed">
2 [ngbTooltip]="'Feeds available'"
3 placement="right auto"
4 container="body"
5>
6 <my-global-icon 2 <my-global-icon
7 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom" 3 *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="left auto"
8 class="icon-syndication" role="button" iconName="syndication" 4 class="icon-syndication" role="button" iconName="syndication"
9 > 5 >
10 </my-global-icon> 6 </my-global-icon>
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
index 70be78af0..6df589c38 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html
@@ -9,19 +9,23 @@
9 <div class="action-block"> 9 <div class="action-block">
10 <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed> 10 <my-feed *ngIf="titlePage" [syndicationItems]="syndicationItems"></my-feed>
11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions"> 11 <a [routerLink]="action.routerLink" routerLinkActive="active" *ngFor="let action of actions">
12 <button class="btn"> 12 <my-button [icon]="action.iconName" [label]="action.label"></my-button>
13 <my-global-icon [iconName]="action.iconName" aria-hidden="true"></my-global-icon>
14 <span>{{ action.label }}</span>
15 </button>
16 </a> 13 </a>
17 </div> 14 </div>
18 15
19 <div class="moderation-block" *ngIf="displayModerationBlock"> 16 <div class="moderation-block" *ngIf="displayModerationBlock">
20 <my-peertube-checkbox 17 <div class="c-hand" ngbDropdown container="body" placement="bottom-right auto">
21 (change)="toggleModerationDisplay()" 18 <my-global-icon iconName="cog" ngbDropdownToggle></my-global-icon>
22 inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos" 19
23 > 20 <div role="menu" class="dropdown-menu" ngbDropdownMenu>
24 </my-peertube-checkbox> 21 <div class="dropdown-item">
22 <my-peertube-checkbox
23 (change)="toggleModerationDisplay()"
24 inputName="display-unlisted-private" i18n-labelText labelText="Display unlisted and private videos"
25 ></my-peertube-checkbox>
26 </div>
27 </div>
28 </div>
25 </div> 29 </div>
26 </div> 30 </div>
27 31
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
index 1660c6812..7841b60f7 100644
--- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
+++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss
@@ -3,32 +3,39 @@
3@import '_mixins'; 3@import '_mixins';
4@import '_miniature'; 4@import '_miniature';
5 5
6$iconSize: 16px;
7
6.videos-header { 8.videos-header {
7 display: flex; 9 display: flex;
8 justify-content: space-between; 10 justify-content: space-between;
9 align-items: baseline; 11 align-items: center;
10 12
11 .title-page.title-page-single { 13 .title-page.title-page-single {
12 display: flex; 14 display: flex;
13 15 flex-grow: 1;
14 my-feed {
15 display: inline-block;
16 top: 1px;
17 width: max-content;
18 }
19 } 16 }
20 17
21 .action-block { 18 .action-block {
19 ::ng-deep my-feed {
20 my-global-icon {
21 width: calc(#{$iconSize} - 2px);
22 }
23 }
24
22 a button { 25 a button {
23 @include peertube-button; 26 @include peertube-button;
24 @include grey-button; 27 @include grey-button;
25 @include button-with-icon(18px, 3px, -1px); 28 @include button-with-icon($iconSize, 3px, -1px);
26 } 29 }
27 } 30 }
28 31
29 .moderation-block { 32 .moderation-block {
33 div {
34 @include button-with-icon($iconSize, 3px, -1px);
35 }
36
37 margin-left: .2rem;
30 display: flex; 38 display: flex;
31 flex-grow: 1;
32 justify-content: flex-end; 39 justify-content: flex-end;
33 align-items: center; 40 align-items: center;
34 } 41 }