Skip to content
Commits on Source (3)
Hide whitespace changes
Inline Side-by-side
src/app/modules/pro/channel/channel.component.html
View file @ ea86543f
......@@ -23,6 +23,8 @@
<ng-template #authLink>
<a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
</ng-template>
<m-pro-user-menu></m-pro-user-menu>
</div>
<div class="m-proChannel__body">
......
src/app/modules/pro/channel/list/list.component.html
View file @ ea86543f
......@@ -26,6 +26,9 @@
See more
</li>
</ul>
<ng-container *ngIf="(feedsService.feed | async) && (feedsService.feed | async).length">
<div class="m-proChannelListContent__noContent" i18n>There's nothing to show</div>
</ng-container>
<ng-container *ngIf="type === 'activities'">
<pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
<!-- talk to Emi about this -->
......
src/app/modules/pro/channel/list/list.component.scss
View file @ ea86543f
......@@ -17,6 +17,17 @@ m-pro--channel-list {
margin-top: 100px;
height: fit-content;
}
}
.m-proChannelListContent__noContent {
max-width: 200px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
padding: 8px;
color: #90a4ae!important;
background-color: #eceff1!important;
}
ul.m-proChannelListContent__list {
......
src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html 0 → 100644
View file @ ea86543f
<div class="m-pro-user-menu m-dropdown">
<a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
<ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
<li
class="m-dropdownList__item m-pro-user-menuDropdown__Item"
(click)="closeMenu()"
>
<a [routerLink]="['/', getCurrentUser()?.username]">
<i class="material-icons">remove_red_eye</i>
<span i18n>View on Minds</span>
</a>
</li>
<li
class="m-dropdownList__item m-user-menuDropdown__Item"
*ngIf="getCurrentUser()"
(click)="closeMenu()"
>
<a routerLink="/logout">
<i class="material-icons">exit_to_app</i>
<span i18n>Logout</span>
</a>
</li>
</ul>
</div>
<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>
\ No newline at end of file
src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss 0 → 100644
View file @ ea86543f
m-pro-user-menu {
display: inline-block;
position: relative;
cursor: pointer;
}
.m-pro-user-menu__Dropdown {
list-style: none;
margin: 34px 0 0;
@include m-theme(){
background-color: themed('m-white');
color: themed('m-grey-700');
}
li:hover {
@include m-theme(){
background-color: rgba(themed('m-grey-50'), 0.5);
}
}
a {
font-size: 14px!important;
padding: 0px!important;
color: #555!important;
}
i {
color: #555!important;
}
}
src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts 0 → 100644
View file @ ea86543f
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
import { Session } from "../../../../services/session";
import { ThemeService } from "../../../../common/services/theme.service";
@Component({
selector: 'm-pro-user-menu',
templateUrl: 'pro-user-menu.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProUserMenuComponent implements OnInit {
isOpen: boolean = false;
constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
}
getCurrentUser() {
return this.session.getLoggedInUser();
}
ngOnInit() {
this.session.isLoggedIn(() => this.detectChanges());
}
toggleMenu() {
this.isOpen = !this.isOpen;
}
closeMenu() {
this.isOpen = false;
}
detectChanges() {
this.cd.markForCheck();
this.cd.detectChanges();
this.themeService.applyThemePreference();
}
}
src/app/modules/pro/channel/signup/signup.component.scss
View file @ ea86543f
@import "defaults";
m-pro--channel-signup {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-end;
}
.m-ProChannelSignup--hero{
position:relative;
//background-image: url(/assets/photos/circles.png);
background-image: url("<%= APP_CDN %>/assets/videos/what-1/what-1.jpg");
background-size: cover;
background-position: center center;
.m-ProChannelSignup--hero--inner {
display: flex;
flex-direction: row;
align-items: center;
padding: 100px 52px;
margin: auto;
max-width: 1280px;
@media screen and (max-width: 1000px){
padding: 120px 16px;
flex-wrap: wrap;
}
@media screen and (max-width: $max-mobile) {
padding: 62px 0px;
}
.m-ProChannelSignup--app-buttons {
display: flex;
justify-content: flex-start;
* {
margin-left: 2px;
}
.m-ProChannelSignup--app-buttons__iosBanner {
> a > img {
height: 48px;
@media screen and (max-width: 480px) {
height: 32px;
}
}
}
@media screen and (max-width: 480px) {
.m-androidApp__download {
zoom: 0.65;
}
}
}
}
.m-ProChannelSignup--hero--video {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
video {
position: absolute;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
}
.m-ProChannelSignup--hero--overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
@include m-theme(){
background-color: rgba(themed($m-black),0.4);
}
}
.m-ProChannelSignup--hero--slogans{
flex: 2;
h1, h3, h4 {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
margin: 0;
@include m-theme(){
color: themed($m-white);
}
}
h1 {
font-size: 80px;
font-weight: 600;
letter-spacing: 1.25px;
line-height: 1;
//color: rgba(255,255,255,0.85);
//color: rgba(0,0,0,0.85);
@media screen and (max-width: 720px){
font-size: 42px;
}
}
h3 {
font-size: 26px;
//color: rgba(255, 255, 255, 0.8);
font-weight: 400;
letter-spacing: 0.25px;
line-height: 1.25;
margin-top: 16px;
padding-right: 70px;
@media screen and (max-width: 720px){
padding-right: 8px;
font-size: 16px;
}
}
z-index: 2;
}
.m-ProChannelSignup--signup{
flex: 1;
margin-left: 16px;
@media screen and (max-width: 1000px){
flex-basis: 100%;
margin-left: 0;
}
minds-form-register{
.mdl-card{
background:transparent;
padding:0;
}
.mdl-card__title{
//color: #FFF !important;
display:none;
}
.m-login-box input{
border:0;
border-radius:3px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: 'Roboto', Helvetica, sans-serif;
letter-spacing: 1px;
//box-shadow: 0 0 6px rgba(255,255,255,0.22);
@include m-theme(){
background:rgba(themed($m-white),0.9);
color:themed($m-grey-800);
border:1px solid rgba(themed($m-white),0.25);
}
&::placeholder{
@include m-theme(){
color: themed($m-grey-800);
}
}
}
.m-login-box .mdl-checkbox__box-outline {
@include m-theme(){
border-color: themed($m-white);
}
}
.m-btn--action {
margin-right: 16px;
@include m-theme(){
color: themed($m-white) !important;
border: 1px solid themed($m-white);
}
}
.mdl-card__actions{
flex-direction:row-reverse;
padding-left: 8px;
.m-register-tac{
padding-right:16px;
font-family: 'Roboto', Helvetica, sans-serif;
@include m-theme(){
color: rgba(themed($m-white),0.8);
}
a {
@include m-theme(){
color: themed($m-white);
}
}
}
}
.password-help {
padding: 12px;
border-radius: 4px;
font-weight: 300;
@include m-theme(){
color: themed($m-white);
background-color: themed($m-black);
}
}
.m-register-btn {
font-family: 'Roboto', Helvetica, sans-serif;
letter-spacing: 1.25px;
background: transparent;
font-size: 12px;
box-shadow: none !important;
@include m-theme(){
border: 1px solid themed($m-grey-50);
}
}
}
z-index: 2;
}
@media (max-width: $max-mobile){
.m-ProChannelSignup--grid{
.m-ProChannelSignup--titles{
h1{
font-size: 32px;
line-height:32px;
//font-weight: 200;
//margin:16px;
padding:0;
padding:0 $minds-padding*2;
}
h3{
font-size:16px;
//font-weight: 200;
line-height:16px;
padding:16px 16px 0;
}
}
}
.m-ProChannelSignup--titles {
//display:none;
}
.m-app-links {
//max-width:60%;
margin:$minds-margin;
a{
flex:auto;
}
}
}
}
\ No newline at end of file
src/app/modules/pro/channel/signup/signup.component.ts
View file @ ea86543f
......@@ -6,15 +6,24 @@ import { Session } from "../../../../services/session";
@Component({
selector: 'm-pro--channel-signup',
template: `
<div class="m-ProChannelSignup__Text">
<!-- TODO: this text should be dynamic -->
<h2>Independent.</h2>
<h2>Community-owned.</h2>
<h2>Decentralized News</h2>
</div>
<div class="m-ProChannelSignup__SignupForm">
<minds-form-register (done)="registered()"></minds-form-register>
</div>
<section class="m-ProChannelSignup--hero">
<div class="m-ProChannelSignup--hero--inner">
<div class="m-ProChannelSignup--hero--slogans">
<!-- TODO: this text should be dynamic -->
<h1>Independent.</h1>
<h1>Community-owned.</h1>
<h1>Decentralized News</h1>
</div>
<div class="m-ProChannelSignup--signup">
<minds-form-register (done)="registered()"></minds-form-register>
</div>
</div>
</section>
`
})
......
src/app/modules/pro/pro.module.ts
View file @ ea86543f
......@@ -14,6 +14,7 @@ import { ProChannelDonateComponent } from './channel/donate/donate.component';
import { ProTileComponent } from "./channel/tile/tile.component";
import { NewsfeedModule } from "../newsfeed/newsfeed.module";
import { ProSettingsComponent } from './settings/settings.component';
import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
const routes: Routes = [
{
......@@ -76,6 +77,7 @@ const routes: Routes = [
ProChannelSignupComponent,
ProChannelListComponent,
ProChannelDonateComponent,
ProUserMenuComponent
],
exports: [],
entryComponents: [
......