aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorWicklow <wicklow@framasoft.org>2023-02-17 12:21:14 +0100
committerChocobozzz <chocobozzz@cpy.re>2023-02-20 13:52:22 +0100
commitf9b8e5c457ad507e77b500866786c82ed4187c92 (patch)
treec174c608dc9873a0dc8f727ef3cc3108a5ade1e2 /client/src/app
parent178af31cb8624567a26a1ca06cba9f3a475be330 (diff)
downloadPeerTube-f9b8e5c457ad507e77b500866786c82ed4187c92.tar.gz
PeerTube-f9b8e5c457ad507e77b500866786c82ed4187c92.tar.zst
PeerTube-f9b8e5c457ad507e77b500866786c82ed4187c92.zip
Refactoring accounts component style
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.html4
-rw-r--r--client/src/app/+accounts/account-video-channels/account-video-channels.component.scss16
-rw-r--r--client/src/app/+accounts/accounts.component.html8
-rw-r--r--client/src/app/+accounts/accounts.component.scss60
4 files changed, 25 insertions, 63 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 38293b070..e3b499773 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -16,7 +16,7 @@
16 size="75" 16 size="75"
17 ></my-actor-avatar> 17 ></my-actor-avatar>
18 18
19 <h2> 19 <h2 class="fs-5 lh-1 fw-bold m-0">
20 <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel"> 20 <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel">
21 {{ videoChannel.displayName }} 21 {{ videoChannel.displayName }}
22 </a> 22 </a>
@@ -39,7 +39,7 @@
39 39
40 <div class="videos-overflow-workaround"> 40 <div class="videos-overflow-workaround">
41 <div class="videos"> 41 <div class="videos">
42 <div class="no-results" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div> 42 <div class="no-results h-auto" i18n *ngIf="getTotalVideosOf(videoChannel) === 0">This channel doesn't have any videos.</div>
43 43
44 <my-video-miniature 44 <my-video-miniature
45 *ngFor="let video of getVideosOf(videoChannel)" 45 *ngFor="let video of getVideosOf(videoChannel)"
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
index 11ed4c3b1..2e34ed71c 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss
@@ -8,11 +8,11 @@
8} 8}
9 9
10.channel { 10.channel {
11 @include rfs(2rem, padding);
12 @include rfs(2rem 0, margin);
13
11 max-width: $max-channels-width; 14 max-width: $max-channels-width;
12 background-color: pvar(--channelBackgroundColor); 15 background-color: pvar(--channelBackgroundColor);
13 padding: 30px;
14
15 margin: 30px 0;
16 16
17 display: grid; 17 display: grid;
18 grid-template-columns: 1fr auto; 18 grid-template-columns: 1fr auto;
@@ -44,10 +44,6 @@
44 h2 { 44 h2 {
45 grid-row: 1; 45 grid-row: 1;
46 grid-column: 2; 46 grid-column: 2;
47 font-size: 20px;
48 line-height: 1;
49 font-weight: $font-bold;
50 margin: 0;
51 } 47 }
52 48
53 .actor-counters { 49 .actor-counters {
@@ -87,13 +83,11 @@ my-subscribe-button {
87 max-width: $video-thumbnail-medium-width; 83 max-width: $video-thumbnail-medium-width;
88 } 84 }
89 85
90 .no-results {
91 height: auto;
92 }
93} 86}
94 87
95.videos-overflow-workaround { 88.videos-overflow-workaround {
96 margin-top: 30px; 89 @include margin-top(2rem);
90
97 overflow-x: hidden; 91 overflow-x: hidden;
98} 92}
99 93
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 226fa8f31..116b26a4d 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -1,5 +1,5 @@
1<div *ngIf="account" class="root"> 1<div *ngIf="account" class="root">
2 <div class="account-info"> 2 <div class="account-info d-md-grid d-block">
3 3
4 <div class="account-avatar-row"> 4 <div class="account-avatar-row">
5 <my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar> 5 <my-actor-avatar class="main-avatar" actorType="account" [actor]="account"></my-actor-avatar>
@@ -9,11 +9,11 @@
9 9
10 <div class="actor-info"> 10 <div class="actor-info">
11 <div> 11 <div>
12 <div class="actor-display-name"> 12 <div class="actor-display-name align-items-center">
13 <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1> 13 <h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
14 14
15 <my-user-moderation-dropdown 15 <my-user-moderation-dropdown
16 [prependActions]="prependModerationActions" 16 class="mx-3" prependActions]="prependModerationActions"
17 buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto" 17 buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()" 18 (userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
19 ></my-user-moderation-dropdown> 19 ></my-user-moderation-dropdown>
@@ -48,7 +48,7 @@
48 <div class="description-html" [innerHTML]="accountDescriptionHTML"></div> 48 <div class="description-html" [innerHTML]="accountDescriptionHTML"></div>
49 </div> 49 </div>
50 50
51 <div *ngIf="hasShowMoreDescription()" class="show-more" role="button" 51 <div *ngIf="hasShowMoreDescription()" class="show-more d-md-none d-block" role="button"
52 (click)="accountDescriptionExpanded = !accountDescriptionExpanded" 52 (click)="accountDescriptionExpanded = !accountDescriptionExpanded"
53 title="Show the complete description" i18n-title i18n 53 title="Show the complete description" i18n-title i18n
54 > 54 >
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index e5f86e61e..331008f8a 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -4,10 +4,8 @@
4@use '_miniature' as *; 4@use '_miniature' as *;
5 5
6.root { 6.root {
7 --myGlobalTopPadding: 60px; 7 --myFontSize: 1rem;
8 --myImgMargin: 30px; 8 --myGreyFontSize: 1rem;
9 --myFontSize: 16px;
10 --myGreyFontSize: 16px;
11} 9}
12 10
13.section-label { 11.section-label {
@@ -30,12 +28,6 @@
30 } 28 }
31} 29}
32 30
33my-user-moderation-dropdown {
34 margin: 0 10px;
35
36 height: fit-content;
37}
38
39.copy-button { 31.copy-button {
40 @include margin-left(3px); 32 @include margin-left(3px);
41 33
@@ -48,20 +40,19 @@ my-user-moderation-dropdown {
48 40
49.account-info { 41.account-info {
50 @include grid-videos-miniature-margins(false, 15px); 42 @include grid-videos-miniature-margins(false, 15px);
43 @include padding-top(3.75rem);
44 @include padding-bottom(3.75rem);
45 @include margin-bottom(3rem);
46 @include font-size(1rem);
51 47
52 display: grid;
53 grid-template-columns: 1fr min-content; 48 grid-template-columns: 1fr min-content;
54 grid-template-rows: auto auto; 49 grid-template-rows: auto auto;
55 50
56 background-color: pvar(--submenuBackgroundColor); 51 background-color: pvar(--submenuBackgroundColor);
57 margin-bottom: 45px;
58 padding-top: var(--myGlobalTopPadding);
59 padding-bottom: var(--myGlobalTopPadding);
60 font-size: var(--myFontSize);
61} 52}
62 53
63.account-avatar-row { 54.account-avatar-row {
64 @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize)); 55 @include avatar-row-responsive(2rem, var(--myGreyFontSize));
65} 56}
66 57
67.actor-display-name { 58.actor-display-name {
@@ -76,8 +67,8 @@ my-user-moderation-dropdown {
76 67
77.show-more { 68.show-more {
78 @include show-more-description; 69 @include show-more-description;
70 @include padding-bottom(3.75rem);
79 71
80 display: none;
81 text-align: center; 72 text-align: center;
82} 73}
83 74
@@ -90,11 +81,11 @@ my-user-moderation-dropdown {
90 justify-content: flex-end; 81 justify-content: flex-end;
91 align-content: flex-start; 82 align-content: flex-start;
92 83
93 > *:not(:last-child) { 84 >*:not(:last-child) {
94 margin-bottom: 15px; 85 @include margin-bottom(1rem);
95 } 86 }
96 87
97 > a { 88 >a {
98 white-space: nowrap; 89 white-space: nowrap;
99 } 90 }
100} 91}
@@ -104,15 +95,6 @@ my-user-moderation-dropdown {
104} 95}
105 96
106@media screen and (max-width: $small-view) { 97@media screen and (max-width: $small-view) {
107 .root {
108 --myGlobalTopPadding: 45px;
109 --myChannelImgMargin: 15px;
110 }
111
112 .account-info {
113 display: block;
114 padding-bottom: 60px;
115 }
116 98
117 .description:not(.expanded) { 99 .description:not(.expanded) {
118 @include fade-text(30px, pvar(--submenuBackgroundColor)); 100 @include fade-text(30px, pvar(--submenuBackgroundColor));
@@ -120,10 +102,6 @@ my-user-moderation-dropdown {
120 max-height: 70px; 102 max-height: 70px;
121 } 103 }
122 104
123 .show-more {
124 display: block;
125 }
126
127 .buttons { 105 .buttons {
128 justify-content: center; 106 justify-content: center;
129 } 107 }
@@ -131,22 +109,12 @@ my-user-moderation-dropdown {
131 109
132@media screen and (max-width: $mobile-view) { 110@media screen and (max-width: $mobile-view) {
133 .root { 111 .root {
134 --myGlobalTopPadding: 15px; 112 --myFontSize: $font-size-rem-14px;
135 --myFontSize: 14px; 113 --myGreyFontSize: $font-size-rem-13px;
136 --myGreyFontSize: 13px;
137 }
138
139 .account-info {
140 display: block;
141 padding-bottom: 30px;
142 } 114 }
143 115
144 .links { 116 .links {
145 margin: auto !important; 117 margin: auto !important;
146 width: min-content; 118 width: min-content;
147 } 119 }
148 120} \ No newline at end of file
149 .show-more {
150 margin-bottom: 30px;
151 }
152}