Project list responsive

This commit is contained in:
Alexandre Bourlier 2018-04-26 02:36:18 +02:00
parent 912a134036
commit 96e227c0f3
3 changed files with 33 additions and 2 deletions

View File

@ -1,8 +1,25 @@
<script>
class LDPDisplayClient extends LDPWidget {
get template() {
return `<img name="${this.name}" src="${this.value.logo}"/>`;
}
render() {
store.get(this.value).then( (value) => {
this._value = value;
this.innerHTML = this.template;
});
}
}
customElements.define("ldp-display-client", LDPDisplayClient);
</script>
<div id="projects" style="display: none"> <div id="projects" style="display: none">
<ldp-display <ldp-display
id="projects-list" id="projects-list"
data-src="http://localhost:8000/projects/" data-src="http://localhost:8000/projects/"
data-fields="number, name" data-fields="number, client, name"
widget-client="ldp-display-client"
search-fields="number, name" search-fields="number, name"
next="project" next="project"
></ldp-display> ></ldp-display>

View File

@ -55,7 +55,7 @@
} }
%td { %td {
padding: .75rem; padding: .65rem;
vertical-align: top; vertical-align: top;
border-top: 1px solid #dee2e6; border-top: 1px solid #dee2e6;
} }

View File

@ -2,15 +2,29 @@
#projects-list { #projects-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 40px;
ldp-display { ldp-display {
@extend %td; @extend %td;
cursor: pointer;
display: flex; display: flex;
align-items: center;
height: 65px;
&:hover {
font-weight: bold;
}
ldp-display-div[name="number"] { ldp-display-div[name="number"] {
width: 50px; width: 50px;
} }
ldp-display-client[name="client"] {
&, img {
width: 50px;
}
}
ldp-display-div[name="name"] { ldp-display-div[name="name"] {
width: 150px; width: 150px;
} }