Skip to content
GitLab
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Commits on Source (3)
(feat): List loader
· afcbb3b1
Emiliano Balbuena
authored
Aug 19, 2019
afcbb3b1
(chore): Center and stylize categories; fix all list modal
· f5791df9
Emiliano Balbuena
authored
Aug 19, 2019
f5791df9
(chore): Ditch top tiles extra margin
· 07253475
Emiliano Balbuena
authored
Aug 19, 2019
07253475
Hide whitespace changes
Inline
Side-by-side
src/app/modules/pro/channel/categories/categories.component.scss
View file @
07253475
m-pro--channel--categories
{
display
:
flex
;
flex-wrap
:
wrap
;
justify-content
:
flex-end
;
justify-content
:
center
;
.m-proChannel__category
{
cursor
:
pointer
;
color
:
var
(
--
m-pro--text-color
);
padding
:
16px
16px
0
;
background
:
var
(
--
m-pro--transparent-background-color
);
padding
:
4px
8px
;
margin
:
0
12px
8px
;
border-radius
:
4px
;
text-transform
:
uppercase
;
letter-spacing
:
0
.1em
;
...
...
src/app/modules/pro/channel/home/home.component.scss
View file @
07253475
.m-pro--channel-home
{
margin-top
:
72px
;
.m-pro--channel-home--section
{
margin-top
:
72px
;
...
...
src/app/modules/pro/channel/list-modal/list-modal.component.html
View file @
07253475
...
...
@@ -5,7 +5,7 @@
>
<ng-container
*ngFor=
"let entity$ of (entities$ | async); let i = index"
>
<ng-container
*ngIf=
"entity$ | async as entity"
>
<ng-container
*ngIf=
"type === 'images' || type === 'videos' || type === 'blogs'"
>
<ng-container
*ngIf=
"type ===
'all' || type ===
'images' || type === 'videos' || type === 'blogs'"
>
<m-pro--channel-tile
[entity]=
"entity"
(click)=
"expand(entity)"
...
...
src/app/modules/pro/channel/list/list.component.html
View file @
07253475
...
...
@@ -10,7 +10,7 @@
</div>
</div>
<div
class=
"m-proChannelList__content"
>
<div
class=
"m-proChannelList__content"
*ngIf=
"!(inProgress$ | async); else inProgressLoader"
>
<ul
class=
"m-proChannelListContent__list"
[class.m-proChannelListContent__normalList]=
"type === 'activities'"
>
<li
*ngFor=
"let entity of entities; let i = index"
>
<ng-container
*ngIf=
"type === 'all' || type === 'images' || type === 'videos' || type === 'blogs'"
>
...
...
@@ -49,3 +49,8 @@
<!-- talk to Emi about this -->
</ng-container>
</div>
<ng-template
#inProgressLoader
>
<div
class=
"m-proChannelList__loader"
>
<div
class=
"mdl-spinner mdl-js-spinner is-active"
[
mdl
]
></div>
</div>
</ng-template>
src/app/modules/pro/channel/list/list.component.scss
View file @
07253475
...
...
@@ -5,19 +5,15 @@ m-pro--channel-list {
margin
:
0
0
0
.4em
;
}
@media
screen
and
(
max-width
:
480px
)
{
m-pro--channel--categories
{
justify-content
:
start
;
}
}
m-pro--channel--categories
{
margin
:
8px
0
;
margin
:
16px
0
32px
;
@media
screen
and
(
max-width
:
480px
)
{
margin
:
8px
;
}
}
.m-proChannelList__tools
{
//background-color: var(--m-pro--plain-background-color) !important;
//padding: 16px;
height
:
70px
;
border-radius
:
20px
;
opacity
:
0
.9
;
...
...
@@ -45,22 +41,15 @@ m-pro--channel-list {
}
.m-proChannelListTools__searchResult
{
//padding: 8px;
//margin-top: 12px;
font-weight
:
300
;
color
:
var
(
--
m-pro--text-color
);
font-size
:
20px
;
//h2 {
// margin: 0;
//}
}
}
.m-proChannelList__content
{
width
:
85%
;
margin
:
0
auto
;
//display: flex;
//align-items: center;
justify-content
:
center
;
&
>
i
.material-icons
{
...
...
@@ -68,7 +57,6 @@ m-pro--channel-list {
margin-top
:
100px
;
height
:
fit-content
;
}
}
.m-proChannelListContent__noContent
{
...
...
@@ -79,7 +67,7 @@ m-pro--channel-list {
padding
:
8px
;
margin
:
0
auto
;
text-align
:
center
;
background-color
:
var
(
--
m-pro--
plain
-background-color
);
background-color
:
var
(
--
m-pro--
transparent
-background-color
);
color
:
var
(
--
m-pro--text-color
);
}
...
...
@@ -134,13 +122,11 @@ m-pro--channel-list {
&
>
li
:nth-child
(
1
)
{
grid-column
:
span
2
;
margin-bottom
:
$minds-padding
*
4
;
justify-content
:
flex-start
;
}
&
>
li
:nth-child
(
2
)
{
grid-column
:
3
/
span
2
;
margin-bottom
:
$minds-padding
*
4
;
&
:not
(
.m-proChannelListContentList__seeMore
)
{
justify-content
:
flex-end
;
...
...
@@ -186,6 +172,11 @@ m-pro--channel-list {
}
}
.m-proChannelList__loader
{
text-align
:
center
;
margin
:
16px
0
;
}
@media
screen
and
(
min-width
:
1px
)
and
(
max-width
:
$min-desktop
)
{
.m-proChannelList__content
{
margin
:
0
;
...
...
src/app/modules/pro/channel/list/list.component.ts
View file @
07253475
...
...
@@ -18,6 +18,7 @@ import { Tag } from "../../../../interfaces/entities";
export
class
ProChannelListComponent
implements
OnInit
,
OnDestroy
{
paramsType
:
string
;
// exact string that came from the router params
type
:
string
;
params$
:
Subscription
;
...
...
@@ -156,6 +157,10 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
this
.
feedsService
.
loadMore
();
}
get
inProgress
$
()
{
return
this
.
feedsService
.
inProgress
;
}
detectChanges
()
{
this
.
cd
.
markForCheck
();
this
.
cd
.
detectChanges
();
...
...