diff --git a/client/KnowledgeBank/knowledgeBank.css b/client/KnowledgeBank/knowledgeBank.css
index abfc2c60225585ac95abd7d4c698e8977c4c08f3..b183cc5fe2c75d25341380c410ce4a71a411eab1 100644
--- a/client/KnowledgeBank/knowledgeBank.css
+++ b/client/KnowledgeBank/knowledgeBank.css
@@ -1,88 +1,75 @@
-
.container {
display: flex;
justify-content: center; /* Horizontally center */
-
}
-.maincontainer p {
- flex: 1;
- width: 80%;
- height: 20%;
- margin-right: 5%;
- margin-left: 5%;
- padding-top: 2%;
- font-size: 18px;
- font-family: 'Roboto', sans-serif;
+.maincontent-header{
+ background-color: #f0f0f0; /* Light gray background color */
+ border: 1px solid #ccc; /* Light border color */
+ border-radius: 8px; /* Rounded corners */
}
-
.top-buttons{
-padding-bottom: 40px;
-display: flex;
-justify-content: left;
-padding-top: 20px;
-padding-left: 150px;
}
.bottom-buttons{
- display: flex;
- justify-content: left;
- padding-left: 150px;
}
-
.button-kunskapsbanken{
- border-radius: 8px;
- border-style: none;
- box-sizing: border-box;
- cursor: pointer;
- /* flex-shrink: 0;*/
+ font-size: x-large !important;
font-family: 'Roboto',sans-serif;
- font-size: 25px;
font-weight: bold;
- height: 13rem;
- width: 22rem;
- /*padding: 0 1.6rem;*/
text-align: center;
text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
- transition: all .5s;
+
+ border-radius: 8px;
+ border-style: none;
+
+ height: 13rem;
+ width: 22rem;
+
+ transition: ease .5s;
user-select: none;
- -webkit-user-select: none;
- touch-action: manipulation;
- margin-right: 30px;
}
- .button-kunskapsbanken:hover{
- height: 15rem;
- width: 25rem;
+
+.button-kunskapsbanken:hover{
+ transform: scale(1.3);
}
+
#buttons-kunskapsbanken-button1{
background-image: linear-gradient(#c29ffa, #dfcdfa);
color:white;
}
+
#buttons-kunskapsbanken-button1:hover{
background-color:#d6a5db;
- }
+ }
+
#buttons-kunskapsbanken-button2{
background-image: linear-gradient(#6610f2, #9e64fa);
color: white;
}
+
#buttons-kunskapsbanken-button2:hover{
background-color:#aa5ac0;
}
+
#buttons-kunskapsbanken-button3{
background-image: linear-gradient(#3d0a91, #653ea4);
color:white;
}
+
#buttons-kunskapsbanken-button3:hover{
background-color:#6456c1;
;
- }
+ }
+
#buttons-kunskapsbanken-button4{
background-image: linear-gradient(#290661, #4b2686);
color:white;
}
+
#buttons-kunskapsbanken-button4:hover{
background-color:#5013ca;
}
diff --git a/client/KnowledgeBank/knowledgeBank.html b/client/KnowledgeBank/knowledgeBank.html
index 7421a2d10e3832fde8c1d49da0ce23248b26f006..e73445c5c65cfacb925cbc727bbf1e70c5cae245 100644
--- a/client/KnowledgeBank/knowledgeBank.html
+++ b/client/KnowledgeBank/knowledgeBank.html
@@ -8,99 +8,66 @@
<link rel="stylesheet" href="knowledgeBank.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<meta charset="UTF-8"> <!-- Does so that å,ä,ö works -->
+ <link
+ href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+ rel="stylesheet"
+ integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+ crossorigin="anonymous"
+ /> <!-- Bootstrap -->
<title>Page with a Navbar and Sidebar</title>
</head>
<body>
- <div class="navbar">
- <img src="images/companyLogo.png" alt="companyLogo">
- <h1><a>Kunskapsbanken</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 class="main-container">
+
+ <div class="maincontent-header d-flex m-3 p-3">
+ <p>
+ Välkommen till kunskapsbanken! Här finner du ingående information om hur Nolans förbättringsmodell egentligen går till och andra generella förbättringsmetoder. <br> Du hittar också kontaktinformation till relevanta förbättringsoranisationer samt ett urval av lyckade, avslutade förbättringsarbeten som kan ge inspiration.
+ </p>
</div>
- </div>
- <div class="container">
- <div class="sidebar">
-
- <div class="sidebarTopElements">
- <div class ="sidebarElement">
- <img src="images/lightBulb.png" alt="lightBulb">
- <p><a href="../client/index.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 id="kunskapButtonContainer" class="d-flex flex-column justify-content-evenly" style="width: 100%;">
+ <div class="top-buttons d-flex p-3 m-2 justify-content-evenly">
+ <button
+ id="buttons-kunskapsbanken-button1"
+ class="button-kunskapsbanken" role="button"
+ >Nolans<br>Förbättringsmodell</button>
+
+ <button onclick="redirectToPage('GeneralImprovementsMethods.html')"
+ id="buttons-kunskapsbanken-button2"
+ class="button-kunskapsbanken" role="button"
+ >Generella<br>förbättringsmetoder</button>
</div>
-
- </div>
- <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="bottom-buttons d-flex m-2 p-3 justify-content-evenly">
+ <button onclick="redirectToPage('completedProjects.html')" id="buttons-kunskapsbanken-button3"
+ class="button-kunskapsbanken" role="button"
+ >Inspiration:<br>avslutade förbättringarbeten</button>
- <div class="sidebarBottomElements">
- <div class ="sidebarElement">
- <img src="images/lightBulb.png" alt="lightBulb">
- <p><a href="../client/faq.html">FAQ & Support</a></p>
+ <button onclick="redirectToPage('ContactOrganizations.html')"
+ id="buttons-kunskapsbanken-button4"
+ class="button-kunskapsbanken" role="button"
+ >Konktakinformation<br>förbättringsorganisationer</button>
</div>
-
</div>
- </div>
-
- <div class="main-container">
-
- <div class="maincontent-header"><p>Välkommen till kunskapsbanken! Här finner du ingående information om hur Nolans förbättringsmodell egentligen går till och andra generella förbättringsmetoder. Du hittar också kontaktinformation till relevanta förbättringsoranisationer samt ett urval av lyckade, avslutade förbättringsarbeten som kan ge inspiration.
- </p></div>
-
- <div class=top-buttons>
- <button
- id="buttons-kunskapsbanken-button1"
- class="button-kunskapsbanken" role="button"
- >Nolans Förbättringsmodell</button>
-
- <button onclick="redirectToPage('GeneralImprovementsMethods.html')"
- id="buttons-kunskapsbanken-button2"
- class="button-kunskapsbanken" role="button"
- >Generella förbättringsmetoder</button>
- </div>
-
- <div class=bottom-buttons>
- <button onclick="redirectToPage('completedProjects.html')" id="buttons-kunskapsbanken-button3"
- class="button-kunskapsbanken" role="button"
- >Inspriation: avslutade förbättringarbeten</button>
-
- <button onclick="redirectToPage('ContactOrganizations.html')"
- id="buttons-kunskapsbanken-button4"
- class="button-kunskapsbanken" role="button"
- >Konktakinformation förbättringsorganisationer</button>
- </div>
<script type = "module" src="../SidebarAndHeader/pageHandler.js"></script>
</div>
</div>
- <script>
- function redirectToPage(page) {
- window.location.href = page;
- }
- </script>
-
-
-
- <script type = "module" src="SidebarAndHeader/pageHandler.js"></script>
+
+ <!-- Bootstrap script -->
+ <script
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+ crossorigin="anonymous"
+ ></script>
+ <script>
+ function redirectToPage(page) {
+ window.location.href = page;
+ }
+ </script>
+
+ <script type = "module" src="SidebarAndHeader/pageHandler.js"></script>
</body>
</html>