diff options
| -rw-r--r-- | bh20simplewebuploader/static/main.css | 26 | ||||
| -rw-r--r-- | bh20simplewebuploader/templates/form.html | 22 |
2 files changed, 47 insertions, 1 deletions
diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css index 609ae19..94d38bf 100644 --- a/bh20simplewebuploader/static/main.css +++ b/bh20simplewebuploader/static/main.css @@ -57,6 +57,15 @@ form h4 { margin: 0 auto; padding: 20px; } + +.button { + width: 6em; + border-radius: 5px; + background: #0ED1CD; + margin: 0.3em auto; + padding: 0.4em; +} + .footer { background-color: white; margin: 0 auto; @@ -128,6 +137,22 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; } margin-top: 10px; } +.search-section { + display: flex; + justify-content: space-between; +} + +.search-section .filter-options { + display: flex; + flex-direction: column; + width: max-content; + padding: 20px; +} + +.search-section p { + margin: 0; +} + .submit { grid-area: f; width: 17em; @@ -158,6 +183,7 @@ footer { .invisible { display: none; } + @media only screen and (max-device-width: 480px) { .grid-container { display: flex; diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html index ea3caab..e01b846 100644 --- a/bh20simplewebuploader/templates/form.html +++ b/bh20simplewebuploader/templates/form.html @@ -15,7 +15,27 @@ <small>Disabled until we got everything wired up</small> </section> - <hr> + + <section class="search-section"> + <div class="filter-options" action="#"> + <p>[Demo] Display content sequences by: </p> + + <button class="button">Source</button> + <button class="button">Location</button> + </div> + + <form class="search"> + <input id="search-input" id="global-search" type="search" placeholder="FASTA uri" required> + <button class="button search-button" type="submit" onclick="search()"> + <span class="icon ion-search"> + <span class="sr-only">Search</span> + </span> + </button> + </form> + </section> + + <section class="results"> + </section> <section> <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container"> |