summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorSawyer Bergeron <sbergeron@iol.unh.edu>2019-06-13 11:20:54 -0400
committerSawyer Bergeron <sbergeron@iol.unh.edu>2019-06-14 10:06:32 -0400
commit771613e9c9fae29cdf36e9e4390dbad672aa100b (patch)
tree9c556cfc54d926620fafed566402809ad49c46ce
parent9006bd91e6976bbf50a71f92c8ac785029387494 (diff)
Refactor usages of search field
Change-Id: I5af3d8d5db204fc9eb95a1ee4967cce0caf9b75c Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>
-rw-r--r--dashboard/src/templates/booking/quick_deploy.html4
-rw-r--r--dashboard/src/templates/dashboard/genericselect.html102
-rw-r--r--dashboard/src/templates/dashboard/searchable_select_multiple.html45
3 files changed, 104 insertions, 47 deletions
diff --git a/dashboard/src/templates/booking/quick_deploy.html b/dashboard/src/templates/booking/quick_deploy.html
index f0a2bc1..2fbd035 100644
--- a/dashboard/src/templates/booking/quick_deploy.html
+++ b/dashboard/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/dashboard/src/templates/dashboard/genericselect.html b/dashboard/src/templates/dashboard/genericselect.html
index fc29ee6..a03f759 100644
--- a/dashboard/src/templates/dashboard/genericselect.html
+++ b/dashboard/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/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index 588b693..c594a27 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/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 %} &infin; {% 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 %} &infin; {% 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';
}
}