From 46ad9782198e5e21c38becb20067d030bbd6df62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Sj=C3=B6berg?= <jonsj192@student.liu.se>
Date: Fri, 17 Nov 2023 13:41:06 +0100
Subject: [PATCH] refactored knowledgeBank css and html.

---
 client/KnowledgeBank/knowledgeBank.css  |  65 +++++-------
 client/KnowledgeBank/knowledgeBank.html | 127 +++++++++---------------
 2 files changed, 73 insertions(+), 119 deletions(-)

diff --git a/client/KnowledgeBank/knowledgeBank.css b/client/KnowledgeBank/knowledgeBank.css
index abfc2c60..b183cc5f 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 7421a2d1..e73445c5 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>
-- 
GitLab