Merge branch 'lars-algemeen' into 'master'

Lars algemeen

See merge request !8

website/chat.php

@@ -13,6 +13,9 @@
 
             /* Add your view files here. */
             include("views/chat.php");
+
+                        /* This adds the footer. */
+            include("views/footer.php");
         ?>
     </body>
 </html>

website/index.php

@@ -7,12 +7,15 @@
         <?php
             /*
              * This view adds the main layout over the screen.
-             * Header, menu, footer.
+             * Header and menu.
              */
             include("views/main.php");
 
             /* Add your view files here. */
             include("views/homepage.php");
+
+            /* This adds the footer. */
+            include("views/footer.php");
          ?>
     </body>
 </html>

website/js/header.js

@@ -0,0 +1,7 @@
+$(document).ready(function() {
+    $("#profile-menu-popup").hide();
+    $("#own-profile-picture").click(function() {
+        $("#profile-menu-popup").toggle();
+        $("#profile-hello-popup").toggle();
+    });
+});

website/js/menu.js

@@ -0,0 +1,38 @@
+$(document).ready(function() {
+    $(".extra-menu-items").hide();
+
+    // Show more friends
+    $("#more-friends-click").click(function() {
+        // Show only friends
+        $("#groups-menu-section").slideUp();
+        $("#friends-menu-section a").show();
+
+        // Change buttons
+        $("#more-friends-click").hide();
+        $("#menu-back").show();
+    });
+
+    // Show more groups
+    $("#more-groups-click").click(function() {
+        // Show only groups
+        $("#friends-menu-section").slideUp();
+        $("#groups-menu-section a").show();
+
+        // Change buttons
+        $("#more-groups-click").hide();
+        $("#menu-back").show();
+    });
+
+    // Go back
+    $("#menu-back").click(function() {
+        // Show overview of friends and groups
+        $("#friends-menu-section").slideDown();
+        $("#groups-menu-section").slideDown();
+        $(".extra-menu-items").hide();
+
+        // Change buttons
+        $("#menu-back").hide();
+        $("#more-groups-click").show();
+        $("#more-friends-click").show();
+    });
+});

website/php/connect.php

@@ -1,6 +1,6 @@
 <?php
 $servername = "agile136.science.uva.nl";
-$username = "admin";
+$username = "mhbp";
 $password = "qdtboXhCHJyL2szC";
 
 // Create connection

website/styles/footer.css

@@ -0,0 +1,12 @@
+footer {
+    width: calc(100% - 256px);
+    margin-left: 256px;
+
+    background-color: rgba(0,0,0,0.4);
+}
+
+footer p {
+    padding: 5px;
+
+    font-size: 14px;
+}

website/styles/header.css

@@ -13,10 +13,12 @@ header {
 }
 
 
-#header-logo img {
+#header-logo, #header-logo img {
     height: 80px;
 
     vertical-align: middle;
+    line-height: 80px;
+    padding-left: 5px;
 }
 
 #header-search {
@@ -43,6 +45,12 @@ header div {
     display: inline-block;
 }
 
+#open-chat {
+    font-size: 32px;
+    line-height: 80px;
+    margin-right: 50px;
+}
+
 .profile-menu {
     font-size: 21px;
 }
@@ -52,3 +60,16 @@ header div {
     height: 64px;
     width: 64px;
 }
+
+#own-profile-picture, #profile-menu-popup span {
+    cursor: pointer;
+}
+
+#profile-menu-popup {
+    padding: 5px;
+
+    background: white;
+    color: #666;
+
+    border-radius: 3px;
+}

website/styles/main.css

@@ -13,15 +13,31 @@ Website:        myhyvesbookplus.tk
     vertical-align: middle;
 }
 
+.group-picture {
+    border-radius: 5px;
+    height: 42px;
+    width: 42px;
+    object-fit: cover;
+    vertical-align: middle;
+}
+
+html {
+    height: 100%;
+}
+
 body {
+    height: 100%;
+
     background-color: #B78996;
     color: #333;
+
     font-family: Arial, sans-serif;
 }
 
 .content {
     margin-top: 80px;
     margin-left: 256px;
+    min-height: 100%;
 }
 
 ::selection {

website/styles/menu.css

@@ -1,5 +1,6 @@
 .menu {
     position: fixed;
+    z-index: 50;
 
     left: 0;
     top: 80px;
@@ -14,6 +15,12 @@
     padding: 10px;
 }
 
-.friend-item {
+.nav-list li {
     padding: 5px 20px;
 }
+
+.more-item {
+    padding: 5px 20px;
+    color: #666;
+    font-size: 14px;
+}

website/views/footer.php

@@ -0,0 +1,3 @@
+<footer>
+    <p>Copyright &copy; 2017 MyHyvesbook+ <span style="float: right">Like ons op Facebook!</span</p>
+</footer>

website/views/head.php

@@ -3,12 +3,16 @@
     <title>MyHyvesbook+</title>
     <!-- Add your javascript files here. -->
     <script src="js/jquery.js"></script>
+    <script src="js/header.js"></script>
+    <script src="js/menu.js"></script>
     <style>
         /* Add your css files here. */
         @import url("styles/main.css");
-        @import url("styles/chat.css");
         @import url("styles/font-awesome.css");
         @import url("styles/header.css");
         @import url("styles/menu.css");
+        @import url("styles/footer.css");
+
+        @import url("styles/chat.css");
     </style>
 </head>

website/views/header.php

@@ -1,6 +1,6 @@
 <header>
     <div id="header-logo">
-        <img src="img/logo.png" />
+        <img src="img/Logo.png" alt="MyHyvesbook+" />
     </div>
     <div id="header-search">
         <form action="php/search.php" method="get">
@@ -9,10 +9,18 @@
         </form>
     </div>
     <div class="right profile-menu">
+        <div id="profile-menu-popup">
+            <a href="#"><span style="color: red;" class="fa fa-sign-out" data-title="Uitloggen"></span></a> |
+            <a href="#"><span style="color: blue;" class="fa fa-cog" data-title="Instellingen"></span></a> |
+            <a href="#"><span style="color: green;" class="fa fa-user" data-title="Profiel"></span></a>
+        </div>
+        <div id="profile-hello-popup">
             <div id="hello-loop">
                 Hallo
             </div>
             Bart
-        <img class="profile-picture" src="data:image/jpeg;base64,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" />
         </div>
+        <img id="own-profile-picture" class="profile-picture" src="data:image/jpeg;base64,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" />
+    </div>
+    <a href="chat.php"><div class="right fa fa-comments-o" id="open-chat" data-title="Prive chats"></div></a>
 </header>