layout updates, added json views, fixed relationships in schema

ttfrog/assets/static/css/styles.css

@@ -4,6 +4,19 @@ body {
     margin: 0;
 }
 
+.disabled {
+    position : relative;
+    opacity: 0.3;
+}
+.disabled:after {
+    position :absolute;
+    left     : 0;
+    top      : 0;
+    width    : 100%;
+    height   : 100%;
+    content  :' ';
+}
+
 
 #content {
     margin: 1rem auto;
@@ -35,79 +48,161 @@ ul.nav li {
     padding: 0 0.5rem;
 }
 
-#character_sheet {
-    width:50%;
+#sheet_container {
     display: block;
 }
 
-#character_sheet .statblock {
+#character_sheet {
     width: 100%;
     margin-bottom:3rem;
     display: grid;
-    grid-template-columns: auto 250px;
     grid-gap: 1rem;
+    grid-template-columns: min-content max-content;
 }
 
-#character_sheet .banner {
+#sheet_container .banner {
     display: grid;
     grid-template-columns: 64px 1fr;
     grid-gap: 1rem;
 }
 
-#character_sheet .banner #portrait {
+#sheet_container .banner #portrait {
     width: 64px;
     height: 64px;
     background: #e7e7e7;
 }
 
+#controls {
+    float: right;
+    display: inline-block;
+}
 
-#character_sheet h1 {
+.temp_hp input {
+    font-size: 0.75rem !important;
+}
+
+#sheet_container h1 {
     margin: 0;
 }
 
-#character_sheet .sidebar {
-    min-height: 300px;
+#sheet_container .sidebar {
+    grid-column-start: 2;
+    grid-row-start: 1;
 }
 
-#character_sheet input,
-#character_sheet select, 
-#character_sheet textarea {
+#sheet_container .sidebar .card {
+    margin-bottom: 1rem;
+}
+
+#sheet_container .sidebar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+#sheet_container .sidebar ul > li {
+    margin: 0;
+    padding: 0;
+}
+
+#hp {
+    grid-row-start: 1;
+    grid-column: 7;
+    grid-column-end: 9;
+}
+
+#saves {
+    grid-row-start: 2;
+    grid-column: 3;
+    grid-column-start: span 2;
+}
+
+#proficiency {
+    grid-row-start: 2;
+    grid-column: 5;
+}
+
+#initiative {
+    grid-row-start: 2;
+    grid-column: 6;
+}
+#ac {
+    grid-row-start: 2;
+    grid-column: 7;
+}
+#speed {
+    grid-row-start: 2;
+    grid-column: 8;
+}
+
+#skills {
+  grid-row-start: 2;
+  grid-row-end: 50;
+  grid-column: 1;
+  grid-column-start: span 2;
+  text-align:left;
+}
+
+#actions {
+    grid-row-start: 3;
+    grid-column: 4;
+    grid-column-start: span 6;
+}
+
+
+table {
+    display: grid;
+    grid-template-columns: minmax(50px, 150px) 1fr;
+    grid-gap: 0rem;
+}
+table th {
+    grid-column-start: span 4;
+    white-space: nowrap;
+    padding-right: 1rem;
+    text-align: left;
+}
+
+table td {
+    padding-right: 1rem;
+    white-space: nowrap;
+}
+
+.note {
+    font-size: 0.75em;
+    font-style: italic;
+}
+
+
+
+#sheet_container input,
+#sheet_container select, 
+#sheet_container textarea {
     font-weight: bold;
     border: 0;
 }
 
-#character_sheet input#name {
-    font-size: 1.5rem;
+#sheet_container input#name {
+    font-size: 2.0rem;
     font-weight: bold;
     width: 100%;
 }
 
-.stats .cards {
-    margin-top: 1rem;
+.stats {
     display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    grid-auto-rows: auto;
+    grid-template-columns: repeat(8, minmax(6rem, 1fr));
     grid-gap: 1rem;
 }
 
-.sidebar .cards {
-    margin-top: 1rem;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-gap: 1rem;
-    text-align: center;
-}
-
-.cards .card {
+.card {
     border: 2px solid #e7e7e7;
     border-radius: 4px;
     padding: .5rem;
+    text-align: center;
 }
 
-.card .label {
+.label {
     text-align: center;
     text-transform: uppercase;
+    font-size: 0.75rem;
 }
 
 .card input {