Newsupdates Dashing Widget

newsupdates.coffee

class Dashing.Newsupdates extends Dashing.Widget

newsupdates.html

<h1 class="title" data-bind="title"></h1>

<table>
  <tr class="update" data-foreach-update="updates">
  	<td class="label">
  		<span class="name"><span data-bind="update.name"></span></span>
        <span class="info"><span data-bind="update.info"></span></span>
  	</td>
    <td class="value"><span data-bind="update.date"></span></td>
  </tr>
</table>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

newsupdates.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #333;

$title-color:        rgba(255, 255, 255, 0.7);
$moreinfo-color:     rgba(255, 255, 255, 0.7);
$info-color:     #999;


// ----------------------------------------------------------------------------
// Widget-list styles
// ----------------------------------------------------------------------------
.widget-newsupdates {

  background-color: $background-color;
  vertical-align: top;

  .title {
    color: $title-color;
    font-size: 20px;
    margin-top: 0;
  }

  .label {
    text-align: left;
    max-width: 430px;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .info {
    color: $info-color;
    font-size: 60%;
    display: block;
    white-space: nowrap;
    max-width: 430px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .value {
    text-align: right;
    padding-left: 12px;
    font-weight: 600;
    overflow: hidden;
    font-size: 0.8em;
    white-space: nowrap;
  }

  .updated-at {
    color: $moreinfo-color;
  }

  .more-info {
    color: $moreinfo-color;
  }

}