Skip to content
Snippets Groups Projects
Commit 971c8245 authored by Gustav Kylberg's avatar Gustav Kylberg
Browse files

Made searchBar v1. Still wip + dropdownsButtons needs work

parent 97919d60
No related branches found
No related tags found
4 merge requests!134The members of the project should be showing now in pgsa pages, but there are...,!63Changes login page, added backround image, region östergötland logo and made...,!56Complete css for Ideabank,!26Navbar and sidebar implemented into currentProjects. TODO: Should be more...
This commit is part of merge request !26. Comments created here will be created in the context of that merge request.
Hide whitespace changes
Inline Side-by-side
.DS_Store 0 → 100644
+ 0
− 0
View file @ 971c8245
File added
client/ideaBank.css
+ 60
− 0
View file @ 971c8245
......@@ -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
client/ideaBank.html
+ 22
− 0
View file @ 971c8245
......@@ -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>
......
client/ideaBank.ts
+ 2
− 1
View file @ 971c8245
......@@ -16,7 +16,8 @@ class IdeaCard {
this.upvoteCount = upvoteCount;
this.id = id;
}
generateHTML(): string {
return `<div class="totalExpandedIdeaCard">
<div class="ideaCard">
......
client/index.html 0 → 100644
+ 20
− 0
View file @ 971c8245
<!--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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment