add search form layout to main page,

add search icon
This commit is contained in:
Arthur Lu 2023-09-14 20:38:23 +00:00
parent 3e54b48321
commit bdd428215b
2 changed files with 11 additions and 4 deletions

1
images/static/search.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><style>:root{color:#fff}@media (prefers-color-scheme:light){:root{color:#000}}</style><path d="M15.796 15.811L21 21m-3-10.5a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

After

Width:  |  Height:  |  Size: 351 B

View File

@ -33,11 +33,17 @@
</header> </header>
<main> <main>
<section class="w3-container"> <section class="w3-container">
<div class="flex row nowrap" style="justify-content: space-between;"> <h2>Instances</h2>
<h2>Instances</h2> <div class="w3-card w3-padding">
<button type="button" id="instance-add" class="w3-button">Create Instance</button> <div class="flex row nowrap" style="justify-content: space-between;">
<form role="search" class="flex row nowrap">
<img src="images/static/search.svg">
<input type="search" id="search" class="w3-input w3-border" style="height: 1lh;">
</form>
<button type="button" id="instance-add" class="w3-button">Create Instance</button>
</div>
<div id="instance-container"></div>
</div> </div>
<div id="instance-container" class="w3-card w3-padding"></div>
</section> </section>
</main> </main>
</body> </body>