JSFiddle - React, Tailwind, and code Playground

8. Completed activity grid

by aldosa

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            <a href="/Activities" class="navbar-brand" style="color: #ffff;">CHP100D Automated</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a style="color: #ffff;" href="http://ciresdev.eprise.ad.chp.ca.gov/CIRES/">CIRES</a></li>
            </ul>

            <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="" />
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a style="color: #ffff;" href="/" title="Manage">Paul Baptista, A12997</a>
                    </li>
                    <!--<li><a href="#">Log off</a></li>-->
                </ul>
            </form>
        </div>
    </div>
</div>
<div class="container body-content">

    <h4>CHP 100D Activities for Paul Baptista, July 3 2017</h4>

    <div class="row">
     ...

CSS

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/

.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */

input,
select,
textarea {
    max-width: 280px;
}

.navbar-default {
    background-color: #005e90;
}

.navbar-default,
.navbar-brand {
    color: #fff;
}

.table-responsive {
    color: #5f5f5f;
}

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
}

td {
    border-collapse: collapse;
    border: 1px black solid;
}

tr:nth-of-type(5) td:nth-of-type(1) {
    visibility: hidden;
}

.rotate {
    -moz-transform: rotate(-90.0deg);
    /* FF3.5+ */
    -o-transform: rotate(-90.0deg);
    /* Opera 10.5 */
    -webkit-transform: rotate(-90.0deg);
    /* Saf3.1+, Chrome */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
    /* IE8 */
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 4px;
    line-height: 1.4em;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th {
    border: 1px solid #bfbcbc;
}

.form-control {
    padding: 0 1px 0 1px;
    /*text-align: center;*/
    height: 22px;
    display: inline-block;
    width: 40px;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

select::-ms-expand {
    display: none;
}

/* Icon pulse...

JavaScript

$("#jqxCalendar").jqxDateTimeInput({
    rowHeaderWidth: 25,
    showWeekNumbers: true,
    width: 150,
    height: 20,
    formatString: 'd'
});


window.addEventListener('load', function() {
    var rotates = document.getElementsByClassName('rotate');
    for (var i = 0; i < rotates.length; i++) {
        rotates[i].style.height = rotates[i].offsetWidth + 'px';
    }
});

$("#program-code").on("change", function() {
    var caption = $("select#program-code option:selected").text().split('.')[0];
    $("select#program-code option:selected").text(caption);
});

$("#inspection-code").on("change", function() {
    var caption = $("select#inspection-code option:selected").text().split('.')[0];
    $("select#inspection-code option:selected").text(caption);
});

/*$(function() {
    $(".wrapper1").scroll(function() {
        $(".wrapper2")
            .scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".wrapper2").scroll(function() {
        $(".wrapper1")
            .scrollLeft($(".wrapper2").scrollLeft());
    });
});*/