From 057275d513cc4984c50d35171f025164c6a933be Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Fri, 13 Jan 2017 11:09:09 +0100
Subject: [PATCH] Restyled the search page

Split users and groups
added a search button
made some boxes required
---
 website/styles/header.css     |  5 +++++
 website/styles/search.css     | 12 ++++++++++++
 website/views/header.php      |  9 +++++++--
 website/views/search-view.php | 18 +++++++++++++++++-
 4 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/website/styles/header.css b/website/styles/header.css
index eb1451e..ea3212a 100644
--- a/website/styles/header.css
+++ b/website/styles/header.css
@@ -25,6 +25,11 @@ header {
     padding-left: 48px;
 }
 
+
+#header-search input {
+    border: none;
+}
+
 header div {
     display: inline-block;
 }
diff --git a/website/styles/search.css b/website/styles/search.css
index e69de29..4b2281c 100644
--- a/website/styles/search.css
+++ b/website/styles/search.css
@@ -0,0 +1,12 @@
+.search-output {
+    width: calc(50% - 48px);
+    display: inline-flex;
+}
+
+.search-output:nth-child(n) {
+    display: inline-block;
+}
+
+#search-friends-output {
+    margin-right: 10px;
+}
\ No newline at end of file
diff --git a/website/views/header.php b/website/views/header.php
index ac8ae19..af3d0f0 100644
--- a/website/views/header.php
+++ b/website/views/header.php
@@ -4,8 +4,13 @@
     </div>
     <div id="header-search">
         <form action="search.php" method="get">
-            <input name="search" type="text" placeholder="zoek naar van alles" />
-            <input type="submit" value="Zoek"/>
+            <input name="search"
+                   type="text"
+                   placeholder="Zoek naar wat je wil"
+                   required
+            />
+            <input type="submit"
+                   value="Zoek"/>
         </form>
     </div>
     <div class="right profile-menu">
diff --git a/website/views/search-view.php b/website/views/search-view.php
index 1bd2286..b1418d1 100644
--- a/website/views/search-view.php
+++ b/website/views/search-view.php
@@ -8,6 +8,7 @@
                    name="search"
                    placeholder="zoek"
                    value="Rudolf"
+                   required
             />
             <label for="filter">
                 Filter:
@@ -23,7 +24,8 @@
             />
         </form>
     </div>
-    <div class="platform">
+    <div class="platform item-box left" id="search-friends-output">
+        <h4>Gebruikers</h4>
         <ul class="nav-list">
             <a href="#">
                 <li class="search-item">
@@ -41,6 +43,12 @@
                     </div>
                 </li>
             </a>
+        </ul>
+    </div>
+
+    <div class="platform item-box right" id="search-group-output">
+        <h4>Groepen</h4>
+        <ul class="nav-list">
             <a href="#">
                 <li class="search-item">
                     <div class="group">
@@ -57,6 +65,14 @@
                     </div>
                 </li>
             </a>
+            <a href="#">
+                <li class="group-item">
+                    <div class="group">
+                        <img class="group-picture" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxANDQ0NDQ8NDQ0NDQ0NDQ0NDQ8NDQ4NFREWFhURFRUYHSggGBolGxUVITEhJSkrLi4uFx8zODMsNygtLisBCgoKDg0OGBAQFy0dHR0rLi0tLSstLS0rLS0tLS0tLSstLS0tKy0rLS0tLS0tLS0tLS0tKy0tLS0rLS0tLS0tLf/AABEIAOsA1wMBEQACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAAAQIFBgMEB//EAEEQAAIBAgEFCQ8EAgIDAAAAAAABAgMRBAUSITFSBjNRU2FxkaGxFBUWMjRBYnJzgZKistHhEyIjwUNjJEKCg/D/xAAaAQEAAgMBAAAAAAAAAAAAAAAAAQUCBAYD/8QALBEBAAEDAQcDBAMBAQAAAAAAAAECAxEEBRITMTNRcSEyUhRBgZEiI2FCof/aAAwDAQACEQMRAD8A+4gAABynXjHXKK955zcpp5yyiiqeUId109pdZjx7fdlwq+w7rp7S6xx7fc4VfYd109pdY49vucKvsO66e0usce33ODX2HddPaXWOPb7nBr7DuuntLrHHt9zg19i7rp7S6xx7fc4NfYd2U9tdY+ot/I4NfYd2U9tdY+ot9zg19h3ZT211j6i33ODX2HdlPbXWPqLfc4NfYd209tdY49vucGvsO7ae2usfUW+5wa+w7tp7a6x9Rb+Rwa+w7tp7a6x9Rb7p4NfYd20ttdY+ot/I4NfYu7aW2usfUW/kcGvsO7qW2usfUW/kcG52Hd1LbXWPqLfyODc7OlPEQl4sovkTVzKm5TVylhNFUc4dT0YmAAAHOrVUE5SdkjCuuKIzKaaZqnEKnEY2U9C/bHgWt85WXdVVVy9Ib1uxFPN5rmtvPfAG8YA3jBXI3jAuN4FxvJwVxvGBcbwVxvAuN4wVxvJFyN4wVxvJwVxvGBcjeMFcbycFcjeMFcbycFcjeMC43k4FyYrmJyiYifR7sHlOULKd5R5fGRt2dbNPpV6w1bumifWn0leU6iklKLunqZbU1RVGYV8xMTiUzJAApMoYnPm0vFjoXPwlNq7+9XiOULCxbxGXkuae82BcbxgXG8YFxvAuN4K5G8YFxvAzhvJwVxvGCuN4wLkbycFcbxgXG8nBNkbxgrjeMFcbxgrkbyRnEbxhFsbycFcbycC43jAuN4wLkbxhZZGxebP9N+LLVySLHQamYq3J5S0tVZzG9C+LpXOWJqZtOcuCLtznndq3aJllRGaohnGzm5nM5W+BcjKcFcZBcZBcZMAGBcgFxkwVxlOCuMmBcjKSbALjIVyMhNjKcFcZCuQn0K5EhXCRcjKUbkZMC4ynAuMmBcZMHCbTTWtNNc5lRVNNUTDGqnMTDY0pZ0Yy4Un1HWUTmmJUMxiZh58o7zPmXajy1PSqZ2ffCgOcWwAAAJIAuAABAVwEEggJgASRAWvR5+AmImfSDMR6vVSydVn/ANc1cMtH5NqjRXa/th4Vam3H3eynkPaqe6Mf7NunZfyqa863tD0QyLSWtzlzyt2HvTs21Hd5zrLkpPI9HZfPnyM52fYn7MfqrvdTZTwX6Ekk24S0xb1rhRUazS8Gr05SsNPe4sevOHiNNsghIAAAQieTX4LeqXqR7DrbXsp8KG57p8ueUt5n7u1GGq6NSbPUpZ85xbAJAAwEEgAIygLTq0kxTM8oJmI5usMJUlqhL3q3aetOmu1cqZec3rcc5Krhpw0zhJLh1rpRFdi5RzpTTeoq5S43PF6EEgJSpQzpRjqzpJX52ZW6d6qKe7Gud2mZaTC4OFJftWnzyemTOjs6ei1GKYU9y7VcnMvRY93mAGAgK/LlNSoSk9cLTXY+pmlr6Irsz/jY0tUxdj/WZObXQuQC4BcARMIlsMDvVL2cew62z06fChue6fLnlLeZ+7tRhqujUmz1KWeObW4AAkgJ0aUpvNgm3/8Aaz0t26rk4pjLCuumiMysaOR29M5W5Iq/WWFGzZn3VfpqVaz4w9dLJdKPmcvWf9G3RobVP2y8KtTcn7vVTpRj4sYx5kkbNNumnlDxmqZ5ynYzQGiJjPMUOWMIqbjOKtGbtbzKXIUmv08UTv08pWOluzVmmVcVzdABGVmmtaaa5yaat2qJ7IqpzGGmwWNjWX7X+5L90XrX4Ok0+opuxmOanu2qrc4l6bmw8gAwPBlTKUcOkrZ9Sd82F7e9vzI09Vq6bEd5lsWNPN2e0QzmKxVSu/5Jft81OOiC+5RX9Vdve6fTstbVmi37Y/Liaz1ASAC4AIRLYYLeqXs4dh11n2U+FBc98+UMpbzPmXajz1XRqTY6lLOnOLgXICJAQLvIlv0nbxs5539F3s7HD/1W6vO/6rJFg1TJAAgFKaSu2klrbdkYzVERmUxEzOIUOWMfCrmU6bz82edKS8VWTVr+fWU+v1NFyIop9fVYaWxVTM1VeivKtvEArkBKTTum01qadmjKmuaZzEommJjEvVRynWi1eo5RTV1KMXdc+s27WuvRMRM5h4V6W3MTiMS1EWdDE5VBkjL5f8pfJThbmuzntpTPG/C30XS/KvK5uEwYIhIAAGTCJbHA71S9nDsR11n2U+HP3PfPlDKe8z5l2o89V0avDKx1KWcuc2txchIuAXBh1w2JlSlnR96epo97F+qzVmHldtU1x6rWllqm/HUqb9VyXSi2o2jamP5ejRq0dyOXqsKFaNSKlBqUXqaN2iumuM0zmGvVTNM4mHQzYoVHZN8CbMapxTKY5shOpKraVWUpt6bN/tXMtRy9y7Xcn+U5XlFFNHpTGAjzZC4CISAIsBNgbSnqXMuw62j2woJ5pGSGY3QeUvlpQ7ZHP7T9L0T/AIt9D0vyrbla3UWyAAAAAIEtngd6pezh2I6+z06fDnrnvnyhlPeKnMu1HnqujV4ZWOpSzdzmlwLgK4SLgIAIThf5Bf8AFLkqPsRe7Nn+qfKr1kf2fhZFi1EKmp8z7DCv2ymOcMbT8WPMjlJX6QCZAAkrhBMhJMDZ0XeMX6Mew623OaYc/Vzl0M0MzukX/Ijy0o/VIodqx/ZHha6D2T5VRVN8gkAFwAATCJbTA71S9nDsR19np0+HPXPfPlzypvFTmXajz1XRq8MrHUpZq5zK5wLgwCUggIAAvNz7/jmvT/pF3szpz5Vmt98LVFm0ynqfMY1cpTHNi6b/AGx5kcnPNfmQAJFwFcgK4Si2QNlgX/FT9nDsR1lic26fCgue+fLuerBm90+/UuWnLql+Si2tH86fC12f7KlOVKwJkBAAAAJkkttgN5pezh2HX2enT4c7c98+XPKu8VOZdqPPVdGrwysdSlmDmF0dwEAAK5KQBebnn+2p60ewudlz/GryrddH8oW6LVokyJ5DE03oXMcjPOXQJBJEAbCSuEk2QE2QlsMmO9Cj7OPYdVpZzZp8KC91KvL1Gw8mc3Ur+Sg/QqdsSk2vHrQtNncqvwpGymWRNkAuEi4BcAuTCJbfAbzS9nDsOvs9Onw5y5758ueVd4qcy7UYaro1eGVjqUstc5hdi4BcAuABJAXW5x76vUfaXGyp90K3XR60rtFu0AyJ5DER/t9pyVful0P2g7mKSuElcgwVwmIK5CQk3oSbfAldmUUVTyhjNURzlscm03ChSjLQ1BXT83IdTpqZptUxPZQ3qoquVTD1Hu8md3V+Nh3yVV9JTbWj2LPZ3/X4UVyjWiLYSLgFwC4BcmES3GA3ml7OHYdhZ6dPhzdz3z5c8rbxU5l9SPPVdGrwz0/UpZU5fK7FxlIuMguMgALgW+5yX8lRcME+h/ktdlT/ACqhX6+PSJX6LtWhkDE1Y5s5x2Zzj0SZyl2MXKo/10Fuc0xP+HSozn4kJS5otrpIos11e2nJVcop5y91HItaWtRgvSenoRuUbNu1c/RrVa23HL1eylufX/epJ8kY262bVGyqf+qmvVr6v+aXrp5GoR/6uXrSbNmnZ9in7ZeNWruz93ohgKUdVOC/8Uz3p09qnlTDym9XPOp2jBLUkuZWPWKKY5QwmZlJGSDAz+6zVQfpTXy/gp9r+ynystm+6pnSiW4BgrhIALgCYRLd4DeaXs4diOxs9Onw5m576vLllfyerzLtR56vo1eGen6lLKHLL0AFwC4CbALgws9z0v52uGnLtRY7MnF3HeGlro/rjy0qOgVJgcXhabk5ZkM565Zquec2qJnM0wy36sYy6W4DOIiOTFIkIAALgFwABgUO63e6L/2tfIyp2tH9dPlY7N99XhmmygXKNyABIAAGiYRLeYDeaXs4fSjsLPTp8OYue+ry5ZX8nq8y7Ueer6NXhnp+rSyNzl8r6BcgFwC5ILkBBL35ClbE0+VSXys3tn1Yvw1NbH9UtYjpFKYCuAXGR48VlWhS0TqwT2U86XQjWu6uzb91T3t6a7c9tKuqbpqa8SnVnzpQXWzTr2raj2xMtmnZtyecxDx1d0dZ+JTpQ5ZNzfVY1bm1bk+2mIbFGzqI91Uz4eOplbEy11nHkhGMTWq19+r/AKe9Ojs0/wDOfLlLHVn/AJ63x2POdVen/uWcWLXwhrsjzcsPSlJuTcdLk7ttNrSdHpKpqs0zKj1FMU3aoh7TZeKi3Wr+Cm+CtH6ZIq9q9GPKw2d1Z8Msc6uyYSLgFwYFwYCYhEt/k/eaPsofSjsbPTp8OXu++fLjljyerzLtR56vo1eGen6tLIXOVX8QBkwVwnAuSC5ALjI9eR5f8mj639M2tDP99LX1cf1S2SOpUJgUuWctOhP9KnFTqZqk3J2hBPVzsrdZruDO7TGZb2l0fFjeqnEM9icZWrb7Vk1sReZDoRS3dVdue6r8LS3YtW/bT+fu4KKWpJcxrvbmCAXAVwkmwnDZbn5XwtLkzl8zOo2fOdPS57WR/dUsjdayk3W+TLkq0/7RW7V6H5b+zp/u/DJXObXpNkGCCQAANEwiX0DJ+8UfZQ+lHY2enT4cvd98+XLLPk1X1V2o89X0KvDLTdWnyx1zlHQwLgK4BcGBnDJgXBh6MmztXov/AGR63Y2NLVi9TP8Arx1EZtVeG3R1jnjAxeXtGLrf+v6UcztHrz+F9oujH5eC5oNvAbAVwkXAi2ArhOGv3LVL4a2zUmunT/Z0my6s2IjsodfTi95XBYtJTbq/JJPgqUn86X9lftOM6eW7s+f74/LG3OYy6ANhJXITgXBgXBgJkwiYfQ8nbxR9lD6UdlZ6dPhyl331eXHLXk1X1V9SPPV9Crw9NN1afLGXOTdDgXALkguQFcAuBOjPNnB8EovoZnbnFdM9pY3IzRMf436Oyjk5kwMZuj8sqcsKb6jmtp9efEL7Z/R/Mq25XtwXIyItjKQMmCBh0o0J1NFOEp+rFtHpbs3LntpmWFd2ij3VYa3c3g50aMlUWbKU87NunZWS8x0WzrFdq3iqMZUeuvU3LmaeULcsGm5YihGpFwmlKMtaZjXRTXG7VHoypqmmd6nmrqu5/DuLioZreqSlLOT97NKrZ1iacRThs0669FWd5kMo4SWHqulPWtKa1Si9TOd1FiqzXNEr7T34vUb0PLc13sLkguA0xCJfRcnbxR9lD6UdnZ6dPhyt331eXHLfk1b1V2o8tZ0KvDPTdWnyxRyboxcgK5OQXGQDILjITYyYb/BVM+lTntQi+lHY2at63TP+OYuU7tcx/ruerBmt0OS6tSsqtKOenCMGk1dNN6dPP1FLtHR3LlcV0RlaaHVW6KJoqnCkxGCq0lnVKc4rha0dKKq5prtuM104WNvUWq5xTV6vPc13uTYSTYHqyXThPEUoVPElKz4G/Mumxs6Smiu9TFfJr6qqqm1M0829pQUUoxSikrJJWSOsppimMRGHNzMzOZSMkGAgEQMZuuxMJ4inGDUpU6clUcXdJt6Fz6+k53a1ymqumKfWYX2y7VVNuZmMZ5KO5UrMXALgNMmES+j5O3ij7KH0o7Oz06fDk7vvq8uOW/Ja3qrtR5azoVeGel61Plh7nJOkFyAXAVwC4MJU4SnJRinKUnZJa2zKmmqqYimMzKKqoojenkv8FuabSdeeb6ELN+9lzZ2Tn1uT+FXd2l9qI/LR4ekqcIwjojBKK5kXVuiKKYpjlCrqqmqZmfu6GbEgFOCkmmk01Zp6U0RMRMYlMTicwxGX8FHD182GiE458Vs6bNHL7R09Nm5/HlPq6DQ3pu2/5c4nCtuV7dwTZOQriJmDGWmyPujioqniXZrQqutNelwPlL7R7TpmIou+k91Nqtn1RO9b9Y7Lt5ToWv8Ar0bcP6kfuWn1FvGd6FfwLucbs/p5K+6XCQ/yqb4KcZTfVoPCvaGnp/6z4e9Gg1FX/OPKrxW7DWqFGT9Ks1FfCtJo3dsRyop/bct7Jnncqx4UeNypiMRvtWWa/wDHT/jh1aX7ysv629d51Yj/ABY2tJZte2n1/wB9XiSS0LQamWz6ydyAXJBcATEIl9KybvFH2VP6UdpZ6dPhyV3qVeXDLvktb1V2o8tb0K/DPS9anywtzkMumgXBgXBgZwBcJe/IWLjRxEJTtmtODk/+t/Obuz71Nq9E1cpaettVXLUxS3MXdJ9h1cTlzvJIkACbImRU5R3QUMPdZ36tTi6VpP3vUjS1GvtWvTOZ7Q27Ghu3ftiO8sfjsbPE1ZValk2lGEFpUILzX870nOanU1X696pf2LFNmjcp9e7hc13sVwFcAuQIOK4F0IllmTuRlCNwkXCSbCSuAXALgCYhEvpmTfJ6Hsqf0o7Wz06fDkLvvq8uOXfJa3qrtR5a3oV+Gel61PlhDj3TkAAIAAALHAZbr4dKMXGcFqhUu7czWlG/p9o3bMY5w072htXZzyl7Km6uu1+2lRi+FznLqsjaq2xX9qYeFOyrf3ql4q2X8XP/ACxguCnTS63c169p6ir748NinZ+np+2fMvDWxFWpvtWrUXBKpLN6FoNSvUXa/dVMtimzbo9tMQ5RiloSS5jxe2TuEEABKIAAmElcBBJBJNgK4SLgFwGmIRL6bk3yej7Kn9KO1s9Onw4+71KvIyjS/UoVYLXKnK3PbQL1G/RVT3Rbq3a4l89Zxc07s4nm6qmcxEwLkJIAAAkAIACQAARYAAgAJRYAEkwEEkEkEkwFcAuAXAnSg5SUVpcmkudmdqia64pj7vO5XFFE1T9n1HD08yEI7MYx6FY7WmMREOPqnMzLqZIYfdBgHQrNpfx1G5QfmT88fd2HNbT0k0V79MekrzQamKqdyecKoqlmLgAAwEABJAAAAgEEgBNhJAAEQkAIJgglFhIAAAhDQ7kcmupV/Xkv46TuvSqeZe7X0F5srSTvcWr8KbaepiI4dP5bcv1GYHnxuEhXpunUV09XmafCuUwroiuJpqjMMqappnNPNjMp5Gq4dt2dSn5qkVfR6S83Yc/qtl1U/wArfrH/AKudPtCmqMV+kqxcmnmKqq3VT6TCyiumfWJBiyAAEiwCaAQAAAyQBYJJgIJIGSYTkgZJoJgmmE5JoGRYAt7uczpt1VelMZY1XKaY9ZXeRtztWu1KonSpa3KStOS4Ir+2W+l2XVM7130jsqdVtOnG7b5924w2HjShGnTSjCKski+ppimMRyUc1TVOZdjJAAAEwPFiMk4eq7zo03J65ZubLpRhNFNXOMsoqqjlOHDwewvFfPP7mPAt/GP0y41z5SPB7C8V88/uRwLfxj9HGufKT8HsLxXzz+44Fr4x+jjXPlJeD2F4r55/ccC38Y/RxrnykeD2F4r55/ccC38Y/RxrnykeD2F4r55/cngWvjH6ONc+UjwewvFfPP7kcC38Y/RxrnykeD2F4pfHP7jgW/jH6ONc+UjwewvEr45/ccC38Y/SeNc+UjwewvEr45/cngW/jH6ONc+UjwdwvEr45/ccC38Y/SONc+Ul4O4XiV8c/uOBb+MfpPGufKR4O4TiV8c/uOBb+Mfo41z5SPB3CcSvjn9yOBb+MfpHGufKR4O4TiV8c/uOBb+MfpPGufKR4OYTiV8c/uOBb+Mfo49z5T+x4O4TiV8c/uOBb+Mfo49z5T+x4O4TiV8c/uTwLfxj9HHufKf2PB3CcSvin9yOBb+Mfo41z5T+3qw2S6FJ3p0acHtKKcul6T0popp5RhhNVU85esyYmAARclwgJ1VwgQeIjwgReLiBB46HKBF5SgvMwIPKsOBgReV47L6QI9+FsPpAXfj0H8QC78eh834AO/H+v5vwAu/L4tfF+ADvw+LXxfgA78vi18X4AO/D4tfF+AH34/1/N+ADvx6HzfgB9+FsP4gGssLYfSgJLK8dl9IEllWHAwJrKUOBgSWOhygTWLi+ECSxEeECaqrhAbguACLpLgAi8PECLwkeUCDwEeUCLybF+dgQeSo8LAg8kR2mBF5HW2+gBd5/T6gF3ne2ugA7zvbXQwF3nltx6GAd55bcehgHeeW3HoYB3nltx6GAd53troYDWR3troAfef0+oCSyOtt9ADWSI7T6AJLJUeFgTWTY8LAmsDFcIE1hI8oElh4gSVJcAHQAAAEAwAAAAAAAAAAAQDAAEAAMBAMAAAAAAAAD/9k=">
+                        Hyves
+                    </div>
+                </li>
+            </a>
         </ul>
     </div>
 </div>
\ No newline at end of file