button style work and detail section styles

Addresses #12
HospitalRun · Sep 7, 2014 · fef08ec · fef08ec
1 parent e6a8c54
commit fef08ec
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 14 deletions.
diff --git a/app/patients/edit/template.hbs b/app/patients/edit/template.hbs
@@ -1,5 +1,5 @@
 <div class="panel-group" id="patient-accordion">
-    <div class="panel">
+    <div class="panel detail-section">
         <div class="panel-heading">
             <h3 class="panel-title">
                 <a data-toggle="collapse" data-parent="#patient-accordion" href="#patient-demo">
@@ -8,13 +8,13 @@
             </h3>
         </div>
         <div id="patient-demo" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content detail-section-content">
                 {{#em-form model=this submit_button=false }}
                     <div class="row">
                         <div class="col-xs-12 col-sm-6">
                             <div class="form-group has-success">
                                 <label class="control-label0">Record Number</label>
-                                <div class="form-control">
+                                <div class="form-control not-editable">
                                     {{id}}
                                 </div>
                             </div>
@@ -68,7 +68,7 @@
             </h3>
         </div>
         <div id="patient-diagnosis" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table">
                     <tr class="table-header">
                         <th>Date</th>
@@ -104,7 +104,7 @@
             </h3>
         </div>
         <div id="patient-medication" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table">
                     <tr class="table-header">
                         <th>Date</th>
@@ -149,7 +149,7 @@
             </h3>
         </div>
         <div id="patient-labs" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table">
                     <tr class="table-header">
                         <th>Date Requested</th>
@@ -198,7 +198,7 @@
             </h3>
         </div>
         <div id="patient-imaging" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table">
                     <tr class="table-header">
                         <th>Date Requested</th>
@@ -247,7 +247,7 @@
             </h3>
         </div>
         <div id="patient-visits" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table" >
                     <tr class="table-header">
                         <th>Start Date</th>
@@ -292,7 +292,7 @@
             </h3>
         </div>
         <div id="patient-appointments" class="panel-collapse collapse in">
-            <div class="panel-body">
+            <div class="panel-body detail-section-content">
                 <table class="table">
                     <tr class="table-header">
                         <th>Date</th>

diff --git a/app/styles/_bootstrap.scss b/app/styles/_bootstrap.scss
@@ -5679,13 +5679,19 @@ a.list-group-item-danger {
 }
 
 .panel-heading {
+    background-color: $blue_light2;
+    color: $navy;
     padding: 10px 15px;
-    border-bottom: 1px solid transparent;
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    border-radius: 3px;
+
     > .dropdown .dropdown-toggle {
         color: inherit;
     }
+
+    .btn {
+        position: relative;
+        top: -2px;
+    }
 }
 
 .panel-title {
@@ -5796,7 +5802,7 @@ a.list-group-item-danger {
     .panel-heading {
         border-bottom: 0;
         + .panel-collapse .panel-body {
-            border-top: 1px solid #ddd;
+            // border-top: 1px solid #ddd;
         }
     }
     .panel-footer {

diff --git a/app/styles/_variables_mixins.scss b/app/styles/_variables_mixins.scss
@@ -9,6 +9,7 @@ $navy_mid2:             #3A4D63;
 $navy_drk:              #253649;
 $navy_text:             #97afc8;
 $blue_light:            #dbebff;
+$blue_light2:           #e9f3ff;
 $red:                   #ff6d6f;
 $red_light:             rgba($red,.3);
 $gray_light:            #d9d9d9;

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -211,6 +211,12 @@ body {
     color: $navy;
     background-color: white;
     border: none;
+
+    input,
+    textarea,
+    select {
+        background: rgba($blue_light,.2);
+    }
 }
 
 .modal-dialog {
@@ -240,6 +246,12 @@ h1 {
     }
 }
 
+.not-editable {
+    background-color: rgba($gray_light,.5);
+    opacity: .5;
+    cursor: default;
+}
+
 // end temp style tweaks ------------/
 
 // Index (dashboard) styles
@@ -405,4 +417,24 @@ h1 {
 }
 
 
-// end Group ------------/
+// end index styles ------------/
+
+// layout styles
+// -------------------------------------------/
+
+.detail-section-content {
+    padding: 15px 0;
+
+    .table { margin-top: -15px; }
+}
+
+.table-header {
+    background-color: transparent;
+
+    > th {
+        border-top: none !important;
+        font-weight: 300;
+    }
+}
+
+// end layout styles ------------/