Element / Billboard / TinyG Laser Workspace

This is the billboard for TinyG Laser Workspace.

by chilipeppr

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-serialport">
    <div class="com-chilipeppr-ws-billboard-content">
         <h4 class="com-chilipeppr-ws-billboard-title" style="">TinyG Laser Workspace</h4>

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

        </p>
        <div class="com-chilipeppr-ws-billboard-imgcontain" style="border:0px solid red; position: relative;">
            <a href="http://chilipeppr.com/tinyglaser"><div class="com-chilipeppr-ws-billboard-img" style="background-image: url('http://i1.ytimg.com/vi/fRyDN2OzxOM/maxresdefault.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 helps you run Gcode that does laser cutting on the TinyG. It has tools to pulse the laser to get cleaner cuts.</p>
    </div>
</div>

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-tinyglaser"], function (bb) {
    console.log("test running of " + bb.id);
    bb.init();

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-ws-billboard-tinyglaser", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-ws-billboard-tinyglaser",
        url: "http://fiddle.jshell.net/chilipeppr/9R4Pe/show/light",
        fiddleurl: "http://fiddle.jshell.net/chilipeppr/9R4Pe/",
        name: "Element / Billboard / TinyG Laser Workspace",
        desc: "This is the billboard for TinyG Laser Workspace."
    }
});