Member detail page complete

This commit is contained in:
Alexandre Bourlier 2018-04-26 01:35:44 +02:00
parent 44fe4b91f9
commit 5304880083
5 changed files with 76 additions and 35 deletions

View File

@ -21,22 +21,22 @@
<div id="member-detail" style="display: none"> <div id="member-detail" style="display: none">
<ldp-display <ldp-display
id="member-info"
set-name="firstname, name-separator, lastname" set-name="firstname, name-separator, lastname"
value-name-separator="&nbsp;" value-name-separator="&nbsp;"
set-location="city, city-separator, country" data-fields="avatar, name, cell, email, number"
value-city-separator=",&nbsp;"
data-fields="avatar, name, location, email, number"
widget-avatar="ldp-display-img" widget-avatar="ldp-display-img"
widget-cell="ldp-display-cell"
widget-email="ldp-display-mailto" widget-email="ldp-display-mailto"
widget-number="ldp-display-tel" widget-number="ldp-display-tel"
bind-resources bind-resources
></ldp-display> ></ldp-display>
<span>Skills here</span> <h2 class="section skills">Compétences</h2>
<!--<ldp-display --> <ldp-display
<!--id="member-skills" --> id="member-skills"
<!--id-suffix="skills"--> id-suffix="skills"
<!--bind-resources--> bind-resources
<!-- ></ldp-display>--> ></ldp-display>
</div> </div>
</div> </div>

View File

@ -3,6 +3,13 @@
get template() { get template() {
return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`; return `<div name="${this.name}">${this.value.city} - ${this.value.country}</div>`;
} }
render() {
store.get(this.value).then( (value) => {
this._value = value;
this.innerHTML = this.template;
});
}
} }
customElements.define("ldp-display-cell", LDPDisplayCell); customElements.define("ldp-display-cell", LDPDisplayCell);
</script> </script>

View File

@ -49,4 +49,11 @@ class Cell(models.Model):
return self.name return self.name
class ChatRoom(models.Model):
name = models.CharField(max_length=255, default='')
description = models.CharField(max_length=255, default='')
members = models.ManyToManyField("Member")
administrator = models.ManyToManyField("Member")
def __str__(self):
return self.name

View File

@ -1,3 +1,8 @@
%detail-section {
font-weight: bold;
font-size: 18px;
}
#member-chat { #member-chat {
#conversejs { #conversejs {
margin: none; margin: none;
@ -5,7 +10,7 @@
} }
#profiles-list, #profiles-list,
#member-profile { #member-info {
img { img {
display: block; display: block;
} }
@ -17,9 +22,8 @@
} }
div[name="name"] { div[name="name"] {
@extend %detail-section;
padding-top: 10px; padding-top: 10px;
font-weight: bold;
font-size: 18px;
} }
div[name="name"], div[name="name"],
@ -28,31 +32,53 @@
} }
} }
#member-profile { #member-detail {
ldp-display-mailto, #member-info {
ldp-display-tel { ldp-display-mailto,
display: block; ldp-display-tel {
display: block;
}
a[name="email"],
a[name="number"] {
&::before {
font-family: FontAwesome;
padding-right: 4px;
color: black;
}
}
a[name="email"] {
&::before {
content: "\f0e0";
}
}
a[name="number"] {
&::before {
content: "\f10b";
font-size: 22px;
padding-left: 3px;
padding-right: 7px;
}
}
} }
a[name="email"], .section {
a[name="number"] { @extend %detail-section;
&::before { margin-top: 40px;
font-family: FontAwesome;
padding-right: 4px;
color: black;
}
} }
a[name="email"] {
&::before { #member-skills {
content: "\f0e0"; display: flex;
} flex-wrap: wrap;
}
a[name="number"] { ldp-display {
&::before { display: block;
content: "\f10b"; background-color: $hd-color;
font-size: 22px; color: white;
padding-left: 3px; border-radius: 100px;
padding-right: 7px; padding: 3px 10px;
margin-bottom: 5px;
margin-right: 5px;
} }
} }
} }

View File

@ -1,5 +1,6 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: helvetica;
} }
html, body, #mainContainer { html, body, #mainContainer {