Basic styling, set up query params
This commit is contained in:
parent
af0243cee8
commit
46820c070f
|
@ -0,0 +1,3 @@
|
||||||
|
export default Ember.Component.extend({
|
||||||
|
classNames: "knowledge-explorer-topic-list"
|
||||||
|
});
|
|
@ -5,5 +5,11 @@ import {
|
||||||
} from "ember-addons/ember-computed-decorators";
|
} from "ember-addons/ember-computed-decorators";
|
||||||
|
|
||||||
export default Ember.Controller.extend({
|
export default Ember.Controller.extend({
|
||||||
application: Ember.inject.controller()
|
application: Ember.inject.controller(),
|
||||||
|
queryParams: {
|
||||||
|
filterCategory: 'category',
|
||||||
|
filterTags: 'tags'
|
||||||
|
},
|
||||||
|
filterTags: null,
|
||||||
|
filterCategory: null,
|
||||||
});
|
});
|
||||||
|
|
|
@ -7,7 +7,8 @@ export default Ember.Route.extend({
|
||||||
|
|
||||||
setupController(controller, model) {
|
setupController(controller, model) {
|
||||||
controller.setProperties({
|
controller.setProperties({
|
||||||
model: model
|
tags: model.tags,
|
||||||
|
topics: model.topics
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<div class="knowledge-explorer">
|
<div class="knowledge-explorer">
|
||||||
|
<div class="knowledge-explorer-browse">
|
||||||
{{knowledge-explorer-tags
|
{{knowledge-explorer-tags
|
||||||
tags=model.tags
|
tags=tags
|
||||||
searchResults=searchResults}}
|
searchResults=searchResults}}
|
||||||
{{knowledge-explorer-topic-list topics=model.topics}}
|
{{knowledge-explorer-topic-list topics=topics}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
.knowledge-explorer {
|
||||||
|
.knowledge-explorer-browse {
|
||||||
|
display: flex;
|
||||||
|
.knowledge-explorer-tags {
|
||||||
|
flex-basis: 25%;
|
||||||
|
padding: 10px 10px 10px 0;
|
||||||
|
a {
|
||||||
|
color: $primary;
|
||||||
|
}
|
||||||
|
.knowledge-explorer-tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 10px;
|
||||||
|
.d-icon {
|
||||||
|
height: 1em;
|
||||||
|
&.d-icon-plus {
|
||||||
|
height: 0.75em;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
&.d-icon-times-circle {
|
||||||
|
margin-left: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: $highlight-medium;
|
||||||
|
}
|
||||||
|
&.selected:hover {
|
||||||
|
background: $danger-low;
|
||||||
|
|
||||||
|
.d-icon {
|
||||||
|
color: $danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.knowledge-explorer-topic-list {
|
||||||
|
flex-basis: 75%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue