diff options
Diffstat (limited to 'templates/project/widgets/list')
-rw-r--r-- | templates/project/widgets/list/list.coffee | 15 | ||||
-rw-r--r-- | templates/project/widgets/list/list.html | 15 | ||||
-rw-r--r-- | templates/project/widgets/list/list.scss | 50 |
3 files changed, 80 insertions, 0 deletions
diff --git a/templates/project/widgets/list/list.coffee b/templates/project/widgets/list/list.coffee new file mode 100644 index 0000000..6b1cc50 --- /dev/null +++ b/templates/project/widgets/list/list.coffee @@ -0,0 +1,15 @@ +class AllTheThings.List extends AllTheThings.Widget + source: 'list' + + @accessor 'current', Batman.Property.EasingSetter + + @accessor 'arrow', -> + if @get('last') + if parseInt(@get('current')) > parseInt(@get('last')) then 'arrow-up' else 'arrow-down' + + ready: -> + Batman.setImmediate => + if @get('unordered') + $(@node).find('ol').remove() + else + $(@node).find('ul').remove()
\ No newline at end of file diff --git a/templates/project/widgets/list/list.html b/templates/project/widgets/list/list.html new file mode 100644 index 0000000..cc90d42 --- /dev/null +++ b/templates/project/widgets/list/list.html @@ -0,0 +1,15 @@ +<h1 class="title" data-bind="title"></h1> + +<ol> + <li data-foreach-item="items"> + <span class="label" data-bind="item.label"></span> + <span class="value" data-bind="item.value"></span> + </li> +</ol> + +<ul class="list-nostyle"> + <li data-foreach-item="items"> + <span class="label" data-bind="item.label"></span> + <span class="value" data-bind="item.value"></span> + </li> +</ul>
\ No newline at end of file diff --git a/templates/project/widgets/list/list.scss b/templates/project/widgets/list/list.scss new file mode 100644 index 0000000..248cef8 --- /dev/null +++ b/templates/project/widgets/list/list.scss @@ -0,0 +1,50 @@ +// ---------------------------------------------------------------------------- +// Sass declarations +// ---------------------------------------------------------------------------- +$widget-list_background-color: #12b0c5; +$widget-list_value-color: #fff; + +$widget-list_title-color: lighten($widget-list_background-color, 45%); +$widget-list_label-color: lighten($widget-list_background-color, 45%); + +// ---------------------------------------------------------------------------- +// Widget-list styles +// ---------------------------------------------------------------------------- +.widget-list { + + background-color: $widget-list_background-color; + + .title { + color: $widget-list_title-color; + } + + ol, ul { + margin: 0 15px; + text-align: left; + color: $widget-list_label-color; + } + + ol { + list-style-position: inside; + } + + li { + margin-bottom: 5px; + } + + .list-nostyle { + list-style: none; + } + + .label { + color: $widget-list_label-color; + } + + .value { + float: right; + margin-left: 12px; + font-weight: 600; + color: $widget-list_value-color; + } + +}
\ No newline at end of file |