iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-30 20:09:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

изменил стили таблицы

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-12-25 23:13:15 +01:00
parent b150384167
commit c0d7d2dd2c
1 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/App.svelte
View File

@@ -594,7 +594,7 @@
<div class="cards-grid-inline"> <div class="cards-grid-inline">
<Card title="Конфигуратор"> <Card title="Конфигуратор">
<table class="table-fixed w-full"> <table class="table-fixed w-full">
<thead> <thead class="bg-gray-50">
<tr> <tr>
<th class="table-head-element">Тип</th> <th class="table-head-element">Тип</th>
<th class="table-head-element">Подтип</th> <th class="table-head-element">Подтип</th>
@@ -602,15 +602,15 @@
<th class="table-head-element">Виджет</th> <th class="table-head-element">Виджет</th>
<th class="table-head-element">Вкладка</th> <th class="table-head-element">Вкладка</th>
<th class="table-head-element">Название</th> <th class="table-head-element">Название</th>
<th class="table-head-element">Остальное</th> <th class="table-head-element w-12" />
<th class="table-head-element">Удалить</th> <th class="table-head-element w-12" />
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="bg-white">
{#each config as element} {#each config as element}
<tr> <tr>
<td class="table-body-element">{element.type}</td> <td class="table-body-element">{element.type}</td>
<td class="table-body-element"><input bind:value={element.subtype} class="table-input" type="text" /></td> <td class="table-body-element">{element.subtype}</td>
<td class="table-body-element"><input bind:value={element.id} class="table-input" type="text" /></td> <td class="table-body-element"><input bind:value={element.id} class="table-input" type="text" /></td>
<td class="table-body-element" <td class="table-body-element"
><select class="table-input" bind:value={selectedDeviceData}> ><select class="table-input" bind:value={selectedDeviceData}>
@@ -620,6 +620,10 @@
</option> </option>
{/each} {/each}
</select></td> </select></td>
<td class="table-body-element"><input bind:value={element.page} class="table-input" type="text" /></td>
<td class="table-body-element"><input bind:value={element.descr} class="table-input" type="text" /></td>
<td class="table-body-element"><button class="table-button bg-green-100 hover:bg-green-200" /></td>
<td class="table-body-element"><button class="table-button bg-red-100 hover:bg-red-200" /></td>
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
@@ -646,7 +650,7 @@
<Route path="/list"> <Route path="/list">
<Card title={"Список устройств"}> <Card title={"Список устройств"}>
<table class="table-fixed w-full"> <table class="table-fixed w-full">
<thead> <thead class="bg-gray-50">
<tr> <tr>
<th class="table-head-element">Название устройства</th> <th class="table-head-element">Название устройства</th>
<th class="table-head-element">IP адрес</th> <th class="table-head-element">IP адрес</th>
@@ -654,13 +658,13 @@
<th class="table-head-element">Состояние</th> <th class="table-head-element">Состояние</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="bg-white">
{#each deviceList as device} {#each deviceList as device}
<tr> <tr>
<td class="table-body-element">{device.name}</td> <td class="table-body-element">{device.name}</td>
<td class="table-body-element"><a href={"http://" + device.ip}>{device.ip}</a></td> <td class="table-body-element"><a href={"http://" + device.ip}>{device.ip}</a></td>
<td class="table-body-element">{device.id}</td> <td class="table-body-element">{device.id}</td>
<td class="table-body-element {device.status ? 'bg-green-100' : 'bg-red-100'}">{device.status ? "online" : "offline"}</td> <td class="table-body-element {device.status ? 'bg-green-50' : 'bg-red-50'}">{device.status ? "online" : "offline"}</td>
</tr> </tr>
{/each} {/each}
{#if showInput} {#if showInput}
@@ -676,7 +680,9 @@
<button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button> <button class="long-button" on:click={() => ((showInput = !showInput), devListSave())}>{showInput ? "Сохранить" : "Добавить устройство"}</button>
</Card> </Card>
</Route> </Route>
<Route path="/about" /> <Route path="/about">
<Card title={"Список устройств"} />
</Route>
</div> </div>
</ul> </ul>
</main> </main>
@@ -736,18 +742,21 @@
} }
/*====================================================table=====================================================*/ /*====================================================table=====================================================*/
.table-head-element { .table-head-element {
@apply border border-gray-300 text-center break-words w-1/4 text-gray-500 font-bold; @apply px-2 py-2 text-center break-words text-gray-500 font-bold;
} }
.table-body-element { .table-body-element {
@apply border border-gray-300 text-center break-words w-1/4; @apply px-2 py-2 text-center break-words;
} }
.table-input { .table-input {
@apply content-center bg-gray-100 appearance-none border-2 border-gray-200 w-full text-gray-700 leading-tight focus:outline-none focus:bg-white text-center focus:border-indigo-500; @apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 w-full text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500;
} }
/*====================================================buttons=====================================================*/ /*====================================================buttons=====================================================*/
.long-button { .long-button {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded; @apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-full mt-4 border border-gray-300 rounded;
} }
.table-button {
@apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300;
}
} }
#menu__toggle { #menu__toggle {