From 9091654cc0bffb323c0a2e1dbf73ca02a84b2473 Mon Sep 17 00:00:00 2001 From: Cathy Hu Date: Wed, 9 Sep 2020 13:22:20 +0200 Subject: [PATCH] [frontend] Add faqs, text and footer --- kibicara-frontend/src/app/app.component.html | 1 + kibicara-frontend/src/app/app.module.ts | 2 + .../board/platforms/platforms.component.html | 16 +++++ .../board/platforms/platforms.component.scss | 11 +++ .../src/app/dashboard/dashboard.module.ts | 2 + .../dashboard/hoods/faq/faq.component.html | 35 ++++++++++ .../dashboard/hoods/faq/faq.component.scss | 17 +++++ .../dashboard/hoods/faq/faq.component.spec.ts | 24 +++++++ .../app/dashboard/hoods/faq/faq.component.ts | 12 ++++ .../app/dashboard/hoods/hoods.component.html | 4 ++ .../src/app/homepage/faq/faq.component.html | 57 +++++++++++++++ .../src/app/homepage/faq/faq.component.scss | 16 +++++ .../app/homepage/faq/faq.component.spec.ts | 24 +++++++ .../src/app/homepage/faq/faq.component.ts | 12 ++++ .../src/app/homepage/homepage.component.html | 13 ++-- .../src/app/homepage/homepage.component.scss | 17 +++-- .../app/hoodspage/hoodspage.component.scss | 10 ++- .../organizerspage.component.html | 70 ++++++++----------- .../organizerspage.component.scss | 17 ++++- .../twitter-bot-card.component.html | 2 +- .../app/shared/footer/footer.component.html | 1 + .../app/shared/footer/footer.component.scss | 0 .../shared/footer/footer.component.spec.ts | 24 +++++++ .../src/app/shared/footer/footer.component.ts | 12 ++++ .../src/app/shared/shared.module.ts | 3 + 25 files changed, 337 insertions(+), 65 deletions(-) create mode 100644 kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.html create mode 100644 kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.scss create mode 100644 kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.spec.ts create mode 100644 kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.ts create mode 100644 kibicara-frontend/src/app/homepage/faq/faq.component.html create mode 100644 kibicara-frontend/src/app/homepage/faq/faq.component.scss create mode 100644 kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts create mode 100644 kibicara-frontend/src/app/homepage/faq/faq.component.ts create mode 100644 kibicara-frontend/src/app/shared/footer/footer.component.html create mode 100644 kibicara-frontend/src/app/shared/footer/footer.component.scss create mode 100644 kibicara-frontend/src/app/shared/footer/footer.component.spec.ts create mode 100644 kibicara-frontend/src/app/shared/footer/footer.component.ts diff --git a/kibicara-frontend/src/app/app.component.html b/kibicara-frontend/src/app/app.component.html index 7e1ab48..4a6e26e 100644 --- a/kibicara-frontend/src/app/app.component.html +++ b/kibicara-frontend/src/app/app.component.html @@ -2,3 +2,4 @@
+ diff --git a/kibicara-frontend/src/app/app.module.ts b/kibicara-frontend/src/app/app.module.ts index 5c70591..ee86cd1 100644 --- a/kibicara-frontend/src/app/app.module.ts +++ b/kibicara-frontend/src/app/app.module.ts @@ -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, diff --git a/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html b/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html index d8555c8..c1512bd 100644 --- a/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html +++ b/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html @@ -1,3 +1,19 @@ +
+ + + + + info +
+ How to use add platforms to distribute messages +
+ + +

+ + +
+
diff --git a/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss b/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss index 400bd40..49633fd 100644 --- a/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss +++ b/kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss @@ -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; +} diff --git a/kibicara-frontend/src/app/dashboard/dashboard.module.ts b/kibicara-frontend/src/app/dashboard/dashboard.module.ts index 1d70c15..940d1ad 100644 --- a/kibicara-frontend/src/app/dashboard/dashboard.module.ts +++ b/kibicara-frontend/src/app/dashboard/dashboard.module.ts @@ -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, diff --git a/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.html b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.html new file mode 100644 index 0000000..44391c0 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.html @@ -0,0 +1,35 @@ +
+

FAQ

+ + + + I just created an account. How do I proceed? + +

+ + + + My messages don't not get broadcasted, why? + +

+ + + + Someone is spamming my hood, how do I stop it? + +

+ + + + My hood page is empty, why? + +

+ + +
diff --git a/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.scss b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.scss new file mode 100644 index 0000000..12a4bd8 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.scss @@ -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; + } +} diff --git a/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.spec.ts b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.spec.ts new file mode 100644 index 0000000..c6c6dc4 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FaqComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FaqComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.ts b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.ts new file mode 100644 index 0000000..14eb0a1 --- /dev/null +++ b/kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.ts @@ -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 {} +} diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html index 54e7b46..8c76f89 100644 --- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html +++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.html @@ -51,3 +51,7 @@
+
+ + +
diff --git a/kibicara-frontend/src/app/homepage/faq/faq.component.html b/kibicara-frontend/src/app/homepage/faq/faq.component.html new file mode 100644 index 0000000..328970c --- /dev/null +++ b/kibicara-frontend/src/app/homepage/faq/faq.component.html @@ -0,0 +1,57 @@ +
+

FAQ

+ + + + What is a Kibicara hood? + +

+ + + + What is a public hood page? + +

+ + + + What is a hood admin? + +

+ + + + How can I use Kibicara? + +

+ + + + I want to be included in a Kibicara hood. How? + +

+ + + + I want to be a hood admin. How? + +

+ + + + Are my messages anonymous? + +

+ + + + What information do you save about me? + +

+ + +
diff --git a/kibicara-frontend/src/app/homepage/faq/faq.component.scss b/kibicara-frontend/src/app/homepage/faq/faq.component.scss new file mode 100644 index 0000000..f704c13 --- /dev/null +++ b/kibicara-frontend/src/app/homepage/faq/faq.component.scss @@ -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; + } +} diff --git a/kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts b/kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts new file mode 100644 index 0000000..c6c6dc4 --- /dev/null +++ b/kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FaqComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FaqComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/kibicara-frontend/src/app/homepage/faq/faq.component.ts b/kibicara-frontend/src/app/homepage/faq/faq.component.ts new file mode 100644 index 0000000..14eb0a1 --- /dev/null +++ b/kibicara-frontend/src/app/homepage/faq/faq.component.ts @@ -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 {} +} diff --git a/kibicara-frontend/src/app/homepage/homepage.component.html b/kibicara-frontend/src/app/homepage/homepage.component.html index e52887b..9a94249 100644 --- a/kibicara-frontend/src/app/homepage/homepage.component.html +++ b/kibicara-frontend/src/app/homepage/homepage.component.html @@ -56,15 +56,16 @@

Gather a new hood!

If you want to create your own hood for your community, you can read our - FAQ for hood-admins. As a hood admin - you can create a new real-life social network by sharing the - public page of your hood and start - networking with your real life neighbors. + page for hood-admins.

Contribute!

- 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 Github.
+ +
+ + diff --git a/kibicara-frontend/src/app/homepage/homepage.component.scss b/kibicara-frontend/src/app/homepage/homepage.component.scss index 9fd4100..4e72f4e 100644 --- a/kibicara-frontend/src/app/homepage/homepage.component.scss +++ b/kibicara-frontend/src/app/homepage/homepage.component.scss @@ -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; } } diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss index 6e7f600..fa8ba37 100644 --- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss +++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss @@ -11,7 +11,6 @@ .page { padding-left: 10%; padding-right: 10%; - margin-bottom: 3%; } .list { @@ -46,20 +45,19 @@ 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%; } } // color can be changed, i just chose a slightly better color than dark blue a { color: #673ab7; -} \ No newline at end of file +} diff --git a/kibicara-frontend/src/app/organizerspage/organizerspage.component.html b/kibicara-frontend/src/app/organizerspage/organizerspage.component.html index 4b23c22..1c14017 100644 --- a/kibicara-frontend/src/app/organizerspage/organizerspage.component.html +++ b/kibicara-frontend/src/app/organizerspage/organizerspage.component.html @@ -2,55 +2,41 @@
- 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. +

Build your community

+ Hood admins build a real life community by creating a network of people - be + it neighborhood communities, interest-based groups or any other squads!
- 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. +

Customize your hood

+ 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.
- 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. +

Share the information

+ 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 public hood page.
-

- 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. -

+
+

How does it work?

+
    +
  1. + Create a Kibicara + hood admin account. +
    2. +
  2. + Log in to your + account and create a hood. +
    3. +
  3. Add platform connections to your hood.
    4. +
  4. Provide a description for your hood page.
    5. +
  5. (Optional) Create custom filters for messages.
    6. +
  6. Share your public hood page with your community's members!
    7. +
+
Register as hood admin!
- -
-
- 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. -
-
- 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. -
-
diff --git a/kibicara-frontend/src/app/organizerspage/organizerspage.component.scss b/kibicara-frontend/src/app/organizerspage/organizerspage.component.scss index 14a9212..86c766b 100644 --- a/kibicara-frontend/src/app/organizerspage/organizerspage.component.scss +++ b/kibicara-frontend/src/app/organizerspage/organizerspage.component.scss @@ -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; +} diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html index bb3d08a..6a6e0a6 100644 --- a/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html +++ b/kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html @@ -6,7 +6,7 @@ Twitter