From 7fec796ae500313ddbbbedf32d4f7581985d41d4 Mon Sep 17 00:00:00 2001 From: Brandon Lo Date: Thu, 27 Jun 2019 15:43:55 -0400 Subject: Replace and change CSS Fix animation bugs Fix layout issues Replace custom CSS to bootstrap classes Remove unused files Change code to use es6 syntax Add dropdown styles Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5 Signed-off-by: Brandon Lo --- src/static/css/base.css | 84 ++++ src/static/css/detail_view.css | 39 -- src/static/js/dashboard.js | 58 +-- src/templates/account/booking_list.html | 181 +++++---- src/templates/account/configuration_list.html | 72 ++-- src/templates/account/image_list.html | 90 +++-- src/templates/account/resource_list.html | 72 ++-- src/templates/account/userprofile_update_form.html | 2 +- src/templates/base.html | 90 +---- src/templates/booking/booking_calendar.html | 2 - src/templates/booking/booking_detail.html | 446 ++++++++++----------- src/templates/booking/quick_deploy.html | 158 +++----- src/templates/booking/stats.html | 8 +- src/templates/booking/steps/booking_confirm.html | 25 -- src/templates/booking/steps/booking_meta.html | 85 ++-- src/templates/booking/steps/resource_select.html | 73 ---- src/templates/booking/steps/swconfig_select.html | 73 ---- .../config_bundle/steps/table_formset.html | 4 +- src/templates/dashboard/genericselect.html | 69 +--- src/templates/dashboard/grid.html | 10 - src/templates/dashboard/host_profile_detail.html | 1 - src/templates/dashboard/lab_detail.html | 212 +++++----- src/templates/dashboard/lab_list.html | 40 +- src/templates/dashboard/landing.html | 114 ++---- .../dashboard/multiple_select_filter_widget.html | 152 ++----- .../dashboard/searchable_select_multiple.html | 158 +------- src/templates/dashboard/table.html | 20 +- src/templates/layout.html | 5 +- src/templates/notifier/inbox.html | 64 +-- src/templates/notifier/notification.html | 45 +-- src/templates/resource/hostprofile_detail.html | 134 ++++--- src/templates/resource/steps/meta_info.html | 26 +- src/templates/resource/steps/pod_definition.html | 98 +---- src/templates/snapshot_workflow/steps/meta.html | 7 +- .../snapshot_workflow/steps/select_host.html | 123 ++---- src/templates/workflow/confirm.html | 140 +++---- src/templates/workflow/resource_select.html | 50 --- src/templates/workflow/viewport-base.html | 168 +------- src/templates/workflow/viewport-element.html | 15 +- 39 files changed, 1086 insertions(+), 2127 deletions(-) delete mode 100644 src/static/css/detail_view.css delete mode 100644 src/templates/booking/steps/booking_confirm.html delete mode 100644 src/templates/booking/steps/resource_select.html delete mode 100644 src/templates/booking/steps/swconfig_select.html delete mode 100644 src/templates/dashboard/grid.html delete mode 100644 src/templates/workflow/resource_select.html diff --git a/src/static/css/base.css b/src/static/css/base.css index c51728c..447c368 100644 --- a/src/static/css/base.css +++ b/src/static/css/base.css @@ -1,3 +1,30 @@ +/* Sizing */ +#wrapper { + height: 100vh; +} + +/* Used for turning divs into square */ +.square-20 { + height: 20px; + width: 20px; +} + +/* Make links stay the same color with no underline */ +.discrete-a { + text-decoration: none; + color: inherit; +} + +.discrete-a:hover { + text-decoration: none; + color: inherit; +} + +/* Allow for sidebar to be small, but also resize on small screens */ +.sidebar { + min-width: 200px; +} + /* Rotating arrows when dropdown happens */ i.fas.rotate { transition: transform 0.3s ease-in-out; @@ -6,3 +33,60 @@ i.fas.rotate { a[aria-expanded="true"] > i.rotate { transform: rotate(180deg); } +/* End rotating arrows */ + +/* Start breadcrumbs for workflow */ +#topPagination .topcrumb { + flex: 1 1 0; + display: flex; + align-content: center; + justify-content: center; + border: 1px solid #dee2e6; + border-left: none; +} + +.topcrumb > span { + color: #343a40; + cursor: default; +} + +.topcrumb.active > span { + background: #007bff; + color: white; +} + +.topcrumb.disabled > span { + color: #6c757d; + background: #f8f9fa; +} + +/* Booking Node Styles */ +.selected_node { + border-color: #40c640; + box-shadow: 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(109, 243, 76, 0.6); + transition: border-color ease-in-out .1s,box-shadow ease-in-out .1s; +} +#grid_wrapper > .row > div:first-child { + border-right: 1px solid gray; +} + +/* Cursor effects */ +.not-allowed { + cursor: not-allowed; +} + +/* Used with position-absolute class to make a full height object */ +.topToBottom { + bottom: 0; + top: 0; +} + +/* Dropdown for collaborators */ +#drop_results { + max-height: 10rem; + z-index: 2; +} + +#drop_results > li { + word-wrap: anywhere; +} \ No newline at end of file diff --git a/src/static/css/detail_view.css b/src/static/css/detail_view.css deleted file mode 100644 index c3d0a4d..0000000 --- a/src/static/css/detail_view.css +++ /dev/null @@ -1,39 +0,0 @@ -.card_container { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - grid-gap: 25px 25px; - justify-items: stretch; -} - -.card_container ul > li { - padding: 7px !important; - font-size: 16px; -} - -.detail_button_container .btn { - width: 49%; -} - -.detail_button_container .btn-danger { - float: right; -} - -#modal_warning { - transition: max-height 0.5s ease-out; - overflow: hidden; -} - -.detail_card { - border-radius: 5px; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - border-right: 1px solid #ccc; - border-bottom: 1px solid #ccc; - margin: 5px; - padding-left: 25px; - padding-right: 25px; - padding-bottom: 15px; - display: flex; - flex-direction: column; - justify-content: space-between; -} diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js index 84c3703..9c99aa8 100644 --- a/src/static/js/dashboard.js +++ b/src/static/js/dashboard.js @@ -98,7 +98,7 @@ class MultipleSelectFilterWidget { select(node) { const elem = document.getElementById(node['id']); node['selected'] = true; - elem.classList.remove('disabled_node', 'cleared_node'); + elem.classList.remove('bg-white', 'not-allowed', 'bg-light'); elem.classList.add('selected_node'); } @@ -106,16 +106,16 @@ class MultipleSelectFilterWidget { const elem = document.getElementById(node['id']); node['selected'] = false; node['selectable'] = true; - elem.classList.add('cleared_node') - elem.classList.remove('disabled_node', 'selected_node'); + elem.classList.add('bg-white') + elem.classList.remove('not-allowed', 'bg-light', 'selected_node'); } disable_node(node) { const elem = document.getElementById(node['id']); node['selected'] = false; node['selectable'] = false; - elem.classList.remove('cleared_node', 'selected_node'); - elem.classList.add('disabled_node'); + elem.classList.remove('bg-white', 'selected_node'); + elem.classList.add('not-allowed', 'bg-light'); } processClick(id){ @@ -173,7 +173,7 @@ class MultipleSelectFilterWidget { const button = document.createElement("BUTTON"); button.type = "button"; button.appendChild(document.createTextNode("Remove")); - button.classList.add("btn", "btn-danger"); + button.classList.add("btn", "btn-danger", "d-inline-block"); const that = this; button.onclick = function(){ that.remove_dropdown(div.id, node.id); } return button; @@ -183,6 +183,7 @@ class MultipleSelectFilterWidget { const input = document.createElement("INPUT"); input.type = node.form.type; input.name = node.id + node.form.name + input.classList.add("form-control", "w-auto", "d-inline-block"); input.pattern = "(?=^.{1,253}$)(^([A-Za-z0-9-_]{1,62}\.)*[A-Za-z0-9-_]{1,63})"; input.title = "Only alphanumeric characters (a-z, A-Z, 0-9), underscore(_), and hyphen (-) are allowed" input.placeholder = node.form.placeholder; @@ -198,7 +199,7 @@ class MultipleSelectFilterWidget { add_item_prepopulate(node, prepopulate){ const div = document.createElement("DIV"); div.id = "dropdown_" + this.dropdown_count; - div.classList.add("dropdown_item"); + div.classList.add("list-group-item"); this.dropdown_count++; const label = document.createElement("H5") label.appendChild(document.createTextNode(node['name'])) @@ -756,21 +757,28 @@ class NetworkStep { } makeSidebarNetwork(net_name, color, net_id){ - const newNet = document.createElement("li"); const colorBlob = document.createElement("div"); - colorBlob.className = "colorblob"; - const textContainer = document.createElement("p"); - textContainer.className = "network_innertext"; - newNet.id = net_id; + colorBlob.className = "square-20 rounded-circle"; + colorBlob.style['background'] = color; + + const textContainer = document.createElement("span"); + textContainer.className = "ml-2"; + textContainer.appendChild(document.createTextNode(net_name)); + + const timesIcon = document.createElement("i"); + timesIcon.classList.add("fas", "fa-times"); + const deletebutton = document.createElement("button"); - deletebutton.className = "btn btn-danger"; - deletebutton.style = "float: right; height: 20px; line-height: 8px; vertical-align: middle; width: 20px; padding-left: 5px;"; - deletebutton.appendChild(document.createTextNode("X")); + deletebutton.className = "btn btn-danger ml-auto square-20 p-0 d-flex justify-content-center"; + deletebutton.appendChild(timesIcon); deletebutton.addEventListener("click", function() { this.createDeleteDialog(net_id); }.bind(this), false); - textContainer.appendChild(document.createTextNode(net_name)); - colorBlob.style['background'] = color; + + const newNet = document.createElement("li"); + newNet.classList.add("list-group-item", "d-flex", "bg-light"); + newNet.id = net_id; newNet.appendChild(colorBlob); newNet.appendChild(textContainer); + if( net_name != "public" ) { newNet.appendChild(deletebutton); } @@ -1052,14 +1060,14 @@ class SearchableSelectMultipleWidget { const result_button = document.createElement("a"); const obj = this.items[id]; const result_text = this.generate_element_text(obj); - result_button.appendChild(document.createTextNode(result_text)); - result_button.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); }; + result_entry.classList.add("list-group-item", "list-group-item-action"); + result_entry.innerText = result_text; + result_entry.onclick = function() { searchable_select_multiple_widget.select_item(obj.id); }; const tooltip = document.createElement("span"); const tooltiptext = document.createTextNode(result_text); tooltip.appendChild(tooltiptext); - tooltip.setAttribute('class', 'entry_tooltip'); - result_button.appendChild(tooltip); - result_entry.appendChild(result_button); + tooltip.classList.add("d-none"); + result_entry.appendChild(tooltip); drop.appendChild(result_entry); } @@ -1120,13 +1128,11 @@ class SearchableSelectMultipleWidget { const element_entry_text = this.generate_element_text(item); - list_html += '
' - + '

' + list_html += '

' + element_entry_text - + '

' + ''; + + ')" class="btn btn-danger ml-auto">Remove'; list_html += '
'; } added_list.innerHTML = list_html; diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html index 98ab5c8..55c6c0d 100644 --- a/src/templates/account/booking_list.html +++ b/src/templates/account/booking_list.html @@ -1,88 +1,94 @@ {% extends "base.html" %} {% block content %}

Bookings I Own

-
- {% for booking in bookings %} -
-
-

Booking {{booking.id}}

-
-
-
    -
  • id: {{booking.id}}
    • -
  • lab: {{booking.lab}}
    • -
  • resource: {{booking.resource.template.name}}
    • -
  • start: {{booking.start}}
    • -
  • end: {{booking.end}}
    • -
  • purpose: {{booking.purpose}}
    • -
-
-
- Details - +
+ {% for booking in bookings %} +
+
+
+

Booking {{booking.id}}

+
+
+
    +
  • id: {{booking.id}}
    • +
  • lab: {{booking.lab}}
    • +
  • resource: {{booking.resource.template.name}}
    • +
  • start: {{booking.start}}
    • +
  • end: {{booking.end}}
    • +
  • purpose: {{booking.purpose}}
    • +
+
+
+ Details + +
+
-
- {% endfor %} + {% endfor %}

Bookings I Collaborate On

-
+
{% for booking in collab_bookings %} -
-
-

Booking {{booking.id}}

-
-
-
    -
  • id: {{booking.id}}
    • -
  • lab: {{booking.lab}}
    • -
  • resource: {{booking.resource.template.name}}
    • -
  • start: {{booking.start}}
    • -
  • end: {{booking.end}}
    • -
  • purpose: {{booking.purpose}}
    • -
-
-
- Details +
+
+
+

Booking {{booking.id}}

+
+
+
    +
  • id: {{booking.id}}
    • +
  • lab: {{booking.lab}}
    • +
  • resource: {{booking.resource.template.name}}
    • +
  • start: {{booking.start}}
    • +
  • end: {{booking.end}}
    • +
  • purpose: {{booking.purpose}}
    • +
+
+
+ Details +
{% endfor %}
-

Expired Bookings - -

-