Revert "FEATURE: mobile support for row and box category styles"

This commit is contained in:
Neil Lalonde 2017-03-25 00:38:56 -04:00
parent 7c17966171
commit 0083602ddd
6 changed files with 193 additions and 236 deletions

View File

@ -1,59 +0,0 @@
{{#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}}

View File

@ -1,3 +0,0 @@
{{categories-only categories=categories
latestTopicOnly=latestTopicOnly
showTopics="true"}}

View File

@ -1,6 +1,53 @@
{{#discovery-categories refresh="refresh"}}
{{component categoryPageStyle
categories=model.categories
latestTopicOnly=latestTopicOnly
topics=model.topics}}
{{/discovery-categories}}
{{#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}}

View File

@ -1,136 +0,0 @@
.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'; }
}
}

View File

@ -176,3 +176,140 @@
}
}
}
.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'; }
}
}

View File

@ -130,31 +130,8 @@
// Category list
// --------------------------------------------------
.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;
}
}
.categories-list .list-container {
margin-left: -10px; // Extend past the .wrap padding to the edge of the window
}
.category-list-item.category {
@ -300,11 +277,6 @@ tr.category-topic-link {
}
}
.category-box {
h3 {
margin: 0 0 0.5em 0;
}
}
.topic-list-bottom {
margin: 20px 0 0 0;
@ -419,7 +391,6 @@ ol.category-breadcrumb {
.category-logo {
display: block;
max-width: 100%;
max-height: 150px;
padding: 8px 0;
}
@ -449,6 +420,6 @@ td .main-link {
}
}
.category-list.with-topics .category-list-item .category-description {
.category-list-item .category-description {
display: none;
}