Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
小 白蛋
Nomad
Commits
89118a05
Commit
89118a05
authored
7 years ago
by
Michael Lange
Browse files
Options
Download
Email Patches
Plain Diff
Add boxed-section component to the styleguide
parent
ab6c443e
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
ui/app/components/freestyle/sg-boxed-section.js
+27
-0
ui/app/components/freestyle/sg-boxed-section.js
ui/app/templates/components/freestyle/sg-boxed-section.hbs
+183
-0
ui/app/templates/components/freestyle/sg-boxed-section.hbs
with
210 additions
and
0 deletions
+210
-0
ui/app/components/freestyle/sg-boxed-section.js
0 → 100644
+
27
-
0
View file @
89118a05
import
Component
from
'
@ember/component
'
;
import
{
computed
}
from
'
@ember/object
'
;
export
default
Component
.
extend
({
variants
:
computed
(()
=>
[
{
key
:
'
Normal
'
,
title
:
'
Normal
'
,
slug
:
''
,
},
{
key
:
'
Info
'
,
title
:
'
Info
'
,
slug
:
'
is-info
'
,
},
{
key
:
'
Warning
'
,
title
:
'
Warning
'
,
slug
:
'
is-warning
'
,
},
{
key
:
'
Danger
'
,
title
:
'
Danger
'
,
slug
:
'
is-danger
'
,
},
]),
});
This diff is collapsed.
Click to expand it.
ui/app/templates/components/freestyle/sg-boxed-section.hbs
0 → 100644
+
183
-
0
View file @
89118a05
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
collection
.
variant
key
=
"Normal"
}}
{{#
freestyle-usage
"boxed-section-normal-normal"
title
=
"Normal Boxed Section"
}}
<div
class=
"boxed-section"
>
<div
class=
"boxed-section-head"
>
Normal Boxed Section
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{#
collection
.
variant
key
=
"Info"
}}
{{#
freestyle-usage
"boxed-section-normal-info"
title
=
"Info Boxed Section"
}}
<div
class=
"boxed-section is-info"
>
<div
class=
"boxed-section-head"
>
Normal Boxed Section
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{#
collection
.
variant
key
=
"Warning"
}}
{{#
freestyle-usage
"boxed-section-normal-warning"
title
=
"Warning Boxed Section"
}}
<div
class=
"boxed-section is-warning"
>
<div
class=
"boxed-section-head"
>
Normal Boxed Section
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{#
collection
.
variant
key
=
"Danger"
}}
{{#
freestyle-usage
"boxed-section-normal-danger"
title
=
"Danger Boxed Section"
}}
<div
class=
"boxed-section is-danger"
>
<div
class=
"boxed-section-head"
>
Normal Boxed Section
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
freestyle-collection
}}
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
each
variants
as
|
variant
|
}}
{{#
collection
.
variant
key
=
variant
.
key
}}
{{#
freestyle-usage
"boxed-section-right-hand-normal"
title
=
(
concat
variant
.
title
"Normal Boxed Section With Right Hand Details"
)
}}
<div
class=
"boxed-section
{{
variant
.
slug
}}
"
>
<div
class=
"boxed-section-head"
>
Boxed Section With Right Hand Details
<span
class=
"pull-right"
>
{{
now
interval
=
1000
}}
</span>
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
each
}}
{{/
freestyle-collection
}}
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
each
variants
as
|
variant
|
}}
{{#
collection
.
variant
key
=
variant
.
key
}}
{{#
freestyle-usage
"boxed-section-left-badge-normal"
title
=
(
concat
variant
.
title
" Normal Boxed Section With Title Decoration"
)
}}
<div
class=
"boxed-section
{{
variant
.
slug
}}
"
>
<div
class=
"boxed-section-head"
>
Boxed Section With Title Decoration
<span
class=
"badge is-white"
>
7
</span>
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
each
}}
{{/
freestyle-collection
}}
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
each
variants
as
|
variant
|
}}
{{#
collection
.
variant
key
=
variant
.
key
}}
{{#
freestyle-usage
"boxed-section-with-foot-normal"
title
=
(
concat
variant
.
title
" Boxed Section With Foot"
)
}}
<div
class=
"boxed-section
{{
variant
.
slug
}}
"
>
<div
class=
"boxed-section-head"
>
Boxed Section With Large Header
</div>
<div
class=
"boxed-section-body with-foot"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
<div
class=
"boxed-section-foot"
>
<span>
Left-aligned message
</span>
<a
href=
"#"
class=
"pull-right"
>
Toggle or other action
</a>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
each
}}
{{/
freestyle-collection
}}
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
each
variants
as
|
variant
|
}}
{{#
collection
.
variant
key
=
variant
.
key
}}
{{#
freestyle-usage
"boxed-section-with-large-header"
title
=
(
concat
variant
.
title
" Boxed Section With Large Header"
)
}}
<div
class=
"boxed-section
{{
variant
.
slug
}}
"
>
<div
class=
"boxed-section-head"
>
<div
class=
"boxed-section-row"
>
Boxed Section With Large Header
<span
class=
"badge is-white is-subtle bumper-left"
>
Status
</span>
</div>
<div
class=
"boxed-section-row"
>
<span
class=
"tag is-outlined"
>
A tag that goes on a second line because it's rather long
</span>
</div>
</div>
<div
class=
"boxed-section-body"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
each
}}
{{/
freestyle-collection
}}
{{#
freestyle-collection
defaultKey
=
"Normal"
as
|
collection
|
}}
{{#
each
variants
as
|
variant
|
}}
{{#
collection
.
variant
key
=
variant
.
key
}}
{{#
freestyle-usage
"boxed-section-with-dark-body"
title
=
(
concat
variant
.
title
" Boxed Section With Dark Body"
)
}}
<div
class=
"boxed-section
{{
variant
.
slug
}}
"
>
<div
class=
"boxed-section-head"
>
Boxed Section With Dark Body
</div>
<div
class=
"boxed-section-body is-dark"
>
<div
class=
"mock-content"
>
<div
class=
"mock-image"
></div>
<div
class=
"mock-copy"
></div>
<div
class=
"mock-copy"
></div>
</div>
</div>
</div>
{{/
freestyle-usage
}}
{{/
collection
.
variant
}}
{{/
each
}}
{{/
freestyle-collection
}}
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Projects
Groups
Snippets
Help