From: paul <paul@plutz.net>
Date: Fri, 26 Feb 2016 02:47:34 +0000 (+0000)
Subject: improved styling for prescription sheets
X-Git-Url: https://git.plutz.net/?p=confetti;a=commitdiff_plain;h=547778804d2beb3394ae47218d7490e6095b778c;ds=sidebyside

improved styling for prescription sheets

svn path=/trunk/; revision=85
---

diff --git a/templates/edit_prescription.sh b/templates/edit_prescription.sh
index cfd2b5b..85eeb20 100755
--- a/templates/edit_prescription.sh
+++ b/templates/edit_prescription.sh
@@ -21,27 +21,31 @@ cat <<END_HTML
 <form class="prescription" action="?action=update_prescription" method="POST">
 <input type="hidden" name="prescription" value="${mpx[prescription]}">
 
-<h1>$(l10n therapy_prescription)</h1>
-
+<fieldset class="baseinfo">
 <label for="insurance">$(l10n insurance)</label>
 <input id="insurance" name="insurance" value="${mpx[insurance]}" placeholder="$(l10n insurance)">
 <br>
 <label for="name">$(l10n name)</label>
-<textarea id="name" name="name" placeholder="$(l10n name)">${mpx[name]}</textarea>
-<br>
 <label for="bday">$(l10n bday)</label>
+<br>
+<textarea id="name" name="name" placeholder="$(l10n name)">${mpx[name]}</textarea>
 <input id="bday" name="bday" value="${mpx[bday]}" placeholder="$(l10n bday)">
 
 <br>
 <label for="date">$(l10n date)</label>
 <input id="date" name="date" value="${mpx[date]}" placeholder="$(l10n date)">
+</fieldset>
+
+<fieldset class="misc">
+<h1>$(l10n therapy_prescription)</h1>
 
-<br>
 <label for="addcontrib">$(l10n addcontrib)</label>
 <input id="addcontrib" name="addcontrib" value="${mpx[addcontrib]}" placeholder="$(l10n addcontrib)">
 <input type="checkbox" id="contribconfirm" name="contribconfirm" value="true" ${mpx[contribconfirm]:+checked}>
 <label for="contribconfirm">$(l10n contribconfirm)</label>
+</fieldset>
 
+<fieldset class="catalogue">
 <h2>$(l10n prescription_by_catalogue)</h2>
 <input type="radio" id="prescfirst" name="prescno" value="first" $(check "$mpx[prescno]" first)>
 <label for="prescfirst">$(l10n prescfirst)</label>
@@ -52,11 +56,11 @@ cat <<END_HTML
 <input type="radio" id="prescfollow2" name="prescno" value="follow2" $(check "$mpx[prescno]" follow2)>
 <label for="prescfollow2">$(l10n prescfollow2)</label>
 <br>
-<input type="radio" id="prescother" name="prescno" value="other" $(check "$mpx[prescno]" other)>
-<label for="prescother">$(l10n prescother)</label>
-<br>
 <input type="radio" id="presccontinual" name="prescno" value="continual" $(check "$mpx[prescno]" continual)>
 <label for="presccontinual">$(l10n presccontinual)</label>
+<br>
+<input type="radio" id="prescother" name="prescno" value="other" $(check "$mpx[prescno]" other)>
+<label for="prescother">$(l10n prescother)</label>
 
 <br>
 <input type="checkbox" id="grouptherapy" name="grouptherapy" value="true" ${mpx[grouptherapy]:+checked}>
@@ -67,25 +71,21 @@ cat <<END_HTML
 <br>
 <input type="checkbox" id="report" name="report" value="true" ${mpx[report]:+checked}>
 <label for="report">$(l10n report)</label>
+</fieldset>
 
-<br>
-<label for="remidy">$(l10n remidy)</label>
-<textarea id="remidy" name="remidy" placeholder="$(l10n remidy)">${mpx[remidy]}</textarea>
-<br>
+<fieldset class="description">
 <label for="quantity">$(l10n quantity)</label>
-<input id="quantity" name="quantity" value="${mpx[quantity]}" placeholder="$(l10n quantity)">
-<br>
+<label for="remidy">$(l10n remidy)</label>
 <label for="quantity_weekly">$(l10n quantity_weekly)</label>
+<input id="quantity" name="quantity" value="${mpx[quantity]}" placeholder="$(l10n quantity)">
+<textarea id="remidy" name="remidy" placeholder="$(l10n remidy)">${mpx[remidy]}</textarea>
 <input id="quantity_weekly" name="quantity_weekly" value="${mpx[quantity_weekly]}" placeholder="$(l10n quantity_weekly)">
 
-<br>
-<label for="remidy1">$(l10n remidy)</label>
-<textarea id="remidy1" name="remidy1" placeholder="$(l10n remidy)">${mpx[remidy1]}</textarea>
-<br>
 <label for="quantity1">$(l10n quantity)</label>
-<input id="quantity1" name="quantity1" value="${mpx[quantity1]}" placeholder="$(l10n quantity)">
-<br>
+<label for="remidy1">$(l10n remidy)</label>
 <label for="quantity_weekly1">$(l10n quantity_weekly)</label>
+<input id="quantity1" name="quantity1" value="${mpx[quantity1]}" placeholder="$(l10n quantity)">
+<textarea id="remidy1" name="remidy1" placeholder="$(l10n remidy)">${mpx[remidy1]}</textarea>
 <input id="quantity_weekly1" name="quantity_weekly1" value="${mpx[quantity_weekly1]}" placeholder="$(l10n quantity_weekly)">
 
 <br>
@@ -94,15 +94,16 @@ cat <<END_HTML
 <br>
 <label for="icd10">$(l10n icd10)</label>
 <input id="icd10" name="icd10" value="${mpx[icd10]}" placeholder="$(l10n icd10)">
+</fieldset>
 
-<br>
 <input type="checkbox" id="prescreviewed" name="prescreviewed" value="true" ${mpx[prescreviewed]:+checked}>
 <label for="prescreviewed">$(l10n prescreviewed)</label>
 
-<br>
+<fieldset class="controls">
 <button type="submit" name="action" value="save">$(l10n save)</button>
 <button type="submit" name="action" value="cancel">$(l10n cancel)</button>
 <button type="submit" name="action" value="delete">$(l10n delete)</button>
+</fieldset>
 
 </form>
 END_HTML
diff --git a/templates/prescriptions.css.sh b/templates/prescriptions.css.sh
index 67b2c89..f25cc38 100755
--- a/templates/prescriptions.css.sh
+++ b/templates/prescriptions.css.sh
@@ -23,11 +23,10 @@ cat <<EOF
 
 .prescription {
   display: inline-block;
-  position: relative;
-  width: 480px; height: 41em;
+  width: 96%; max-width: 460px;
   color: #800;
   background-color: #CFF;
-  margin: 1em; padding: 0;
+  margin: 1em -1% 0 2%; padding: 0;
   border: 1px solid #888;
   overflow: hidden;
 }
@@ -39,17 +38,26 @@ cat <<EOF
   border: 1px solid #888;
   border-radius: 0 0 1ex 1ex;
 }
-.prescription + .newprescription {display: none;}
 
 .prescription * {
-  position: absolute;
   display: inline-block;
-  bottom: 0; right: 0;
   font-size: 1em;
   line-height: 1em;
   margin: 0; padding: 0;
 }
-.prescription label {padding-left: .5ex; font-size: .75em;}
+.prescription label {
+  padding-left: .5ex;
+  font-size: .75em;
+}
+
+.prescription fieldset {
+  display: inline-block;
+  margin: 0; padding: 1ex;
+  margin-right: -.625ex;
+  border: none;
+  vertical-align: top;
+}
+.prescription fieldset br { display: none;}
 
 .prescription span,
 .prescription input,
@@ -59,34 +67,40 @@ cat <<EOF
   padding: .25ex;
   background-color: #FFF;
 }
-.prescription span{
+.prescription span {
   background-color: #EEE;
   padding: .5ex .25ex;
   white-space: pre-wrap;
 }
 
-input[type=checkbox],
-input[type=radio] { display: none;}
-label.checkbox, label.radio,
-input[type=checkbox] + label,
-input[type=radio] + label { padding-left: 1em; font-size: 1em; }
-label.checkbox:before, label.radio:before,
-input[type=checkbox] + label:before,
-input[type=radio] + label:before {
+.prescription input[type=checkbox],
+.prescription input[type=radio] { display: none;}
+
+.prescription label.checkbox,
+.prescription label.radio,
+.prescription input[type=checkbox] + label,
+.prescription input[type=radio] + label { padding-left: 1.25em; font-size: 1em;}
+
+.prescription label.checkbox:before,
+.prescription label.radio:before,
+.prescription input[type=checkbox] + label:before,
+.prescription input[type=radio] + label:before {
   display: inline-block;
-  position: absolute; left: 0;
+  position: absolute;
+  margin-left: -1.25em;
   width: .75em; height: .75em;
   background-color: #FFF;
   border: 1px solid #800;
   content: ' ';
 }
-label.radio:before,
-input[type=radio] + label:before { border-radius: .5em;}
-label.checkbox.checked:before, label.radio.checked:before,
-input[type=checkbox]:checked + label:before,
-input[type=radio]:checked + label:before { content: "\2713";}
+.prescription label.radio:before,
+.prescription input[type=radio] + label:before { border-radius: .5em;}
+.prescription label.checkbox.checked:before,
+.prescription label.radio.checked:before,
+.prescription input[type=checkbox]:checked + label:before,
+.prescription input[type=radio]:checked + label:before { content: "\2713";}
 
-a.button,
+.prescription a.button,
 .prescription input[type=submit],
 .prescription button {
   height: 1.5em;
@@ -97,112 +111,82 @@ a.button,
   margin: 0; padding: .125em 0 0 0;
   border: none;
 }
-a.button {padding: .5ex;}
+.prescription a.button {padding: .5ex;}
 
 /* ======== Specific ========== */
-.prescription h1:nth-of-type(1) {
-  font-size: 1.25em;
-  font-weight: bold;
-  left: 62%; top: .5em;
-  width: 36%;
-}
-
-label[for=insurance], #insurance {
-  width: 58%;
-  left: 2%;
-  top: 1em;
-}
-#insurance {top: 1.5em;}
-
-label[for=name], #name {
-  width: 38%;
-  left: 2%;
-  top: 4.5em;
-}
-#name {top: 4.125em; height: 4em;}
-
-label[for=bday], #bday {
-  width: 20%;
-  left: 40%;
-  top: 4.5em;
-}
-#bday {top: 4.125em; height: 4em; text-align: center;}
-
-label[for=date], #date {
-  width: 20%;
-  left: 40%;
-  top: 11.375em;
-}
-#date {top: 9.25em; text-align: right;}
-
-label[for=addcontrib], #addcontrib {
-  width: 18%;
-  left: 62%;
-  top: 6.25em;
-}
-#addcontrib {top: 5.5em; text-align: right;}
-label[for=contribconfirm] { top: 7.25em; left: 62%;}
-
-.prescription h2:nth-of-type(1) {
-  font-weight: bold;
-  left: 2%; top: 12em;
-  width: 50%;
-}
-
-label[for=prescfirst]    { left:  2%; top: 14.5em; width: 30%; }
-label[for=prescfollow1]  { left:  2%; top: 16em;   width: 30%; }
-label[for=prescfollow2]  { left:  2%; top: 17.5em; width: 30%; }
-label[for=presccontinual]{ left: 33%; top: 14.5em; width: 30%; }
-label[for=prescother  ]  { left: 33%; top: 16em;   width: 30%; }
-
-label[for=grouptherapy] { left:  2%; top: 20em; width: 30%; }
-label[for=housecall]    { left: 33%; top: 20em; width: 30%; }
-label[for=report]       { left:  2%; top: 21.5em; width: 30%; }
-
-
-label[for=quantity], #quantity, #quantity1 {
-  width: 18%;
-  left: 2%;
-  top: 32em;
-}
-#quantity {top: 25.5em; height: 3em; text-align: center;}
-#quantity1 {top: 28.5em; height: 3em; text-align: center;}
-label[for=remidy], #remidy, #remidy1 {
-  width: 60%;
-  left: 20%;
-  top: 33em;
-}
-#remidy {top: 25.5em; height: 3em;}
-#remidy1 {top: 28.5em; height: 3em;}
-label[for=quantity_weekly], #quantity_weekly, #quantity_weekly1 {
-  width: 18%;
-  left: 80%;
-  top: 32em;
-}
-#quantity_weekly {top: 25.5em; height: 3em; text-align: center;}
-#quantity_weekly1 {top: 28.5em; height: 3em; text-align: center;}
-
-label[for=quantity1], label[for=remidy1], label[for=quantity_weekly1] {display: none}
-
-label[for=indicator], #indicator {
-  width: 20%;
-  left: 2%;
-  top: 42.5em;
-}
-#indicator {top: 33.375em; text-align: right;}
-label[for=icd10], #icd10 {
-  width: 20%;
-  left: 2%;
-  top: 47em;
-}
-#icd10 {top: 36em; text-align: right;}
-
-label[for=prescreviewed] { left:  62%; top: 36em; width: 36%; }
 
-a.button,
-button[value=save]   { top: 39em; left:  2%; width: 18%;}
-button[value=cancel] { top: 39em; left: 21%; width: 18%;}
-button[value=delete] { top: 39em; left: 42%; width: 18%;}
+.prescription .baseinfo { width: 60%;}
+
+  .baseinfo label[for=insurance],
+  .baseinfo #insurance { width: 100%; }
+ 
+  .baseinfo label[for=name],
+  .baseinfo #name { width: 65%; margin-right: -.875ex;}
+  .baseinfo #name { height: 4em; }
+ 
+  .baseinfo label[for=bday],
+  .baseinfo #bday { width: 35%;}
+  .baseinfo #bday { height: 4em; text-align: center; vertical-align: top;}
+ 
+  .baseinfo label[for=date],
+  .baseinfo #date { width: 34%; margin-left: 65%;}
+  .baseinfo #date { text-align: right;}
+
+.prescription .misc { width: 40%; }
+
+  .misc h1 {
+    font-size: 1.25em;
+    font-weight: bold;
+    width: 100%;
+  }
+  .misc label[for=addcontrib],
+  .misc #addcontrib {width: 100%;}
+  .misc #addcontrib {text-align: right;}
+
+.prescription .catalogue { width: 60%; }
+
+  .catalogue h2:nth-of-type(1) {
+    font-weight: bold;
+    width: 100%;
+    margin-bottom: .25em;
+  }
+  .catalogue label {
+    display: inline-block;
+    width: 50%;
+    margin-right: -.625ex;
+    margin-top: .25em;
+    vertical-align: top;
+  }
+
+.prescription .description { width: 100%; }
+  .description * { margin-right: -.625ex; vertical-align: top;}
+  .description label {vertical-align: bottom;}
+  .description label[for=quantity1],
+  .description label[for=remidy1],
+  .description label[for=quantity_weekly1] {display: none;}
+
+  .description label[for=quantity] { width: 20%;}
+  .description #quantity,
+  .description #quantity1 { width: 20%;  height: 3em; text-align: center;}
+  .description label[for=remidy] { width: 60%; }
+  .description #remidy,
+  .description #remidy1 { width: 60%; height: 3em;}
+  .description label[for=quantity_weekly] { width: 20%;}
+  .description #quantity_weekly,
+  .description #quantity_weekly1 { width: 20%; height: 3em; text-align: center;}
+
+  .description label[for=indicator],
+  .description label[for=icd10] { display: block; width: 20%;}
+  .description #icd10,
+  .description #indicator {width: 20%; text-align: right;}
+
+.prescription label[for=prescreviewed] { margin-left: 1ex; }
+
+.prescription .controls { width: 100%; }
+  .controls a.button,
+  .controls button[value=save],
+  .controls button[value=cancel],
+  .controls button[value=delete] { width: 25%;}
 
 EOF
 
diff --git a/templates/prescriptions.html.sh b/templates/prescriptions.html.sh
index a3db3a7..a662c74 100755
--- a/templates/prescriptions.html.sh
+++ b/templates/prescriptions.html.sh
@@ -25,7 +25,6 @@ cat <<EOF
 
 <!--h1>$(l10n prescriptions_current)</h1-->
 
-${edit:+$(edit_prescription "$edit")}
 <div class="newprescription">
   <form action="?action=new_prescription" method="POST">
     <input type="hidden" name="client" value="$client">
@@ -33,9 +32,13 @@ ${edit:+$(edit_prescription "$edit")}
   </form>
 </div>
 
+$(list_prescriptions "$client" |grep -q "$edit" || edit_prescription "$edit")
+
 $(list_prescriptions "$client" \
   |while read pre; do 
-    [ "$pre" = "$edit" ] || view_prescription "$pre"
+    [ "$pre" = "$edit" ] \
+    && edit_prescription "$pre" \
+    || view_prescription "$pre"
   done
 )
 
diff --git a/templates/text_prescriptions.sh b/templates/text_prescriptions.sh
index 83acef4..77c0421 100755
--- a/templates/text_prescriptions.sh
+++ b/templates/text_prescriptions.sh
@@ -46,3 +46,4 @@ item_name[quantity_weekly]="An&shy;zahl pro Wo&shy;che"
 item_name[save]="Speichern"
 item_name[cancel]="Abbrechen"
 item_name[delete]="Löschen"
+item_name[therapy]="Zur Therapie"
diff --git a/templates/view_prescription.sh b/templates/view_prescription.sh
index d31acca..c11bd9d 100755
--- a/templates/view_prescription.sh
+++ b/templates/view_prescription.sh
@@ -19,37 +19,39 @@ check(){ [ "$1" = "$2" ] && printf checked}
 
 cat <<END_HTML
 <div class="prescription">
-<h1>$(l10n therapy_prescription)</h1>
-
+<fieldset class="baseinfo">
 <label for="insurance">$(l10n insurance)</label>
 <span id="insurance">${mpx[insurance]}</span>
 <br>
 <label for="name">$(l10n name)</label>
-<span id="name">${mpx[name]}</span>
-<br>
 <label for="bday">$(l10n bday)</label>
+<span id="name">${mpx[name]}</span>
 <span id="bday">${mpx[bday]}</span>
 
 <br>
 <label for="date">$(l10n date)</label>
 <span id="date">${mpx[date]}</span>
+</fieldset>
 
+<fieldset class="misc">
+<h1>$(l10n therapy_prescription)</h1>
 <br>
 <label for="addcontrib">$(l10n addcontrib)</label>
 <span id="addcontrib">${mpx[addcontrib]}</span>
 <label class="checkbox ${mpx[contribconfirm]:+checked}" for="contribconfirm">$(l10n contribconfirm)</label>
+</fieldset>
 
+<fieldset class="catalogue">
 <h2>$(l10n prescription_by_catalogue)</h2>
 <label class="radio $(check "$mpx[prescno]" first)" for="prescfirst">$(l10n prescfirst)</label>
 <br>
-<input type="radio" id="prescfollow1" name="prescno" value="follow1" $(check "$mpx[prescno]" follow1)>
 <label class="radio $(check "$mpx[prescno]" follow1)" for="prescfollow1">$(l10n prescfollow1)</label>
 <br>
 <label class="radio $(check "$mpx[prescno]" follow2)" for="prescfollow2">$(l10n prescfollow2)</label>
 <br>
-<label class="radio $(check "$mpx[prescno]" other)" for="prescother">$(l10n prescother)</label>
-<br>
 <label class="radio $(check "$mpx[prescno]" continual)" for="presccontinual">$(l10n presccontinual)</label>
+<br>
+<label class="radio $(check "$mpx[prescno]" other)" for="prescother">$(l10n prescother)</label>
 
 <br>
 <label class="checkbox ${mpx[grouptherapy]:+checked}" for="grouptherapy">$(l10n grouptherapy)</label>
@@ -57,25 +59,22 @@ cat <<END_HTML
 <label class="checkbox ${mpx[housecall]:+checked}" for="housecall">$(l10n housecall)</label>
 <br>
 <label class="checkbox ${mpx[report]:+checked}" for="report">$(l10n report)</label>
+</fieldset>
+
+<fieldset class="description">
 
-<br>
-<label for="remidy">$(l10n remidy)</label>
-<span id="remidy">${mpx[remidy]}</span>
-<br>
 <label for="quantity">$(l10n quantity)</label>
-<span id="quantity">${mpx[quantity]}</span>
-<br>
+<label for="remidy">$(l10n remidy)</label>
 <label for="quantity_weekly">$(l10n quantity_weekly)</label>
+<span id="quantity">${mpx[quantity]}</span>
+<span id="remidy">${mpx[remidy]}</span>
 <span id="quantity_weekly">${mpx[quantity_weekly]}</span>
 
-<br>
-<label for="remidy1">$(l10n remidy)</label>
-<span id="remidy1">${mpx[remidy1]}</span>
-<br>
 <label for="quantity1">$(l10n quantity)</label>
-<span id="quantity1">${mpx[quantity1]}</span>
-<br>
+<label for="remidy1">$(l10n remidy)</label>
 <label for="quantity_weekly1">$(l10n quantity_weekly)</label>
+<span id="quantity1">${mpx[quantity1]}</span>
+<span id="remidy1">${mpx[remidy1]}</span>
 <span id="quantity_weekly1">${mpx[quantity_weekly1]}</span>
 
 <br>
@@ -84,12 +83,14 @@ cat <<END_HTML
 <br>
 <label for="icd10">$(l10n icd10)</label>
 <span id="icd10">${mpx[icd10]}</span>
+</fieldset>
 
-<br>
 <label class="checkbox ${mpx[prescreviewed]:+checked}" for="prescreviewed">$(l10n prescreviewed)</label>
 
-<br>
+<fieldset class="controls">
 <a class="button" href="?p=prescriptions&amp;edit=${mpx[prescription]}">$(l10n edit)</a>
+<a class="button" href="?p=therapy&amp;id=${mpx[prescription]%.mpx}.tpy">$(l10n therapy)</a>
+</fieldset>
 
 </div>
 END_HTML