FEATURE: mobile support for row and box category styles
This commit is contained in:
Neil Lalonde
parent
27a73c73f9
commit
6e847bb297
|
|
@ -0,0 +1,59 @@
|
|||
{{#if categories}}
|
||||
<div class="category-list {{if showTopics 'with-topics'}}">
|
||||
{{#each categories as |c|}}
|
||||
<div class='category-list-item category' style={{border-color c.color}}>
|
||||
<table class='topic-list'>
|
||||
<tr>
|
||||
<th class="main-link">
|
||||
{{category-title-link category=c}}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{{#if c.description_excerpt}}
|
||||
<tr class="category-description">
|
||||
<td colspan="3">
|
||||
{{{c.description_excerpt}}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
|
||||
{{#if showTopics}}
|
||||
{{#each c.topics as |t|}}
|
||||
{{mobile-category-topic topic=t}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
|
||||
{{#if c.subcategories}}
|
||||
<tr class="subcategories-list">
|
||||
<td>
|
||||
<div class='subcategories'>
|
||||
{{#each c.subcategories as |subcategory|}}
|
||||
{{category-link subcategory}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
|
||||
</table>
|
||||
<footer class="clearfix">
|
||||
|
||||
<figure title="{{i18n 'all_time_desc'}}">{{number c.topics_all_time}} <figcaption>{{i18n 'all_time'}}</figcaption></figure>
|
||||
|
||||
{{#if c.pickMonth}}
|
||||
<figure title="{{i18n 'month_desc'}}">{{number c.topics_month}} <figcaption>{{i18n 'month'}}</figcaption></figure>
|
||||
{{/if}}
|
||||
|
||||
{{#if c.pickWeek}}
|
||||
<figure title="{{i18n 'week_desc'}}">{{number c.topics_week}} <figcaption>{{i18n 'week'}}</figcaption></figure>
|
||||
{{/if}}
|
||||
|
||||
{{#if c.can_edit}}
|
||||
<a href {{action "editCategory" c}} class='btn btn-small'>{{i18n 'category.edit'}}</a>
|
||||
{{/if}}
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{{categories-only categories=categories
|
||||
latestTopicOnly=latestTopicOnly
|
||||
showTopics="true"}}
|
||||
|
|
@ -1,53 +1,6 @@
|
|||
{{#each model.categories as |c|}}
|
||||
<div class='category-list-item category' style={{border-color c.color}}>
|
||||
<table class='topic-list'>
|
||||
<tr>
|
||||
<th class="main-link">
|
||||
{{category-title-link category=c}}
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{{#if c.description_excerpt}}
|
||||
<tr class="category-description">
|
||||
<td colspan="3">
|
||||
{{{c.description_excerpt}}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
|
||||
{{#each c.topics as |t|}}
|
||||
{{mobile-category-topic topic=t}}
|
||||
{{/each}}
|
||||
|
||||
{{#if c.subcategories}}
|
||||
<tr class="subcategories-list">
|
||||
<td>
|
||||
<div class='subcategories'>
|
||||
{{#each c.subcategories as |subcategory|}}
|
||||
{{category-link subcategory}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/if}}
|
||||
|
||||
</table>
|
||||
<footer class="clearfix">
|
||||
|
||||
<figure title="{{i18n 'all_time_desc'}}">{{number c.topics_all_time}} <figcaption>{{i18n 'all_time'}}</figcaption></figure>
|
||||
|
||||
{{#if c.pickMonth}}
|
||||
<figure title="{{i18n 'month_desc'}}">{{number c.topics_month}} <figcaption>{{i18n 'month'}}</figcaption></figure>
|
||||
{{/if}}
|
||||
|
||||
{{#if c.pickWeek}}
|
||||
<figure title="{{i18n 'week_desc'}}">{{number c.topics_week}} <figcaption>{{i18n 'week'}}</figcaption></figure>
|
||||
{{/if}}
|
||||
|
||||
{{#if c.can_edit}}
|
||||
<a href {{action "editCategory" c}} class='btn btn-small'>{{i18n 'category.edit'}}</a>
|
||||
{{/if}}
|
||||
|
||||
</footer>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{#discovery-categories refresh="refresh"}}
|
||||
{{component categoryPageStyle
|
||||
categories=model.categories
|
||||
latestTopicOnly=latestTopicOnly
|
||||
topics=model.topics}}
|
||||
{{/discovery-categories}}
|
||||
|
|
@ -0,0 +1,136 @@
|
|||
.category-boxes, .category-boxes-with-topics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
.category-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: flex-start;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 2px solid blend-primary-secondary(20%);
|
||||
|
||||
.mobile-view & {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
|
||||
h3 .fa {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-logos {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes {
|
||||
.category-box {
|
||||
width: 23%;
|
||||
margin: 0 1% 1.5em 1%;
|
||||
> a {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-box-heading {
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0 1em 1em 1em;
|
||||
text-align: center;
|
||||
font-size: 1.05em;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
.overflow {
|
||||
max-height: 6em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.25em;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.no-logos {
|
||||
.category-box a {
|
||||
padding: 3em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes-with-topics {
|
||||
.category-box {
|
||||
width: 31%;
|
||||
margin: 0 1% 1.5em 1%;
|
||||
padding: 0;
|
||||
border-width: 0 0 0 6px;
|
||||
border-style: solid;
|
||||
border-color: blend-primary-secondary(20%);
|
||||
}
|
||||
.category-box-inner {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-width: 2px 2px 2px 0;
|
||||
border-style: solid;
|
||||
border-color: blend-primary-secondary(20%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-box-heading {
|
||||
padding: 1em 1em 0.5em 1em;
|
||||
a[href] {
|
||||
width: 100%;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-topics {
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
ul {
|
||||
color: blend-primary-secondary(70%);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
margin-left: 1.5em;
|
||||
.overflow {
|
||||
max-height: 3em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
li:before {
|
||||
content: '\f0f6';
|
||||
font-family: 'FontAwesome';
|
||||
float: left;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
li.topic-pinned:before { content: '\f08d'; }
|
||||
li.topic-closed:before, li.topic-archived:before { content: '\f023'; }
|
||||
}
|
||||
}
|
||||
|
|
@ -176,140 +176,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes, .category-boxes-with-topics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
.category-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: flex-start;
|
||||
|
||||
box-sizing: border-box;
|
||||
border: 2px solid blend-primary-secondary(20%);
|
||||
|
||||
.mobile-view & {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
height: 40px;
|
||||
margin: 0 auto 1em auto;
|
||||
}
|
||||
|
||||
h3 .fa {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-logos {
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes {
|
||||
.category-box {
|
||||
width: 23%;
|
||||
margin: 0 1% 1.5em 1%;
|
||||
> a {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.category-box-heading {
|
||||
padding: 1em 1em 0 1em;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 0 1em 1em 1em;
|
||||
text-align: center;
|
||||
font-size: 1.05em;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
.overflow {
|
||||
max-height: 6em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.25em;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.no-logos {
|
||||
.category-box a {
|
||||
padding: 3em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-boxes-with-topics {
|
||||
.category-box {
|
||||
width: 31%;
|
||||
margin: 0 1% 1.5em 1%;
|
||||
padding: 0;
|
||||
border-width: 0 0 0 6px;
|
||||
border-style: solid;
|
||||
border-color: blend-primary-secondary(20%);
|
||||
}
|
||||
.category-box-inner {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-width: 2px 2px 2px 0;
|
||||
border-style: solid;
|
||||
border-color: blend-primary-secondary(20%);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-box-heading {
|
||||
padding: 1em 1em 0.5em 1em;
|
||||
a[href] {
|
||||
width: 100%;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-topics {
|
||||
padding: 0.5em 1em 1em 1em;
|
||||
ul {
|
||||
color: blend-primary-secondary(70%);
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
padding: 0;
|
||||
margin-left: 1.5em;
|
||||
.overflow {
|
||||
max-height: 3em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
li:before {
|
||||
content: '\f0f6';
|
||||
font-family: 'FontAwesome';
|
||||
float: left;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
li.topic-pinned:before { content: '\f08d'; }
|
||||
li.topic-closed:before, li.topic-archived:before { content: '\f023'; }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,8 +130,31 @@
|
|||
|
||||
// Category list
|
||||
// --------------------------------------------------
|
||||
.categories-list .list-container {
|
||||
margin-left: -10px; // Extend past the .wrap padding to the edge of the window
|
||||
.categories-list .category-list {
|
||||
margin-left: -10px;
|
||||
margin-bottom: 2em;
|
||||
|
||||
td {
|
||||
padding: 12px 5px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td:first-of-type {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
|
||||
&:first-of-type {
|
||||
border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
|
||||
}
|
||||
}
|
||||
.category {
|
||||
border-left: 6px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-list-item.category {
|
||||
|
|
@ -277,6 +300,11 @@ tr.category-topic-link {
|
|||
}
|
||||
}
|
||||
|
||||
.category-box {
|
||||
h3 {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list-bottom {
|
||||
margin: 20px 0 0 0;
|
||||
|
|
@ -391,6 +419,7 @@ ol.category-breadcrumb {
|
|||
.category-logo {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 150px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
|
|
@ -420,6 +449,6 @@ td .main-link {
|
|||
}
|
||||
}
|
||||
|
||||
.category-list-item .category-description {
|
||||
.category-list.with-topics .category-list-item .category-description {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue