iotmanager/IoTManagerWeb
1
0
Fork 0
mirror of https://github.com/IoTManagerProject/IoTManagerWeb.git synced 2026-03-26 23:12:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

поправил стили

Browse Source
This commit is contained in:
Dmitry Borisenko
2021-12-28 01:06:01 +01:00
parent bc005e5e22
commit b3f21aafbc
2 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/App.svelte
View File

@@ -27,6 +27,8 @@
let showModalFlag = false; let showModalFlag = false;
let hideAllSubParams = false;
//dashboard //dashboard
let wigets = []; let wigets = [];
let pages = []; let pages = [];
@@ -619,7 +621,9 @@
<Route path="/config"> <Route path="/config">
<div class="cards-grid-inline"> <div class="cards-grid-inline">
<Card title="Конфигуратор"> <Card>
<!--<select class="long-select">{"Выберите элемент"}</select>-->
<!--<select class="long-select">{"Выберите пресет"}</select>-->
<table class="table-fixed w-full"> <table class="table-fixed w-full">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
@@ -628,7 +632,7 @@
<th class="table-head-element text-center">Виджет</th> <th class="table-head-element text-center">Виджет</th>
<th class="table-head-element text-center">Вкладка</th> <th class="table-head-element text-center">Вкладка</th>
<th class="table-head-element text-center">Название</th> <th class="table-head-element text-center">Название</th>
<th class="table-head-element text-center w-12" /> <th class="table-head-element text-center w-12"><button class="table-button bg-green-100 hover:bg-green-400" /></th>
<th class="table-head-element text-center w-12" /> <th class="table-head-element text-center w-12" />
</tr> </tr>
</thead> </thead>
@@ -650,22 +654,24 @@
<td class="table-body-element text-center"><button on:click={() => showAdditionalParams(element.id)} class="table-button bg-green-100 hover:bg-green-400" /></td> <td class="table-body-element text-center"><button on:click={() => showAdditionalParams(element.id)} class="table-button bg-green-100 hover:bg-green-400" /></td>
<td class="table-body-element text-center"><button class="table-button bg-red-100 hover:bg-red-400" /></td> <td class="table-body-element text-center"><button class="table-button bg-red-100 hover:bg-red-400" /></td>
</tr> </tr>
<!-- {#each Object.values(element) as d}--> {#if !hideAllSubParams}
{#each Object.entries(element) as [key, param]} {#each Object.entries(element) as [key, param]}
{#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"} {#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
<tr> <tr>
<td /> <td />
<td /> <td />
<td /> <td />
<td class="table-body-element text-right"> <td class="table-sub-body-element text-right">
<p class="table-sub-text">{key}</p> <p class="table-sub-text">{key}</p>
</td> </td>
<td class="table-body-element text-center"> <td class="table-sub-body-element text-center">
<input bind:value={element[key]} class="table-sub-input w-full" type="text" /> <input bind:value={element[key]} class="table-sub-input w-full" type="text" />
</td> </td>
</tr> </tr>
{/if} {/if}
{/each} {/each}
<!--<br />-->
{/if}
{/each} {/each}
</tbody> </tbody>
</table> </table>
@@ -750,7 +756,7 @@
/*=============================================card and items inside===============================================*/ /*=============================================card and items inside===============================================*/
/* 1. paddig and style for card */ /* 1. paddig and style for card */
.card { .card {
@apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg; @apply w-full p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg border border-gray-100;
} }
/* 2. style for card header */ /* 2. style for card header */
.card-header { .card-header {
@@ -792,6 +798,9 @@
.table-body-element { .table-body-element {
@apply px-2 py-2 break-words; @apply px-2 py-2 break-words;
} }
.table-sub-body-element {
@apply px-2 py-1 break-words;
}
.table-input { .table-input {
@apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500; @apply content-center h-8 bg-gray-50 focus:bg-white appearance-none border-2 border-gray-100 text-gray-700 leading-tight focus:outline-none text-center focus:border-indigo-500;
} }
@@ -808,6 +817,10 @@
.table-button { .table-button {
@apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300; @apply flex justify-center content-center text-gray-500 font-bold w-10 h-8 border border-gray-300;
} }
/*====================================================select=====================================================*/
.long-select {
@apply flex justify-center break-words content-center bg-blue-100 hover:bg-blue-200 text-gray-500 font-bold h-8 w-1/4 mb-6 border border-gray-300 rounded;
}
} }
#menu__toggle { #menu__toggle {

2
src/components/Card.svelte
View File

@@ -3,6 +3,8 @@
</script> </script>
<div class="card"> <div class="card">
{#if title}
<h1 class="card-header">{title}</h1> <h1 class="card-header">{title}</h1>
{/if}
<slot /> <slot />
</div> </div>