mirror of
https://github.com/discourse/discourse.git
synced 2025-06-05 14:07:30 +08:00
DEV: Apply prettier to hbs files
This commit is contained in:
David Taylor
@ -1,2 +1,2 @@
|
||||
<div class="color-bg {{this.color}}"></div>
|
||||
<div class="color-name">var(--{{this.color}})</div>
|
||||
<div class="color-name">var(--{{this.color}})</div>
|
||||
@ -1,2 +1,2 @@
|
||||
<div class="example-title">{{this.title}}</div>
|
||||
<section class="rendered">{{yield this.value}}</section>
|
||||
<section class="rendered">{{yield this.value}}</section>
|
||||
@ -3,4 +3,4 @@
|
||||
{{d-icon id}}
|
||||
<span>{{id}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/each}}
|
||||
@ -1,3 +1,6 @@
|
||||
<LinkTo @route="styleguide.show" @models={{array this.section.category this.section.id}}>
|
||||
<LinkTo
|
||||
@route="styleguide.show"
|
||||
@models={{array this.section.category this.section.id}}
|
||||
>
|
||||
{{section-title this.section.id}}
|
||||
</LinkTo>
|
||||
</LinkTo>
|
||||
@ -8,4 +8,4 @@
|
||||
|
||||
<div class="styleguide-section-contents">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
@ -2,7 +2,9 @@
|
||||
<section class="styleguide-menu">
|
||||
{{#each this.categories as |c|}}
|
||||
<ul>
|
||||
<li class="styleguide-heading">{{i18n (concat "styleguide.categories." c.id)}}</li>
|
||||
<li class="styleguide-heading">{{i18n
|
||||
(concat "styleguide.categories." c.id)
|
||||
}}</li>
|
||||
{{#each c.sections as |s|}}
|
||||
<li><StyleguideLink @section={{s}} /></li>
|
||||
{{/each}}
|
||||
@ -12,4 +14,4 @@
|
||||
<section class="styleguide-contents">
|
||||
{{outlet}}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -24,4 +24,4 @@
|
||||
|
||||
<StyleguideExample @title="p">
|
||||
<p>{{i18n "styleguide.sections.typography.paragraph"}}</p>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,47 +1,49 @@
|
||||
|
||||
<div class="section-description">
|
||||
<p>
|
||||
Discourse users can select from 4 different text sizes in their user settings, by default these are:
|
||||
Discourse users can select from 4 different text sizes in their user
|
||||
settings, by default these are:
|
||||
<pre>
|
||||
Smaller: 14px
|
||||
Normal: 15px <span>(default)</span>
|
||||
Larger: 17px
|
||||
Largest: 19px
|
||||
Smaller: 14px Normal: 15px
|
||||
<span>(default)</span>
|
||||
Larger: 17px Largest: 19px
|
||||
</pre>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If you'd like to increase the font size of your entire Discourse community, you can override the font-size of the HTML element. You can also provide different font sizes for the user text size settings defined above. The example below increases all text size options by 1px.
|
||||
If you'd like to increase the font size of your entire Discourse community,
|
||||
you can override the font-size of the HTML element. You can also provide
|
||||
different font sizes for the user text size settings defined above. The
|
||||
example below increases all text size options by 1px.
|
||||
<pre>
|
||||
html {
|
||||
<span class="hljs-attribute">font-size</span>: 16px; <span>// default font-size </span>
|
||||
&.text-size-smaller {
|
||||
<span class="hljs-attribute">font-size</span>: 15px;
|
||||
}
|
||||
&.text-size-larger {
|
||||
<span class="hljs-attribute">font-size</span>: 18px;
|
||||
}
|
||||
&.text-size-largest {
|
||||
<span class="hljs-attribute">font-size</span>: 20px;
|
||||
}
|
||||
}
|
||||
<span class="hljs-attribute">font-size</span>: 16px;
|
||||
<span>// default font-size </span>
|
||||
&.text-size-smaller {
|
||||
<span class="hljs-attribute">font-size</span>: 15px; } &.text-size-larger
|
||||
{
|
||||
<span class="hljs-attribute">font-size</span>: 18px; } &.text-size-largest
|
||||
{
|
||||
<span class="hljs-attribute">font-size</span>: 20px; } }
|
||||
</pre>
|
||||
</p>
|
||||
<p>
|
||||
If you want to scale the fonts of a specific element, you can use Discourse's font scaling variables. Using the variable system ensures you're using a consistent set of font-sizes throughout your community.
|
||||
If you want to scale the fonts of a specific element, you can use
|
||||
Discourse's font scaling variables. Using the variable system ensures you're
|
||||
using a consistent set of font-sizes throughout your community.
|
||||
<p>
|
||||
Changing the font-size of a parent element will proportionately scale the font sizes of all its children.
|
||||
Changing the font-size of a parent element will proportionately scale the
|
||||
font sizes of all its children.
|
||||
</p>
|
||||
<pre>
|
||||
.parent {
|
||||
<span class="hljs-attribute">font-size</span>: var(--font-up-3);
|
||||
<span>// Increases the relative font-size of this element and its children by 3 steps in the scale</span>
|
||||
.child {
|
||||
<span>// If this is set to var(--font-down-3) in Discourse's default CSS,
|
||||
the parent font-size increase above would make this equivalent to var(--font-0)
|
||||
(var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
|
||||
}
|
||||
}
|
||||
<span class="hljs-attribute">font-size</span>: var(--font-up-3);
|
||||
<span>// Increases the relative font-size of this element and its children
|
||||
by 3 steps in the scale</span>
|
||||
.child {
|
||||
<span>// If this is set to var(--font-down-3) in Discourse's default CSS,
|
||||
the parent font-size increase above would make this equivalent to
|
||||
var(--font-0) (var(--font-down-3) + var(--font-up-3) = var(--font-0))</span>
|
||||
} }
|
||||
</pre>
|
||||
</p>
|
||||
</div>
|
||||
@ -96,4 +98,4 @@
|
||||
|
||||
<StyleguideExample @title="var(--font-down-6), 0.4355em">
|
||||
<p class="font-down-6">{{i18n "styleguide.sections.typography.example"}}</p>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,83 +1,155 @@
|
||||
<StyleguideExample @title=".btn-icon - sizes (large, default, small)">
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@icon="times"
|
||||
@translatedTitle={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-icon - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @icon="times" @translatedTitle={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@icon="times"
|
||||
@translatedTitle={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-text - sizes (large, default, small)">
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@translatedLabel={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-text - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@translatedLabel={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-default .btn-icon-text - sizes (large, default, small)">
|
||||
<StyleguideExample
|
||||
@title=".btn-default .btn-icon-text - sizes (large, default, small)"
|
||||
>
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@icon="plus"
|
||||
@translatedLabel={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-default .btn-icon-text - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @icon="plus" @translatedLabel={{bs.text}} @class={{bs.class}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@icon="plus"
|
||||
@translatedLabel={{bs.text}}
|
||||
@class={{bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-primary .btn-icon-text - sizes (large, default, small)">
|
||||
<StyleguideExample
|
||||
@title=".btn-primary .btn-icon-text - sizes (large, default, small)"
|
||||
>
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@class={{concat "btn-primary " bs.class}}
|
||||
@icon="plus"
|
||||
@translatedLabel={{bs.text}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-primary .btn-icon-text - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @class={{concat "btn-primary " bs.class}} @icon="plus" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@class={{concat "btn-primary " bs.class}}
|
||||
@icon="plus"
|
||||
@translatedLabel={{bs.text}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-danger .btn-icon-text - sizes (large, default, small)">
|
||||
<StyleguideExample
|
||||
@title=".btn-danger .btn-icon-text - sizes (large, default, small)"
|
||||
>
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@class={{concat "btn-danger " bs.class}}
|
||||
@icon="trash-alt"
|
||||
@translatedLabel={{bs.text}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-danger .btn-icon-text - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @class={{concat "btn-danger " bs.class}} @icon="trash-alt" @translatedLabel={{bs.text}} @disabled={{bs.disabled}} />
|
||||
<DButton
|
||||
@class={{concat "btn-danger " bs.class}}
|
||||
@icon="trash-alt"
|
||||
@translatedLabel={{bs.text}}
|
||||
@disabled={{bs.disabled}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-flat - sizes (large, default, small)">
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
|
||||
<FlatButton
|
||||
@icon="trash-alt"
|
||||
@disabled={{bs.disabled}}
|
||||
@translatedTitle={{bs.title}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".btn-flat - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<FlatButton @icon="trash-alt" @disabled={{bs.disabled}} @translatedTitle={{bs.title}} />
|
||||
<FlatButton
|
||||
@icon="trash-alt"
|
||||
@disabled={{bs.disabled}}
|
||||
@translatedTitle={{bs.title}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="dbutton btn-flat btn-text - sizes (large, default, small)">
|
||||
<StyleguideExample
|
||||
@title="dbutton btn-flat btn-text - sizes (large, default, small)"
|
||||
>
|
||||
{{#each this.dummy.buttonSizes as |bs|}}
|
||||
<DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
|
||||
<DButton
|
||||
@class={{concat "btn-flat " bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
@translatedLabel={{bs.text}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="dbutton btn-flat btn-text - states">
|
||||
{{#each this.dummy.buttonStates as |bs|}}
|
||||
<DButton @class={{concat "btn-flat " bs.class}} @disabled={{bs.disabled}} @translatedLabel={{bs.text}} />
|
||||
<DButton
|
||||
@class={{concat "btn-flat " bs.class}}
|
||||
@disabled={{bs.disabled}}
|
||||
@translatedLabel={{bs.text}}
|
||||
/>
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -119,4 +119,4 @@
|
||||
<ColorExample @color="header_primary-low-mid" />
|
||||
<ColorExample @color="header_primary-low" />
|
||||
</section>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,15 +1,25 @@
|
||||
<div class="section-description">
|
||||
<p>Discourse uses a free set of SVG icons from Font Awesome (<a href="https://fontawesome.com/icons?d=gallery&m=free">{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
|
||||
<p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace existing icons entirely.</p>
|
||||
<p>Discourse uses a free set of SVG icons from Font Awesome (<a
|
||||
href="https://fontawesome.com/icons?d=gallery&m=free"
|
||||
>{{i18n "styleguide.sections.icons.full_list"}}</a>).</p>
|
||||
<p>Plugins and themes can add SVG icons to the SVG spritesheet, or replace
|
||||
existing icons entirely.</p>
|
||||
<p>
|
||||
<ul>
|
||||
<li><a href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643">How to use SVG icons in your plugin or theme</a></li>
|
||||
<li><a href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1">How to replace Discourse's default icons in a theme</a></li>
|
||||
<li><a
|
||||
href="https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643"
|
||||
>How to use SVG icons in your plugin or theme</a></li>
|
||||
<li><a
|
||||
href="https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/1"
|
||||
>How to replace Discourse's default icons in a theme</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
<p>By default, all icons have the <pre class="pre-inline">.d-icon</pre> class applied along with a class containing the name of the icon (e.g., <pre class="pre-inline">.d-icon-link</pre>)</p>
|
||||
<p>By default, all icons have the
|
||||
<pre class="pre-inline">.d-icon</pre>
|
||||
class applied along with a class containing the name of the icon (e.g.,
|
||||
<pre class="pre-inline">.d-icon-link</pre>)</p>
|
||||
</div>
|
||||
|
||||
<StyleguideExample @title="d-icon - all available icons">
|
||||
<StyleguideIcons />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -13,7 +13,12 @@
|
||||
<StyleguideExample @title="inline-form">
|
||||
<div class="inline-form">
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@icon="search"
|
||||
@type="submit"
|
||||
@translatedLabel="Submit"
|
||||
/>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -37,11 +42,24 @@
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="inline-form with combo-box" @initialValue={{this.dummy.options.[0].name}} as |value|>
|
||||
<StyleguideExample
|
||||
@title="inline-form with combo-box"
|
||||
@initialValue={{this.dummy.options.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<div class="inline-form">
|
||||
<TextField @placeholder="Placeholder" />
|
||||
<ComboBox @content={{this.dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
<ComboBox
|
||||
@content={{this.dummy.options}}
|
||||
@value={{value}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@icon="search"
|
||||
@type="submit"
|
||||
@translatedLabel="Submit"
|
||||
/>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -49,7 +67,12 @@
|
||||
<div class="inline-form">
|
||||
<TextField />
|
||||
<MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@icon="search"
|
||||
@type="submit"
|
||||
@translatedLabel="Submit"
|
||||
/>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -58,7 +81,12 @@
|
||||
<label>Text:</label>
|
||||
<TextField />
|
||||
<MultiSelect @content={{this.dummy.options}} @onChange={{action "dummy"}} />
|
||||
<DButton @class="btn-primary" @icon="search" @type="submit" @translatedLabel="Submit" />
|
||||
<DButton
|
||||
@class="btn-primary"
|
||||
@icon="search"
|
||||
@type="submit"
|
||||
@translatedLabel="Submit"
|
||||
/>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
@ -70,7 +98,11 @@
|
||||
|
||||
<StyleguideExample @title="category-notifications-button and regular button">
|
||||
<div class="inline-form">
|
||||
<CategoryNotificationsButton @category={{this.dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
|
||||
<CategoryNotificationsButton
|
||||
@category={{get this.dummy.categories 0}}
|
||||
@value={{1}}
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
<DButton @icon="reply" @type="submit" @translatedLabel="Button" />
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -4,4 +4,4 @@
|
||||
|
||||
<StyleguideExample @title="spinner - regular">
|
||||
<div class="spinner"></div>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -24,5 +24,4 @@
|
||||
|
||||
<StyleguideExample @title="date-picker">
|
||||
<DatePicker @defaultDate="YYYY-MM-DD" />
|
||||
</StyleguideExample>
|
||||
|
||||
</StyleguideExample>
|
||||
@ -1,28 +1,76 @@
|
||||
<StyleguideExample @title="combo-box" @initialValue={{this.dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{this.dummy.options}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
<StyleguideExample
|
||||
@title="combo-box"
|
||||
@initialValue={{this.dummy.options.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<ComboBox
|
||||
@content={{this.dummy.options}}
|
||||
@value={{value}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="filterable combo-box" @initialValue={{this.dummy.categories.[0].name}} as |value|>
|
||||
<ComboBox @content={{this.dummy.categories}} @value={{value}} @options={{hash filterable=true}} @onChange={{fn (mut value)}} />
|
||||
<StyleguideExample
|
||||
@title="filterable combo-box"
|
||||
@initialValue={{this.dummy.categories.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<ComboBox
|
||||
@content={{this.dummy.categories}}
|
||||
@value={{value}}
|
||||
@options={{hash filterable=true}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="combo-box with a default state" @initialValue={{this.dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{this.dummy.options}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
|
||||
<StyleguideExample
|
||||
@title="combo-box with a default state"
|
||||
@initialValue={{this.dummy.options.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<ComboBox
|
||||
@content={{this.dummy.options}}
|
||||
@value={{value}}
|
||||
@options={{hash none="category.none"}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="combo-box clearable" @initialValue={{this.dummy.options.[0].name}} as |value|>
|
||||
<ComboBox @content={{this.dummy.options}} @clearable={{true}} @value={{value}} @options={{hash none="category.none"}} @onChange={{fn (mut value)}} />
|
||||
<StyleguideExample
|
||||
@title="combo-box clearable"
|
||||
@initialValue={{this.dummy.options.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<ComboBox
|
||||
@content={{this.dummy.options}}
|
||||
@clearable={{true}}
|
||||
@value={{value}}
|
||||
@options={{hash none="category.none"}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="topic-notifications-options" @initialValue={{1}} as |value|>
|
||||
<TopicNotificationsOptions @topic={{this.dummy.topic}} @value={{value}} @onChange={{fn (mut value)}} />
|
||||
<StyleguideExample
|
||||
@title="topic-notifications-options"
|
||||
@initialValue={{1}}
|
||||
as |value|
|
||||
>
|
||||
<TopicNotificationsOptions
|
||||
@topic={{this.dummy.topic}}
|
||||
@value={{value}}
|
||||
@onChange={{fn (mut value)}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="topic-footer-mobile-dropdown">
|
||||
<TopicFooterMobileDropdown @topic={{this.dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="category-chooser" @initialValue={{this.categories.[0].name}} as |value|>
|
||||
<StyleguideExample
|
||||
@title="category-chooser"
|
||||
@initialValue={{this.categories.0.name}}
|
||||
as |value|
|
||||
>
|
||||
<CategoryChooser @value={{value}} @onChange={{fn (mut value)}} />
|
||||
</StyleguideExample>
|
||||
|
||||
@ -39,21 +87,36 @@
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="category-notifications-button">
|
||||
<CategoryNotificationsButton @category={{this.dummy.categories.[0]}} @value={{1}} @onChange={{action "dummy"}} />
|
||||
<CategoryNotificationsButton
|
||||
@category={{get this.dummy.categories 0}}
|
||||
@value={{1}}
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="notifications-button">
|
||||
<NotificationsButton @options={{hash i18nPrefix="groups.notifications"}} @value={{2}} @onChange={{action "dummy"}} />
|
||||
<NotificationsButton
|
||||
@options={{hash i18nPrefix="groups.notifications"}}
|
||||
@value={{2}}
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="dropdown-select-box">
|
||||
<DropdownSelectBox @content={{this.dummy.options}} @onChange={{action "dummy"}} @options={{hash
|
||||
translatedNone="Something"
|
||||
}} />
|
||||
<DropdownSelectBox
|
||||
@content={{this.dummy.options}}
|
||||
@onChange={{action "dummy"}}
|
||||
@options={{hash translatedNone="Something"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="future-date-input-selector">
|
||||
<FutureDateInputSelector @input={{this.dummy.topicTimerUpdateDate}} @includeWeekend={{true}} @includeForever={{true}} @options={{hash none="time_shortcut.select_timeframe"}} />
|
||||
<FutureDateInputSelector
|
||||
@input={{this.dummy.topicTimerUpdateDate}}
|
||||
@includeWeekend={{true}}
|
||||
@includeForever={{true}}
|
||||
@options={{hash none="time_shortcut.select_timeframe"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="multi-select">
|
||||
@ -61,17 +124,31 @@
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="admin group-chooser">
|
||||
<GroupChooser @selected={{this.dummy.selectedGroups}} @content={{this.dummy.groups}} @onChange={{action "dummy"}} />
|
||||
<GroupChooser
|
||||
@selected={{this.dummy.selectedGroups}}
|
||||
@content={{this.dummy.groups}}
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="list-setting">
|
||||
<ListSetting @settingValue={{this.dummy.settings}} @onChange={{action "dummy"}} />
|
||||
<ListSetting
|
||||
@settingValue={{this.dummy.settings}}
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="list-setting with colors">
|
||||
<ListSetting @settingValue={{this.dummy.colors}} @nameProperty="color" @onChange={{action "dummy"}} />
|
||||
<ListSetting
|
||||
@settingValue={{this.dummy.colors}}
|
||||
@nameProperty="color"
|
||||
@onChange={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="user-notifications-dropdown">
|
||||
<UserNotificationsDropdown @user={{this.currentUser}} @value="changeToNormal" />
|
||||
</StyleguideExample>
|
||||
<UserNotificationsDropdown
|
||||
@user={{this.currentUser}}
|
||||
@value="changeToNormal"
|
||||
/>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="topic-link">
|
||||
{{topic-link this.dummy.topic}}
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -24,4 +24,4 @@
|
||||
|
||||
<StyleguideExample @title="no status">
|
||||
<TopicStatus @topic={{this.dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -2,4 +2,4 @@
|
||||
<div class="description">
|
||||
{{i18n "styleguide.welcome"}}
|
||||
</div>
|
||||
</StyleguideSection>
|
||||
</StyleguideSection>
|
||||
@ -6,4 +6,4 @@
|
||||
<StyleguideExample @title="category-breadcrumbs - tags">
|
||||
<BreadCrumbs @categories={{this.dummy.categories}} @showTags={{true}} />
|
||||
</StyleguideExample>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@ -20,4 +20,4 @@
|
||||
{{#each this.dummy.categories as |c|}}
|
||||
{{category-badge c categoryStyle="none"}}
|
||||
{{/each}}
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,6 @@
|
||||
<StyleguideExample @title="empty-state">
|
||||
<EmptyState @title={{this.dummy.sentence}} @body={{this.dummy.short_sentence}} />
|
||||
</StyleguideExample>
|
||||
<EmptyState
|
||||
@title={{this.dummy.sentence}}
|
||||
@body={{this.dummy.short_sentence}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
@ -1,12 +1,25 @@
|
||||
<StyleguideExample @title="footer-message - default">
|
||||
<FooterMessage @education={{this.dummy.sentence}} @message={{this.dummy.short_sentence}} />
|
||||
<FooterMessage
|
||||
@education={{this.dummy.sentence}}
|
||||
@message={{this.dummy.short_sentence}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="footer-message - latest">
|
||||
<FooterMessage @education={{this.dummy.sentence}} @message={{this.dummy.short_sentence}} @latest={{true}} @canCreateTopicOnCategory={{true}} @createTopic={{action "dummy"}} />
|
||||
<FooterMessage
|
||||
@education={{this.dummy.sentence}}
|
||||
@message={{this.dummy.short_sentence}}
|
||||
@latest={{true}}
|
||||
@canCreateTopicOnCategory={{true}}
|
||||
@createTopic={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="footer-message - top">
|
||||
<FooterMessage @education={{this.dummy.sentence}} @message={{this.dummy.short_sentence}} @top={{true}} @changePeriod={{action "dummy"}} />
|
||||
</StyleguideExample>
|
||||
|
||||
<FooterMessage
|
||||
@education={{this.dummy.sentence}}
|
||||
@message={{this.dummy.short_sentence}}
|
||||
@top={{true}}
|
||||
@changePeriod={{action "dummy"}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
@ -7,5 +7,8 @@
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="header-icons - notifications">
|
||||
<MountWidget @widget="header-icons" @args={{hash user=this.dummy.userWithUnread flagCount=5}} />
|
||||
</StyleguideExample>
|
||||
<MountWidget
|
||||
@widget="header-icons"
|
||||
@args={{hash user=this.dummy.userWithUnread flagCount=5}}
|
||||
/>
|
||||
</StyleguideExample>
|
||||
@ -5,7 +5,10 @@
|
||||
<StyleguideExample @title=".user-main .nav-pills">
|
||||
<MobileNav @class="main-nav" @desktopClass="nav nav-pills user-nav">
|
||||
{{#each this.dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
<li><a
|
||||
href={{ni.href}}
|
||||
class={{if ni.styleGuideActive "active"}}
|
||||
>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
@ -17,7 +20,10 @@
|
||||
</li>
|
||||
|
||||
{{#each this.dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
<li><a
|
||||
href={{ni.href}}
|
||||
class={{if ni.styleGuideActive "active"}}
|
||||
>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,17 +1,29 @@
|
||||
<StyleguideExample @title=".nav-stacked" class="half-size">
|
||||
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
||||
<MobileNav
|
||||
@class="preferences-nav"
|
||||
@desktopClass="preferences-list action-list nav-stacked"
|
||||
>
|
||||
{{#each this.dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
<li><a
|
||||
href={{ni.href}}
|
||||
class={{if ni.styleGuideActive "active"}}
|
||||
>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
</MobileNav>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title=".user-navigation .nav-stacked" class="half-size">
|
||||
<DSection @class="user-navigation">
|
||||
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
||||
<MobileNav
|
||||
@class="preferences-nav"
|
||||
@desktopClass="preferences-list action-list nav-stacked"
|
||||
>
|
||||
{{#each this.dummy.navItems as |ni|}}
|
||||
<li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
|
||||
<li><a
|
||||
href={{ni.href}}
|
||||
class={{if ni.styleGuideActive "active"}}
|
||||
>{{ni.displayName}}</a></li>
|
||||
{{/each}}
|
||||
</MobileNav>
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="post-menu">
|
||||
<MountWidget @widget="post-menu" @args={{this.dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -6,4 +6,4 @@
|
||||
{{i18n "styleguide.sections.rich_tooltip.description"}}
|
||||
</DTooltip>
|
||||
</DButton>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,4 +1,3 @@
|
||||
<StyleguideExample @title="signup-cta">
|
||||
<SignupCta />
|
||||
</StyleguideExample>
|
||||
|
||||
</StyleguideExample>
|
||||
@ -9,7 +9,11 @@
|
||||
<StyleguideExample @title="topic list item - hide category">
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
<TopicListItem @topic={{this.dummy.topic}} @hideCategory={{true}} @showPosters={{true}} />
|
||||
<TopicListItem
|
||||
@topic={{this.dummy.topic}}
|
||||
@hideCategory={{true}}
|
||||
@showPosters={{true}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</StyleguideExample>
|
||||
@ -17,11 +21,15 @@
|
||||
<StyleguideExample @title="topic list item - show likes">
|
||||
<table class="topic-list">
|
||||
<tbody>
|
||||
<TopicListItem @topic={{this.dummy.topic}} @showLikes={{true}} @showPosters={{true}} />
|
||||
<TopicListItem
|
||||
@topic={{this.dummy.topic}}
|
||||
@showLikes={{true}}
|
||||
@showPosters={{true}}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</StyleguideExample>
|
||||
|
||||
<StyleguideExample @title="topic list item - latest" class="half-size">
|
||||
<LatestTopicListItem @topic={{this.dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="topic-notifications-button">
|
||||
<TopicNotificationsButton @topic={{this.dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="topic-timer-info">
|
||||
<TopicTimerInfo @statusType="reminder" @executeAt={{this.dummy.soon}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="post">
|
||||
<MountWidget @widget="post" @args={{this.dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="topic-map">
|
||||
<MountWidget @widget="topic-map" @args={{this.dummy.transformedPost}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -4,6 +4,10 @@
|
||||
|
||||
<StyleguideExample @title="topic-footer-buttons - anonymous">
|
||||
<div id="topic-footer-buttons">
|
||||
<DButton @icon="reply" @class="btn-primary pull-right" @label="topic.reply.title" />
|
||||
<DButton
|
||||
@icon="reply"
|
||||
@class="btn-primary pull-right"
|
||||
@label="topic.reply.title"
|
||||
/>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -4,4 +4,4 @@
|
||||
|
||||
<StyleguideExample @title="topic-list - hide posters">
|
||||
<TopicList @topics={{this.dummy.topics}} @showPosters={{false}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="basic-topic-list" class="half-size">
|
||||
<BasicTopicList @topics={{this.dummy.topics}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="categories-only">
|
||||
<CategoriesOnly @categories={{this.dummy.categories}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -1,5 +1,9 @@
|
||||
<StyleguideExample @title="d-modal">
|
||||
<DModal @closeModal={{action "dummy"}} @modalStyle="inline-modal" @title={{i18n "styleguide.sections.modal.header"}}>
|
||||
<DModal
|
||||
@closeModal={{action "dummy"}}
|
||||
@modalStyle="inline-modal"
|
||||
@title={{i18n "styleguide.sections.modal.header"}}
|
||||
>
|
||||
<DModalBody>
|
||||
{{html-safe this.dummy.lorem}}
|
||||
</DModalBody>
|
||||
@ -7,4 +11,4 @@
|
||||
{{i18n "styleguide.sections.modal.footer"}}
|
||||
</div>
|
||||
</DModal>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -11,4 +11,4 @@
|
||||
</DSection>
|
||||
</div>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -6,11 +6,13 @@
|
||||
<MountWidget @widget="home-logo" @args={{hash minimized=true}} />
|
||||
<MountWidget @widget="header-topic-info" @args={{this.dummy}} />
|
||||
<div class="panel clearfix">
|
||||
<MountWidget @widget="header-icons" @args={{hash user=this.dummy.user}} />
|
||||
<MountWidget
|
||||
@widget="header-icons"
|
||||
@args={{hash user=this.dummy.user}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</StyleguideExample>
|
||||
|
||||
</StyleguideExample>
|
||||
@ -1,3 +1,3 @@
|
||||
<StyleguideExample @title="suggested-topics">
|
||||
<SuggestedTopics @topic={{this.dummy.topic}} />
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -13,13 +13,18 @@
|
||||
{{i18n "user.private_message"}}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
|
||||
"wrench"
|
||||
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
|
||||
"user.expand_profile"
|
||||
}}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
|
||||
<h1 class="username">{{this.dummy.user.username}}
|
||||
{{d-icon "shield-alt"}}</h1>
|
||||
<h2 class="full-name">{{this.dummy.user.name}}</h2>
|
||||
<h3>{{this.dummy.user.title}}</h3>
|
||||
</div>
|
||||
@ -32,7 +37,10 @@
|
||||
|
||||
<StyleguideExample @title=".user-main .about.collapsed-info.has-background">
|
||||
<DSection @class="user-main">
|
||||
<section class="collapsed-info about has-background" style={{this.dummy.user.profileBackground}}>
|
||||
<section
|
||||
class="collapsed-info about has-background"
|
||||
style={{this.dummy.user.profileBackground}}
|
||||
>
|
||||
<div class="profile-image"></div>
|
||||
<div class="details">
|
||||
<div class="primary">
|
||||
@ -45,13 +53,18 @@
|
||||
{{i18n "user.private_message"}}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n "user.expand_profile"}}</a></li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
|
||||
"wrench"
|
||||
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href="#" class="btn">{{d-icon "angle-double-down"}}{{i18n
|
||||
"user.expand_profile"
|
||||
}}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
|
||||
<h1 class="username">{{this.dummy.user.username}}
|
||||
{{d-icon "shield-alt"}}</h1>
|
||||
<h2 class="full-name">{{this.dummy.user.name}}</h2>
|
||||
<h3>{{this.dummy.user.title}}</h3>
|
||||
</div>
|
||||
@ -67,19 +80,39 @@
|
||||
<section class="about no-background">
|
||||
|
||||
<div class="staff-counters">
|
||||
<div><span class="helpful-flags">{{this.dummy.user.number_of_flags_given}}</span> {{i18n "user.staff_counters.flags_given"}}</div>
|
||||
<div><span
|
||||
class="helpful-flags"
|
||||
>{{this.dummy.user.number_of_flags_given}}</span> {{i18n
|
||||
"user.staff_counters.flags_given"
|
||||
}}</div>
|
||||
<div>
|
||||
<a href="#">
|
||||
<span class="flagged-posts">{{this.dummy.user.number_of_flagged_posts}}</span> {{i18n "user.staff_counters.flagged_posts"}}
|
||||
<span
|
||||
class="flagged-posts"
|
||||
>{{this.dummy.user.number_of_flagged_posts}}</span> {{i18n
|
||||
"user.staff_counters.flagged_posts"
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">
|
||||
<span class="deleted-posts">{{this.dummy.user.number_of_deleted_posts}}</span> {{i18n "user.staff_counters.deleted_posts"}}
|
||||
<span
|
||||
class="deleted-posts"
|
||||
>{{this.dummy.user.number_of_deleted_posts}}</span> {{i18n
|
||||
"user.staff_counters.deleted_posts"
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
<div><span class="suspensions">{{this.dummy.user.number_of_suspensions}}</span> {{i18n "user.staff_counters.suspensions"}}</div>
|
||||
<div><span class="warnings-received">{{this.dummy.user.warnings_received_count}}</span> {{i18n "user.staff_counters.warnings_received"}}</div>
|
||||
<div><span
|
||||
class="suspensions"
|
||||
>{{this.dummy.user.number_of_suspensions}}</span> {{i18n
|
||||
"user.staff_counters.suspensions"
|
||||
}}</div>
|
||||
<div><span
|
||||
class="warnings-received"
|
||||
>{{this.dummy.user.warnings_received_count}}</span> {{i18n
|
||||
"user.staff_counters.warnings_received"
|
||||
}}</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-image"></div>
|
||||
@ -94,25 +127,37 @@
|
||||
{{i18n "user.private_message"}}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
|
||||
"wrench"
|
||||
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
|
||||
<h1 class="username">{{this.dummy.user.username}}
|
||||
{{d-icon "shield-alt"}}</h1>
|
||||
<h2 class="full-name">{{this.dummy.user.name}}</h2>
|
||||
<h3>{{this.dummy.user.title}}</h3>
|
||||
<h3>
|
||||
{{d-icon "map-marker-alt"}} {{this.dummy.user.location}}
|
||||
{{d-icon "map-marker-alt"}}
|
||||
{{this.dummy.user.location}}
|
||||
{{d-icon "globe"}}
|
||||
<a href={{this.dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{this.dummy.user.website_name}}</a>
|
||||
<a
|
||||
href={{this.dummy.user.website}}
|
||||
rel="nofollow noopener noreferrer"
|
||||
target="_blank"
|
||||
>{{this.dummy.user.website_name}}</a>
|
||||
</h3>
|
||||
|
||||
<div class="bio">
|
||||
<div class="suspended">
|
||||
{{d-icon "ban"}}
|
||||
<b>{{i18n "user.suspended_notice" date=this.dummy.user.suspendedTillDate}}</b><br>
|
||||
<b>{{i18n "user.suspended_reason"}}</b> {{this.dummy.user.suspend_reason}}
|
||||
<b>{{i18n
|
||||
"user.suspended_notice"
|
||||
date=this.dummy.user.suspendedTillDate
|
||||
}}</b><br />
|
||||
<b>{{i18n "user.suspended_reason"}}</b>
|
||||
{{this.dummy.user.suspend_reason}}
|
||||
</div>
|
||||
{{html-safe this.dummy.user.bio_cooked}}
|
||||
</div>
|
||||
@ -134,23 +179,45 @@
|
||||
|
||||
<div class="secondary">
|
||||
<dl>
|
||||
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date this.dummy.user.created_at}}</dd>
|
||||
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date this.dummy.user.last_posted_at}}</dd>
|
||||
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date this.dummy.user.last_seen_at}}</dd>
|
||||
<dt>{{i18n "views"}}</dt><dd>{{this.dummy.user.profile_view_count}}</dd>
|
||||
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
|
||||
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{this.dummy.user.trustLevel.name}}</dd>
|
||||
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.created_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.last_posted_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.last_seen_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "views"}}</dt><dd
|
||||
>{{this.dummy.user.profile_view_count}}</dd>
|
||||
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
|
||||
class="invited-by"
|
||||
><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
|
||||
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
|
||||
class="trust-level"
|
||||
>{{this.dummy.user.trustLevel.name}}</dd>
|
||||
<dt>{{i18n "user.email.title"}}</dt>
|
||||
<dd title={{this.dummy.user.email}}>
|
||||
<DButton @icon="envelope" @label="admin.users.check_email.text" @class="btn-primary" />
|
||||
<DButton
|
||||
@icon="envelope"
|
||||
@label="admin.users.check_email.text"
|
||||
@class="btn-primary"
|
||||
/>
|
||||
</dd>
|
||||
<dt class="groups">{{i18n "groups.title" count=this.dummy.user.displayGroups.length}}</dt>
|
||||
<dt class="groups">{{i18n
|
||||
"groups.title"
|
||||
count=this.dummy.user.displayGroups.length
|
||||
}}</dt>
|
||||
<dd class="groups">
|
||||
{{#each this.dummy.user.displayGroups as |group|}}
|
||||
<span><a href="#" class="group-link">{{group.name}}</a></span>
|
||||
{{/each}}
|
||||
</dd>
|
||||
<DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
|
||||
<DButton
|
||||
@icon="exclamation-triangle"
|
||||
@label="user.admin_delete"
|
||||
@class="btn-danger"
|
||||
/>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
@ -159,21 +226,44 @@
|
||||
|
||||
<StyleguideExample @title=".user-main .about.has-background">
|
||||
<DSection @class="user-main">
|
||||
<section class="about has-background" style={{this.dummy.user.profileBackground}}>
|
||||
<section
|
||||
class="about has-background"
|
||||
style={{this.dummy.user.profileBackground}}
|
||||
>
|
||||
<div class="staff-counters">
|
||||
<div><span class="helpful-flags">{{this.dummy.user.number_of_flags_given}}</span> {{i18n "user.staff_counters.flags_given"}}</div>
|
||||
<div><span
|
||||
class="helpful-flags"
|
||||
>{{this.dummy.user.number_of_flags_given}}</span> {{i18n
|
||||
"user.staff_counters.flags_given"
|
||||
}}</div>
|
||||
<div>
|
||||
<a href="#">
|
||||
<span class="flagged-posts">{{this.dummy.user.number_of_flagged_posts}}</span> {{i18n "user.staff_counters.flagged_posts"}}
|
||||
<span
|
||||
class="flagged-posts"
|
||||
>{{this.dummy.user.number_of_flagged_posts}}</span> {{i18n
|
||||
"user.staff_counters.flagged_posts"
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">
|
||||
<span class="deleted-posts">{{this.dummy.user.number_of_deleted_posts}}</span> {{i18n "user.staff_counters.deleted_posts"}}
|
||||
<span
|
||||
class="deleted-posts"
|
||||
>{{this.dummy.user.number_of_deleted_posts}}</span> {{i18n
|
||||
"user.staff_counters.deleted_posts"
|
||||
}}
|
||||
</a>
|
||||
</div>
|
||||
<div><span class="suspensions">{{this.dummy.user.number_of_suspensions}}</span> {{i18n "user.staff_counters.suspensions"}}</div>
|
||||
<div><span class="warnings-received">{{this.dummy.user.warnings_received_count}}</span> {{i18n "user.staff_counters.warnings_received"}}</div>
|
||||
<div><span
|
||||
class="suspensions"
|
||||
>{{this.dummy.user.number_of_suspensions}}</span> {{i18n
|
||||
"user.staff_counters.suspensions"
|
||||
}}</div>
|
||||
<div><span
|
||||
class="warnings-received"
|
||||
>{{this.dummy.user.warnings_received_count}}</span> {{i18n
|
||||
"user.staff_counters.warnings_received"
|
||||
}}</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-image"></div>
|
||||
@ -188,25 +278,37 @@
|
||||
{{i18n "user.private_message"}}
|
||||
</a>
|
||||
</li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href={{this.dummy.user.adminPath}} class="btn">{{d-icon
|
||||
"wrench"
|
||||
}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="primary-textual">
|
||||
<h1 class="username">{{this.dummy.user.username}} {{d-icon "shield-alt"}}</h1>
|
||||
<h1 class="username">{{this.dummy.user.username}}
|
||||
{{d-icon "shield-alt"}}</h1>
|
||||
<h2 class="full-name">{{this.dummy.user.name}}</h2>
|
||||
<h3>{{this.dummy.user.title}}</h3>
|
||||
<h3>
|
||||
{{d-icon "map-marker-alt"}} {{this.dummy.user.location}}
|
||||
{{d-icon "map-marker-alt"}}
|
||||
{{this.dummy.user.location}}
|
||||
{{d-icon "globe"}}
|
||||
<a href={{this.dummy.user.website}} rel="nofollow noopener noreferrer" target="_blank">{{this.dummy.user.website_name}}</a>
|
||||
<a
|
||||
href={{this.dummy.user.website}}
|
||||
rel="nofollow noopener noreferrer"
|
||||
target="_blank"
|
||||
>{{this.dummy.user.website_name}}</a>
|
||||
</h3>
|
||||
|
||||
<div class="bio">
|
||||
<div class="suspended">
|
||||
{{d-icon "ban"}}
|
||||
<b>{{i18n "user.suspended_notice" date=this.dummy.user.suspendedTillDate}}</b><br>
|
||||
<b>{{i18n "user.suspended_reason"}}</b> {{this.dummy.user.suspend_reason}}
|
||||
<b>{{i18n
|
||||
"user.suspended_notice"
|
||||
date=this.dummy.user.suspendedTillDate
|
||||
}}</b><br />
|
||||
<b>{{i18n "user.suspended_reason"}}</b>
|
||||
{{this.dummy.user.suspend_reason}}
|
||||
</div>
|
||||
{{html-safe this.dummy.user.bio_cooked}}
|
||||
</div>
|
||||
@ -229,25 +331,47 @@
|
||||
|
||||
<div class="secondary">
|
||||
<dl>
|
||||
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date this.dummy.user.created_at}}</dd>
|
||||
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date this.dummy.user.last_posted_at}}</dd>
|
||||
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date this.dummy.user.last_seen_at}}</dd>
|
||||
<dt>{{i18n "views"}}</dt><dd>{{this.dummy.user.profile_view_count}}</dd>
|
||||
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd class="invited-by"><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
|
||||
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd class="trust-level">{{this.dummy.user.trustLevel.name}}</dd>
|
||||
<dt>{{i18n "user.created"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.created_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "user.last_posted"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.last_posted_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "user.last_seen"}}</dt><dd>{{bound-date
|
||||
this.dummy.user.last_seen_at
|
||||
}}</dd>
|
||||
<dt>{{i18n "views"}}</dt><dd
|
||||
>{{this.dummy.user.profile_view_count}}</dd>
|
||||
<dt class="invited-by">{{i18n "user.invited_by"}}</dt><dd
|
||||
class="invited-by"
|
||||
><a href="#">{{this.dummy.user.invited_by.username}}</a></dd>
|
||||
<dt class="trust-level">{{i18n "user.trust_level"}}</dt><dd
|
||||
class="trust-level"
|
||||
>{{this.dummy.user.trustLevel.name}}</dd>
|
||||
<dt>{{i18n "user.email.title"}}</dt>
|
||||
<dd title={{this.dummy.user.email}}>
|
||||
<DButton @icon="envelope" @label="admin.users.check_email.text" @class="btn-primary" />
|
||||
<DButton
|
||||
@icon="envelope"
|
||||
@label="admin.users.check_email.text"
|
||||
@class="btn-primary"
|
||||
/>
|
||||
</dd>
|
||||
<dt class="groups">{{i18n "groups.title" count=this.dummy.user.displayGroups.length}}</dt>
|
||||
<dt class="groups">{{i18n
|
||||
"groups.title"
|
||||
count=this.dummy.user.displayGroups.length
|
||||
}}</dt>
|
||||
<dd class="groups">
|
||||
{{#each this.dummy.user.displayGroups as |group|}}
|
||||
<span><a href="#" class="group-link">{{group.name}}</a></span>
|
||||
{{/each}}
|
||||
</dd>
|
||||
<DButton @icon="exclamation-triangle" @label="user.admin_delete" @class="btn-danger" />
|
||||
<DButton
|
||||
@icon="exclamation-triangle"
|
||||
@label="user.admin_delete"
|
||||
@class="btn-danger"
|
||||
/>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
</DSection>
|
||||
</StyleguideExample>
|
||||
</StyleguideExample>
|
||||
@ -6,4 +6,4 @@
|
||||
{{/if}}
|
||||
|
||||
{{outlet}}
|
||||
</StyleguideSection>
|
||||
</StyleguideSection>
|
||||
Reference in New Issue
Block a user