wisecolt/smarthome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create ui component

Browse Source
This commit is contained in:
szbk
2024-04-07 01:20:20 +03:00
parent 500c3d7a05
commit b8cb55f7f1
5 changed files with 194 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@@ -15,6 +15,6 @@
body {
margin: 0;
padding: 0;
background-color: #F2F2F2;
background-color: #F3F4F9;
width: 100vw;
}

23
src/components/Header.svelte
View File

@@ -1,15 +1,14 @@
<div class="head">SMART HOME</div>
<div class="head">SMART HOME</div>
<style>
.head {
background-color: #fff;
width: 100vw;
height: 70px;
display: flex;
align-items:center;
justify-content: flex-start;
padding-left: 20px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
.head {
background-color: #fff;
width: 100vw;
height: 70px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 20px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
</style>

127
src/libs/DeviceDetails.svelte
View File

@@ -1,5 +1,8 @@
<script>
import Button from "./ui/Button.svelte";
import Stepper from "./ui/Stepper.svelte";
export let deviceLog;
let buttonText = "Run";
</script>
<div class="table-wrapper">
@@ -24,7 +27,11 @@
<div>{log.sensor_value}</div>
<div>{log.battery_life}</div>
{:else}
<div>door switch</div>
<div>door switch</div>
<div><Button {buttonText} /></div>
<br>
<div><Stepper /></div>
<br>
{/if}
{/each}
<div class="divider"></div>
@@ -32,65 +39,59 @@
</div>
<style>
.table-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
flex-direction: column;
background-color: white;
width: 95%;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
.table {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.table-head-item {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
padding: 5px 10px 10px 10px;
color: #535151;
font-size: 16px;
}
.table-row {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
.table-body-item {
width: calc(100% / 7);
display: flex;
justify-content: start;
padding: 5px 10px 10px 10px;
}
.table-head {
font-size: 15px;
}
.divider {
width: 100%;
background-color: #f2f2f2;
height: 1px;
}
/* Link bileşeni üzerinde cursor:pointer stilini uygulama */
:global(.svelte-routing-link) {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
:global(.svelte-routing-link:hover) {
cursor: pointer;
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
background-color: #f3f3f3;
}
</style>
.table-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
flex-direction: column;
background-color: white;
width: 95%;
border-radius: 4px;
box-shadow: 0px 2px 4px rgba(0, 0, 3, 0.05);
}
.table {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.table-head-item {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
padding: 5px 10px 10px 10px;
color: #535151;
font-size: 16px;
}
.table-row {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
.table-head {
font-size: 15px;
}
.divider {
width: 100%;
background-color: #f2f2f2;
height: 1px;
}
/* Link bileşeni üzerinde cursor:pointer stilini uygulama */
:global(.svelte-routing-link) {
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
}
:global(.svelte-routing-link:hover) {
cursor: pointer;
display: flex;
width: 100%;
text-decoration: none;
color: inherit;
background-color: #f3f3f3;
}
</style>

32
src/libs/ui/Button.svelte Normal file
View File

@@ -0,0 +1,32 @@
<script>
export let buttonText;
</script>
<div class="button">
{buttonText}
</div>
<style>
.button {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 5px;
width: 100px;
height: 38px;
border-radius: 5px;
background-color: #364bc5;
color: #fff;
cursor: pointer;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.button:active {
background-color: #6a7bdd;
}
</style>

86
src/libs/ui/Stepper.svelte Normal file
View File

@@ -0,0 +1,86 @@
<script>
let counter = 0;
const increaseCounter = () => {
counter++;
};
const decreaseCounter = () => {
counter = counter < 1 ? 0 : counter - 1;
};
</script>
<div class="stepper">
<div
class="button decrease"
on:click={decreaseCounter}
tabindex="0"
role="button"
on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
>
-
</div>
<div class="number">{counter}</div>
<div
class="button increase"
on:click={increaseCounter}
tabindex="0"
role="button"
on:keydown={(e) => e.key === "Enter" && decreaseCounter()}
>
+
</div>
</div>
<style>
.stepper {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
border: solid 1px #7B819E;
box-sizing: border-box;
padding: 0px;
}
.number {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-left: solid 1px #7B819E;
border-right: solid 1px #7B819E;
color: #4a4d5d;
}
.button {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #7B819E;
cursor: pointer;
box-sizing: border-box;
padding: 0px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.button:hover {
background-color: #4759ba;
color: #fff;
}
.button:active {
background-color: #6a7bdd;
}
.increase {
border-radius: 0px 3px 3px 0px;
}
.decrease {
border-radius: 3px 0px 0px 3px;
}
</style>