From 8b8972d274aaf7a189e781129c79c50c002a99d2 Mon Sep 17 00:00:00 2001
From: Robin Leber <rleber98@gmail.com>
Date: Mon, 8 Jul 2024 10:07:19 +0200
Subject: [PATCH] Style: legend
---
src/index.html | 55 ++++++++++++++++++++++++++++++--------------------
src/style.css | 12 ++++++-----
2 files changed, 40 insertions(+), 27 deletions(-)
diff --git a/src/index.html b/src/index.html
index 7fb2c0d..60bffeb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
src="../assets/CC-Logo.png"
alt="Logo der Website"
id="logo"
- width="156px"
+ width="144px"
/>
</div>
<hr />
@@ -120,6 +120,38 @@
<i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
</div>
</div>
+ <hr />
+ <div style="white-space: nowrap">
+ <h5>Legend</h5>
+ <div class="elementsInLegend">
+ <i
+ style="color: red; margin-right: 6px"
+ class="fa-sharp fa-solid fa-l fa-exclamation"
+ ></i>
+ <span>User Action Required</span>
+ </div>
+ <div class="elementsInLegend">
+ <i
+ style="color: green; margin-right: 6px"
+ class="fa-sharp fa-l fa-solid fa-check"
+ ></i>
+ <span>Ready To Deploy</span>
+ </div>
+ <div class="elementsInLegend">
+ <i
+ style="color: blue; margin-right: 6px"
+ class="fa-solid fa-l fa-play"
+ ></i>
+ <span>Deployed And Running</span>
+ </div>
+ <div class="elementsInLegend">
+ <i
+ style="color: orange; margin-right: 6px"
+ class="fa-solid fa-l fa-pause"
+ ></i>
+ <span>Deployed But Paused</span>
+ </div>
+ </div>
</div>
<div id="Diagram">
<h4>ARCHITECTURE</h4>
@@ -140,27 +172,6 @@
</button>
</div>
</div>
- <div class="iconsLegend">
- <div>
- <i
- style="color: red"
- class="fa-sharp fa-solid fa-xl fa-exclamation"
- ></i>
- <span>User Action Required</span>
- </div>
- <div>
- <i style="color: green" class="fa-sharp fa-xl fa-solid fa-check"></i>
- <span>Ready To Deploy</span>
- </div>
- <div>
- <i style="color: blue" class="fa-solid fa-xl fa-play"></i>
- <span>Deployed And Running</span>
- </div>
- <div>
- <i style="color: orange" class="fa-solid fa-xl fa-pause"></i>
- <span>Deployed And Paused</span>
- </div>
- </div>
</div>
<script src="main.js"></script>
</body>
diff --git a/src/style.css b/src/style.css
index 10e30a5..29d30bc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,7 +14,7 @@ body {
#Diagram {
width: 100%;
- height: 95vh;
+ height: 98vh;
margin: 6px;
border: 1px solid black;
border-radius: 4px;
@@ -23,11 +23,13 @@ body {
#Toolbox {
width: fit-content;
- height: 95vh;
+ height: 98vh;
margin: 6px;
padding: 0 24px;
border: 1px solid black;
border-radius: 4px;
+ overflow-y: auto;
+ overflow-x: auto;
}
.Filter {
text-align: center;
@@ -341,9 +343,9 @@ body {
justify-content: space-between;
}
-.iconsLegend {
- display: flex;
- justify-content: space-around;
+.elementsInLegend {
+ text-align: left;
+ margin: 12px 0;
}
#logoContainer {
--
GitLab