Commit 412d90aa authored by Morbi's avatar Morbi

some techcultivation styling

parent 433923b8
Pipeline #35 passed with stages
in 4 minutes and 7 seconds
# Polymer Sangha frontend
# Polymer Sangha donation frontend
All commands are bundled in package.json, node and npm should be installed.
All commands are in the script section of the [package.json](package.json), nodejs and npm should be installed.
```
You can run one of the prebuilt docker images with `docker run -p 8080:80 -e API_URL=https://sandbox.api.sangha.techcultivation.org/v1 registry.gitlab.techcultivation.org/sangha/sangha-donate`.
## Development
```bash
# get dependencies
npm install
......@@ -14,10 +18,14 @@ npm start
# get new web-component
npm run wcinstall paper-checkbox
```
# build
npm build && docker build -t image_name .
## Build with docker
# start docker container
docker run -p 8080:80 -e API_URL=https://sandbox.api.sangha.techcultivation.org/v1 registry.gitlab.techcultivation.org/sangha/sangha-donate
```bash
npm build && docker build -t image_name .
```
## Customize the look and feel
This project is based on the material style elements by Google to fit the [techcultivation](https://techcultivation.org) design it ships with a modified version of [paper-styles](https://github.com/PolymerElements/paper-styles) the [techcultivation-paper-styles](https://gitlab.techcultivation.org/sangha-webcomponents/techcultivation-paper-styles). To get the default material design just overwrite the [bower file](bower.json) and set `--primary-color` to your own needs.
......@@ -18,10 +18,10 @@
"paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
"paper-item": "PolymerElements/paper-item#^2.0.0",
"paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
"paper-styles": "https://gitlab.techcultivation.org/sangha-webcomponents/techcultivation-paper-styles.git#^2.0.2",
"paper-tabs": "PolymerElements/paper-tabs#^2.0.0",
"polymer": "Polymer/polymer#^2.0.0",
"sangha-material-checkout": "https://gitlab.techcultivation.org/sangha-webcomponents/sangha-material-checkout.git#^0.2.0",
"sangha-material-styles": "https://gitlab.techcultivation.org/sangha-webcomponents/sangha-material-styles.git#^1.0.0",
"sangha-material-checkout": "https://gitlab.techcultivation.org/sangha-webcomponents/sangha-material-checkout.git#^0.3.0",
"serviceworker-helpers": "morbidick/serviceworker-helpers#^2.0.3",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
......
......@@ -56,13 +56,11 @@
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
}
.loading {
color: #3949AB;
color: #395839;
}
noscript, .loading {
min-height: 100vh;
......
......@@ -14,7 +14,7 @@
"bower_components/webcomponentsjs/*.js",
"bower_components/neon-animation/web-animations.html",
"bower_components/web-animations-js/web-animations-next-lite.min.js",
"bower_components/font-roboto/fonts/**/*.ttf",
"bower_components/font-*/fonts/**/*.ttf",
"bower_components/country-list/data/**/*.json"
],
"lint": {
......
......@@ -14,6 +14,13 @@
<style>
:host {
display: block;
--app-header-bg-color: var(--primary-color);
--app-header-font-color: var(--primary-background-color);
@apply --app-header-mixin;
}
:host([invert]) {
--app-header-bg-color: var(--primary-background-color);
--app-header-font-color: var(--primary-color);
}
a, a:visited {
color: inherit;
......@@ -24,8 +31,8 @@
filter: brightness(75%);
}
app-toolbar {
background-color: var(--primary-color);
color: var(--secondary-color);
background-color: var(--app-header-bg-color);
color: var(--app-header-font-color);
}
app-header a, app-header a:visited {
......@@ -44,12 +51,16 @@
paper-tabs {
max-width: 640px;
height: 100%;
--paper-tabs-selection-bar-color: var(--secondary-color, black);
--paper-tabs-selection-bar-color: var(--app-header-font-color, black);
}
paper-tab {
padding: 0;
--paper-tab-ink: var(--secondary-color, black);
--paper-tab-ink: var(--app-header-font-color, black);
text-transform: uppercase;
--paper-tab-content-unselected: {
opacity: 1;
}
@apply --app-header-mixin;
}
paper-tab a, paper-item a {
margin: 0;
......
......@@ -3,11 +3,10 @@
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/sangha-material-styles/sangha-material-styles.html">
<dom-module id="sangha-material-project-card">
<template>
<style include="sangha-material-styles">
<style>
:host {
display: block;
}
......@@ -22,6 +21,11 @@
@apply --paper-font-headline;
}
iron-icon {
color: hsl(0, 0%, 50%);
margin-right: 0.5rem;
}
.project-icons {
@apply --paper-font-caption;
......@@ -33,6 +37,13 @@
margin-right: 0.5rem;
}
a, a:visited {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
filter: brightness(75%);
}
</style>
<paper-card
on-click="showProjectPage"
......
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="styles/sangha-typography.html">
<link rel="import" href="../bower_components/paper-styles/default-theme.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
......@@ -9,7 +12,6 @@
<link rel="import" href="../bower_components/jsonapi-helpers/jsonapi-settings.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/sangha-material-styles/sangha-material-styles.html">
<link rel="import" href="../bower_components/serviceworker-helpers/sw-update-toast.html">
<link rel="lazy-import" href="views/sangha-404.html">
......@@ -22,17 +24,11 @@
<dom-module id="sangha-app">
<template>
<style include="sangha-material-styles">
<style include="sangha-typography">
:host {
--primary-color: var(--paper-indigo-600);
--secondary-color: var(--paper-indigo-50);
display: flex;
flex-direction: column;
min-height: 100vh;
word-wrap: break-word;
word-break: break-word;
}
app-header-collapse-to-drawer {
......@@ -43,15 +39,20 @@
flex: 1;
}
.container {
display: block;
max-width: 60em;
margin: auto;
}
footer {
padding: 0 0.5em;
overflow: hidden;
word-wrap:break-word;
text-align: center;
background-color: var(--paper-grey-200);
color: var(--paper-grey-700);
background-color: var(--primary-color);
color: var(--primary-background-color);
@apply --paper-font-caption;
}
footer ul {
list-style-type: none;
......@@ -61,6 +62,9 @@
display: inline;
margin: 0 0.5em;
}
footer a, footer a:visited {
color: var(--primary-background-color);
}
sw-update-toast {
--primary-color: red;
......@@ -90,6 +94,7 @@
tail="{{ subroute }}"></app-route>
<app-header-collapse-to-drawer
invert
app-title="[[ sanghaSettings.title ]]"
navigation="[[ navigation ]]"
route-prefix="[[ routeData.prefix ]]"
......@@ -103,9 +108,9 @@
selected-attribute="visible"
fallback-selection="404">
<sangha-markdown-content view="home" content="donate.md"></sangha-markdown-content>
<sangha-markdown-content view="faq" content="faq.md"></sangha-markdown-content>
<sangha-markdown-content view="how-it-works" content="how-it-works.md"></sangha-markdown-content>
<sangha-markdown-content class="container" view="home" content="donate.md"></sangha-markdown-content>
<sangha-markdown-content class="container" view="faq" content="faq.md"></sangha-markdown-content>
<sangha-markdown-content class="container" view="how-it-works" content="how-it-works.md"></sangha-markdown-content>
<sangha-checkout view="checkout" data-path="views/sangha-checkout.html" settings="[[ sanghaSettings ]]"></sangha-checkout>
<sangha-projects view="projects" data-path="views/sangha-projects.html" route="{{ subroute }}" on-sangha-cart-add-project="openAddActionDialog" on-sangha-view-project="goToProject" settings="[[ sanghaSettings ]]"></sangha-projects>
<sangha-404 view="404" data-path="views/sangha-404.html" route="[[ route ]]"></sangha-404>
......@@ -126,7 +131,7 @@
</main>
<footer>
<sangha-markdown-content content="footer.md" visible></sangha-markdown-content>
<sangha-markdown-content class="container" content="footer.md" visible></sangha-markdown-content>
</footer>
</template>
......
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module id="sangha-typography">
<template>
<style>
:host {
line-height: 1.5;
@apply --paper-font-common-base;
word-wrap: break-word;
word-break: break-word;
color: var(--primary-text-color);
}
h1 {
@apply --paper-font-display2;
@apply --paper-font-extra-header;
}
h2 {
@apply --paper-font-display1;
@apply --paper-font-extra-header;
}
h3 {
@apply --paper-font-headline;
@apply --paper-font-extra-header;
}
h4 {
@apply --paper-font-title;
@apply --paper-font-extra-header;
}
h5, h6 {
@apply --paper-font-subhead;
@apply --paper-font-extra-header;
}
h1::after, h2::after {
@apply --paper-font-header-after;
}
hr {
border-color: var(--primary-color);
}
paper-button.primary {
--paper-button: {
background-color: var(--primary-color);
color: var(--primary-background-color);
}
}
a, a:visited {
color: var(--primary-color);
text-decoration: none;
}
a:hover {
filter: brightness(75%);
}
</style>
</template>
</dom-module>
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/sangha-material-styles/sangha-material-styles.html">
<link rel="import" href="../../bower_components/sangha-material-checkout/sangha-material-checkout.html">
<dom-module id="sangha-404">
<template>
<style include="sangha-material-styles">
<style>
:host {
display: block;
}
......
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/sangha-material-styles/sangha-material-styles.html">
<link rel="import" href="../../bower_components/sangha-material-checkout/sangha-material-checkout.html">
<link rel="import" href="../styles/sangha-typography.html">
<dom-module id="sangha-checkout">
<template>
<style include="sangha-material-styles">
<style include="sangha-typography">
:host {
display: block;
}
......
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../styles/sangha-typography.html">
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/marked-element/marked-element.html">
<link rel="import" href="../../bower_components/sangha-material-styles/sangha-material-styles.html">
<link rel="import" href="../../bower_components/sangha-material-checkout/sangha-material-checkout.html">
<link rel="import" href="../elements/sangha-responsive-image.html">
......@@ -10,7 +10,7 @@
<dom-module id="sangha-project">
<template>
<style include="sangha-material-styles">
<style include="sangha-typography">
:host {
display: block;
}
......@@ -70,7 +70,6 @@
}
hr {
margin: 2em 0em;
border-color: var(--secondary-color);
}
h2, h3, h4 {
......@@ -92,12 +91,12 @@
margin: 3em 0 2em;
}
</style>
<h1>[[ project.name ]]</h1>
<div class="horizontal-center-responsive">
<div class="logo grow">
<sangha-responsive-image img="[[ project.logo ]]" width="300" height="300"></sangha-responsive-image>
</div>
<div class="quickinfo vertical-center grow">
<h1>[[ project.name ]]</h1>
<ul>
<li><a href="[[ project.website ]]">Website</a></li>
<li><a href="[[ project.repository ]]">Repository</a></li>
......
......@@ -5,7 +5,6 @@
<link rel="import" href="../../bower_components/app-route/app-route.html">
<link rel="import" href="../../bower_components/iron-lazy-pages/iron-lazy-pages.html">
<link rel="import" href="../../bower_components/jsonapi-helpers/jsonapi-resource.html">
<link rel="import" href="../../bower_components/sangha-material-styles/sangha-material-styles.html">
<link rel="import" href="../elements/sangha-material-project-card.html">
<!-- load checkout view since we depend on it -->
......@@ -15,7 +14,7 @@
<dom-module id="sangha-projects">
<template>
<style include="sangha-material-styles">
<style>
:host {
display: block;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment