Rhizome PMIX View

Rhizome PMIX View Demonstrator

by phollott

HTML

<div id="header">
    <section role="region">
        <header>
            <h4 align="center">
                Rhizome: PMIX View<br/>
            </h4>
            <hr/>
        </header>
    </section>
</div>
<div id="request" ng-controller="PMIXRequestController">
	<button id="view-person" ng-click="viewPerson()">View Psn (JSON)</button>
	<button id="view-medication-json" ng-click="viewMedication('JSON')">View Meds (JSON)</button>
	<form id="person" name="Person">
		<fieldset>
			<legend>Patient Confirmation</legend>
			<h3 ng-controller="ErrorController" ng-bind="errorText" ng-show="showError"></h3>
			<ol>
				<li>
					<label for=identifier>* Patient ID</label>
                    <input id=identifier ng-model="person.request.identifier" type=text value="1" required autofocus></input>
				</li>
				<li>
					<label for=family>* Family Name</label>
                    <input id=family ng-model="person.request.patient['nc:PersonName']['nc:PersonSurName']" type=text required=""></input>
				</li>
				<li>
					<label for=gender>Gender</label>
                    <input id=gender ng-model="person.request.patient['nc:PersonSexCode']" type=text placeholder="F/M"></input>
				</li>
				<li>
					<label for=birthdate>Birth Date</label>
                    <input id=birthdate ng-model="person.request.patient['nc:PersonBirthDate']['nc:Date']" type=text placeholder="yyyy-mm-dd"></input>
				</li>
			</ol>
		</fieldset>
	</form>
</div>

CSS

html, body, h1, form, fieldset, legend, ol, li {
	margin: 0;
	padding: 0;
}

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	background: #9cbc2c;
}

form {
	background: #9cbc2c;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 20px;
/*	width: 256px; */
}

form fieldset {
	border: none;
	margin-bottom: 10px;
}

form fieldset:last-of-type {
	margin-bottom: 0;
}

form legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 10px;
	text-shadow: 0 1px 1px #c0d576;
}

form > fieldset.confirm > legend:before {
	content: "Step " counter(fieldsets) ": ";
	counter-increment: fieldsets;
}

form fieldset fieldset legend {
	color: #111111;
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 0;
}

form ol li {
	background: #b9cf6a;
	background: rgba(255,255,255,.3);
	border-color: #e3ebc3;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
}

form ol ol li {
	background: none;
	border: none;
	float: left;
}

form label {
	float: left;
	font-size: 13px;
	width: 110px;
}

form fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
}

form fieldset fieldset label:hover {
	cursor: pointer;
}

form input:not([type=radio]),
form textarea {
	background: #ffffff;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	font: italic 13px Georgia, "Times New Roman", Times, serif;
	outline: none;
	padding: 5px;
	width: 112px;4
}

form input:not([type=submit]):focus,
form textarea:focus {
	background: #eaeaea;
}

form input[type=radio] {
	float: left;
	margin-right: 5px;
}

#exception-presenter {
	display: none;
}

/* Report and Patient resource labels: */
#title::before 						{ content: "Results on: ";...