UX: Improving styles for narrow viewports, some general styling (#3)
This commit is contained in:
Kris
Justin DiRose
parent
f31b01ec91
commit
5389d58872
|
|
@ -1,12 +1,15 @@
|
|||
import { default as computed } from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default Ember.Component.extend({
|
||||
tagName: "",
|
||||
@computed("category")
|
||||
categoryName(category) {
|
||||
return this.site.categories.findBy("id", category.id).name;
|
||||
},
|
||||
click() {
|
||||
this.selectCategory(this.category);
|
||||
return false;
|
||||
actions: {
|
||||
selectCategory() {
|
||||
this.selectCategory(this.category);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
export default Ember.Component.extend({
|
||||
click() {
|
||||
this.selectTag(this.tag);
|
||||
return false;
|
||||
tagName: "",
|
||||
actions: {
|
||||
selectTag() {
|
||||
this.selectTag(this.tag);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="knowledge-explorer-category {{if category.active 'selected'}}">
|
||||
<a {{action "selectCategory"}} class="knowledge-explorer-item knowledge-explorer-category {{if category.active 'selected'}}">
|
||||
{{#unless category.active}}
|
||||
{{d-icon "plus"}}
|
||||
{{/unless}}
|
||||
<span class="category-id">{{categoryName}}</span>
|
||||
<span class="category-count">({{category.count}})</span>
|
||||
{{#if category.active}}
|
||||
{{d-icon "times-circle"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<span class="knowledge-explorer-item-id category-id">{{categoryName}}</span>
|
||||
<span class="knowledge-explorer-item-count category-count">{{category.count}}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
{{input
|
||||
type="text"
|
||||
value=(readonly searchTerm)
|
||||
input=(action "onSearchTermChange" value="target.value")
|
||||
class="knowledge-explorer-search-bar"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
}}
|
||||
<span class="knowledge-base-search-wrapper">
|
||||
{{input
|
||||
type="text"
|
||||
value=(readonly searchTerm)
|
||||
input=(action "onSearchTermChange" value="target.value")
|
||||
class="knowledge-explorer-search-bar"
|
||||
autocorrect="off"
|
||||
placeholder=(i18n "knowledge_explorer.search.placeholder")
|
||||
autocapitalize="off"
|
||||
}}
|
||||
{{d-icon "search"}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="knowledge-explorer-tag {{if tag.active 'selected'}} {{if subtag 'subtag'}}">
|
||||
<a {{action "selectTag"}} class="knowledge-explorer-item knowledge-explorer-tag {{if tag.active 'selected'}} {{if subtag 'subtag'}}">
|
||||
{{#unless tag.active}}
|
||||
{{d-icon "plus"}}
|
||||
{{/unless}}
|
||||
<span class="tag-id">{{tag.id}}</span>
|
||||
<span class="tag-count">({{tag.count}})</span>
|
||||
{{#if tag.active}}
|
||||
{{d-icon "times-circle"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<span class="knowledge-explorer-item-id tag-id">{{tag.id}}</span>
|
||||
<span class="knowledge-explorer-item-count tag-count">{{tag.count}}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -8,5 +8,5 @@
|
|||
</div>
|
||||
|
||||
<a class="knowledge-explorer-nav-link more" href="/t/{{topic.id}}">
|
||||
{{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
|
||||
{{d-icon "far-comment"}} {{i18n 'knowledge_explorer.topic.navigate_to_topic'}}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,29 @@
|
|||
{{#conditional-loading-spinner condition=isLoading}}
|
||||
<div class="knowledge-explorer-browse">
|
||||
<div class="knowledge-explorer-filters">
|
||||
<div class="knowledge-explorer-categories">
|
||||
<h3>{{i18n 'knowledge_explorer.categories'}}</h3>
|
||||
{{#each categories as |category|}}
|
||||
{{knowledge-explorer-category
|
||||
category=category
|
||||
selectCategory=(action "updateSelectedCategories")
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="knowledge-explorer-tags">
|
||||
<h3>{{i18n 'knowledge_explorer.tags'}}</h3>
|
||||
{{#each tags as |tag|}}
|
||||
{{knowledge-explorer-tag
|
||||
tag=tag
|
||||
selectTag=(action "updateSelectedTags")
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{#if categories}}
|
||||
<div class="knowledge-explorer-items knowledge-explorer-categories">
|
||||
<h3>{{i18n 'knowledge_explorer.categories'}}</h3>
|
||||
{{#each categories as |category|}}
|
||||
{{knowledge-explorer-category
|
||||
category=category
|
||||
selectCategory=(action "updateSelectedCategories"
|
||||
tagName="")
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if tags}}
|
||||
<div class="knowledge-explorer-items knowledge-explorer-tags">
|
||||
<h3>{{i18n 'knowledge_explorer.tags'}}</h3>
|
||||
{{#each tags as |tag|}}
|
||||
{{knowledge-explorer-tag
|
||||
tag=tag
|
||||
selectTag=(action "updateSelectedTags")
|
||||
}}
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{#if selectedTopic}}
|
||||
{{#conditional-loading-spinner condition=isTopicLoading}}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,132 @@
|
|||
.knowledge-explorer {
|
||||
.knowledge-base-search-wrapper {
|
||||
position: relative;
|
||||
width: 500px;
|
||||
.d-icon {
|
||||
position: absolute;
|
||||
right: 0.75em;
|
||||
top: 25%;
|
||||
font-size: 1.5em;
|
||||
color: $primary-low-mid;
|
||||
pointer-events: none;
|
||||
@media screen and (max-width: 400px) {
|
||||
// Just decoration, remove on small screens
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-search {
|
||||
}
|
||||
|
||||
.knowledge-explorer-search {
|
||||
align-items: center;
|
||||
background-color: $primary-very-low;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 1.5em 1em;
|
||||
.knowledge-explorer-search-bar {
|
||||
height: 50px;
|
||||
margin-bottom: 0px;
|
||||
width: 500px;
|
||||
@include breakpoint(mobile-extra-large, min-width) {
|
||||
// More breathing room on larger screens
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-browse {
|
||||
display: flex;
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
padding: 10px 0 10px 10px;
|
||||
}
|
||||
.knowledge-explorer-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 100%;
|
||||
.result-count {
|
||||
padding-top: 15px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-filters {
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.knowledge-explorer-tags, .knowledge-explorer-categories {
|
||||
padding: 10px 10px 10px 0;
|
||||
a {
|
||||
color: $primary;
|
||||
.knowledge-explorer-search-bar {
|
||||
height: 50px;
|
||||
margin-bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-browse {
|
||||
display: flex;
|
||||
.loading-container {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
padding: 0.625em 0 0.625em 0.625em;
|
||||
}
|
||||
.knowledge-explorer-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-basis: 100%;
|
||||
.result-count {
|
||||
padding-top: 15px;
|
||||
padding-left: 0.625em;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-filters {
|
||||
margin-top: 0.15em;
|
||||
flex: 0 1 20%;
|
||||
@include breakpoint(tablet, min-width) {
|
||||
padding-right: 2em;
|
||||
}
|
||||
// min-width on flex allows container to
|
||||
// be more narrow than content if needed
|
||||
min-width: 175px;
|
||||
}
|
||||
.knowledge-explorer-items {
|
||||
padding: 0.57em 1em 1em 0;
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-left: 0.35em;
|
||||
font-size: $font-up-1;
|
||||
}
|
||||
|
||||
.knowledge-explorer-item-count {
|
||||
margin-left: auto;
|
||||
color: $primary-high;
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
|
||||
.knowledge-explorer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
.d-icon {
|
||||
height: 1em;
|
||||
padding-bottom: 0.15em;
|
||||
margin-right: 0.25em;
|
||||
color: $primary-high;
|
||||
&.d-icon-plus {
|
||||
height: 0.75em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-tag, .knowledge-explorer-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
padding-left: 10px;
|
||||
&:hover {
|
||||
background: $highlight-medium;
|
||||
}
|
||||
&.selected:hover {
|
||||
background: $danger-low;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.tag-id, .category-id {
|
||||
margin-right: 3px;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
.tag-id,
|
||||
.category-id {
|
||||
margin-right: 3px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-topic-list {
|
||||
flex-basis: 100%;
|
||||
.knowledge-explorer-topic-link {
|
||||
color: $tertiary;
|
||||
cursor: pointer;
|
||||
}
|
||||
.discourse-tag {
|
||||
padding-right: 5px;
|
||||
}
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-topic-list {
|
||||
flex-basis: 100%;
|
||||
|
||||
.badge-wrapper .badge-category .category-name {
|
||||
// extra protection for ultra-long category names
|
||||
max-width: 30vw;
|
||||
}
|
||||
|
||||
.knowledge-explorer-topic-link {
|
||||
color: $tertiary;
|
||||
}
|
||||
.discourse-tag {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-topic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -94,17 +140,15 @@
|
|||
}
|
||||
}
|
||||
&.more {
|
||||
margin-left: auto;
|
||||
font-size: $font-up-1;
|
||||
padding: 10px 0;
|
||||
&::after {
|
||||
content: "»";
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-content {
|
||||
h1 {
|
||||
line-height: $line-height-medium;
|
||||
}
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,24 @@
|
|||
.mobile-view {
|
||||
.knowledge-explorer {
|
||||
.knowledge-explorer-topic {
|
||||
width: calc(100vw - .75em);
|
||||
margin: 10px 0;
|
||||
width: calc(100vw - 0.75em);
|
||||
margin: 0.625em 0;
|
||||
}
|
||||
.knowledge-explorer-search {
|
||||
font-size: $font-up-2;
|
||||
padding: .5em 0;
|
||||
padding: 0.5em 0;
|
||||
|
||||
.knowledge-explorer-search-bar {
|
||||
width: calc(100vw - 2em);
|
||||
}
|
||||
}
|
||||
.knowledge-explorer-browse {
|
||||
.knowledge-explorer-items {
|
||||
padding-right: 0;
|
||||
}
|
||||
flex-direction: column;
|
||||
.knowledge-explorer-results .result-count {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.knowledge-explorer-tags {
|
||||
flex-basis: 100%;
|
||||
padding: 1em 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.knowledge-explorer-topic-list {
|
||||
flex-basis: 100%;
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ en:
|
|||
categories: "Categories"
|
||||
tags: "Tags"
|
||||
search:
|
||||
results:
|
||||
results:
|
||||
one: "%{count} result found"
|
||||
other: "%{count} results found"
|
||||
placeholder: "Search for topics"
|
||||
topic:
|
||||
back: "Go back"
|
||||
navigate_to_topic: "View the discussion on this topic"
|
||||
|
|
|
|||
Loading…
Reference in New Issue