[frontend] Add faqs, text and footer
This commit is contained in:
parent
e370270ed6
commit
9091654cc0
|
@ -2,3 +2,4 @@
|
|||
<div class="content">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<app-footer></app-footer>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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();
|
||||
});
|
||||
});
|
|
@ -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 {}
|
||||
}
|
|
@ -51,3 +51,7 @@
|
|||
</div>
|
||||
<div class="banner"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="banner"></div>
|
||||
<app-faq></app-faq>
|
||||
</div>
|
||||
|
|
57
kibicara-frontend/src/app/homepage/faq/faq.component.html
Normal file
57
kibicara-frontend/src/app/homepage/faq/faq.component.html
Normal 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>
|
16
kibicara-frontend/src/app/homepage/faq/faq.component.scss
Normal file
16
kibicara-frontend/src/app/homepage/faq/faq.component.scss
Normal 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;
|
||||
}
|
||||
}
|
24
kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts
Normal file
24
kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts
Normal 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();
|
||||
});
|
||||
});
|
12
kibicara-frontend/src/app/homepage/faq/faq.component.ts
Normal file
12
kibicara-frontend/src/app/homepage/faq/faq.component.ts
Normal 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 {}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<mat-toolbar color="primary"> </mat-toolbar>
|
|
@ -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();
|
||||
});
|
||||
});
|
12
kibicara-frontend/src/app/shared/footer/footer.component.ts
Normal file
12
kibicara-frontend/src/app/shared/footer/footer.component.ts
Normal 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 {}
|
||||
}
|
|
@ -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,
|
||||
|
|
Loading…
Reference in a new issue