Element / Billboard / Jarret Grbl Workspace

This is the billboard for Jarret's Grbl 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.

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

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

        </p>
        <div class="com-chilipeppr-ws-billboard-imgcontain" style="border:0px solid red; position: relative;">
            <a href="http://chilipeppr.com/grbl"><div class="com-chilipeppr-ws-billboard-img" style="background-image: url('https://www.synthetos.com/wp-content/uploads/2013/02/grblShieldBundle800-800x360.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">Grbl devices are now supported inside ChiliPeppr. The workspace connects to your Arduino via the serial port over the ChiliPeppr Serial Port JSON Server. Maintained by Jarret Luft.</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-grbl"], function (bb) {
    console.log("test running of " + bb.id);
    bb.init();

} /*end_test*/ );

cpdefine("inline:com-chilipeppr-ws-billboard-grbl", ["chilipeppr_ready"], function () {
    return {
        id: "com-chilipeppr-ws-billboard-grbl",
        url: "http://fiddle.jshell.net/chilipeppr/6z76Z/show/light",
        fiddleurl: "http://fiddle.jshell.net/chilipeppr/6z76Z/",
        name: "Element / Billboard / Grbl Workspace",
        desc: "This is the billboard for Grbl Workspace by Jarret Luft."
    }
});