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";
|
||||
|
||||
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) {
|
||||
controller.setProperties({
|
||||
model: model
|
||||
tags: model.tags,
|
||||
topics: model.topics
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<div class="knowledge-explorer">
|
||||
{{knowledge-explorer-tags
|
||||
tags=model.tags
|
||||
searchResults=searchResults}}
|
||||
{{knowledge-explorer-topic-list topics=model.topics}}
|
||||
<div class="knowledge-explorer-browse">
|
||||
{{knowledge-explorer-tags
|
||||
tags=tags
|
||||
searchResults=searchResults}}
|
||||
{{knowledge-explorer-topic-list topics=topics}}
|
||||
</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