From 971c824532aae1513434eda60decdfba05c640dc Mon Sep 17 00:00:00 2001
From: Gustav Kylberg <gustavkylberg@airsomtorgustav.students.netlogon.liu.se>
Date: Fri, 6 Oct 2023 12:20:37 +0200
Subject: [PATCH] Made searchBar v1. Still wip + dropdownsButtons needs work
---
.DS_Store | Bin 0 -> 6148 bytes
client/ideaBank.css | 60 +++++++++++++++++++++++++++++++++++++++++++
client/ideaBank.html | 22 ++++++++++++++++
client/ideaBank.ts | 3 ++-
client/index.html | 20 +++++++++++++++
5 files changed, 104 insertions(+), 1 deletion(-)
create mode 100644 .DS_Store
create mode 100644 client/index.html
diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..257d1bf42def038e03cf0600170d56bee06ea841
GIT binary patch
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8zOq>i@0Z1N%F(jFwBCH_uz-Htzlz8UkCnx3PCqd;#
zslgorptxgWNM^`k$Ye-mK#f08;&5bOV9@&y24Ih%s7)#_E`Y}MiKK#@%;FLQgX@e;
z%q*;I>>M0i99+CyvB4Sn<-sM1C8fnqiAB*MUO-|=MiP`AlAoUgXD23wWu}(L3y3)9
z=anR8=A{;alm};~q$VX6#e`?(rR0}8<(KBA6obuyN^o#+a&X2Ah*wt|8Jg%Qn3~t>
zC{$Y-8R#fj7+TcUa&m~P8rpg$<W^Qy*VNX{0Q-W0kr6^O@Iz@BHIspX0mYAH!9{sF
z`FZJ(G|s@u5X9ih;K<;@;LG63pvREQkb;!rK_RvtBgBdsQW=UE%0MKlT1HtkwJ=wV
z(xV|T8UmvsK-&<2mVq4Hw6$i`^wAI)4S^vT0-*9i0ov|yfYJ>R8YIQQ$iM*Z0x&W#
zu)w^>2<`_kfaE}0K{QA!hz4n8U<9$iW`MOaFhaF5g1aFgeV{fJhz4tCU}OMmXJBLi
zYlk=77$Mpj7@;;ZLVGBT5bX?%5bX?%5bZGMjnbnbFd72T5MYMT0-*Zem4N|Q{~w}i
zlpGC#(GVDxA;8Gu671pxu9UI+4^-EJ>eB?MG^q9mRmY5=dKw`Hu8Nr;1Bwz*VNi7s
b(h8!%RWTz2q$VG22*5&UlpYNM`iB4jip+Nl
literal 0
HcmV?d00001
diff --git a/client/ideaBank.css b/client/ideaBank.css
index f1710454..1462392c 100644
--- a/client/ideaBank.css
+++ b/client/ideaBank.css
@@ -104,3 +104,63 @@ a {
background-color:rgba(240, 240, 240, 0.635);
}
+/*CSS for filer and search bar*/
+.searchBar {
+ width: 90vw;
+ height: 8vh;
+ background-color: #dcd9db;
+ display: flex;
+}
+
+
+.searchBarField input[type=text] {
+}
+
+/* Dropdown Button */
+.dropdownButton {
+ background-color: #04AA6D;
+ color: rgb(198, 86, 86);
+ padding: 20px;
+ height: 8vh;
+ width: 5%s;
+ font-size: 16px;
+ margin-left: 7vw;
+ margin-right: 7vw;
+ border: none;
+ display: flex;
+ }
+
+/* The container <div> - needed to position the dropdown content */
+.dropdownSearchBar {
+ position: relative;
+ display: inline-block;
+ }
+
+ /* Dropdown Content (Hidden by Default) */
+.dropdownContent {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ }
+
+ /* Links inside the dropdown */
+.dropdownContent a {
+ color: rgb(159, 40, 40);
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+/* Show the dropdown menu on hover. ISNT WORKIGN. FIX LATER */
+.dropdown:hover .dropdownContent {
+ display: block;
+ }
+/* Change color of dropdown links on hover */
+ .dropdownContent a:hover {background-color: #ddd;}
+
+
+ /* Change the background color of the dropdown button when the dropdown content is shown */
+ .dropdownButton:hover .dropdownButton {background-color: #3e8e41;}
\ No newline at end of file
diff --git a/client/ideaBank.html b/client/ideaBank.html
index 52dfb0ef..c7c60fcb 100644
--- a/client/ideaBank.html
+++ b/client/ideaBank.html
@@ -62,9 +62,31 @@
</div>
</div>
+ <div>
+ <div class="searchBar">
+ <input type="text" placeholder="Search">
+ <div class="dropdownFilterBar">
+ <button class="dropdownButton">DropDown1</button>
+ <div class="dropdownContent">
+ <a href="#">Link 1</a>
+ <a href="#">Link 2</a>
+ <a href="#">Link 3</a>
+ </div>
+ </div>
+ <div class="dropdownSortBar">
+ <button class="dropdownButton">DropDown2</button>
+ <div class="dropdownContent">
+ <a href="#">Link 1</a>
+ <a href="#">Link 2</a>
+ <a href="#">Link 3</a>
+ </div>
+ </div>
+ </div>
+
<div id="IdeaBankContainer" class="container-fluid">
</div>
+ </div>
</div>
diff --git a/client/ideaBank.ts b/client/ideaBank.ts
index d9d3d31f..eaf6eeea 100644
--- a/client/ideaBank.ts
+++ b/client/ideaBank.ts
@@ -16,7 +16,8 @@ class IdeaCard {
this.upvoteCount = upvoteCount;
this.id = id;
}
-
+
+
generateHTML(): string {
return `<div class="totalExpandedIdeaCard">
<div class="ideaCard">
diff --git a/client/index.html b/client/index.html
new file mode 100644
index 00000000..c047ef61
--- /dev/null
+++ b/client/index.html
@@ -0,0 +1,20 @@
+<!--Hej-->
+<!doctype html>
+<html lang="en">
+
+<head>
+ <!-- Required meta tags -->
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+
+ <title>Region Östergötaland - Group 3 </title>
+</head> <!-- Navbaren med logan och de olika alternativen -->
+<body>
+ <header>Region Östergötaland - Group 3</header>
+ <div style="width: 80%; margin-left: 10%; position: absolute; height: 100%; background-color: rgb(152, 220, 237); text-align: center">
+ <div style ="width: 30%; height: 30%; background-color: blue; border-radius: 10%;" > Ideer</div>
+ <div style ="width: 30%; height: 30%; background-color: blueviolet; border-radius: 10%"> Project</div>
+ <div style ="width: 30%; height: 30%; background-color: yellow; border-radius: 10%;"> Kunskapsbaken</div>
+ </div>
+</body>
\ No newline at end of file
--
GitLab