Commit 73cb3b81 authored by Sandro Lutz's avatar Sandro Lutz Committed by lic
Browse files

Styling joboffer list item

parent 6e90b620
......@@ -150,16 +150,12 @@
"events.signoff_fail": "Abmelden fehlgeschlagen",
"events.signed_up_accepted": "Du bist angemeldet und hast einen Platz.",
"events.signed_up_waiting_list": "Du bist auf der Warteliste.",
"companies.contact_information": "Kontakt-Informationen",
"companies.email": "Email",
"companies.phone": "Telefon",
"companies.website": "Webseite",
"companies.employees": "Mitarbeiter",
"companies.employees_worldwide": "Weltweit",
"companies.employees_Switzerland": "in der Schweiz",
"joboffers.searchfield": "Suchtext eingeben...",
"joboffers.not_found": "Jobangebot nicht gefunden",
"joboffers.no_selection": "Kein Jobangebot ausgewählt",
"joboffers.download_pdf": "Als PDF herunterladen",
"joboffers.published_%n_days_ago": [
[0, 0, "heute veröffentlicht"],
[1, 1, "gestern veröffentlicht"],
[2, null, "vor %n Tagen veröffentlicht"]
],
"errors.title": "Ups, das ist ein Fehler!",
"errors.access_denied.default_reason": "Diese Seite ist nur für eingeloggte Benutzer verfügbar.",
"errors.not_found.text": "Die gewünschte Seite konnte nicht gefunden werden.",
......
......@@ -150,16 +150,12 @@
"events.signoff_fail": "Signoff failed",
"events.signed_up_accepted": "You are signed up and got a spot.",
"events.signed_up_waiting_list": "You are on the waiting list.",
"companies.contact_information": "Contact information",
"companies.email": "Email",
"companies.phone": "Phone",
"companies.website": "Website",
"companies.employees": "Employees",
"companies.employees_worldwide": "Worldwide",
"companies.employees_Switzerland": "in Switzerland",
"joboffers.searchfield": "Enter search text...",
"joboffers.not_found": "Job offer not found",
"joboffers.no_selection": "No job offer selected",
"joboffers.download_pdf": "Download as PDF",
"joboffers.published_%n_days_ago": [
[0, 0, "published today"],
[1, 1, "published yesterday"],
[2, null, "published %n days ago"]
],
"errors.title": "Woops, that's an error!",
"errors.access_denied.default_reason": "This page is accessible only for authenticated users.",
"errors.not_found.text": "The page you are looking for could not be found.",
......
......@@ -35,13 +35,4 @@ export default class Joboffer {
const regex = /(#+\s+)(\w+)/g;
return description.replace(regex, (match, p1, p2) => `### ${p2.toLowerCase()}`);
}
getDate() {
const postedOn = Date.parse(this._created);
const today = Date.now();
const timeDiff = today - postedOn;
const diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
const message = currentLanguage() === 'en' ? `${diffDays} days ago` : `vor ${diffDays} Tagen`;
return message;
}
}
......@@ -20,6 +20,8 @@
@import './studydocNew.less';
@import './fileUpload.less';
@import './filterView.less';
@import './jobofferList.less';
@import './jobofferDetails.less';
html,body {
width: 100%;
......
.joboffer-details {
padding: 0 2em 2em;
p { margin: 1em 0; }
a { padding: 0; }
}
.joboffer-header {
display: grid;
grid-template-areas: 'logo content';
grid-template-columns: 150px 1fr;
@media @mobile {
grid-template-areas: 'content';
grid-template-columns: 1fr;
}
.image {
grid-area: logo;
display: block;
background-color: transparent;
@media @mobile {
display: none;
}
}
.content {
grid-area: content;
padding: 1em;
.title {
padding: 0;
padding-bottom: .25em;
margin: 0;
}
}
}
......@@ -2,24 +2,22 @@ import m from 'mithril';
import marked from 'marked';
import escape from 'html-escape';
import { apiUrl } from 'config';
import { Button } from 'polythene-mithril';
import { i18n } from '../../models/language';
export default class JobofferDetails {
static oninit(vnode) {
this.controller = vnode.attrs.controller;
}
static view() {
const joboffer = this.controller.selectedJoboffer;
if (!joboffer) {
return m('h1', i18n('joboffers.not_found'));
}
return m('div', [
m('h1', joboffer.getTitle()),
m('h2', joboffer.getCompany()),
m('p', m.trust(marked(escape(joboffer.getDescription())))),
m('a', { href: `${apiUrl}${joboffer.pdf.file}`, target: '_blank' }, 'Download as PDF'),
static view({ attrs: { joboffer } }) {
return m('div.joboffer-details', [
m('div.description', m.trust(marked(escape(joboffer.getDescription())))),
m(Button, {
label: i18n('joboffers.download_pdf'),
border: true,
events: {
onclick: () => {
window.open(apiUrl + joboffer.pdf.file, '_blank');
},
},
}),
]);
}
}
import m from 'mithril';
import { apiUrl } from 'config';
import { ExpansionPanel } from 'amiv-web-ui-components';
import { i18n, currentLanguage } from '../../models/language';
import { i18n } from '../../models/language';
import { JobofferController } from '../../models/joboffers';
import { FilteredListPage, FilteredListDataStore } from '../filteredListPage';
import JobofferDetails from './jobofferDetails';
......@@ -42,22 +42,18 @@ export default class JobofferList extends FilteredListPage {
return {
fields: [
{
type: 'text',
type: 'search',
key: 'title',
label: i18n('joboffers.searchfield'),
label: i18n('search'),
min_length: 3,
},
{
type: 'button',
label: i18n('search'),
events: {
onclick: 'search',
},
type: 'hr',
},
{
type: 'button',
label: i18n('reset'),
className: 'red-button',
className: 'flat-button',
events: {
onclick: 'reset',
},
......@@ -70,13 +66,14 @@ export default class JobofferList extends FilteredListPage {
const value = values[key];
if (key === 'title' && value.length > 0) {
const regex = { $regex: `^(?i).*${value}.*` };
query.$or = [
{ title_en: { $regex: `^(?i).*${value}.*` } },
{ title_de: { $regex: `^(?i).*${value}.*` } },
{ description_en: { $regex: `^(?i).*${value}.*` } },
{ description_de: { $regex: `^(?i).*${value}.*` } },
{ company: { $regex: `^(?i).*${value}.*` } },
{ company: { $regex: `^(?i).*${value}.*` } },
{ title_en: regex },
{ title_de: regex },
{ description_en: regex },
{ description_de: regex },
{ company: regex },
{ company: regex },
];
}
});
......@@ -99,6 +96,8 @@ export default class JobofferList extends FilteredListPage {
// eslint-disable-next-line class-methods-use-this
_renderItem(joboffer, list, selectedId) {
const animationDuration = 300; // in ms
const imageurl = apiUrl + joboffer.logo.file;
const days = Math.ceil((Date.now() - Date.parse(joboffer._created)) / (1000 * 3600 * 24));
return m(ExpansionPanel, {
id: this.getItemElementId(joboffer._id),
......@@ -109,20 +108,19 @@ export default class JobofferList extends FilteredListPage {
this.onChange(joboffer._id, expanded, animationDuration);
},
header: () =>
m('div.job', [
m('img', { src: `${apiUrl}${joboffer.logo.file}`, alt: joboffer.company }),
m(
'div',
{
class: 'list-title',
},
[
m('h2', joboffer.getTitle()),
m('div', [m('span', joboffer.getCompany()), m('span', joboffer.getDate())]),
]
),
m('div.joboffer-header', [
m('div.image.ratio-3to2', m('img', { src: imageurl, alt: joboffer.company })),
m('div.content', [
m('h2.title', joboffer.getTitle()),
m('div.date', i18n('joboffers.published_%n_days_ago', days)),
]),
]),
content: () => m('div', joboffer.getDescription()),
content: ({ expanded }) => {
if (expanded) {
return m(JobofferDetails, { joboffer });
}
return m('');
},
});
}
......
Supports Markdown
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