Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Change box category view to use flexbox

This commit is contained in:
Jeff Wong 2018-10-17 15:36:25 -07:00
parent b9261588f9
commit ec2613699f
2 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
View File

@ -1,11 +1,13 @@
{{#each categories as |c|}} {{#each categories as |c|}}
<div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}> <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
<div class='category-box-inner'> <div class='category-box-inner'>
<div class='category-box-heading'> <div class="category-logo">
{{#if c.uploaded_logo.url}} {{#if c.uploaded_logo.url}}
{{cdn-img src=c.uploaded_logo.url class="logo"}} {{cdn-img src=c.uploaded_logo.url class="logo"}}
{{/if}} {{/if}}
</div>
<div class="category-details">
<div class='category-box-heading'>
<h3> <h3>
{{#if c.read_restricted}} {{#if c.read_restricted}}
{{d-icon 'lock'}} {{d-icon 'lock'}}
@ -32,4 +34,5 @@
{{/if}} {{/if}}
</div> </div>
</div> </div>
</div>
{{/each}} {{/each}}

19
app/assets/stylesheets/common/base/category-list.scss
View File

@ -55,6 +55,8 @@
.category-box-inner { .category-box-inner {
width: 100%; width: 100%;
padding: 0; padding: 0;
display: flex;
flex-direction: column;
border-width: 2px; border-width: 2px;
border-left-width: 0; border-left-width: 0;
@ -78,6 +80,14 @@
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
.category-box-inner {
padding: 1em;
.category-logo {
float: none;
margin: 0;
}
}
} }
&.no-logos { &.no-logos {
@ -86,12 +96,8 @@
} }
} }
.category-box-heading {
padding: 1em 1em 0 1em;
}
.description { .description {
padding: 0 1em 1em 1em; padding-bottom: 1em;
text-align: center; text-align: center;
font-size: $font-0; font-size: $font-0;
color: dark-light-choose($primary-medium, $secondary-high); color: dark-light-choose($primary-medium, $secondary-high);
@ -114,7 +120,6 @@
} }
.subcategories { .subcategories {
margin-left: 1em;
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
.subcategory { .subcategory {
@ -127,8 +132,6 @@
margin-bottom: 0.6em; margin-bottom: 0.6em;
.subcategory-image-placeholder { .subcategory-image-placeholder {
display: inline-block; display: inline-block;
width: 20px;
height: 20px;
margin-right: 0.6em; margin-right: 0.6em;
} }
.logo { .logo {