[frontend] Add faqs, text and footer

This commit is contained in:
Cathy Hu 2020-09-09 13:22:20 +02:00
parent e370270ed6
commit 9091654cc0
25 changed files with 337 additions and 65 deletions

View file

@ -2,3 +2,4 @@
<div class="content">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

View file

@ -26,6 +26,7 @@ import { ErrorInterceptor } from './core/auth/error.interceptor';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MarkdownModule } from 'ngx-markdown';
import { PlatformsModule } from './platforms/platforms.module';
import { FaqComponent } from './homepage/faq/faq.component';
@NgModule({
declarations: [
@ -37,6 +38,7 @@ import { PlatformsModule } from './platforms/platforms.module';
LoginComponent,
RegisterComponent,
ConfirmComponent,
FaqComponent,
],
imports: [
BrowserModule,

View file

@ -1,3 +1,19 @@
<div class="explanation">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon class="info-button">info</mat-icon>
<div class="info-title">
How to use add platforms to distribute messages
</div>
</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="platforms-container">
<app-email-settings [hoodId]="hoodId"></app-email-settings>
<app-twitter-settings [hoodId]="hoodId"></app-twitter-settings>

View file

@ -9,3 +9,14 @@
grid-template-columns: 1fr;
}
}
.explanation {
margin: 1%;
margin-top: 20px;
margin-bottom: 20px;
}
.info-title {
margin-top: 2px;
margin-left: 10px;
}

View file

@ -14,6 +14,7 @@ import { HttpClient } from '@angular/common/http';
import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog.component';
import { PlatformsModule } from '../platforms/platforms.module';
import { SettingsComponent } from './board/settings/settings.component';
import { FaqComponent } from './hoods/faq/faq.component';
@NgModule({
declarations: [
@ -27,6 +28,7 @@ import { SettingsComponent } from './board/settings/settings.component';
BadwordsComponent,
NewHoodDialogComponent,
SettingsComponent,
FaqComponent,
],
imports: [
DashboardRoutingModule,

View file

@ -0,0 +1,35 @@
<div class="container">
<h2>FAQ</h2>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>I just created an account. How do I proceed?</mat-panel-title
>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>My messages don't not get broadcasted, why?</mat-panel-title
>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>Someone is spamming my hood, how do I stop it?</mat-panel-title
>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>My hood page is empty, why?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
</mat-accordion>
</div>

View file

@ -0,0 +1,17 @@
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
.container {
padding: 5% 10% 5% 10%;
min-height: 300px;
gap: 50px;
height: 70%;
align-items: center;
@media (max-width: 600px) {
padding-top: 10%;
grid-template-columns: 1fr;
text-align: left;
}
}

View file

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FaqComponent } from './faq.component';
describe('FaqComponent', () => {
let component: FaqComponent;
let fixture: ComponentFixture<FaqComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FaqComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FaqComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-faq',
templateUrl: './faq.component.html',
styleUrls: ['./faq.component.scss'],
})
export class FaqComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View file

@ -51,3 +51,7 @@
</div>
<div class="banner"></div>
</div>
<div class="container">
<div class="banner"></div>
<app-faq></app-faq>
</div>

View file

@ -0,0 +1,57 @@
<div class="container">
<h2>FAQ</h2>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>What is a Kibicara hood?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>What is a public hood page?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>What is a hood admin?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>How can I use Kibicara?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>I want to be included in a Kibicara hood. How?</mat-panel-title
>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>I want to be a hood admin. How?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Are my messages anonymous?</mat-panel-title>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title
>What information do you save about me?</mat-panel-title
>
</mat-expansion-panel-header>
<p></p>
</mat-expansion-panel>
</mat-accordion>
</div>

View file

@ -0,0 +1,16 @@
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
.container {
padding: 5% 10% 5% 10%;
gap: 50px;
height: 70%;
align-items: center;
@media (max-width: 600px) {
padding-top: 10%;
grid-template-columns: 1fr;
text-align: left;
}
}

View file

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FaqComponent } from './faq.component';
describe('FaqComponent', () => {
let component: FaqComponent;
let fixture: ComponentFixture<FaqComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FaqComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FaqComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-faq',
templateUrl: './faq.component.html',
styleUrls: ['./faq.component.scss'],
})
export class FaqComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View file

@ -56,15 +56,16 @@
<div class="howto">
<h2>Gather a new hood!</h2>
If you want to create your own hood for your community, you can read our
<a [routerLink]="['/organizers']">FAQ</a> for hood-admins. As a hood admin
you can create a new real-life social network by sharing the
<a [routerLink]="['/hoods']">public page</a> of your hood and start
networking with your real life neighbors.
<a [routerLink]="['/organizers']">page</a> for hood-admins.
</div>
<div class="howto">
<h2>Contribute!</h2>
Kibicara is Free and Open Source software (FOSS). If you want to contribute
to the development of Kibicara or report a bug check out our
Kibicara is Open Source software! If you want to contribute to the
development of Kibicara check out our
<a href="https://github.com/acipm/kibicara">Github</a>.
</div>
</div>
<div class="banner2"></div>
<app-faq></app-faq>

View file

@ -29,7 +29,7 @@
@media (max-width: 600px) {
padding-top: 10%;
grid-template-columns: 1fr;
text-align: center;
text-align: left;
}
}
@ -50,10 +50,11 @@
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5%;
margin: 10%;
@media (max-width: 600px) {
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
gap: 1%;
margin-bottom: 200px;
margin-top: 100px;
}
}
@ -61,10 +62,12 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5%;
margin: 10%;
@media (max-width: 600px) {
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
gap: 1%;
gap: 10%;
margin-top: 100px;
margin-bottom: 200px;
}
}

View file

@ -11,7 +11,6 @@
.page {
padding-left: 10%;
padding-right: 10%;
margin-bottom: 3%;
}
.list {
@ -46,16 +45,15 @@ h1 {
}
.text {
padding-top: 40px;
padding-bottom: 30px;
padding-top: 15%;
padding-bottom: 15%;
color: gray;
font-size: 1.4375rem;
line-height: 1.875rem;
@media (max-width: 600px) {
grid-template-columns: 1fr;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
padding-bottom: 3%;
}
}

View file

@ -2,55 +2,41 @@
<div class="howto-container">
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
<h2>Build your community</h2>
Hood admins build a real life community by creating a network of people - be
it neighborhood communities, interest-based groups or any other squads!
</div>
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
<h2>Customize your hood</h2>
Kibicara provides the technology for hood admins to connect people over
different messaging platforms. Hood admins customize their Kibicara hood to
fit their community's needs.
</div>
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
<h2>Share the information</h2>
Hood admins share the platform-specific broadcasting endpoints with their
community and provide the information and technology to its members. This is
done by providing a <a [routerLink]="['/hoods']">public hood page</a>.
</div>
</div>
<div class="container">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<div class="text">
<h2>How does it work?</h2>
<ol>
<li>
Create a Kibicara
<a class="white-a" [routerLink]="['/register']">hood admin account</a>.
</li>
<li>
<a class="white-a" [routerLink]="['/register']">Log in</a> to your
account and create a hood.
</li>
<li>Add platform connections to your hood.</li>
<li>Provide a description for your hood page.</li>
<li>(Optional) Create custom filters for messages.</li>
<li>Share your public hood page with your community's members!</li>
</ol>
</div>
<a mat-raised-button [routerLink]="['/register']">Register as hood admin!</a>
</div>
<div class="howto-container">
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
<div class="howto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
</div>
</div>

View file

@ -3,9 +3,9 @@
grid-template-columns: 1fr 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 600px) {
@media (max-width: 800px) {
grid-template-columns: 1fr;
gap: 1%;
margin-bottom: 100px;
}
}
@ -27,7 +27,8 @@
@media (max-width: 600px) {
padding-top: 10%;
grid-template-columns: 1fr;
text-align: center;
gap: 0px;
text-align: left;
}
}
@ -38,3 +39,13 @@
font-size: 1.4375rem;
line-height: 1.875rem;
}
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
.white-a {
color: white;
text-decoration: underline;
}

View file

@ -6,7 +6,7 @@
Twitter
<button mat-icon-button aria-label="How to use">
<mat-icon
matTooltip="How to send and receive hood broadcast messages with twitteu"
matTooltip="How to send and receive hood broadcast messages with twitter"
class="info-button"
(click)="onInfoClick()"
>info</mat-icon

View file

@ -0,0 +1 @@
<mat-toolbar color="primary"> </mat-toolbar>

View file

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [FooterComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View file

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
})
export class FooterComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View file

@ -9,6 +9,7 @@ import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
import { OverlayComponent } from './overlay/overlay.component';
import { HeadingOneComponent } from './heading-one/heading-one.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({
declarations: [
@ -17,6 +18,7 @@ import { HeadingOneComponent } from './heading-one/heading-one.component';
YesNoDialogComponent,
OverlayComponent,
HeadingOneComponent,
FooterComponent,
],
imports: [
MaterialModule,
@ -30,6 +32,7 @@ import { HeadingOneComponent } from './heading-one/heading-one.component';
ToolbarComponent,
NotFoundComponent,
HeadingOneComponent,
FooterComponent,
MaterialModule,
ReactiveFormsModule,
FormsModule,