diff --git a/client/currentProjects.css b/client/currentProjects.css
index 1d7507cd50013a0c3e576d7f0956bca63c85b3ff..cb20e06ace8c6d2ad2489169633592b8dc2b176a 100644
--- a/client/currentProjects.css
+++ b/client/currentProjects.css
@@ -1,3 +1,193 @@
+body{
+ height: 100vh;
+}
+a {
+ text-decoration: none;
+ color: inherit;
+}
+.profilePicture{
+ border-radius: 50%;
+}
+.navbar {
+ width: 100vw;
+ height: 10vh;
+ background-color: #fdcaf3;
+ display: flex;
+}
+.navbar p{
+ font-family: 'Gill Sans MT';
+ font-size: 20px;
+ text-align: right;
+ margin-left: 2vw;
+ margin-right: 1vw;
+ color: rgb(0, 16, 156);
+}
+.navbar h1 {
+ font-family: 'Gill Sans MT';
+ font-size: 30px;
+ text-align: right;
+ margin-left: 2vw;
+ margin-right: 1vw;
+ color: rgb(0, 16, 156);
+}
+
+.navbar img{
+ height: 8vh;
+ width: auto;
+ margin-top: 1vh;
+}
+.myProfileTopRight{
+ display: flex;
+ margin-left: 45vw;
+
+}
+.profileName{
+ font-size: 20px;
+ text-align: right;
+}
+
+
+.sidebar {
+ height: 100%;
+ width: 15%;
+ position: relative;
+ top: 0;
+ left: 0;
+ background-color: #fce0f7;
+ padding: 20px 0;
+ color: rgb(85, 23, 192);
+}
+.sidebar p {
+ width: auto;
+ height: auto;
+ text-align: left;
+
+ font-family: 'Gill Sans MT';
+ /*background-color: #fbd5ed;
+ border-radius: 1rem;
+ border: 1px solid black;*/
+ color: rgb(0, 16, 156);
+}
+.sidebar img {
+ height: 8vh;
+}
+.sidebarElement{
+ margin-left: 1vw;
+ display: flex;
+}
+
+.sidebarTopElements{
+ margin-top: 3vh;
+}
+.sidebarMiddleElements{
+ margin-top: 15vh;
+}
+.sidebarBottomElements{
+ margin-top: 7vh;
+}
+
+ .pageView{
+ display: flex;
+ }
+ /*CSS for grid container */
+ #IdeaBankContainer{
+ width: 100%;
+ height: 100%;
+ min-height: 420px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start; /* Align cards to the left */
+ padding: 4%; /* Use padding instead of margin for container to avoid collapsing margins */
+}
+
+.wholePage{
+ background-color:rgba(240, 240, 240, 0.635);
+}
+
+/*CSS for filer and search bar*/
+.searchBar {
+ width: 90vw;
+ height: 8vh;
+ background-color: #c583c5;
+ display: flex;
+}
+
+
+input [type= "text"]{
+ width: 50px;
+ padding: 10px;
+ border:rgb(85, 23, 192);
+ margin-left: 7vw;
+ margin-right: 7vw;
+ border-radius: 10px;
+}
+
+/* Dropdown Button */
+.dropdownButton {
+ background-color: rgb(85, 23, 192);
+ color: rgb(211, 211, 211);
+ padding: 7%;
+ height: 8vh;
+ width: 10vw;
+ border-radius: 10px;
+ text-align: center;
+ 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 WORKING. FIX LATER */
+.dropdownButton: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;}
+
+ /*Dropdown arrow CSS */
+
+ .arrow {
+ border: solid rgb(211, 211, 211);
+ border-width: 0 3px 3px 0;
+ display: inline-block;
+ padding: 3px;
+ margin-left: 1vw;
+}
+
+.down {
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ }
+
.pinkFaded {
border-radius: 50%;
height:80%;
@@ -24,8 +214,9 @@
.ongoingCard {
height: 100px;
- width: auto;
- background: linear-gradient(to right, #efcdea 0%, #f3daef 15%, #edddeb 30%, #ffffff 50%);
+ width: 50vw;
+ background: linear-gradient(to right, #cdedef 0%, #dadff3 25%, hsl(194, 89%, 40%) 50%, #ffffff 100%);
+
}
#ongoingCardManager {
diff --git a/client/currentProjects.html b/client/currentProjects.html
index 35b2a18c2391042b540a5632026b66397d7194a5..76757749238edfddd0249f862fe7456494328f52 100644
--- a/client/currentProjects.html
+++ b/client/currentProjects.html
@@ -3,28 +3,103 @@
<link rel="stylesheet" href="currentProjects.css">
</head>
<body>
- <div class="totalExpandedOngoingWorkCard">
- <div class="flex-container ongoingCard">
- <div class="ongoingCardImageContainer">
- <img class="pinkFaded" src="images/pinkFaded.jpg" alt="pinkFade"></img>
+ <div class="navbar">
+ <img src="images/companyLogo.png" alt="companyLogo">
+ <h1><a>Aktiva arbeten</a></h1>
+ <div class="myProfileTopRight">
+ <p><a class ="profileName" href="https://sv.wikipedia.org/wiki/Bill_Gates">Bill fkn Gates</a></p>
+ <img src="images/testPerson.jpg" class ="profilePicture" alt="testPerson">
+ </div>
+ </div>
+
+ <div class="pageView">
+ <div class="sidebar">
+ <div class="sidebarTopElements">
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/ideaBank.html">Förslag</a></p>
+ </div>
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/currentProjects.html">Aktiva arbeten</a></p>
+ </div>
+
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/knowledgeBank.html">Kunskapsbanken</a> </p>
+ </div>
+
</div>
- <div class="div ongoingCardInfo">
- <p id="ongoingCardManager">Manager</p>
- <p id="ongoingCardDepartment">Department</p>
- <p id="ongoingCardIdeaTitle">Idea Title</p>
+
+ <div class="sidebarMiddleElements">
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/myProfile.html">Min profil</a></p>
+ </div>
+
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/settings.html">Inställningar</a> </p>
+ </div>
+
</div>
- <div class="container ongoingSeeCardDetails">
- <div class="ongoingSeeCardDetailsInner">
- <p id="ongoingSeeDetailsButton" onclick="showMoreInfo('expandedOngoingWorkCard', 'ongoingSeeDetailsButton')">> Mer information</p>
+
+ <div class="sidebarBottomElements">
+ <div class ="sidebarElement">
+ <img src="images/lightBulb.png" alt="lightBulb">
+ <p><a href="../client/faq.html">FAQ & Support</a></p>
</div>
+
</div>
- </div>
- <div id="expandedOngoingWorkCard">
- <div id="expandedTextOngoingWorkCard">
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis et ex animi laudantium unde voluptas laboriosam nobis, a iusto ipsum error numquam! Consectetur ipsum minima mollitia neque optio maxime praesentium!
+
+ </div>
+ <div>
+
+ <!-- Drowndown funciton is not working. -->
+ <div class="searchBar">
+ <input type="text" placeholder="Search">
+ <div class="dropdownFilterBar">
+ <button class="dropdownButton">Dropdown1 <i class="arrow down"></i></p> </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 <i class="arrow down"></i></p> </button>
+ <div class="dropdownContent">
+ <a href="#">Link 1</a>
+ <a href="#">Link 2</a>
+ <a href="#">Link 3</a>
+ </div>
+ </div>
+ </div>
+ <div class="totalExpandedOngoingWorkCard">
+ <div class="flex-container ongoingCard">
+ <div class="ongoingCardImageContainer">
+ <img class="pinkFaded" src="images/pinkFaded.jpg" alt="pinkFade"></img>
+ </div>
+ <div class="div ongoingCardInfo">
+ <p id="ongoingCardManager">Manager</p>
+ <p id="ongoingCardDepartment">Department</p>
+ <p id="ongoingCardIdeaTitle">Idea Title</p>
+ </div>
+ <div class="container ongoingSeeCardDetails">
+ <div class="ongoingSeeCardDetailsInner">
+ <p id="ongoingSeeDetailsButton" onclick="showMoreInfo('expandedOngoingWorkCard', 'ongoingSeeDetailsButton')">> Mer information</p>
+ </div>
+ </div>
+ </div>
+ <div id="expandedOngoingWorkCard">
+ <div id="expandedTextOngoingWorkCard">
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis et ex animi laudantium unde voluptas laboriosam nobis, a iusto ipsum error numquam! Consectetur ipsum minima mollitia neque optio maxime praesentium!
+ </div>
</div>
+ </div>
</div>
- </div>
+
+ </div>
<script type="text/javascript" src="ideaCard.js"></script>
</body>
</html>
diff --git a/client/ideaBank.css b/client/ideaBank.css
index 1462392c75705764780073cdfa6e0c37d5faec2b..6aa982e11c34c2bb138073bc04b894b8d0d97eee 100644
--- a/client/ideaBank.css
+++ b/client/ideaBank.css
@@ -108,21 +108,29 @@ a {
.searchBar {
width: 90vw;
height: 8vh;
- background-color: #dcd9db;
+ background-color: #c583c5;
display: flex;
}
-.searchBarField input[type=text] {
+input [type= "text"]{
+ width: 50px;
+ padding: 10px;
+ border:rgb(85, 23, 192);
+ margin-left: 7vw;
+ margin-right: 7vw;
+ border-radius: 10px;
}
/* Dropdown Button */
.dropdownButton {
- background-color: #04AA6D;
- color: rgb(198, 86, 86);
- padding: 20px;
+ background-color: rgb(85, 23, 192);
+ color: rgb(211, 211, 211);
+ padding: 7%;
height: 8vh;
- width: 5%s;
+ width: 10vw;
+ border-radius: 10px;
+ text-align: center;
font-size: 16px;
margin-left: 7vw;
margin-right: 7vw;
@@ -154,8 +162,8 @@ a {
display: block;
}
-/* Show the dropdown menu on hover. ISNT WORKIGN. FIX LATER */
-.dropdown:hover .dropdownContent {
+/* Show the dropdown menu on hover. ISNT WORKING. FIX LATER */
+.dropdownButton:hover .dropdownContent {
display: block;
}
/* Change color of dropdown links on hover */
@@ -163,4 +171,19 @@ a {
/* 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
+ .dropdownButton:hover .dropdownButton {background-color: #3e8e41;}
+
+ /*Dropdown arrow CSS */
+
+ .arrow {
+ border: solid rgb(211, 211, 211);
+ border-width: 0 3px 3px 0;
+ display: inline-block;
+ padding: 3px;
+ margin-left: 1vw;
+}
+
+.down {
+ transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ }
\ No newline at end of file
diff --git a/client/ideaBank.html b/client/ideaBank.html
index c7c60fcb54cf266c7f8d8621736847acf320c9de..873510582dab7ba8ca0dffeab9329233aceaf0ca 100644
--- a/client/ideaBank.html
+++ b/client/ideaBank.html
@@ -13,7 +13,7 @@
<div class="navbar">
<img src="images/companyLogo.png" alt="companyLogo">
- <h1><a>Förslagsida</a></h1>
+ <h1><a>Förslag</a></h1>
<div class="myProfileTopRight">
<p><a class ="profileName" href="https://sv.wikipedia.org/wiki/Bill_Gates">Bill fkn Gates</a></p>
<img src="images/testPerson.jpg" class ="profilePicture" alt="testPerson">
@@ -26,7 +26,7 @@
<div class="sidebarTopElements">
<div class ="sidebarElement">
<img src="images/lightBulb.png" alt="lightBulb">
- <p><a href="../client/index.html">Förslag</a></p>
+ <p><a href="../client/ideaBank.html">Förslag</a></p>
</div>
<div class ="sidebarElement">
<img src="images/lightBulb.png" alt="lightBulb">
@@ -63,10 +63,12 @@
</div>
<div>
+
+ <!-- Drowndown funciton is not working. -->
<div class="searchBar">
<input type="text" placeholder="Search">
<div class="dropdownFilterBar">
- <button class="dropdownButton">DropDown1</button>
+ <button class="dropdownButton">Dropdown1 <i class="arrow down"></i></p> </button>
<div class="dropdownContent">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
@@ -74,7 +76,7 @@
</div>
</div>
<div class="dropdownSortBar">
- <button class="dropdownButton">DropDown2</button>
+ <button class="dropdownButton">Dropdown2 <i class="arrow down"></i></p> </button>
<div class="dropdownContent">
<a href="#">Link 1</a>
<a href="#">Link 2</a>