Commit ff6dfa42 authored by Racct's avatar Racct
Browse files

fix: apple display bugs + display logos of users

parent a3e0afa0
Pipeline #1395 passed with stages
in 11 minutes and 37 seconds
......@@ -31,16 +31,13 @@ generate('ccb', {
button: {
background: colors.primary,
border: '2px solid ' + colors.primary,
padding: spacing.sm,
height: '50px',
padding: spacing.sm + ' ' + spacing.md,
borderRadius: '25px',
color: colors.secondary,
cursor: 'pointer',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
display: 'inline-block',
fontFamily: 'Barlow',
textAlign: 'center',
'[active]': {
background: 'lightgreen',
},
......@@ -48,8 +45,22 @@ generate('ccb', {
background: colors.secondary,
color: colors.primary,
},
'[big]': { height: '75px', borderRadius: '37.5px' },
'[small]': { height: '40px', borderRadius: '20px' },
'[big]': {
height: '75px',
borderRadius: '37.5px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
'[small]': {
height: '40px',
borderRadius: '20px',
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
},
stack: {
...tokens(spacing).stack,
......
......@@ -9,7 +9,7 @@ import { BehaviorSubject } from 'rxjs';
export class ccbDatenschutz extends EmotionMixin(ScopingElement) {
public render() {
return html`
<a-box padding="md">
<a-box padding="md" class="${this.css({ width: '100vw', overflow: 'hidden' })}">
<a-stack size="md">
<ccb-h1>Datenschutz&shy;erklärung</ccb-h1>
<p>
......
......@@ -3,6 +3,8 @@ import { EmotionMixin } from '@adornis/design';
import { map } from 'rxjs/operators';
import { AdornisRouter } from '@adornis/adornis-components/a-router';
import { spacing } from 'imports/git_modules/design/generate-base/tokens';
import { rxRepeat } from 'imports/git_modules/base/rx-repeat';
import { AdornisUser } from 'imports/git_modules/users/db';
@element('ccb-landing-page')
export class CCBLandingPage extends EmotionMixin(ScopingElement) {
......@@ -15,7 +17,7 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
return html`
<a-stack size="xl">
<a-inline horizontal size="lg" padding="xl" style=${{ width: `calc(100vw - ${spacing.xl} * 2)` }}>
<a-stack size="md" class="${this.css({ flex: '1', minWidth: '300px' })}">
<a-stack size="md" class="${this.css({ flex: '1' })}">
<ccb-text>Hi!</ccb-text>
<ccb-text>
Der Corona Legal Chatbot soll alle rechtlichen Fragen beantworten, die im Zusammenhang mit der
......@@ -26,80 +28,86 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
regelmäßig updaten.</ccb-text
>
</a-stack>
<a-stack size="md" class="${this.css({ flex: '1', justifyContent: 'center', minWidth: '400px' })}">
<a-stack size="md" class="${this.css({ flex: '1', justifyContent: 'center', minWidth: '300px' })}">
<a-link
href="https://t.me/CoronaLegalChatBot"
target="_blank"
class="${this.css({ marginBottom: spacing.xl })}"
><ccb-button>Zum Legal Chatbot für&nbsp;<b>Fragende</b></ccb-button></a-link
>
<a-link href="/contentadmin">
<ccb-button secondary
>Als&nbsp;<b>Institution</b>&nbsp;FAQs hinterlassen (bspw. LandesReg.)</ccb-button
<ccb-button class="${this.css({ width: '100%' })}"
>Zum Legal Chatbot für&nbsp;<b>Fragende</b></ccb-button
>
</a-link>
<a-link href="/contentadmin">
<ccb-button secondary
>Als&nbsp;<b>Experte</b>&nbsp;FAQs hinterlassen (bspw. Kanzlei)</ccb-button
>
<ccb-button secondary class="${this.css({ width: '100%' })}">
Als&nbsp;<b>Institution</b>&nbsp;FAQs hinterlassen (bspw. LandesReg.)
</ccb-button>
</a-link>
<a-link href="/contentadmin">
<ccb-button secondary class="${this.css({ width: '100%' })}">
Als&nbsp;<b>Experte</b>&nbsp;FAQs hinterlassen (bspw. Kanzlei)
</ccb-button>
</a-link>
</a-stack>
</a-inline>
<a-stack size="xl" class="${this.css({ alignItems: 'center' })}">
<ccb-h4>Unsere Partner:</ccb-h4>
<a-inline horizontal size="xl" class="${this.css({ opacity: '0.6', justifyContent: 'center' })}">
<a-link href="https://www.ksb-intax.de/" target="_blank">
<img
src="https://www.ksb-intax.de/typo3conf/ext/ksb_site/Resources/Public/images/logo-ksb-intax-blue-trans.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legaltechlab.de/" target="_blank">
<img
src="https://media-exp1.licdn.com/dms/image/C4D1BAQH04Fs5dnPoiw/company-background_10000/0?e=2159024400&v=beta&t=3DphZgZb6oRh9WDQuSK6VNnKt8U2YRsIqnaD-4bDhqk"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://fps-law.de/" target="_blank">
<img
src="https://fps-law.de/files/themes/fps/images/fps-logo-de.gif"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://weblaw.ch/" target="_blank">
<img
src="https://weblaw.ch/.imaging/default/dam/weblaw/events/107/1078/10782/Weblaw-4farbig/jcr:content.jpg"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://www.steuernundrecht.berlin/" target="_blank">
<img
src="https://www.steuernundrecht.berlin/wp-content/uploads/2016/11/Logo_Endt-Eckhardt.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://adornis.de/" target="_blank">
<img
src="/adornis_logo.png"
style=${{ transform: 'scale(1.8)', transformOrigin: 'center right', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://studycore.de/" target="_blank">
<img
src="https://studycore.de/logo.svg"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legal-revolution.com/de/" target="_blank">
<img
src="/legalrevolution.png"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
</a-inline>
<a-box padding="xl">
<a-inline horizontal size="xl" class="${this.css({ opacity: '0.6', justifyContent: 'center' })}">
<a-link href="https://www.ksb-intax.de/" target="_blank">
<img
src="https://www.ksb-intax.de/typo3conf/ext/ksb_site/Resources/Public/images/logo-ksb-intax-blue-trans.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legaltechlab.de/" target="_blank">
<img
src="https://media-exp1.licdn.com/dms/image/C4D1BAQH04Fs5dnPoiw/company-background_10000/0?e=2159024400&v=beta&t=3DphZgZb6oRh9WDQuSK6VNnKt8U2YRsIqnaD-4bDhqk"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://fps-law.de/" target="_blank">
<img
src="https://fps-law.de/files/themes/fps/images/fps-logo-de.gif"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://weblaw.ch/" target="_blank">
<img
src="https://weblaw.ch/.imaging/default/dam/weblaw/events/107/1078/10782/Weblaw-4farbig/jcr:content.jpg"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://www.steuernundrecht.berlin/" target="_blank">
<img
src="https://www.steuernundrecht.berlin/wp-content/uploads/2016/11/Logo_Endt-Eckhardt.png"
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://adornis.de/" target="_blank">
<img
src="/adornis_logo.png"
style=${{ transform: 'scale(1.8)', transformOrigin: 'center right', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://studycore.de/" target="_blank">
<img
src="https://studycore.de/logo.svg"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
<a-link href="https://legal-revolution.com/de/" target="_blank">
<img
src="/legalrevolution.png"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
</a-link>
${this.generatedLogosFromAccounts()}
</a-inline>
</a-box>
</a-stack>
${this.wirvsvirusLogo()}
</a-stack>
......@@ -179,10 +187,18 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
return html`
<a-stack size="lg" padding="xl">
<ccb-h1> Unser Team </ccb-h1>
<a-grid columns="3" gap="md" class="${this.css({ gridAutoFlow: 'row' })}">
<ccb-h2> Recht </ccb-h2>
<ccb-h2> Software </ccb-h2>
<ccb-h2> Stud. Initiativen </ccb-h2>
<a-grid
columns="${window.innerWidth < 1000 ? '1' : '3'}"
gap="md"
class="${this.css({ gridAutoFlow: 'row' })}"
>
${window.innerWidth < 1000
? ''
: html`
<ccb-h2> Recht </ccb-h2>
<ccb-h2> Software </ccb-h2>
<ccb-h2> Stud. Initiativen </ccb-h2>
`}
${this.aboutUsItem('Dr. Sebastian Seeger', 'OLG Frankfurt am Main', '/people/sebastian.png', '1')}
${this.aboutUsItem('Kai Brobeil', 'Adornis Ventures', '/people/kai.png', '2')}
${this.aboutUsItem('Lara Sophie Hucklenbroich', '', '/people/lara.png', '3')}
......@@ -203,8 +219,11 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
private aboutUsItem(name: string, company: string, image: string, column: string) {
return html`
<a-stack horizontal size="md" class="${this.css({ gridColumn: column, alignItems: 'center' })}">
<img src="${image}" class="${this.css({ height: '75px', display: 'block' })}" />
<a-stack horizontal size="md" class="${this.css({
gridColumn: window.innerWidth < 1000 ? '1' : column,
alignItems: 'center',
})}">
<img src="${image}" class="${this.css({ width: '75px', display: 'block' })}" />
<a-stack size="sm">
<ccb-h4>${name}</ccb-h4>
<ccb-text>${company}</ccb-h4>
......@@ -227,4 +246,19 @@ export class CCBLandingPage extends EmotionMixin(ScopingElement) {
/>
`;
}
private generatedLogosFromAccounts() {
return html`
${rxRepeat(
AdornisUser.find().whenReady.pipe(map(users => users.filter(u => u.logo))),
u => html`
<img
src="${u.logo}"
style=${{ transform: 'scale(1.3)', transformOrigin: 'center left', cursor: 'pointer' }}
class="${this.css({ display: 'block', height: '50px' })}"
/>
`,
)}
`;
}
}
......@@ -42,9 +42,20 @@ export class ccbTopbar extends EmotionMixin(ScopingElement) {
>
</ccb-stack>
<a-link href="/"> <img src="/coronalogo.png" style="cursor: pointer; height: 60px;" /> </a-link>
<ccb-h4 class="${this.css({ cursor: 'pointer', userSelect: 'none' })}" @click="${() => AdornisUser.logout()}"
>Logout</ccb-h4
>
${AdornisUser.currentUser.pipe(
map(user =>
user
? html`
<ccb-h4
class="${this.css({ cursor: 'pointer', userSelect: 'none' })}"
@click="${() => AdornisUser.logout()}"
>
Logout
</ccb-h4>
`
: '',
),
)}
</a-box>
`;
}
......
import { element, html, rerender } from '@adornis/base';
import { AdornisDBView, AttributeField } from '@adornis/adornis-components/a-dbview';
import { Content, Country } from 'imports/db/contents';
import { BehaviorSubject, of, combineLatest } from 'rxjs';
import { ifDefined } from 'lit-html/directives/if-defined';
import { takeUntil, distinctUntilChanged, map, switchMap, startWith } from 'rxjs/operators';
import '@adornis/adornis-components/a-drop-wrapper';
import { element, html } from '@adornis/base';
import { RenderProps } from '@adornis/base/reactive-lit-element';
import { rxRepeat } from '@adornis/base/rx-repeat';
import { spacing } from '@adornis/design/generate-base/tokens';
const moment = require('moment');
import '@material/mwc-textfield';
import '@material/mwc-icon-button';
import '@adornis/forms/a-file-input';
import '@adornis/adornis-components/a-drop-wrapper';
import '@material/mwc-checkbox';
import { virtualize } from '@adornis/base/when-seen';
import { AdornisDialog } from 'imports/git_modules/adornis-components/a-dialog';
import { listenDevice, BreakPoint } from 'imports/git_modules/base/window-size';
import { repeat } from 'lit-html/directives/repeat';
import '@material/mwc-icon-button';
import '@material/mwc-switch';
import '@material/mwc-textfield';
import { CCBUser } from 'imports/db';
import { BreakPoint, listenDevice } from 'imports/git_modules/base/window-size';
import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
import { askForFile } from 'imports/git_modules/file-utils';
const moment = require('moment');
@element('ccb-users-admin')
export class CCBUsersAdmin extends AdornisDBView<CCBUser> {
......@@ -37,7 +32,7 @@ export class CCBUsersAdmin extends AdornisDBView<CCBUser> {
)
.subscribe(selectedFields => {
console.log('selectedFields: ', selectedFields);
this.selectedFields.next(selectedFields.filter(f => !['createdAt', 'createdBy'].includes(f)));
this.selectedFields.next(selectedFields.filter(f => !['roles', 'password'].includes(f)));
});
}
......@@ -52,6 +47,7 @@ export class CCBUsersAdmin extends AdornisDBView<CCBUser> {
columns="${selectedFields.length + 1}"
padding="sm"
>
${this.attributeHeaderDisplay(fields, selectedFields)}
${rxRepeat(entities, (entity, index) =>
this.attributeValueLineDisplay(fields, selectedFields, entity, index),
)}
......@@ -83,68 +79,50 @@ export class CCBUsersAdmin extends AdornisDBView<CCBUser> {
`;
}
private getField(key: string) {
return this.fields.getValue().find(field => field.name === key);
}
protected attributeSelection() {
return html``;
}
protected fieldDisplays(field: AttributeField, data: CCBUser, index: number, disabled = false) {
protected fieldDisplays(field: AttributeField, data: CCBUser, index: number) {
switch (field.name) {
case 'Rechtsgebiet':
case 'Frage':
case 'Quelle':
case 'Ansprechpartner':
case 'username':
return html`
<mwc-textfield
style="width: 100%"
.label="${field.name}"
.value="${ifDefined(data[field.name])}"
@input="${e => {
const value = e.currentTarget.value;
if (data[field.name] === value) return;
data[field.name] = value;
}}"
></mwc-textfield>
<a-box padding="md">
${data[field.name]}
</a-box>
`;
case 'Antwort':
case 'verified':
return html`
<a-writer
class="${this.css({ border: '1px solid lightgrey', padding: spacing.sm })}"
placeholder="Antwort"
.enableEditing="${true}"
.useHTML="${true}"
.string="${ifDefined(data[field.name])}"
@string-changed="${e => {
const value = e.detail.value;
if (data[field.name] === value) return;
data[field.name] = value;
}}"
></a-writer>
<a-box padding="md">
<mwc-switch ?checked=${data.verified} @click=${() => (data.verified = !data.verified)}></mwc-switch>
</a-box>
`;
case 'logo':
const toBase64 = file =>
new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
return html`
<a-box
padding="md"
style=${{ cursor: 'pointer' }}
@click=${async () => {
const file = await askForFile();
const base64 = await toBase64(file[0]);
console.log(base64);
if (base64.length > 100000) return alert('file too big, svg is better');
data.logo = base64;
}}
>
<img style=${{ height: '30px' }} src="${data.logo}" />
</a-box>
`;
default:
return super.fieldDisplays(field, data, index);
}
}
private askForFile = (accept?: string): Promise<string> => {
return new Promise(resolve => {
const input = document.createElement('input');
input.type = 'file';
if (accept) input.accept = accept;
input.onchange = () => {
const fr = new FileReader();
fr.onload = e => resolve(fr.result);
fr.readAsText(
input.files![0],
navigator.platform.indexOf('Linux') !== -1 || navigator.platform.indexOf('Mac') !== -1
? 'UTF-8'
: 'ISO-8859-1',
);
};
input.click();
});
};
}
......@@ -7,7 +7,7 @@ import { element, html } from '@adornis/base';
import { spacing } from '@adornis/design/generate-base/tokens';
import { AdornisUser } from '@adornis/users/db';
import { BehaviorSubject, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import './ccb-admin';
import './ccb-botbar';
import './ccb-chat';
......@@ -29,6 +29,8 @@ export class MainElement extends Loader(AdornisLayout) {
public topBarHeight = '85px';
public botBarHeight = '32px';
protected loginError = new BehaviorSubject('');
public topBar() {
return html`
${Meteor.absoluteUrl().includes('livelinks')
......@@ -150,23 +152,26 @@ export class MainElement extends Loader(AdornisLayout) {
private login() {
let username = '';
let password = '';
let error = new BehaviorSubject('');
return html`
<a-stack centered class="${this.css({ width: '100%', height: '100%' })}" size="md">
<a-stack centered class="${this.css({ width: '100%', height: '100%' })}" size="md" padding="md">
<ccb-text>
Du kannst eine&nbsp;<b>
Du kannst eine
<b>
<a-link class="${this.css({ color: colors.primary })}" href="/200324_Vorlage_CLCB.xlsx" target="_blank"
>Excel-Datei</a-link
> </b
>&nbsp;runterladen, ausfüllen und per Mail an &nbsp;<b>
>
</b>
herunterladen, ausfüllen und per Mail an
<b>
<a href="mailto:corona@adornis.de" class="${this.css({ textDecoration: 'none', color: colors.primary })}"
>corona@adornis.de</a
> </b
>&nbsp;senden
>
</b>
senden
</ccb-text>
<ccb-text> ODER </ccb-text>
<ccb-h4> ODER </ccb-h4>
<ccb-text> dich hier mit deinem Nutzer anmelden </ccb-text>
${error.pipe(
${this.loginError.pipe(
map(errorStr =>
errorStr
? html`
......@@ -176,28 +181,29 @@ export class MainElement extends Loader(AdornisLayout) {
),
)}
<mwc-textfield
placeholder="Dein Login-Name"
label="Dein Login-Name"
@change="${e => (username = e.currentTarget.value)}"
@keyup="${e => {
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password, error);
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password);
}}"
></mwc-textfield>
<mwc-textfield
placeholder="Passwort"
type="password"
label="Passwort"
@change="${e => (password = e.currentTarget.value)}"
@keyup="${e => {
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password, error);
if (e.code === 'Enter') this.performLogin(username.toLowerCase(), password);
}}"
></mwc-textfield>
<mwc-button @click="${() => this.performLogin(username.toLowerCase(), password, error)}">Einloggen</mwc-button>
<ccb-button @click="${() => this.performLogin(username.toLowerCase(), password)}">Einloggen</ccb-button>
</a-stack>
`;
}
private performLogin(username: string, password: string, error: BehaviorSubject<string>) {
private performLogin(username: string, password: string) {
AdornisUser.requestLogin(username, password).catch(e => {
console.warn('login gone wrong: ', e);
error.next('Login ist fehlgeschlagen, versuche es erneut');
this.loginError.next('Login ist fehlgeschlagen, versuche es erneut');
});
}
}
......@@ -16,4 +16,6 @@ export class CCBUser extends AdornisUser {
public organization?: string;
@Field(Boolean)
public verified?: boolean;
@Field(String)
public logo?: string;
}
Subproject commit 794798f260427cf09ea85a317a9686f1ea09074f
Subproject commit 66e8a13d8f25795eb1fd0f23f8e1fc6447d3a7d1
......@@ -575,6 +575,95 @@
"tslib": "^1.10.0"
}
},
"@material/mwc-switch": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/@material/mwc-switch/-/mwc-switch-0.14.1.tgz",
"integrity": "sha512-v6KOEyj5rxNudE33TA4BDObaYLIQ2hnawxHu/c6fYdbv2/jxSn0Aft7SpYYWJYq9cHbTbn+tlL9tFEkJvf8xWg==",
"requires": {
"@material/mwc-base": "^0.14.1",
"@material/mwc-ripple": "^0.14.1",
"@material/switch": "=6.0.0-canary.35a32aaea.0",
"lit-element": "^2.3.0",
"tslib": "^1.10.0"
},
"dependencies": {
"@material/animation": {
"version": "6.0.0-canary.35a32aaea.0",
"resolved": "https://registry.npmjs.org/@material/animation/-/animation-6.0.0-canary.35a32aaea.0.tgz",
"integrity": "sha512-UNdA/ndQYssWv6jOqAHXL4QaeI3OfC3j/bGikFsJ17nrSoo10G3d8wQSebw+ZS2wqsXp6jOu0iMDId6acZoO5w==",
"requires": {
"tslib": "^1.9.3"
}
},
"@material/base": {
"version": "6.0.0-canary.35a32aaea.0",
"resolved": "https://registry.npmjs.org/@material/base/-/base-6.0.0-canary.35a32aaea.0.tgz",
"integrity": "sha512-QE3rF3KP9HJet8Jpok9eFWK1F2n3JJKhP0qyjR+n1llgcoBtEIGShA8+wkixeCUS8rVgpWRNyppuqg8lft/WeQ==",
"requires": {
"tslib": "^1.9.3"
}
},
"@material/dom": {
"version": "6.0.0-canary.35a32aaea.0",