Skip to content
Commits on Source (2)
<div class="m-pro--channel" *ngIf="channel">
<div class="m-pro__channel" *ngIf="channel">
<div class="m-proChannel__topbar">
<img
class="m-proChannelTopbar__logo"
......@@ -6,7 +6,7 @@
[routerLink]="homeRouterLink"
/>
<div class="m-proChannelTopbar__SearchBox">
<div class="m-proChannelTopbar__searchBox">
<m-pro__searchBox
[(query)]="query"
(onSearch)="search()"
......
......@@ -59,8 +59,8 @@ m-pro--channel {
}
@media screen and (max-width: $max-mobile) {
.m-pro--channel {
.m-proChannelTopbar__SearchBox {
.m-pro__channel {
.m-proChannelTopbar__searchBox {
display: none;
}
......@@ -70,7 +70,7 @@ m-pro--channel {
}
}
.m-pro--channel {
.m-pro__channel {
max-width: 1296px;
margin: 0 auto;
display: grid;
......@@ -107,7 +107,7 @@ m-pro--channel {
padding: 0 16px 0 0;
}
.m-proChannelTopbar__SearchBox {
.m-proChannelTopbar__searchBox {
margin: 0 16px;
@media screen and (max-width: 1081px) {
......
<a class="m-pro__hamburger-menu__trigger" (click)="toggleMenu()">
<a class="m-proHamburgerMenu__trigger" (click)="toggleMenu()">
<i class="material-icons">menu</i>
</a>
<div class="m-pro__hamburger-menu__menu">
<a class="m-pro__hamburger-menu__close" (click)="closeMenu()">
<div class="m-proHamburgerMenu__menu">
<a class="m-proHamburgerMenu__close" (click)="closeMenu()">
<i class="material-icons">close</i>
</a>
<ul>
<li class="m-pro__hamburger-menu-menu__logo" *ngIf="channel">
<li class="m-proHamburgerMenu__logo" *ngIf="channel">
<img
[routerLink]="homeRouterLink"
[src]="channel.pro_settings.logo_image"
......@@ -17,7 +17,7 @@
</li>
<li
class="m-pro__hamburger-menu-menu__subscribe"
class="m-proHamburgerMenu__subscribe"
*ngIf="currentUser?.guid != channel?.guid"
>
<m-pro__subscribeButton (onAction)="closeMenu()"></m-pro__subscribeButton>
......@@ -26,7 +26,7 @@
<li>
<a
[routerLink]="feedRouterLink"
routerLinkActive="m-pro__hamburger-menu-menu__item--active"
routerLinkActive="m-proHamburgerMenu__item--active"
(click)="closeMenu()"
i18n
>Feed</a
......@@ -36,7 +36,7 @@
<li>
<a
[routerLink]="videosRouterLink"
routerLinkActive="m-pro__hamburger-menu-menu__item--active"
routerLinkActive="m-proHamburgerMenu__item--active"
(click)="closeMenu()"
i18n
>Videos</a
......@@ -46,7 +46,7 @@
<li>
<a
[routerLink]="imagesRouterLink"
routerLinkActive="m-pro__hamburger-menu-menu__item--active"
routerLinkActive="m-proHamburgerMenu__item--active"
(click)="closeMenu()"
i18n
>Images</a
......@@ -56,7 +56,7 @@
<li>
<a
[routerLink]="articlesRouterLink"
routerLinkActive="m-pro__hamburger-menu-menu__item--active"
routerLinkActive="m-proHamburgerMenu__item--active"
(click)="closeMenu()"
i18n
>Articles</a
......@@ -66,7 +66,7 @@
<li>
<a
[routerLink]="groupsRouterLink"
routerLinkActive="m-pro__hamburger-menu-menu__item--active"
routerLinkActive="m-proHamburgerMenu__item--active"
(click)="closeMenu()"
i18n
>Groups</a
......@@ -79,7 +79,7 @@
</a>
</li>
<li class="m-pro__hamburger-menu-menu__search-box">
<li class="m-proHamburgerMenu__searchBox">
<m-pro__searchBox
[query]="query"
(queryChange)="queryChange.emit($event)"
......@@ -88,18 +88,18 @@
></m-pro__searchBox>
</li>
<li class="m-pro__hamburger-menu-menu__spacer"></li>
<li class="m-proHamburgerMenu__spacer"></li>
<ng-container *ngIf="items && items.length">
<li *ngFor="let item of items">
<a
[class.m-pro__hamburger-menu-menu__item--active]="item.isActive()"
[class.m-proHamburgerMenu__item--active]="item.isActive()"
(click)="item.onClick(); closeMenu()"
>{{ item.label }}</a
>
</li>
<li class="m-pro__hamburger-menu-menu__spacer"></li>
<li class="m-proHamburgerMenu__spacer"></li>
</ng-container>
</ul>
......
m-pro__hamburger-menu {
position: relative;
.m-pro__hamburger-menu__menu {
.m-proHamburgerMenu__menu {
right: -110%;
visibility: hidden;
......@@ -21,7 +21,7 @@ m-pro__hamburger-menu {
visibility: visible;
}
.m-pro__hamburger-menu__close {
.m-proHamburgerMenu__close {
position: absolute;
top: 30px;
right: 40px;
......@@ -49,7 +49,7 @@ m-pro__hamburger-menu {
font-weight: 700;
letter-spacing: 1px;
&.m-pro__hamburger-menu-menu__logo {
&.m-proHamburgerMenu__logo {
height: 100px;
> img {
......@@ -59,7 +59,7 @@ m-pro__hamburger-menu {
}
}
&.m-pro__hamburger-menu-menu__subscribe {
&.m-proHamburgerMenu__subscribe {
padding: 0 0 16px;
text-align: center;
......@@ -69,7 +69,7 @@ m-pro__hamburger-menu {
}
}
&.m-pro__hamburger-menu-menu__search-box {
&.m-proHamburgerMenu__searchBox {
> m-pro__searchbox {
width: 100%;
display: block;
......@@ -82,7 +82,7 @@ m-pro__hamburger-menu {
}
}
&.m-pro__hamburger-menu-menu__spacer {
&.m-proHamburgerMenu__spacer {
height: 0;
border-top: 1px solid var(--m-pro--text-color);
margin: 16px 0;
......@@ -94,7 +94,7 @@ m-pro__hamburger-menu {
padding: 12px 0;
display: block;
&.m-pro__hamburger-menu-menu__item--active {
&.m-proHamburgerMenu__item--active {
color: var(--m-pro--primary-color) !important;
}
}
......
<div class="m-pro--channel-home">
<div class="m-proChannel__home">
<m-pro--channel--categories
[showAllTag]="false"
[selectedHashtag]="''"
(onSelectTag)="navigateToCategory($event)"
></m-pro--channel--categories>
<div class="m-pro--channel-home--section" *ngIf="featuredContent?.length">
<div class="m-pro--channel-home--featured-content">
<div class="m-proChannelHome__section" *ngIf="featuredContent?.length">
<div class="m-proChannelHome__featuredContent">
<m-pro--channel-tile
*ngFor="let entity of featuredContent"
[entity]="entity"
......@@ -15,14 +15,14 @@
</div>
</div>
<div class="m-pro--channel-home--section" *ngFor="let category of categories">
<div class="m-proChannelHome__section" *ngFor="let category of categories">
<h2 i18n>
<a [routerLink]="getCategoryRoute(category.tag?.tag)">{{
category.tag?.label
}}</a>
</h2>
<div class="m-pro--channel-home--category-content">
<div class="m-proChannelHome__categoryContent">
<ng-container *ngFor="let entity$ of category?.content">
<m-pro--channel-tile
*ngIf="entity$ | async as entity"
......@@ -33,7 +33,7 @@
</div>
</div>
<div class="m-pro--channel-home--loader" *ngIf="inProgress">
<div class="m-proChannelHome__loader" *ngIf="inProgress">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
</div>
m-pro--channel-home {
m-proChannel__home {
display: block;
padding: 0 32px;
}
.m-pro--channel-home {
.m-proChannel__home {
m-pro--channel--categories {
margin: 16px 0 32px;
......@@ -12,7 +12,7 @@ m-pro--channel-home {
}
}
.m-pro--channel-home--section {
.m-proChannelHome__section {
margin-bottom: 72px;
&:last-child {
......@@ -36,13 +36,13 @@ m-pro--channel-home {
}
}
.m-pro--channel-home--loader {
.m-proChannelHome__loader {
text-align: center;
margin: 32px auto;
}
.m-pro--channel-home--featured-content,
.m-pro--channel-home--category-content {
.m-proChannelHome__featuredContent,
.m-proChannelHome__categoryContent {
width: 80%;
margin: 0 auto;
display: grid;
......@@ -53,7 +53,7 @@ m-pro--channel-home {
}
}
.m-pro--channel-home--featured-content {
.m-proChannelHome__featuredContent {
grid-template-columns: repeat(2, 1fr);
*:nth-child(1) {
......@@ -69,7 +69,7 @@ m-pro--channel-home {
}
}
.m-pro--channel-home--category-content {
.m-proChannelHome__categoryContent {
grid-template-columns: repeat(2, 1fr);
@media screen and (max-width: $max-mobile) {
......
<section class="m-ProChannelLogin--hero">
<div class="m-ProChannelLogin--hero--inner">
<div class="m-ProChannelLogin--hero--slogans">
<section class="m-proChannelLogin__hero">
<div class="m-proChannelLoginHero__inner">
<div class="m-proChannelLoginHero__slogans">
<h2>{{ settings?.headline }}</h2>
</div>
<div class="m-ProChannelLogin--login">
<div class="m-proChannelLogin__form">
<ng-container *ngIf="currentSection === 'login'">
<span class="m-proChannelLogin--subtext">
<span class="m-proChannelLogin__subtext">
Not on {{ settings?.title }}?
<a (click)="currentSection = 'register'">Start a Minds channel</a>
</span>
......@@ -15,7 +15,7 @@
</ng-container>
<ng-container *ngIf="currentSection === 'register'">
<span class="m-proChannelLogin--subtext">
<span class="m-proChannelLogin__subtext">
<a (click)="currentSection = 'login'">
I already have a Minds account
</a>
......
......@@ -9,11 +9,11 @@ m-pro--channel-login {
}
}
.m-ProChannelLogin--hero {
.m-proChannelLogin__hero {
position: relative;
width: 100%;
.m-ProChannelLogin--hero--inner {
.m-proChannelLoginHero__inner {
display: flex;
flex-direction: row;
align-items: center;
......@@ -55,7 +55,7 @@ m-pro--channel-login {
}
}
.m-ProChannelLogin--hero--video {
.m-proChannelLogin__hero--video {
position: absolute;
bottom: 0;
left: 0;
......@@ -71,7 +71,7 @@ m-pro--channel-login {
}
}
.m-ProChannelLogin--hero--overlay {
.m-proChannelLogin__hero--overlay {
position: absolute;
top: 0;
left: 0;
......@@ -83,7 +83,7 @@ m-pro--channel-login {
}
}
.m-ProChannelLogin--hero--slogans {
.m-proChannelLoginHero__slogans {
flex-grow: 1;
z-index: 2;
......@@ -137,7 +137,7 @@ m-pro--channel-login {
}
}
.m-ProChannelLogin--login {
.m-proChannelLogin__form {
flex: 1;
margin-left: 16px;
z-index: 2;
......@@ -149,7 +149,7 @@ m-pro--channel-login {
min-width: initial;
}
.m-proChannelLogin--subtext {
.m-proChannelLogin__subtext {
display: block;
margin: 0 8px;
font-size: 20px;
......
......@@ -3,7 +3,7 @@
[class.m-pro__subscribeButton--subscribed]="subscribed"
(click)="toggleSubscription(); $event.preventDefault()"
>
<span class="m-pro__subscribeButton--label">
<span class="m-proSubscribeButton__label">
<ng-container *ngIf="!subscribed; else subscribedActionButton" i18n>
Subscribe
</ng-container>
......@@ -12,7 +12,7 @@
</ng-template>
</span>
<span class="m-pro__subscribeButton--counter">
<span class="m-proSubscribeButton__counter">
{{ count | abbr: 0 }}
</span>
</button>
......@@ -18,11 +18,11 @@
color: var(--m-pro--text-color);
}
.m-pro__subscribeButton--label {
.m-proSubscribeButton__label {
opacity: 0.85;
}
.m-pro__subscribeButton--counter {
.m-proSubscribeButton__counter {
margin-left: 0.65em;
}
}
......@@ -19,13 +19,13 @@
Cancel Pro
</button>
<span *ngIf="error" class="m-pro-subscription--error">
<span *ngIf="error" class="m-proSubscription__error">
{{ error }}
</span>
</ng-container>
<ng-template #inProgressSpinner>
<div class="m-pro-subscription--in-progress">
<div class="m-proSubscription__inProgress">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
</ng-template>
......
m-pro--subscription {
.m-pro-subscription--error {
.m-proSubscription__error {
display: block;
font-weight: bold;
color: #fff;
......
<div class="m-pro--unsubscribe-modal">
<div class="m-pro__unsubscribeModal">
<div class="m-ProUnsubscribeModal__body">
<span>
Do you wish to unsubscribe from <strong>{{ channelName }}</strong
......
m-pro--unsubscribe-modal {
m-pro__unsubscribeModal {
@include m-theme() {
background-color: rgba(themed($m-black-always), 0.95);
}
}
.m-pro--unsubscribe-modal {
.m-pro__unsubscribeModal {
> * {
color: var(--m-pro--text-color);
font-size: 16px;
......
<div class="m-pro--settings">
<div class="m-pro__settings">
<div class="m-toolbar" *ngIf="settings">
<div class="m-topbar--row">
<div class="m-topbar--navigation m-topbar--navigation--text-only">
......@@ -73,7 +73,7 @@
</div>
<div class="m-page">
<div class="m-page--main m-pro--settings--page m-border">
<div class="m-page--main m-proSettings__page m-border">
<div *ngIf="inProgress && !settings">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
......@@ -84,12 +84,12 @@
<!-- General -->
<ng-template ngSwitchCase="general">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Customize your title and headline. This will be used as your SEO
tags as well.
</p>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="title" i18n>Title</label>
<input
type="text"
......@@ -99,7 +99,7 @@
/>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="headline" i18n>Headline (can be multi-line)</label>
<textarea
id="headline"
......@@ -112,11 +112,11 @@
<!-- Theme -->
<ng-template ngSwitchCase="theme">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Set up your color scheme below.
</p>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="text_color" i18n>Text Color</label>
<input
type="color"
......@@ -126,7 +126,7 @@
/>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="primary_color" i18n>Primary Color</label>
<input
type="color"
......@@ -136,7 +136,7 @@
/>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="plain_background_color" i18n>
Plain Background Color
</label>
......@@ -148,7 +148,7 @@
/>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label i18n>
Color Schema
</label>
......@@ -160,7 +160,7 @@
value="light"
[(ngModel)]="settings.scheme"
/>
<label for="scheme_light" class="m-pro--settings--inline-label">
<label for="scheme_light" class="m-proSettings__inlineLabel">
Light
</label>
......@@ -171,12 +171,12 @@
value="dark"
[(ngModel)]="settings.scheme"
/>
<label for="scheme_dark" class="m-pro--settings--inline-label">
<label for="scheme_dark" class="m-proSettings__inlineLabel">
Dark
</label>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label i18n>Tiles Aspect Ratio</label>
<ng-container *ngFor="let ratio of ratios">
......@@ -189,14 +189,14 @@
/>
<label
[for]="'tile_ratio_' + ratio"
class="m-pro--settings--inline-label"
class="m-proSettings__inlineLabel"
>
{{ ratio }}
</label>
</ng-container>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="logo_guid" i18n>Logo Asset GUID</label>
<input
type="text"
......@@ -210,16 +210,16 @@
<!-- Tags -->
<ng-template ngSwitchCase="hashtags">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Set up your category filter hashtags here.
</p>
<m-draggable-list [data]="settings.tag_list" [id]="'tag'">
<ng-template let-tag="item" let-i="i">
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label i18n> Hashtag #{{ i + 1 }} </label>
<div class="m-pro--settings--flex-inputs">
<div class="m-proSettings__flexInputs">
<input
type="text"
placeholder="Label"
......@@ -244,7 +244,7 @@
</ng-template>
</m-draggable-list>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<button
class="m-btn m-btn--slim"
type="button"
......@@ -260,11 +260,11 @@
<!-- Footer -->
<ng-template ngSwitchCase="footer">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Set up your footer links below.
</p>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="footer_text" i18n>Text</label>
<input
type="text"
......@@ -276,10 +276,10 @@
<m-draggable-list [data]="settings.footer_links" [id]="'title'">
<ng-template let-link="item" let-i="i">
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label i18n> Link #{{ i + 1 }} </label>
<div class="m-pro--settings--flex-inputs">
<div class="m-proSettings__flexInputs">
<input
type="text"
placeholder="Title"
......@@ -304,7 +304,7 @@
</ng-template>
</m-draggable-list>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<button
class="m-btn m-btn--slim"
type="button"
......@@ -320,11 +320,11 @@
<!-- Domain -->
<ng-template ngSwitchCase="domain">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Customize your domain and setup your HTTPS certificates.
</p>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="domain" i18n>Domain</label>
<input
type="text"
......@@ -334,17 +334,17 @@
/>
</div>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<label for="custom_head" i18n>Custom &lt;head&gt; Code</label>
<textarea
class="m-pro--settings--code-textarea"
class="m-proSettings__codeTextarea"
id="custom_head"
name="custom_head"
[(ngModel)]="settings.custom_head"
[readOnly]="!isAdmin"
></textarea>
<p *ngIf="!isAdmin" class="m-pro--settings--note" i18n>
<p *ngIf="!isAdmin" class="m-proSettings__note" i18n>
In order to customize this field, please contact a Minds admin
or email info@minds.com.
</p>
......@@ -354,12 +354,12 @@
<!-- Cancel -->
<ng-template ngSwitchCase="cancel">
<p class="m-pro--settings--note" i18n>
<p class="m-proSettings__note" i18n>
Clicking the button below will take you to Minds Pro page, where
you can cancel your subscription.
</p>
<div class="m-pro--settings--field">
<div class="m-proSettings__field">
<a
class="m-btn m-link-btn m-btn--slim m-btn--destructive"
routerLink="/pro"
......@@ -370,14 +370,14 @@
</ng-container>
<div
class="m-pro--settings--error"
class="m-proSettings__error"
*ngIf="!!error"
>
{{ error }}
</div>
<div
class="m-pro--settings--field m-pro--settings--field-actions"
class="m-proSettings__field m-proSettings__fieldActions"
*ngIf="currentTab !== 'cancel'"
>
<button
......@@ -389,12 +389,12 @@
Save
</button>
<div class="m-pro--settings--field-spinner" *ngIf="inProgress">
<div class="m-proSettings__fieldSpinner" *ngIf="inProgress">
<div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
</div>
<a
class="m-btn m-link-btn m-btn--slim m-pro--settings--preview-btn"
class="m-btn m-link-btn m-btn--slim m-proSettings__previewBtn"
[routerLink]="previewRoute"
i18n
>View your Pro channel</a
......
.m-pro--settings {
.m-pro__settings {
max-width: 1280px;
margin: auto;
......@@ -7,7 +7,7 @@
}
}
.m-pro--settings--page {
.m-proSettings__page {
padding-bottom: 24px;
@include m-theme() {
......@@ -23,7 +23,7 @@
padding: 0;
}
.m-pro--settings--field {
.m-proSettings__field {
margin: 0 0 24px;
&:last-child {
......@@ -39,7 +39,7 @@
color: themed($m-grey-800);
}
&.m-pro--settings--inline-label {
&.m-proSettings__inlineLabel {
display: inline-block;
padding: 0;
margin: 0 0.35em;
......@@ -72,7 +72,7 @@
height: 6em;
resize: none;
&.m-pro--settings--code-textarea {
&.m-proSettings__codeTextarea {
font-family: monospace;
font-size: 13px;
max-width: 49em;
......@@ -84,7 +84,7 @@
}
}
&.m-pro--settings--field-actions {
&.m-proSettings__fieldActions {
display: flex;
flex-direction: row;
......@@ -94,7 +94,7 @@
}
}
.m-pro--settings--preview-btn {
.m-proSettings__previewBtn {
margin-left: 0.35em;
@include m-theme() {
......@@ -103,13 +103,13 @@
}
}
.m-pro--settings--note {
.m-proSettings__note {
@include m-theme() {
color: themed($m-grey-400);
}
}
.m-pro--settings--flex-inputs {
.m-proSettings__flexInputs {
display: flex;
flex-direction: row;
align-items: center;
......@@ -129,11 +129,11 @@
}
}
.m-pro--settings--field-spinner {
.m-proSettings__fieldSpinner {
margin-left: 0.65em;
}
.m-pro--settings--error {
.m-proSettings__error {
margin: 16px 0;
font-size: 20px;
@include m-theme() {
......
......@@ -46,7 +46,8 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
protected cd: ChangeDetectorRef,
protected title: MindsTitle,
protected site: SiteService
) {}
) {
}
ngOnInit() {
this.param$ = this.route.params.subscribe(params => {
......@@ -82,6 +83,7 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
}
async save() {
this.error = null;
this.inProgress = true;
this.detectChanges();
......