Added legend modal

- removed "back to top" button - added alerts (no algorithm chosen, guaranteed shortest path, not necessarily shortest path)
tobinatore · Aug 29, 2020 · de2f449 · de2f449
1 parent 9387a44
commit de2f449
Show file tree

Hide file tree

Showing 3 changed files with 407 additions and 152 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -186,6 +186,8 @@ input[type="search"]::-webkit-search-cancel-button {
   opacity: 1;
 }
 
+/* BACK BUTTON
+–––––––––––––––––––––––––––––-------––––––––––––––––––––– */
 .back-button {
   border: 1px solid #fff;
   border-radius: 7%;
@@ -197,6 +199,8 @@ input[type="search"]::-webkit-search-cancel-button {
   background-color: white;
 }
 
+/* BUTTONS FOR GRAPH AREA
+–––––––––––––––––––––––––––––-------––––––––––––––––––––– */
 .button-top {
   border: 0px;
   background-color: #fff;
@@ -211,6 +215,8 @@ input[type="search"]::-webkit-search-cancel-button {
   font-weight: bold;
 }
 
+/* BORDERS AND COLORS
+–––––––––––––––––––––––––––––-------––––––––––––––––––––– */
 .red {
   background-color: #cc1616;
 }
@@ -228,3 +234,75 @@ input[type="search"]::-webkit-search-cancel-button {
 .red-text {
   color: #cc1616;
 }
+
+/* PATHFINDING LEGEND MODAL
+–––––––––––––––––––––––––––––-------––––––––––––––––––––– */
+
+.modal-dialog-slideout {
+  min-height: 100%;
+  margin: 0 0 0 auto;
+  background: #fff;
+}
+
+.modal-sm {
+  max-width: 125px;
+}
+
+.modal.fade .modal-dialog.modal-dialog-slideout {
+  -webkit-transform: translate(100%, 0) scale(1);
+  transform: translate(100%, 0) scale(1);
+}
+.modal.fade.show .modal-dialog.modal-dialog-slideout {
+  -webkit-transform: translate(0, 0);
+  transform: translate(0, 0);
+  display: flex;
+  align-items: stretch;
+  -webkit-box-align: stretch;
+  height: 100%;
+}
+.modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.modal-dialog-slideout .modal-content {
+  border: 0;
+}
+.modal-dialog-slideout .modal-header,
+.modal-dialog-slideout .modal-footer {
+  height: 69px;
+  display: block;
+}
+.modal-dialog-slideout .modal-header h5 {
+  float: left;
+}
+
+.modal {
+  padding-right: 0 !important;
+}
+
+/* MODAL TOGGLE BUTTON
+–––––––––––––––––––––––––––––-------––––––––––––––––––––– */
+.legend-toggle {
+  position: fixed;
+  display: none;
+  right: 15px;
+  bottom: 50vh;
+  z-index: 1;
+}
+
+.legend-toggle i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  width: 40px;
+  height: 40px;
+  background: #cc1616;
+  color: #fff;
+  transition: all 0.4s;
+}
+
+.legend-toggle i:hover {
+  background: #e72323;
+  color: #fff;
+}