From ddb027c5811c55dc3ea9b337a790f77b9f02e823 Mon Sep 17 00:00:00 2001
From: Hermann <blumh@ethz.ch>
Date: Thu, 7 Jun 2018 22:43:51 +0200
Subject: [PATCH] various style improvements and more consistency
---
src/events/viewEvent.js | 66 +++++++++++++++++++----------------------
src/groups/list.js | 12 ++------
src/style.js | 11 ++++---
src/users/viewUser.js | 56 ++++++++++++++++------------------
src/views/editView.js | 2 +-
src/views/elements.js | 10 +++----
6 files changed, 72 insertions(+), 85 deletions(-)
diff --git a/src/events/viewEvent.js b/src/events/viewEvent.js
index 7e14da6..5308f15 100644
--- a/src/events/viewEvent.js
+++ b/src/events/viewEvent.js
@@ -14,7 +14,7 @@ import { eventsignups as signupConfig } from '../resourceConfig.json';
import TableView from '../views/tableView';
import DatalistController from '../listcontroller';
import { dateFormatter } from '../utils';
-import { icons, DropdownCard, Property } from '../views/elements';
+import { icons, DropdownCard, Property, chip } from '../views/elements';
import { ResourceHandler } from '../auth';
const viewLayout = [
@@ -88,7 +88,7 @@ class ParticipantsTable {
view({ attrs: { title } }) {
return m(Card, {
- style: { height: '300px', 'margin-bottom': '20px' },
+ style: { height: '300px', 'margin-bottom': '10px' },
content: m('div', [
m(Toolbar, { compact: true }, [
m(ToolbarTitle, { text: title }),
@@ -149,6 +149,7 @@ export default class viewEvent extends ItemView {
view() {
let displaySpots = '-';
+ const stdMargin = { margin: '5px' };
if (this.data.spots !== 0) {
displaySpots = this.data.spots;
@@ -161,27 +162,24 @@ export default class viewEvent extends ItemView {
this.data.img_thumbnail ? m('img', {
src: `${apiUrl}${this.data.img_thumbnail.file}`,
height: '50px',
- style: { float: 'left' },
+ style: { float: 'left', margin: '0 5px' },
}) : '',
- m(
- 'h1',
- { style: { 'margin-top': '0px', 'margin-bottom': '0px' } },
- this.data.title_de || this.data.title_en,
- ),
+ m('h1', this.data.title_de || this.data.title_en ),
]),
// below the title, most important details are listed
m('div.maincontainer', { style: { display: 'flex' } }, [
- this.data.signup_count ? m(Property, {
- style: { 'margin-right': '20px' },
+ this.data.signup_count && m(Property, {
+ style: stdMargin,
title: 'Signups',
- }, `${this.data.signup_count} / ${displaySpots}`) : '',
- this.data.location ? m(Property, {
- style: { 'margin-right': '20px' },
+ }, `${this.data.signup_count} / ${displaySpots}`),
+ this.data.location && m(Property, {
+ style: stdMargin,
title: 'Location',
- }, `${this.data.location}`) : '',
- this.data.time_start ? m(Property, {
+ }, `${this.data.location}`),
+ this.data.time_start && m(Property, {
title: 'Time',
- }, `${dateFormatter(this.data.time_start)} - ${dateFormatter(this.data.time_end)}`) : '',
+ style: stdMargin,
+ }, `${dateFormatter(this.data.time_start)} - ${dateFormatter(this.data.time_end)}`),
]),
// everything else is not listed in DropdownCards, which open only on request
m('div.viewcontainer', [
@@ -199,27 +197,25 @@ export default class viewEvent extends ItemView {
}),
]),
- m(DropdownCard, { title: 'advertisement' }, [
+ m(DropdownCard, { title: 'advertisement', style: { margin: '10px 0' } }, [
[
- m(Icon, {
- style: { float: 'left' },
- svg: m.trust(this.data.show_annonce ? icons.checked : icons.clear),
- }),
- m('span', { style: { float: 'left' } }, 'annonce'),
- m(Icon, {
- style: { float: 'left' },
- svg: m.trust(this.data.show_infoscreen ? icons.checked : icons.clear),
- }),
- m('span', { style: { float: 'left' } }, 'infoscreen'),
- m(Icon, {
- style: { float: 'left' },
- svg: m.trust(this.data.show_website ? icons.checked : icons.clear),
- }),
- m('span', { style: { float: 'left' } }, 'website'),
+ m(chip, {
+ svg: this.data.show_annonce ? icons.checked : icons.clear,
+ border: '1px #aaaaaa solid',
+ }, 'announce'),
+ m(chip, {
+ svg: this.data.show_infoscreen ? icons.checked : icons.clear,
+ border: '1px #aaaaaa solid',
+ margin: '4px',
+ }, 'infoscreen'),
+ m(chip, {
+ svg: this.data.show_website ? icons.checked : icons.clear,
+ border: '1px #aaaaaa solid',
+ }, 'website'),
],
this.data.time_advertising_start ? m(
Property,
- 'Advertising Time',
+ {Â title: 'Advertising Time' },
`${dateFormatter(this.data.time_advertising_start)} - ${dateFormatter(this.data.time_advertising_end)}`,
) : '',
this.data.priority ? m(
@@ -229,8 +225,8 @@ export default class viewEvent extends ItemView {
) : '',
]),
- m(DropdownCard, { title: 'Registration' }, [
- this.data.price ? m(Property, 'Price', `${this.data.price}`) : '',
+ m(DropdownCard, { title: 'Registration', style: { margin: '10px 0' } }, [
+ this.data.price ? m(Property, { title: 'Price' }, `${this.data.price}`) : '',
this.data.time_register_start ? m(
Property,
{ title: 'Registration Time' },
diff --git a/src/groups/list.js b/src/groups/list.js
index 8c008b0..347f43c 100644
--- a/src/groups/list.js
+++ b/src/groups/list.js
@@ -6,10 +6,7 @@ import DatalistController from '../listcontroller';
class GroupListItem {
view({ attrs: { name, _id } }) {
return m('div', {
- style: {
- padding: '20px',
- 'max-width': '500px',
- },
+ style: { 'max-width': '500px', margin: '5px' },
onclick: () => {
m.route.set(`/groups/${_id}`);
},
@@ -33,13 +30,10 @@ export default class GroupList {
if (!this.data) return '';
return m(
- 'div', { style: { display: 'flex', 'flex-wrap': 'wrap' } },
+ 'div.maincontainer', { style: { display: 'flex', 'flex-wrap': 'wrap', 'margin-top': '5px' } },
this.data.map(item => m(GroupListItem, item)),
m('div', {
- style: {
- padding: '20px',
- 'max-width': '500px',
- },
+ style: { 'max-width': '500px', margin: '5px' },
onclick: () => { m.route.set('/newgroup'); },
}, m(Card, { content: [{ primary: { title: '+ add' } }] })),
);
diff --git a/src/style.js b/src/style.js
index b59ec37..d2ff9d1 100644
--- a/src/style.js
+++ b/src/style.js
@@ -44,21 +44,24 @@ ShadowCSS.addStyle('.pe-shadow', {
const style = [
{
'.maincontainer': {
- padding: '10px',
+ padding: '0 5px',
},
'.viewcontainer': {
display: 'flex',
'flex-wrap': 'wrap',
+ padding: '0 5px',
},
'.viewcontainercolumn': {
width: '500px',
'flex-grow': 1,
- padding: '10px',
+ margin: '5px',
},
h1: {
- 'margin-top': '0px',
- 'margin-bottom': '0px',
+ margin: '0 5px',
},
+ p: {
+ margin: '0',
+ }
},
];
styler.add('containers', style);
\ No newline at end of file
diff --git a/src/users/viewUser.js b/src/users/viewUser.js
index 1e548a5..1a9029b 100644
--- a/src/users/viewUser.js
+++ b/src/users/viewUser.js
@@ -41,22 +41,33 @@ export default class UserView extends ItemView {
}
view() {
- let membership = m(chip, { svg: icons.clear, background: colors.amiv_red }, 'No Member');
+ const stdMargin = { margin: '5px' };
+
+ let membership = m(chip, {
+ svg: icons.clear,
+ background: colors.amiv_red,
+ ...stdMargin,
+ }, 'No Member');
if (this.data.membership === 'regular') {
- membership = m(chip, { svg: icons.checked, background: colors.green }, 'Regular Member');
+ membership = m(chip, {
+ svg: icons.checked,
+ background: colors.green,
+ ...stdMargin,
+ }, 'Regular Member');
} else if (this.data.membership === 'extraordinary') {
membership = m(
chip,
- { svg: icons.checked, background: colors.green },
+ { svg: icons.checked, background: colors.green, ...stdMargin },
'Extraordinary Member',
);
} else if (this.data.membership === 'honorary') {
- membership = m(chip, { svg: icons.star, background: colors.orange }, 'Honorary Member');
+ membership = m(
+ chip,
+ { svg: icons.star, background: colors.orange, ...stdMargin },
+ 'Honorary Member',
+ );
}
- const detailKeys = [
- 'phone', 'department', 'gender'];
-
// Selector that is only displayed if "new" is clicked in the
// groupmemberships. Selects a group to request membership for.
const groupSelect = m(SelectList, {
@@ -79,31 +90,16 @@ export default class UserView extends ItemView {
membership,
this.data.department && m(
chip,
- { svg: icons.department, 'margin-left': '10px' },
+ { svg: icons.department, ...stdMargin },
this.data.department,
),
- this.data.gender && m(chip, { 'margin-left': '10px' }, this.data.gender),
- m('div', { style: { display: 'flex', 'margin-top': '10px' } }, [
- this.data.nethz && m(Property, {
- title: 'NETHZ',
- style: { 'margin-right': '10px' },
- }, this.data.nethz),
- this.data.email && m(Property, {
- title: 'Email',
- style: { 'margin-right': '10px' },
- }, this.data.email),
- this.data.legi && m(Property, {
- title: 'Legi',
- style: { 'margin-right': '10px' },
- }, this.data.legi),
- this.data.rfid && m(Property, {
- title: 'RFID',
- style: { 'margin-right': '10px' },
- }, this.data.rfid),
- this.data.phone && m(Property, {
- title: 'Phone',
- style: { 'margin-right': '10px' },
- }, this.data.phone),
+ this.data.gender && m(chip, { margin: '5px' }, this.data.gender),
+ m('div', { style: { display: 'flex' } }, [
+ this.data.nethz && m(Property, { title: 'NETHZ', style: stdMargin }, this.data.nethz),
+ this.data.email && m(Property, { title: 'Email', style: stdMargin }, this.data.email),
+ this.data.legi && m(Property, { title: 'Legi', style: stdMargin }, this.data.legi),
+ this.data.rfid && m(Property, { title: 'RFID', style: stdMargin }, this.data.rfid),
+ this.data.phone && m(Property, { title: 'Phone', style: stdMargin }, this.data.phone),
]),
]),
m('div.viewcontainer', [
diff --git a/src/views/editView.js b/src/views/editView.js
index 1d099d2..4b49e4f 100644
--- a/src/views/editView.js
+++ b/src/views/editView.js
@@ -230,7 +230,7 @@ export default class EditView extends ItemView {
}),
]),
m('div.maincontainer', {
- style: { height: 'calc(100vh - 130px)', 'overflow-y': 'scroll' },
+ style: { height: 'calc(100vh - 130px)', 'overflow-y': 'scroll', padding: '10px' },
}, children),
]);
}
diff --git a/src/views/elements.js b/src/views/elements.js
index 94c0bb5..9473b40 100644
--- a/src/views/elements.js
+++ b/src/views/elements.js
@@ -218,9 +218,7 @@ export class DropdownCard {
events: { onclick: () => { this.expand = !this.expand; } },
}, [
m(IconButton, {
- icon: {
- svg: m.trust(this.expand ? icons.ArrowDown : icons.ArrowRight),
- },
+ icon: { svg: m.trust(this.expand ? icons.ArrowDown : icons.ArrowRight)},
}),
m(ToolbarTitle, { text: title }),
]);
@@ -230,8 +228,7 @@ export class DropdownCard {
content.push(...children.map(child => ({
any: {
style: {
- 'padding-left': '10px',
- 'padding-right': '10px',
+ padding: '0 10px 10px 10px',
},
content: child,
},
@@ -281,7 +278,8 @@ export class chip {
height: '32px',
'background-color': '#ffffff',
'border-radius': '16px',
- padding: '4px 8px',
+ // if there is a border, things are weirdly shifted
+ padding: styleAttrs.border ? '3px 8px 4px 6px' : '4px 8px',
display: 'inline-flex',
...styleAttrs,
},
--
GitLab