kingkevin
/
partdb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web: change layout into split screen

This commit is contained in:
King Kévin 2023-01-25 00:17:39 +01:00
parent 94580ac67b
commit 5d8c857bdd
2 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/index.css
View File

@ -1,5 +1,42 @@
table { table {
border: 1px #E1E3F2 solid; border-collapse: collapse;
resize: both; border-spacing: 0px;
overflow: auto; width: 100%;
}
td.left {
border-right: 1px solid black;
width: 20em;
}
div.resize {
resize: both;
overflow: auto;
margin: 0px;
padding: 0px;
display:block;
}
td {
padding: 0;
margin: 0px;
align: top;
}
input.fill {
width: 95%;
}
div.name {
float:left;
margin-left: 2px;
margin-right: 5px;
}
div.justify {
overflow: hidden;
}
input.justify {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/*border: 2px solid orange; /*just to make border more clear*/
width: 100%;
}
td, th {
vertical-align:top;
} }

38
public/index.html
View File

@ -6,22 +6,28 @@
<link rel='stylesheet' href='index.css'> <link rel='stylesheet' href='index.css'>
</head> </head>
<body> <body>
<div> <div class="container">
<form> <table>
<input type="text" id="terms" name="terms" placeholder="search terms" oninput="search()"><br> <thead>
</form> <tr><th>search</th><th>part details</th></tr>
</div> </thead>
<div> <tbody>
<table> <tr>
<thead> <td class="left">
<tr> <div class="resize">
<th>name</th> <input class="fill" type="text" id="terms" name="terms" placeholder="search terms (space seperated, anded)" oninput="search()"><br>
<th>description</th> <select id="results" size="20" onchange="select()"></select>
<th>stock</th> </div>
</tr> </td>
</thead> <td class="right">
<tbody id="results"></tbody> <div class="resize">
</table> <div class="name">name:</div><div class="justify"><input class="justify" type="text" id="part_name"></div>
<div class="name">description:</div><div class="justify"><input class="justify" type="text" id="part_description"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</body> </body>
</html> </html>