diff options
author | 2019-06-28 15:32:40 +0000 | |
---|---|---|
committer | 2019-06-28 15:32:40 +0000 | |
commit | 8149a888fe6f7c1c3b1b3be2b3996c6d225d5a53 (patch) | |
tree | 183eab6f3f1644e6f70e629861f0649c6834e180 /src/templates/workflow | |
parent | 1293c6e1d23d8fe62ee6721ff9a107ca571d9244 (diff) | |
parent | 7fec796ae500313ddbbbedf32d4f7581985d41d4 (diff) |
Merge "Replace and change CSS"
Diffstat (limited to 'src/templates/workflow')
-rw-r--r-- | src/templates/workflow/confirm.html | 140 | ||||
-rw-r--r-- | src/templates/workflow/resource_select.html | 50 | ||||
-rw-r--r-- | src/templates/workflow/viewport-base.html | 168 | ||||
-rw-r--r-- | src/templates/workflow/viewport-element.html | 15 |
4 files changed, 72 insertions, 301 deletions
diff --git a/src/templates/workflow/confirm.html b/src/templates/workflow/confirm.html index c1f3440..b7e6c46 100644 --- a/src/templates/workflow/confirm.html +++ b/src/templates/workflow/confirm.html @@ -5,26 +5,7 @@ {% block content %} -<style> - #form_div { - width: 100%; - padding: 5%; - text-align: center; - } - #text_display { - text-align: left; - display: inline-block; - } - #text_wrapper { - text-align: center; /*centers child div*/ - } - p { - margin:0; - padding:0; - } -</style> - -<div style="text-align:center;"> +<div class="text-center"> <h3>Confirm Session</h3> </div> <div id="vlan_warning"></div> @@ -32,29 +13,34 @@ {% csrf_token %} <input id="vlan_input" name="vlan_input" type="hidden"/> </form> -<div id="text_wrapper"> - <div id="text_display"> - <pre>{{confirmation_info|escape}}</pre> +<div class="container"> + <div class="row justify-content-center"> + <div class="col-auto"> + <pre>{{confirmation_info|escape}}</pre> + </div> </div> -</div> -<div id="form_div"> -<form id="confirmation_form" action="/wf/workflow/" method="post"> - {% csrf_token %} - <div style="display: none;"> - {{form|default:"<p> No Form Loaded</p>"}} + <div class="row"> + <div class="col"> + <div id="form_div" class="text-center p-4"> + <form id="confirmation_form" action="/wf/workflow/" method="post"> + {% csrf_token %} + <div class="d-none"> + {{form|default:"<p> No Form Loaded</p>"}} + </div> + </form> + <div class="cform_buttons mx-auto"> + <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button> + <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button> + </div> + <div class="d-none"> + <form id="manager_delete_form" action="/wf/workflow/finish/" method="post"> + {% csrf_token %} + </form> + </div> + </div> + </div> </div> -</form> -<div class="cform_buttons"> - <button id="confirm_button" class="btn btn-success" onclick="formconfirm()">Confirm</button> - <button id="cancel_button" class="btn btn-danger" onclick="formcancel()">Cancel</button> -</div> - -<div style="display: none;"> -<form id="manager_delete_form" action="/wf/workflow/finish/" method="post"> - {% csrf_token %} -</form> </div> - <script> var select = document.getElementById("id_confirm"); @@ -114,47 +100,45 @@ } </script> <script> - -function fixVlans() { - document.getElementById("vlan_input").value = "True"; - var form = $("#vlan_form"); - var formData = form.serialize(); - var req = new XMLHttpRequest(); - req.open("POST", "/wf/workflow/", false); - req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - req.onerror = function() { alert("problem submitting form"); } - req.onreadystatechange = function() { //replaces current page with response - if(req.readyState === 4 ) { - var d = document.getElementById("vlan_warning").innerHTML = ""; - document.getElementById("confirm_button").disabled = false; - document.getElementById("cancel_button").disabled = false; + function fixVlans() { + document.getElementById("vlan_input").value = "True"; + var form = $("#vlan_form"); + var formData = form.serialize(); + var req = new XMLHttpRequest(); + req.open("POST", "/wf/workflow/", false); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.onreadystatechange = function() { //replaces current page with response + if(req.readyState === 4 ) { + var d = document.getElementById("vlan_warning").innerHTML = ""; + document.getElementById("confirm_button").disabled = false; + document.getElementById("cancel_button").disabled = false; + } } + req.send(formData); + } + var problem = {{vlan_warning|default:'false'}}; + if(problem){ + var d = document.getElementById("vlan_warning"); + var h3 = document.createElement("h3"); + h3.innerHTML = "WARNING: Vlans not available"; + var h4 = document.createElement("h4"); + h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?"; + var button1 = document.createElement("button"); + button1.innerHTML = "Correct Vlans For Me"; + button1.onclick = function() { fixVlans(); } + + var button2 = document.createElement("button"); + button2.innerHTML = "Cancel. I will change my vlans"; + button2.onclick = function() { formcancel(); } + d.appendChild(h3); + d.appendChild(h4); + d.appendChild(button1); + d.appendChild(button2); + document.getElementById("confirm_button").disabled = true; + document.getElementById("cancel_button").disabled = true; } - req.send(formData); -} -var problem = {{vlan_warning|default:'false'}}; -if(problem){ - var d = document.getElementById("vlan_warning"); - var h3 = document.createElement("h3"); - h3.innerHTML = "WARNING: Vlans not available"; - var h4 = document.createElement("h4"); - h4.innerHTML = "The vlans you selected are not currently available. Would you like to automatically change them?"; - var button1 = document.createElement("button"); - button1.innerHTML = "Correct Vlans For Me"; - button1.onclick = function() { fixVlans(); } - - var button2 = document.createElement("button"); - button2.innerHTML = "Cancel. I will change my vlans"; - button2.onclick = function() { formcancel(); } - d.appendChild(h3); - d.appendChild(h4); - d.appendChild(button1); - d.appendChild(button2); - document.getElementById("confirm_button").disabled = true; - document.getElementById("cancel_button").disabled = true; -} </script> -</div> {% block element_messages %} {% endblock element_messages %} diff --git a/src/templates/workflow/resource_select.html b/src/templates/workflow/resource_select.html deleted file mode 100644 index cd04137..0000000 --- a/src/templates/workflow/resource_select.html +++ /dev/null @@ -1,50 +0,0 @@ -{% extends "workflow/viewport-element.html" %} -{% load staticfiles %} - -{% load bootstrap4 %} - -{% block content %} - -<p>resource selection template</p> - -<style> - .db_pane_wrapper{ - display: grid; - grid-template-columns: 49% 2% 49%; - } - .divider{ - border-style: solid; - height: 100vh; - } - - .hidden_form{ - display: none; - } -</style> - -<div class="db_pane_wrapper"> - <div class="pane_one"> - <p>Select Resource</p> - - </div> - <div class="divider"> - - </div> - <div class="pane_two"> - <button>Create New Resource</button> - </div> -</div> - -<div class="hidden_form" id="form_div"> - <form method="post" action="" class="form" id="resource_selection_form"> - {% csrf_token %} - {% bootstrap_field form.resourcebundle %} - {% buttons %} - <button type="submit" class="btn btn btn-success"> - Confirm Edit - </button> - {% endbuttons %} - </form> -</div> - -{% endblock content %}
\ No newline at end of file diff --git a/src/templates/workflow/viewport-base.html b/src/templates/workflow/viewport-base.html index aa01d7e..d219386 100644 --- a/src/templates/workflow/viewport-base.html +++ b/src/templates/workflow/viewport-base.html @@ -5,158 +5,6 @@ {% block content %} -<style> - .go_btn { - - position: absolute; - width: 100px; - top: 170px; - height: calc(100% - 170px); - - } - - .go_btn_disabled { - background-color: #ffffff; - } - - .go_forward { - right: 0px; - border-left: none; - } - - .go_back { - left: 251px; - border-right: none; - } - - - .btn_wrapper { - text-align: center; - margin-bottom: 5px; - - } - - {% if DEBUG %} - .add_btn_wrapper { - right: 130px; - top: 10px; - position: absolute; - } - {% endif %} - - #breadcrumbs { - margin-bottom: 0; - } - - .btn_wrapper { - margin: 0; - } - - .step { - display: inline; - padding: 7px; - margin: 1px; - font-size: 14pt; - cursor: default; - } - - .step:active { - -webkit-box-shadow: inherit; - box-shadow: inherit; - } - - .step_active:active { - -webkit-box-shadow: inherit; - box-shadow: inherit; - } - - .step_active { - display: inline; - padding: 7px; - margin: 1px; - cursor: default; - font-size: 14pt; - padding-bottom: 4px !important; - border-bottom: 4px solid #41ba78 !important; - } - - .step_hidden { - background: #EFEFEF; - color: #999999; - } - - .step_invalid::after { - content: " \2612"; - color: #CC3300; - } - - .step_valid::after { - content: " \2611"; - color: #41ba78; - } - - .step_untouched::after { - content: " \2610"; - } - - .iframe_div { - width: calc(100% - 450px); - margin-left: 70px; - height: calc(100vh - 155px); - position: absolute; - border: none; - } - - .iframe_elem { - width: 100%; - height: calc(100vh - 155px); - border: none; - } - - #breadcrumbs { - background-color: inherit; - } - - #breadcrumbs.breadcrumb>li { - border: 1px solid #cccccc; - border-left: none; - } - - #breadcrumbs.breadcrumb>li:first-child { - border-left: 1px solid #cccccc; - } - - #breadcrumbs.breadcrumb>li+li:before { - content: ""; - width: 0; - margin: 0; - padding: 0; - } - - #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; - } -</style> <!-- Pagination --> <div class="row mt-3"> <div class="col"> @@ -205,10 +53,10 @@ <div class="row px-4"> <div class="col"> <div id="iframe_header" class="row view-header"> - <div class="col-lg-12 step_header"> - <h1 class="step_title d-inline-block" id="view_title"></h1> + <div class="col-lg-12"> + <h1 class="d-inline-block" id="view_title"></h1> <span class="description text-muted" id="view_desc"></span> - <p class="step_message" id="view_message"></p> + <p id="view_message"></p> </div> <script> function update_description(title, desc) { @@ -222,28 +70,22 @@ document.getElementById("view_message").classList.add("message_" + stepstatus); } </script> - <!-- /.col-lg-12 --> </div> </div> <div class="col-auto align-self-center d-flex"> <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button> </div> </div> -<!-- Content here --> <div class="row d-flex flex-column flex-grow-1"> <div class="container-fluid d-flex flex-column h-100"> <div class="row d-flex flex-grow-1 p-4"> - <!-- iframe workflow --> - <div class="col-12 d-flex border flex-grow-1"> - <!-- This was where the iframe went --> + <div class="col-12 d-flex border flex-grow-1 px-0"> <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe" frameBorder="0"></iframe> </div> </div> </div> </div> -<div class="btn_wrapper"> -</div> {% csrf_token %} <script type="text/javascript"> @@ -478,7 +320,7 @@ window.location = window.location; } </script> -<div style="display: none;" id="workflow_pop_form_div"> +<div class="d-none" id="workflow_pop_form_div"> <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post"> {% csrf_token %} </form> diff --git a/src/templates/workflow/viewport-element.html b/src/templates/workflow/viewport-element.html index 7a7165a..b87013a 100644 --- a/src/templates/workflow/viewport-element.html +++ b/src/templates/workflow/viewport-element.html @@ -4,15 +4,12 @@ {% block basecontent %} - <div id="wrapper"> + <div id="wrapper" class="h-100"> <!-- Page Content --> - <div id="page-wrapper"> - + <div id="page-wrapper" class="h-100"> {% block content %} - {% endblock content %} </div> - <!-- /#page-wrapper --> </div> {% block vport_comm %} <script type="text/javascript"> @@ -53,9 +50,9 @@ <script> function step_on_leave() { - {% block onleave %} - alert("override onleave"); - {% endblock %} + {% block onleave %} + alert("override onleave"); + {% endblock %} } </script> @@ -64,6 +61,4 @@ {% bootstrap_messages %} {% endblock %} </div> - - <!-- /#wrapper --> {% endblock basecontent %} |