Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] Edge website improvements p.2 #1699

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

[WIP] Edge website improvements p.2 #1699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7968ef7
Edge website improvements p2
yevheniia-mala Oct 16, 2024
0b6f273
Edge website improvements p2
yevheniia-mala Oct 17, 2024
7723770
Edge website improvements p2.1
yevheniia-mala Oct 18, 2024
b14a6c1
Edge website improvements p2.1
yevheniia-mala Oct 18, 2024
26bd298
Edge website improvements p2.1
yevheniia-mala Oct 18, 2024
4cc8275
Edge website improvements p2.2
yevheniia-mala Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 53 additions & 14 deletions products/thingsboard-edge/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,7 @@ description: Comprehensive software solutions for edge computing, providing data

<section id="matrix">
<div id="backg-matrix">
<div class="cloud"><div class="coln"><div class="head"></div></div></div>
<div class="edge"><div class="coln"><div class="head"></div></div></div>
<div class="gateway"><div class="coln"><div class="head"></div></div></div>
</div>
Expand All @@ -185,73 +186,111 @@ description: Comprehensive software solutions for edge computing, providing data
<thead>
<tr>
<td></td>
<th>ThingsBoard<br>Edge</th>
<th>ThingsBoard<br>Server</th>
<th>ThingsBoard<br>Edge</th>
<th>IoT<br>Gateway</th>
</tr>
</thead>
<tbody>
<tr>
<th>ThingsBoard Server required (CE, PE or Cloud)</th>
<th>Standalone Mode</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"><br>(Server Required)</td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"><br>(Edge or Server<br>Required)</td>
</tr>
<tr>
<th>Data Collection</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
</tr>
<tr>
<th>Data collection</th>
<th>Data Processing</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Asset Management</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th><a href="/docs/user-guide/dashboards/" target="_blank">End-User Real-Time Dashboards<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Data processing</th>
<th><a href="/docs/user-guide/scada/" target="_blank">Remote Management (SCADA Dashboards)<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Asset management</th>
<th><a href="/docs/user-guide/rule-engine-2-0/overview/" target="_blank">Rule Engine<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>End-user real-time dashboards</th>
<th>Real-Time Analytics</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th><a href="/docs/user-guide/rule-engine-2-0/overview/">Rule Engine<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<th><a href="/docs/user-guide/integrations/" target="_blank">Platform Integrations<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Real-time Analytics</th>
<th>Multi-Tenancy Support</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th><a href="/docs/user-guide/integrations/">Platform Integrations<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<th>Micro Services Deployment</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Multi-tenancy Support</th>
<th>Cassandra DB for Time-Series Data</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Offline Operation on edge</th>
<th>Traffic Filtering</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"><br>(Limited to Data Collection)</td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Traffic Filtering on edge</th>
<th><a href="/docs/user-guide/alarms/" target="_blank">Alarms<img src="/images/pe/help-black18.svg" alt="help"></a></th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>Local Alarms on edge</th>
<th>Push Events on Demand</th>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
</tr>
<tr>
<th>On-Site Data Operations Without Server Connectivity</th>
<td><img src="/images/pe/unchecked.svg" alt="unchecked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"></td>
<td><img src="/images/pe/checked.svg" alt="checked"><br>(Data Collection Only)</td>
</tr>
<tr>
<th>Hardware Resources Usage</th>
<td>High to Medium</td>
<td>Medium to Low</td>
<td>Low</td>
</tr>
Expand Down
82 changes: 60 additions & 22 deletions products/thingsboard-edge/thingsboard-edge.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,8 @@
padding: 0

#matrix
margin: 60px -100% 0
padding: 0px 100% 48px
margin: 80px -100% 0
padding: 0 100% 88px
h3
color: #212529
font-weight: 600
Expand All @@ -174,24 +174,33 @@
margin-left: -20px
margin-right: -20px
width: calc(100% + 40px)
.edge, .gateway
padding: 0 20px
width: 30%
.cloud, .edge, .gateway
padding: 0 2px
width: 20%
position: absolute
z-index: -1
top: 127px
.coln
height: 1006px
height: 1243px
border-radius: 6px
.gateway
right: 0
.coln
border: 2px solid #7A4DC3
box-shadow: 0 50px 50px -20px rgba(0,0,0,0.15), 0 0 30px 0 rgba(0,0,0,0.10)
.head
height: 106px
box-shadow: 0 2px 0 0 rgba(122, 77, 195, 0.08)
background-color: #7A4DC3
.cloud
right: 40%
.coln
border: 2px solid #2A7DEC
box-shadow: 0 50px 50px -20px rgba(0,0,0,0.15), 0 0 30px 0 rgba(0,0,0,0.10)
.head
height: 106px
background-color: #2A7DEC
.edge
right: 30%
right: 20%
.coln
border: 2px solid #009688
box-shadow: 0 50px 50px -20px rgba(0,0,0,0.15), 0 0 30px 0 rgba(0,0,0,0.10)
Expand All @@ -200,35 +209,40 @@
background-color: #009688
table
width: calc(100% + 40px)
margin: 160px -20px 16px
margin: 64px -20px 16px
td, th
margin: 0 2px
&:nth-child(3n-1)
padding: 2px
align-content: center
&:nth-child(3n)
color: #009688
img
filter: invert(40%) sepia(88%) saturate(245%) hue-rotate(129deg) brightness(91%) contrast(103%)
&:nth-child(3n)
&:nth-child(2n)
color: #2A7DEC
img
filter: invert(32%) sepia(100%) saturate(700%) hue-rotate(207deg) brightness(100%) contrast(102%)
&:nth-child(4n)
color: #7A4DC3
img
filter: invert(43%) sepia(48%) saturate(952%) hue-rotate(223deg) brightness(78%) contrast(96%)
border: none
margin-top: 64px
top: 40px
thead
color: #212529
font-size: 12px
line-height: 30px
background-color: unset
tr
height: 152px
height: 110px
th
width: 30%
width: 20%
text-align: center
vertical-align: center
font-weight: 600
font-size: 11px
padding: 40px 0 40px
&:nth-child(2n)
padding: 46px 0 30px
&:nth-child(1n)
color: white
td
width: 40%
Expand All @@ -239,7 +253,7 @@
th, a
font-weight: 600
font-size: 12px
padding-right: 12px
padding-right: 5px
color: #212529
img
vertical-align: top
Expand Down Expand Up @@ -460,18 +474,18 @@
line-height: 63px
table
thead
font-size: 20px
font-size: 30px
tr
th
width: 30%
padding: 0 0 40px
width: 20%
padding: 0 0 10px
font-size: 20px
td
width: 40%
tbody
tr
th, a
padding-right: 48px
padding-right: 30px
font-size: 18px
td
font-size: 20px
Expand All @@ -485,6 +499,31 @@
img
margin: 0 30px 0 0

@media screen and (max-width: 750px)
#matrix
h3
font-size: 38px
line-height: 42px
table
width: 100%
thead
font-size: 20px
tr
th
width: 20%
padding: 0 0 2px
font-size: 16px
td
width: 40%
tbody
tr
th, a
font-size: 16px
td
font-size: 18px
img
width: unset

@media screen and (min-width: 1025px)
section, header
main
Expand Down Expand Up @@ -532,7 +571,6 @@
.labeling
padding: 0 13%


@media screen and (min-width: 1500px)
#edgeContent
max-width: 1400px
Expand Down