Element / Billboard / TinyG Workspace

This is the billboard for TinyG Workspace. Billboards are used in several places including the Workspaces menu in the main nav bar, on the home page for ChiliPeppr, in the workspace pulldown, etc.

HTML

<script src="http://www.chilipeppr.com/js/require.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="com-chilipeppr-ws-billboard-tinyg">
    <div class="com-chilipeppr-ws-billboard-content">
         <h4 class="com-chilipeppr-ws-billboard-title" style="">TinyG Workspace</h4>

        <p class="com-chilipeppr-ws-billboard-url" style=""><a href="http://chilipeppr.com/tinyg">chilipeppr.com/tinyg</a>

        </p>
        <div class="com-chilipeppr-ws-billboard-imgcontain" style="border:0px solid red; position: relative;">
            <a href="http://chilipeppr.com/tinyg"><div class="com-chilipeppr-ws-billboard-img" style="background-image: url('http://chilipeppr.com/img/tinyg.jpg')" /></a>
            <div class="com-chilipeppr-ws-billboard-stats2" class="hidden">
                <!--
                <div class="row">
                    <div class="col-xs-4"><b>Views</b>

                    </div>
                    <div class="col-xs-4"><b>Users</b>

                    </div>
                    <div class="col-xs-4"><b>Forks</b>

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4"><span class="label label-default">6,324</span>

                    </div>
                    <div class="col-xs-4"><span class="label label-default">1,234</span>

                    </div>
                    <div class="col-xs-4"><span class="label label-default">34</span>

                    </div>
                </div>
                -->
            </div>
        </div>
        <!-- end img div container -->
        <p class="com-chilipeppr-ws-billboard-desc">This workspace is a full-blown Gcode sender for your TinyG. The workspace connects to your TinyG via the serial port over the ChiliPeppr Serial Port JSON Server. It lets you view your Gcode in 3D, view the XYZA positions, perform jogging, and see advanced real-time details...

CSS

.com-chilipeppr-ws-billboard-content {
    padding: 6px 20px;
}
.com-chilipeppr-ws-billboard-title {
    margin-bottom:6px;
}
.com-chilipeppr-ws-billboard-url {
    /* font-size: 9px; */
    padding-top:0px;
    margin-bottom:6px;
    font-size:12px;
}
.com-chilipeppr-ws-billboard-img {
    border:0px solid red;
    border-radius: 5px;
    position: relative;
    width:100%;
    height:160px;
    background-position: center;
    background-size: cover;
}
.com-chilipeppr-ws-billboard-stats {
    position: absolute;
    top: 4px;
    left: 10px;
}
.com-chilipeppr-ws-billboard-desc {
    /* font-size:11px; */
}
.com-chilipeppr-ws-billboard-detail-title {
    font-weight: bold;
}
.com-chilipeppr-ws-billboard-stats2 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 4px 10px 10px 10px;
    background-color: rgba(255, 255, 255, 0.5);
}

JavaScript

// Test this element. This code is auto-removed by the chilipeppr.load()
cprequire_test(["inline:com-chilipeppr-ws-billboard-tinyg"], function (bbtinyg) {
    console.log("test running of " + bbtinyg.id);
    bbtinyg.init();

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-ws-billboard-tinyg", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-ws-billboard-tinyg",
        url: "http://fiddle.jshell.net/chilipeppr/Guvv4/show/light",
        fiddleurl: "http://fiddle.jshell.net/chilipeppr/Guvv4/",
        name: "Element / Billboard / TinyG Workspace",
        desc: "This is the billboard for TinyG Workspace.",
        init: function() {
            console.log("TinyG billboard initted, but really there is nothing to init on a billboard.");
        }
    }
});