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