aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-05-29 16:45:59 +0200
committerChocobozzz <me@florianbigard.com>2019-05-29 16:45:59 +0200
commitc8487f3f63c90fbfddaa906b3cbd90fb209ab1bb (patch)
tree05675e3da02aebd2dea93105ab03c048bc2e8671 /client/src/sass/include
parent91b6631984fa7097bd60aa013d1cf041d7b95f58 (diff)
downloadPeerTube-c8487f3f63c90fbfddaa906b3cbd90fb209ab1bb.tar.gz
PeerTube-c8487f3f63c90fbfddaa906b3cbd90fb209ab1bb.tar.zst
PeerTube-c8487f3f63c90fbfddaa906b3cbd90fb209ab1bb.zip
Improve account channel page
Set it as the default route for account page. The main goal is to better differentiate the channel page from the account page. With the channel page set as default, I hope people will better understand they are in the account page, and that this account could have multiple channels.
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_miniature.scss95
1 files changed, 95 insertions, 0 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b62187fd2..3afcca310 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -138,3 +138,98 @@ $play-overlay-width: 18px;
138 } 138 }
139 } 139 }
140} 140}
141
142@mixin miniature-rows {
143 max-height: 540px; // 2 rows max
144 overflow: hidden;
145 padding-top: 10px;
146
147 &:first-child {
148 padding-top: 30px;
149 }
150
151 my-video-miniature {
152 text-align: left;
153 }
154
155 .section-title {
156 font-size: 24px;
157 font-weight: $font-semibold;
158 margin-bottom: 30px;
159
160 a {
161 &:hover, &:focus:not(.focus-visible), &:active {
162 text-decoration: none;
163 outline: none;
164 }
165
166 color: var(--mainForegroundColor);
167 }
168 }
169
170 &.channel {
171 .section-title {
172 a {
173 display: flex;
174 width: fit-content;
175 align-items: center;
176
177 img {
178 @include avatar(28px);
179
180 margin-right: 8px;
181 }
182 }
183
184 .followers {
185 color: $grey-foreground-color;
186 font-weight: normal;
187 font-size: 14px;
188 margin-left: 10px;
189 position: relative;
190 top: 2px;
191 }
192 }
193 }
194
195 @media screen and (max-width: $mobile-view) {
196 max-height: initial;
197 overflow: initial;
198
199 @include video-miniature-small-screen;
200
201 .section-title {
202 font-size: 17px;
203 }
204 }
205}
206
207@mixin adapt-margin-content-width {
208 width: $video-miniature-width * 6;
209 margin: auto !important;
210
211 @media screen and (max-width: 1800px) {
212 width: $video-miniature-width * 5;
213 }
214
215 @media screen and (max-width: 1800px - $video-miniature-width) {
216 width: $video-miniature-width * 4;
217 }
218
219 @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
220 width: $video-miniature-width * 3;
221 }
222
223 @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
224 width: $video-miniature-width * 2;
225 }
226
227 @media screen and (max-width: 500px) {
228 width: auto;
229 margin: 0 !important;
230
231 .videos {
232 @include video-miniature-small-screen;
233 }
234 }
235}