diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/booking/quick_deploy.html | 4 | ||||
| -rw-r--r-- | src/templates/dashboard/genericselect.html | 102 | ||||
| -rw-r--r-- | src/templates/dashboard/searchable_select_multiple.html | 45 |
3 files changed, 104 insertions, 47 deletions
diff --git a/src/templates/booking/quick_deploy.html b/src/templates/booking/quick_deploy.html index f0a2bc1..2fbd035 100644 --- a/src/templates/booking/quick_deploy.html +++ b/src/templates/booking/quick_deploy.html @@ -26,6 +26,10 @@ .grid_element_2third { grid-column-start: span 8; } + .collaborator_pane { + display: flex; + flex-direction: column; + } #id_length { -moz-appearance: none; border: none; diff --git a/src/templates/dashboard/genericselect.html b/src/templates/dashboard/genericselect.html index fc29ee6..a03f759 100644 --- a/src/templates/dashboard/genericselect.html +++ b/src/templates/dashboard/genericselect.html @@ -6,52 +6,92 @@ {% block content %} <style> -#{{select_type}}_form_div { - width: 100%; - padding: 5%; + #page-wrapper { + display: flex; + flex-direction: column; } - .panel { - border: none; + #{{select_type}}_form_div div { } - .select_panels { - width: 100%; + + #{{select_type}}_form_div > *:not(.divider) { + margin-left: 10px; + margin-right: 10px; + } + + #{{select_type}}_form_div div * { + } + + #{{select_type}}_form_div { + flex: 1; + margin: 30px; display: grid; - grid-template-columns: 45% 10% 45%; + grid-template-rows: auto 1px auto 1fr; + grid-template-columns: repeat(24, 1fr); + grid-row-gap: 15px; + } + + #select_section { + display: flex; + flex-direction: column; + grid-column-start: 3; + grid-column-end: 21; + } + + #{{select_type}}_select_form { + flex: 1; + display: flex; + flex-direction: column; + } + .autocomplete { + flex: 1; } - .panel_center { - text-align: center; - border: none; + #create_section { + grid-column-start: 1; + grid-column-end: 24; + } + #select_header_section { + grid-column: 1 / 24; } - .panel_center p{ - font-size: 20pt; + + h3 { + margin-top: 0; + margin-bottom: 0; + vertical-align: middle; + } + + .divider { + border-top: 1px solid #ccc; + grid-column-start: 1; + grid-column-end: 24; } + + </style> <div id="{{select_type}}_form_div"> - <div class="select_panels"> - <div class="panel_chooser panel"> - <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform"> - {% csrf_token %} - {{ form|default:"<p>no form loaded</p>" }} - {% buttons %} - - {% endbuttons %} - </form> - </div> - <div class="panel_center panel"><p>OR</p></div> - <div class="panel_add panel"> - <button class="btn {% if disabled %} disabled {% endif %}" - style="width: 100%; height: 100%;" - {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})" - {% endif %}>Create {{select_type_title}} - </button> - </div> + <h3 id="create_section">Create a Resource + <button class="btn btn-primary {% if disabled %} disabled {% endif %}" + {% if not disabled %}onclick="parent.add_wf({{addable_type_num}})" + {% endif %}>Here + </button> + </h3> + <div class="divider"></div> + <h3 id="select_header_section">Or select from the list below:</h3> + <div id="select_section"> + <form id="{{select_type}}_select_form" method="post" action="" class="form" id="{{select_type}}selectorform"> + {% csrf_token %} + {{ form|default:"<p>no form loaded</p>" }} + {% buttons %} + + {% endbuttons %} + </form> </div> </div> + <script> {% if disabled %} disable(); diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html index 588b693..c594a27 100644 --- a/src/templates/dashboard/searchable_select_multiple.html +++ b/src/templates/dashboard/searchable_select_multiple.html @@ -7,6 +7,15 @@ <p>Please make a different selection, as the current config conflicts with the selected pod</p> {% endif %} </div> + + <div id="added_list"> + + </div> + <div id="added_counter"> + <p id="added_number">0</p> + <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</p> + </div> + <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="search(this.value)" {% if disabled %} disabled {% endif %} > @@ -17,16 +26,20 @@ > </input> - <ul id="drop_results"></ul> - - <div id="added_list"> - - </div> - <div id="added_counter"> - <p id="added_number">0</p> - <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} ∞ {% endif %}added</p> + <div id="scroll_restrictor"> + <ul id="drop_results"></ul> </div> <style> + #scroll_restrictor { + flex: 1; + position: relative; + overflow-y: auto; + } + .autocomplete { + display: flex; + flex: 1; + flex-direction: column; + } #user_field { font-size: 14pt; padding: 5px; @@ -37,14 +50,16 @@ list-style-type: none; padding: 0; margin: 0; - max-height: 300px; min-height: 0; - overflow-y: scroll; - overflow-x: hidden; border: solid 1px #ddd; border-top: none; border-bottom: none; - display: none; + visibility: hidden; + flex: 1; + + position: absolute; + width: 100%; + box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } @@ -104,7 +119,6 @@ } #drop_results li a:hover .entry_tooltip { - display: block; position: absolute; background: #444; color: #ddd; @@ -135,7 +149,6 @@ #added_number, #addable_limit { display: inline; } - </style> </div> @@ -386,11 +399,11 @@ if( !drop.firstChild ) { - drop.style.display = 'none'; + drop.style.visibility = 'hidden'; } else { - drop.style.display = 'block'; + drop.style.visibility = 'inherit'; } } |