Post Travel Expense

by clayshannon

HTML

<h2 class="underline">UCSC POST TRAVEL EXPENSE</h2>

<label>Form Filled Out:</label>
<input type="date" style="width=100px"></input>
<label>Access the <a href="https://financial.ucsc.edu/Pages/travel_guide.aspx#Travel_Expense_Report" target="_blank">Post Travel Guide</a> for reimbursement validation</label>
<br/>
<br/>
<form class="firstform">
    <label class="firstblocklabel">Traveler's name:</label>
    <input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
    <br/>
    <label class="firstblocklabel">Traveler's E-mail:</label>
    <input class="firstblockinput" type="email" id="traveleremail" />
    <br/>
    <label class="firstblocklabel">Traveler's Phone:</label>
    <input class="firstblockinput" type="tel" id="travelerphone" />
    <br/>
    <label class="firstblocklabel">Traveler's Mail Stop:</label>
    <input class="firstblockinput" type="text" id="travelermailstop" />
    <br/>
    <label class="firstblocklabel" id="travelerstreetorpoboxlabel">Traveler's Street or P.O.:</label>
    <input class="firstblockinput" type="text" id="travelerstreetorpobox" />
    <br/>
    <label class="firstblocklabel">Traveler's Destinations:</label>
    <input class="firstblockinput" type="text" id="travelersdestinations" />
    <br/>
    <label class="firstblocklabel">UC Business Purpose:</label>
    <input class="firstblockinput" type="text" id="ucbusinesspurpose" />
    <br/>
    <label class="firstblockdatelabel">Departure Date:</label>
    <input class="dateinput" type="date" id="travelersdeparturedate" />
    <label>Time:</label>
    <input class="timeinput" type="time" id="travelersdeparturetime" />
    <br/>
    <label class="firstblockdatelabel">Return Date:</label>
    <input class="dateinput" type="date" id="travelersreturndate" />
    <label>Time:</label>
    <input class="timeinput" type="time" id="travelersreturntime" />
</form>
<form class="borderedform">
    <label>Trip Number:</label>
    <input...

CSS

.underline {
    text-decoration: underline;
}
input[placeholder] {
    font-size: 0.6em;
    width: 500;
}
.firstblocklabel {
    width: 160px;
    display: inline-block;
    margin: 2px;
}
.firstblockdatelabel {
    width: 108px;
    display: inline-block;
}
.firstblockinput {
    width: 224px;
}
.dateinput {
    width: 124px;
    margin: 2px;
}
.timeinput {
    width: 100px;
}
form {
    display: inline-block;
    vertical-align:top;
    //float: left;
}
.firstform { float: left; }
.borderedform {
    float: left;
    border: 1px solid;
    margin-left: 1em;
    padding: 1em;
}
.reditalics {
    color: red;
    font-style: italic;
}
.wrappedlabel {
    width: 320px;
    display: block;
}

JavaScript

//$('[id$=travelerstreetorpobox]').slideUp();
//$('[id$=travelerstreetorpoboxlabel]').slideUp();
// Unfortunately, the upsliding leaves a vertical gap; may need to combine them into one set of label/input
//var travname = $('[id$=travelername]');
//travname.width(196);