Improve Demo (dr5hn#105)

* NEW: Improved Demo WIP * Attach More info modal * Finalize Demo * clear cities if country selection changed.
Anxo42 · Sep 6, 2020 · be1e8bc · be1e8bc
1 parent ba2d8dc
commit be1e8bc
Show file tree

Hide file tree

Showing 4 changed files with 399 additions and 216 deletions.
diff --git a/docs/css/app.css b/docs/css/app.css
@@ -1,78 +1,87 @@
 body {
-  padding-top: 56px;
+    padding-top: 56px;
 }
 
-th a, th a:hover {
-  color: #000;
+td:hover {
+    background: #fafafa;
 }
 
-.dynatable-page-link {
-    display: inline-block;
-    font-weight: 400;
-    color: #212529;
-    text-align: center;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-color: transparent;
-    border: 1px solid transparent;
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: .25rem;
-    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-    color: #fff !important;
-    background-color: #007bff;
-    border-color: #007bff;
-    cursor: pointer;
+/* Github Button */
+.github {
+    padding: 8px 12px;
+    border-radius: 50px;
+    color: #fff;
+    display: inline-flex;
+    font-weight: 600;
+    align-items: center;
+    justify-content: center;
 }
 
-input:focus {
-    color: #495057;
-    background-color: #fff;
-    border-color: #80bdff;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+.github svg {
+    width: 24px;
+    flex-shrink: 0;
+    margin-right: 6px;
 }
 
-input, select {
-    height: calc(1.5em + .75rem + 2px);
-    padding: .375rem .75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: #495057;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #ced4da;
-    border-radius: .25rem;
-    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+/* Tooltip */
+.tooltip .tooltip-text {
+    visibility: hidden;
+    text-align: center;
+    padding: 2px 6px;
+    position: absolute;
+    z-index: 100;
 }
 
-select {
-    word-wrap: normal;
+.tooltip:hover .tooltip-text {
+    visibility: visible;
 }
 
-.dynatable-page-link:hover {
-    color: #fff;
-    background-color: #0069d9;
-    border-color: #0062cc;
+/* Code Formatting */
+pre {
+    font-family: ibm-plex-mono, Consolas, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New';
+    overflow: hidden;
+    background: rgb(28, 29, 33);
+    color: rgb(192, 197, 206);
+    padding: 1rem;
+    border-radius: 6px;
+    font-size: 13px
 }
 
-.dynatable-pagination-links span, .dynatable-pagination-links li {
-    margin: 0 5px 0 0;
+/* Github Corner */
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
 }
 
-.dynatable-per-page, .dynatable-record-count {
-    float: left;
+@keyframes octocat-wave {
+
+    0%,
+    100% {
+        transform: rotate(0);
+    }
+
+    20%,
+    60% {
+        transform: rotate(-25deg);
+    }
+
+    40%,
+    80% {
+        transform: rotate(10deg);
+    }
 }
 
-.dynatable-per-page-label {
-    margin: 0 10px;
+@media (max-width: 500px) {
+    .github-corner:hover .octo-arm {
+        animation: none;
+    }
+
+    .github-corner .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+    }
 }
 
-.cities, .countries, .states {
-    width: 100%;
+/* Hidden Element */
+textarea {
+    position: absolute;
+    left: -100%;
 }