Style user address (with username seperate from host)

This commit is contained in:
Basti 2017-12-26 12:03:40 +01:00
parent 0a41be32fd
commit e38e873dd2
7 changed files with 52 additions and 7 deletions

View File

@ -0,0 +1,18 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
export default Component.extend({
classNames: ['account-info'],
userAddress: null,
username: computed('userAddress', function() {
return this.get('userAddress').split('@')[0];
}),
host: computed('userAddress', function() {
return '@' + this.get('userAddress').split('@')[1];
})
});

View File

@ -0,0 +1,2 @@
<span class="username">{{username}}</span>
<br><span class="host">{{host}}</span>

View File

@ -43,15 +43,15 @@
> aside {
flex: 0 0 16rem;
overflow: auto;
padding: 3rem 2rem;
padding: 2rem;
}
}
> aside {
transition: flex 0.2s ease-in;
#account {
height: 4em;
.account-info {
height: 5rem;
}
// nav {
@ -66,7 +66,7 @@
padding: 3rem 4rem;
> header {
height: 4em;
height: 4rem;
}
}
}

View File

@ -16,6 +16,7 @@ body {
padding: 0;
}
@import "components/account-info";
@import "components/breadcrumb-nav";
@import "components/categories-nav";
@import "components/directory-listing";

View File

@ -0,0 +1,12 @@
.account-info {
.username {
font-size: 1.4rem;
}
.host {
font-size: 0.8rem;
opacity: 0.7;
}
}

View File

@ -1,9 +1,7 @@
<div id="app-container" class={{connectedClass}}>
<aside>
{{#if connected}}
<div id="account">
<span class="user-address">{{userAddress}}</span>
</div>
{{account-info userAddress=userAddress}}
{{categories-nav categories=categories}}
{{/if}}
</aside>

View File

@ -0,0 +1,14 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
moduleForComponent('account-info', 'Integration | Component | account info', {
integration: true
});
test('it splits the user address into username and host', function(assert) {
this.set('userAddress', 'michielbdejong@unhosted.org');
this.render(hbs`{{account-info userAddress=userAddress}}`);
assert.equal(this.$('.username').text().trim(), 'michielbdejong');
assert.equal(this.$('.host').text().trim(), '@unhosted.org');
});