UX: Some category page style adjustments for sub-sub categories
This commit is contained in:
Kris
parent
6ec3d42b16
commit
00477d8f88
|
|
@ -14,17 +14,23 @@
|
|||
<tr data-category-id={{c.id}} class="{{if c.description_excerpt 'has-description' 'no-description'}} {{if c.uploaded_logo.url 'has-logo' 'no-logo'}}">
|
||||
<td class="category" style={{border-color c.color}}>
|
||||
{{category-title-link category=c}}
|
||||
<div class="category-description">
|
||||
{{{dir-span c.description_excerpt}}}
|
||||
</div>
|
||||
|
||||
{{#if c.description_excerpt}}
|
||||
<div class="category-description">
|
||||
{{{dir-span c.description_excerpt}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if c.isGrandParent}}
|
||||
<table class="category-list">
|
||||
<table class="category-list subcategories-with-subcategories">
|
||||
{{#each c.subcategories as |subcategory|}}
|
||||
<tr data-category-id={{subcategory.id}} class="{{if subcategory.description_excerpt 'has-description' 'no-description'}} {{if subcategory.uploaded_logo.url 'has-logo' 'no-logo'}}">
|
||||
<td class="category" style={{border-color subcategory.color}}>
|
||||
{{category-title-link tagName="h4" category=subcategory}}
|
||||
|
||||
{{log subcategory}}
|
||||
{{#if subcategory.description_excerpt}}
|
||||
<div class="category-description subcategory-description">
|
||||
{{{dir-span subcategory.description_excerpt}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if subcategory.subcategories}}
|
||||
<div class='subcategories'>
|
||||
{{#each subcategory.subcategories as |subsubcategory|}}
|
||||
|
|
@ -37,9 +43,11 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="category-description">
|
||||
{{{dir-span subcategory.description_excerpt}}}
|
||||
</div>
|
||||
{{#if subcategory.description_excerpt}}
|
||||
<div class="category-description subcategory-description">
|
||||
{{{dir-span subcategory.description_excerpt}}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,13 @@
|
|||
vertical-align: text-top;
|
||||
line-height: $line-height-medium;
|
||||
}
|
||||
&.with-topics {
|
||||
.subcategories-with-subcategories {
|
||||
.category-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes,
|
||||
|
|
@ -195,12 +202,24 @@
|
|||
}
|
||||
|
||||
.categories-list .category {
|
||||
h3 .d-icon {
|
||||
color: $primary-medium;
|
||||
height: 0.76em;
|
||||
width: 0.76em;
|
||||
vertical-align: baseline;
|
||||
margin-right: 0.15em;
|
||||
h3,
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
.d-icon {
|
||||
color: $primary-high;
|
||||
height: 0.76em;
|
||||
width: 0.76em;
|
||||
vertical-align: baseline;
|
||||
margin-right: 0.15em;
|
||||
}
|
||||
}
|
||||
.category-description {
|
||||
margin-top: 0.5em;
|
||||
overflow: hidden;
|
||||
color: $primary-high;
|
||||
}
|
||||
.category-logo.aspect-image {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,3 +229,15 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-list.subcategories-with-subcategories {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid $primary-low;
|
||||
.category-description {
|
||||
font-size: $font-down-1;
|
||||
}
|
||||
.category-logo.aspect-image {
|
||||
--max-height: 75px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -151,4 +151,10 @@
|
|||
.topic-featured-link {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.subcategories-with-subcategories {
|
||||
.category-description {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -218,7 +218,6 @@
|
|||
// Category list
|
||||
// --------------------------------------------------
|
||||
.categories-list .category-list {
|
||||
margin-left: -10px;
|
||||
margin-bottom: 2em;
|
||||
|
||||
td {
|
||||
|
|
@ -265,10 +264,22 @@
|
|||
}
|
||||
|
||||
.subcategory-list-item.category {
|
||||
display: block;
|
||||
width: calc(100% + 20px);
|
||||
margin: 1.25em 10px 0;
|
||||
border-bottom: none !important;
|
||||
border-top: 1px solid $primary-low !important;
|
||||
&:last-of-type {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.25em;
|
||||
border-bottom: 1px solid $primary-low !important;
|
||||
}
|
||||
td:first-of-type {
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.category-logo.aspect-image {
|
||||
display: none;
|
||||
}
|
||||
.subcategories {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
|
@ -283,9 +294,8 @@ tr.category-topic-link {
|
|||
|
||||
.category-list-item,
|
||||
.subcategory-list-item {
|
||||
padding: 5px 0 2px 3px;
|
||||
padding: 0 0 0 3px;
|
||||
border-left: 6px solid;
|
||||
border-top: 1px solid;
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
|
|
@ -326,8 +336,11 @@ tr.category-topic-link {
|
|||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.subcategories-list td {
|
||||
padding-top: 15px;
|
||||
.subcategories-list {
|
||||
border-bottom: none;
|
||||
td {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list > tbody > tr {
|
||||
|
|
@ -376,6 +389,13 @@ tr.category-topic-link {
|
|||
}
|
||||
}
|
||||
|
||||
.category-list-item {
|
||||
padding: 0.5em 0 0.25em;
|
||||
border-top: 1px solid $primary-low !important;
|
||||
border-bottom: 1px solid $primary-low !important;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.category-box {
|
||||
h3 {
|
||||
margin: 0 0 0.5em 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue