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|}}
|
{{#discovery-categories refresh="refresh"}}
|
||||||
<div class='category-list-item category' style={{border-color c.color}}>
|
{{component categoryPageStyle
|
||||||
<table class='topic-list'>
|
categories=model.categories
|
||||||
<tr>
|
latestTopicOnly=latestTopicOnly
|
||||||
<th class="main-link">
|
topics=model.topics}}
|
||||||
{{category-title-link category=c}}
|
{{/discovery-categories}}
|
||||||
</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}}
|
|
||||||
|
|
@ -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
|
// Category list
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
.categories-list .list-container {
|
.categories-list .category-list {
|
||||||
margin-left: -10px; // Extend past the .wrap padding to the edge of the window
|
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 {
|
.category-list-item.category {
|
||||||
|
|
@ -277,6 +300,11 @@ tr.category-topic-link {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.category-box {
|
||||||
|
h3 {
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.topic-list-bottom {
|
.topic-list-bottom {
|
||||||
margin: 20px 0 0 0;
|
margin: 20px 0 0 0;
|
||||||
|
|
@ -391,6 +419,7 @@ ol.category-breadcrumb {
|
||||||
.category-logo {
|
.category-logo {
|
||||||
display: block;
|
display: block;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
max-height: 150px;
|
||||||
padding: 8px 0;
|
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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue