diff --git a/src/dependencies.pug b/src/dependencies.pug
index 8f15386..4afbf7d 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -19,11 +19,8 @@ script(src="/scripts/index.js")
// Stylesheets
link(rel='stylesheet', href='/lib/normalize.css')
link(rel='stylesheet', href='/styles/index.css')
-link(
- rel='stylesheet'
- href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext'
-)
-link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet")
+link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
+link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
// Web components
diff --git a/src/page-members.pug b/src/page-members.pug
index 14f7f92..f36d7d6 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -7,8 +7,9 @@ div.grid-layer
data-src=`${sdn}/members/`,
data-fields='header, infos, groups',
set-header='user.account.picture, user, pseudonym, bio, send',
- set-infos='user.roles, user.email, phone, user.skills',
- set-pseudonym='before-pseudo,pseudo',
+ set-infos='cell, user.groups.name, user.email, phone, user.skills',
+ set-user='user.first_name, user.last_name',
+ set-pseudonym='before-pseudo,user.username',
value-before-pseudo='@',
value-send='SEND A MESSAGE',
template-send='chat-link',
diff --git a/src/styles/functions.scss b/src/styles/functions.scss
deleted file mode 100644
index ab0c014..0000000
--- a/src/styles/functions.scss
+++ /dev/null
@@ -1 +0,0 @@
-//
\ No newline at end of file
diff --git a/src/styles/icons.scss b/src/styles/icons.scss
index f85028c..1ff8e4e 100644
--- a/src/styles/icons.scss
+++ b/src/styles/icons.scss
@@ -58,7 +58,16 @@
// text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}
+%outline-person {
+ background-image: url(/images/svg/icon-outline-person.svg);
+ background-repeat: no-repeat;
+ background-position: left top;
+ padding-top: 20px;
+ margin-left: 1.35em;;
+}
+
$icons: (
+ /* outline-person: '\f206', */
user-female: '\e000',
people: '\e001',
user-follow: '\e002',
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 630d669..16688e8 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,7 +1,7 @@
@charset "UTF-8";
-@import 'functions';
@import '../../node_modules/include-media/dist/include-media';
+@import 'material-design-icons';
@import 'icons';
@import 'variables';
@import 'mixins';
diff --git a/src/styles/material-design-icons.scss b/src/styles/material-design-icons.scss
new file mode 100644
index 0000000..226d20d
--- /dev/null
+++ b/src/styles/material-design-icons.scss
@@ -0,0 +1,87 @@
+/* MaterialDesignIcons.com */
+
+$mdi-filename: "material-design-icons";
+$mdi-font-name: "material-design-icons";
+$mdi-font-family: "material-design-icons";
+$mdi-font-weight: "regular";
+$mdi-font-path: "../fonts" !default;
+$mdi-css-prefix: mdi !default;
+$mdi-version: "3.3.92" !default;
+
+@font-face {
+ font-family: '#{$mdi-font-name}';
+ src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
+ src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
+ url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
+ url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
+ url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
+ url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+$mdi-icons: (
+ account-outline: '\F013',
+ atom: '\F767'
+);
+
+%mdi,
+[class^='mdi-']:before,
+[class*='mdi-']:before {
+ display: inline-block;
+ font-family: '#{$mdi-font-name}';
+ font-size: 25px;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 0.5em;
+ margin-left: -0.15em;
+ text-align: center;
+ text-decoration: inherit;
+ width: 1em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* For safety - reset parent styles, that can break glyph codes*/
+ font-variant: normal;
+ text-transform: none;
+}
+
+@function char($character-code) {
+ @if function-exists("selector-append") {
+ @return unquote("\"\\#{$character-code}\"");
+ }
+
+ @if "\\#{'x'}" == "\\x" {
+ @return str-slice("\x", 1, 1) + $character-code;
+ }
+ @else {
+ @return #{"\"\\"}#{$character-code + "\""};
+ }
+}
+
+@function mdi($name) {
+ @if map-has-key($mdi-icons, $name) == false {
+ @warn "Icon #{$name} not found.";
+ @return "";
+ }
+ @return char(map-get($mdi-icons, $name));
+}
+
+@each $key, $value in $mdi-icons {
+ .#{$mdi-css-prefix}-#{$key}:before {
+ content: char($value);
+ }
+}
+
+@mixin mdi($value) {
+ &:before {
+ @extend %mdi;
+ @extend .#{$mdi-css-prefix}-#{$value};
+ }
+}
+
+
+.#{$mdi-css-prefix}-blank:before {
+ content: "\F68C";
+ visibility: hidden;
+}
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 44fb15d..3943e8e 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -50,7 +50,7 @@
flex-flow: column wrap;
margin-bottom: 2.5rem;
@media(min-width: 56rem) {
- height: 60rem;
+ height: 62rem;
width: 32%;
}
@@ -60,7 +60,7 @@
div[name='header'] {
border-bottom: 1px solid $color-grey-light;
- padding: 0.5em 0 3em;
+ padding: 0.5em 0 2em;
display: flex;
flex-direction: column;
@@ -82,15 +82,20 @@
}
}
- hdapp-userinfo {
+ div[name='user'] {
+ font-weight: bold;
@extend h1;
-
- ul {
- padding: 0;
- margin: 0;
+
+ sib-display-div[name$='last_name'] {
+ margin-left: 6px;
}
}
+ div[name='pseudonym'] {
+ font-size: 15px;
+ margin-top: 8px;
+ }
+
sib-display-div[name$='bio'] {
display: flex;
flex-basis: 3.5em;
@@ -134,11 +139,11 @@
}
[name$='cell'] * {
- @include icon('chemistry');
+ @include mdi('atom');
}
- [name$='roles'] * {
- @include icon('user');
+ [name*='groups'] * {
+ @include mdi('account-outline');
}
[name$='email'] * {
diff --git a/www/fonts/material-design-icons.eot b/www/fonts/material-design-icons.eot
new file mode 100644
index 0000000..b9798ea
Binary files /dev/null and b/www/fonts/material-design-icons.eot differ
diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg
new file mode 100644
index 0000000..5b4f68c
--- /dev/null
+++ b/www/fonts/material-design-icons.svg
@@ -0,0 +1,20 @@
+
+
+
diff --git a/www/fonts/material-design-icons.ttf b/www/fonts/material-design-icons.ttf
new file mode 100644
index 0000000..75cde78
Binary files /dev/null and b/www/fonts/material-design-icons.ttf differ
diff --git a/www/fonts/material-design-icons.woff b/www/fonts/material-design-icons.woff
new file mode 100644
index 0000000..8adbd27
Binary files /dev/null and b/www/fonts/material-design-icons.woff differ
diff --git a/www/fonts/material-design-icons.woff2 b/www/fonts/material-design-icons.woff2
new file mode 100644
index 0000000..bc58886
Binary files /dev/null and b/www/fonts/material-design-icons.woff2 differ
diff --git a/www/fonts/simple-line-icons.svg b/www/fonts/simple-line-icons.svg
index ed0de1b..e8cb6e4 100644
--- a/www/fonts/simple-line-icons.svg
+++ b/www/fonts/simple-line-icons.svg
@@ -6,6 +6,10 @@
+
+
diff --git a/www/images/svg/icon-outline-person.svg b/www/images/svg/icon-outline-person.svg
new file mode 100644
index 0000000..29e2fa7
--- /dev/null
+++ b/www/images/svg/icon-outline-person.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file