IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Change category-boxes so it's easier to customize with CSS

Browse Source
This commit is contained in:
Neil Lalonde 2017-03-20 14:43:55 -04:00
parent 85280b0bc8
commit 0238a076f3
2 changed files with 27 additions and 23 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,16 +1,17 @@
{{#each categories as |c|}} {{#each categories as |c|}}
<div class='category-box'> <div class='category-box category-box-{{unbound c.slug}}'>
<a href={{c.url}}> <a href={{c.url}}>
<div class='category-box-heading'>
{{#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 class='details'>
<h3>{{c.name}}</h3> <h3>{{c.name}}</h3>
</div>
<div class='description'> <div class='description'>
{{{c.description_excerpt}}} {{{c.description_excerpt}}}
</div> </div>
</div>
</a> </a>
</div> </div>
{{/each}} {{/each}}

33
app/assets/stylesheets/desktop/category-list.scss
View File

@ -197,19 +197,6 @@
width: 100%; width: 100%;
} }
.details {
h3 {
font-size: 1.5em;
margin-bottom: 0.5em;
margin-top: 0.25em;
line-height: 1.1em;
}
.description {
font-size: 1.05em;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
}
}
.logo { .logo {
display: block; display: block;
height: 40px; height: 40px;
@ -230,10 +217,26 @@
margin: 0 1% 1.5em 1%; margin: 0 1% 1.5em 1%;
> a { > a {
width: 100%; width: 100%;
padding: 1em; padding: 0;
} }
} }
.details {
.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%));
}
h3 {
font-size: 1.5em;
margin-bottom: 0.5em;
margin-top: 0.25em;
line-height: 1.1em;
text-align: center; text-align: center;
} }