ticketfrei/ticketfrei3
8
1
Fork 0
Code Issues 11 Pull requests 2 Projects 1 Releases Wiki Activity

[frontend] Refactor public pages css

Browse source
This commit is contained in:
Cathy Hu 2020-09-09 15:51:28 +02:00
parent b1997e46c2
commit d92942c8bd
12 changed files with 93 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
kibicara-frontend/src/app/app.component.html
View file

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

1
kibicara-frontend/src/app/app.component.scss
View file

@ -2,4 +2,5 @@
.content {
margin-top: $toolbar-height;
min-height: 100%;
}

26
kibicara-frontend/src/app/public-pages/homepage/homepage.component.html
View file

@ -1,7 +1,7 @@
<div class="container">
<div class="heading">
<h1 class="h1">Kibicara</h1>
<p class="text">
<p class="howto-container-2-text">
Kibicara hoods are connecting your local community - while you use your
favorite messenger.
</p>
@ -10,9 +10,9 @@
<div class="banner"></div>
</div>
<div class="howto-container">
<div class="howto">
<h2>Cross-platform</h2>
<div class="howto-container-3">
<div class="big-paragraph-font">
<h2 class="big-h2-font">Cross-platform</h2>
<p>
Kibicara is a bridge between multiple messaging platforms with the goal of
providing real-time broadcast messages for real-life communities. Kibicara
@ -20,16 +20,16 @@
different platforms.
</p>
</div>
<div class="howto">
<h2>Community-driven</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">Community-driven</h2>
<p>
Kibicara provides a connection to your (local) community, without the need
to install new software or to create new accounts. Just use the platforms
you already know and love and subscribe to your Kibicara hood!
</p>
</div>
<div class="howto">
<h2>Inclusive and easy</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">Inclusive and easy</h2>
<p>
Messages sent with Kibicara reach people via Telegram, Twitter and even
E-Mail - perfect for announcing the next neighborhood meetings, creating
@ -41,7 +41,7 @@
<div class="banner2"></div>
<div class="container">
<p class="text">
<p class="howto-container-2-text">
Kibicara is a bridge between multiple messaging platforms with the goal of
providing broadcast communication for (local) communities. Hoods are
community-administrated instances of Kibicara, being able to customize
@ -53,13 +53,13 @@
</div>
<div class="howto-container-2">
<div class="howto">
<h2>Gather a new hood!</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">Gather a new hood!</h2>
If you want to create your own hood for your community, you can read our
<a [routerLink]="['/organizers']">page</a> for hood-admins.
</div>
<div class="howto">
<h2>Contribute!</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">Contribute!</h2>
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>.

44
kibicara-frontend/src/app/public-pages/homepage/homepage.component.scss
View file

@ -9,14 +9,6 @@
}
}
.text {
padding-top: 40px;
padding-bottom: 30px;
color: white;
font-size: 1.4375rem;
line-height: 1.875rem;
}
.container {
background-color: #673ab7;
display: grid;
@ -46,31 +38,6 @@
margin-bottom: 5%;
}
.howto-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
margin-bottom: 200px;
margin-top: 100px;
}
}
.howto-container-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
gap: 10%;
margin-top: 100px;
margin-bottom: 200px;
}
}
.banner2 {
background: url("../../../assets/hoods3.jpg");
background-size: 100%;
@ -80,17 +47,6 @@
min-height: 200px;
}
.howto {
color: grey;
font-size: 1.4375rem;
line-height: 1.875rem;
}
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
// color can be changed, i just chose a slightly better color than dark blue
a {
color: #673ab7;

4
kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.html
View file

@ -1,7 +1,7 @@
<app-heading-one [title]="hood.name"></app-heading-one>
<div class="container">
<div class="public-margin container">
<div class="markdown">
<markdown class="markdown" [data]="hood.landingpage"></markdown>
<markdown [data]="hood.landingpage"></markdown>
</div>
<app-platforms-info-page [hoodId]="hoodId"></app-platforms-info-page>

8
kibicara-frontend/src/app/public-pages/hoodpage/hoodpage.component.scss
View file

@ -1,16 +1,8 @@
.container {
display: grid;
margin-left: 10%;
margin-right: 10%;
margin-bottom: 5%;
gap: 30px;
}
.heading {
font-size: 2.3125rem;
margin-bottom: 20px;
}
.markdown {
margin-top: 20px;
}

4
kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.html
View file

@ -1,11 +1,11 @@
<app-heading-one [title]="title"></app-heading-one>
<div class="page">
<div class="description">
<p class="text">
<p class="big-paragraph-font text">
Enter a search term below to find your local community - or create
<a [routerLink]="['/organizers']">a new hood! </a>
</p>
<div class="banner"></div>
<img class="banner" src="assets/hoods1.jpg" />
</div>
<mat-form-field class="searchbar">
<mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>

39
kibicara-frontend/src/app/public-pages/hoodspage/hoodspage.component.scss
View file

@ -11,6 +11,7 @@
.page {
padding-left: 10%;
padding-right: 10%;
padding-bottom: 5%;
}
.list {
@ -19,17 +20,11 @@
margin-right: 30px;
}
h1 {
text-align: center;
text-transform: uppercase;
font-size: 3.4rem;
color: white;
font-weight: bold;
}
.banner {
background: url("../../../assets/hoods1.jpg");
background-size: 100%;
max-width: 100%;
max-height: 200px;
overflow: hidden;
object-fit: cover;
width: 100%;
}
@ -37,27 +32,13 @@ h1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 2%;
justify-items: center;
align-items: center;
@media (max-width: 600px) {
grid-template-columns: 1fr;
margin-top: 5%;
margin-bottom: 5%;
gap: 0px;
}
margin-bottom: 20px;
}
.text {
padding-top: 15%;
padding-bottom: 15%;
color: gray;
font-size: 1.4375rem;
line-height: 1.875rem;
@media (max-width: 600px) {
grid-template-columns: 1fr;
text-align: center;
padding-bottom: 3%;
}
}
// color can be changed, i just chose a slightly better color than dark blue
a {
color: #673ab7;
}

18
kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.html
View file

@ -1,19 +1,19 @@
<app-heading-one [title]="title"></app-heading-one>
<div class="howto-container">
<div class="howto">
<h2>Build your community</h2>
<div class="howto-container-3">
<div class="big-paragraph-font">
<h2 class="big-h2-font">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">
<h2>Customize your hood</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">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">
<h2>Share the information</h2>
<div class="big-paragraph-font">
<h2 class="big-h2-font">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>.
@ -21,8 +21,8 @@
</div>
<div class="container">
<div class="text">
<h2>How does it work?</h2>
<div class="howto-container-2-text">
<h2 class="big-h2-font">How does it work?</h2>
<ol>
<li>
Create a Kibicara

22
kibicara-frontend/src/app/public-pages/organizerspage/organizerspage.component.scss
View file

@ -1,20 +1,3 @@
.howto-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
margin-bottom: 100px;
}
}
.howto {
color: grey;
font-size: 1.4375rem;
line-height: 1.875rem;
}
.container {
background-color: #673ab7;
display: grid;
@ -40,11 +23,6 @@
line-height: 1.875rem;
}
h2 {
font-weight: bold;
font-size: 1.6375rem;
}
.white-a {
color: white;
text-decoration: underline;

1
kibicara-frontend/src/app/public-pages/public-pages.component.html
View file

@ -1,2 +1 @@
<router-outlet></router-outlet>
<app-footer></app-footer>

52
kibicara-frontend/src/sass/styles.scss
View file

@ -22,3 +22,55 @@ body {
a {
text-decoration: none;
}
/* public pages start */
.howto-container-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
margin-bottom: 200px;
margin-top: 100px;
}
}
.howto-container-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5%;
margin: 5% 10% 5% 10%;
@media (max-width: 800px) {
grid-template-columns: 1fr;
gap: 10%;
margin-top: 100px;
margin-bottom: 200px;
}
}
.big-paragraph-font {
color: grey;
font-size: 1.4375rem;
line-height: 1.875rem;
}
.big-h2-font {
font-weight: bold !important;
font-size: 1.6375rem !important;
}
.howto-container-2-text {
padding-top: 40px;
padding-bottom: 30px;
color: white;
font-size: 1.4375rem;
line-height: 1.875rem;
}
.public-margin {
margin-left: 10%;
margin-right: 10%;
}
/* public pages end */