From b4b68d0de3bdd12a15649e1031d2918a1a1bc79e Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Fri, 22 Jul 2022 16:31:29 +0200
Subject: [PATCH] Still some CSS problems, but now better looking.
---
src/display/components/searchbar.css | 10 ++++++++--
src/display/components/searchbar.tsx | 2 +-
src/display/display.css | 10 +++++++---
3 files changed, 16 insertions(+), 6 deletions(-)
diff --git a/src/display/components/searchbar.css b/src/display/components/searchbar.css
index aa0f1fd..ebfee1b 100644
--- a/src/display/components/searchbar.css
+++ b/src/display/components/searchbar.css
@@ -1,5 +1,5 @@
.searchbar {
- display: flex;
+ display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
@@ -18,6 +18,11 @@
.searchbar-icon {
cursor: pointer;
font-size: 30px;
+ opacity: 0.7;
+}
+
+.searchbar-form {
+ margin-right: 10px;
}
.searchbar-text {
@@ -40,7 +45,8 @@
}
.serach-area {
- display: flex;
+ display: inline-flex;
+ width: min-content;
flex-direction: column;
background-color: transparent;
transition: background-color 0.2s ease-in-out;
diff --git a/src/display/components/searchbar.tsx b/src/display/components/searchbar.tsx
index 29114b2..2740f0f 100644
--- a/src/display/components/searchbar.tsx
+++ b/src/display/components/searchbar.tsx
@@ -65,7 +65,7 @@ function SearchBar({ minified, nodeSet, onSearch }: SearchBarProps) {
className={"searchbar-text"}
style={{ width: width + "%" }}
>
- <form action={"#"}>
+ <form className={"searchbar-form"} action={"#"}>
<input
ref={inputField}
className={"searchbar-input"}
diff --git a/src/display/display.css b/src/display/display.css
index 46a704f..586c875 100644
--- a/src/display/display.css
+++ b/src/display/display.css
@@ -14,14 +14,17 @@
.display-icons {
z-index: 99;
+ padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
- left: 15px;
- top: 10px;
+ left: 0;
+ top: 0;
position: absolute;
- gap: 20px;
+ gap: 10px;
+ background-color: rgba(100, 100, 100, 0.2);
+ border-bottom-right-radius: 20px;
}
.display-fullscreen-button {
@@ -29,4 +32,5 @@
cursor: pointer;
font-size: 30px;
transform: rotate(-45deg);
+ margin-top: -4px;
}
\ No newline at end of file
--
GitLab