Style user address (with username seperate from host)
This commit is contained in:
parent
0a41be32fd
commit
e38e873dd2
18
app/components/account-info/component.js
Normal file
18
app/components/account-info/component.js
Normal 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];
|
||||
})
|
||||
|
||||
});
|
2
app/components/account-info/template.hbs
Normal file
2
app/components/account-info/template.hbs
Normal file
@ -0,0 +1,2 @@
|
||||
<span class="username">{{username}}</span>
|
||||
<br><span class="host">{{host}}</span>
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -16,6 +16,7 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@import "components/account-info";
|
||||
@import "components/breadcrumb-nav";
|
||||
@import "components/categories-nav";
|
||||
@import "components/directory-listing";
|
||||
|
12
app/styles/components/_account-info.scss
Normal file
12
app/styles/components/_account-info.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.account-info {
|
||||
|
||||
.username {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.host {
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
}
|
@ -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>
|
||||
|
14
tests/integration/components/account-info/component-test.js
Normal file
14
tests/integration/components/account-info/component-test.js
Normal 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');
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user