From fc0b801d7da6bbbcd7c401fb34548d574e9572c5 Mon Sep 17 00:00:00 2001 From: Lars van Hijfte Date: Wed, 11 Jan 2017 13:06:09 +0100 Subject: [PATCH] Added groups to the menu. It also now has an animation to hide and show more or less items in the menu. --- website/js/menu.js | 38 ++++++++++++++++++++++++++++ website/styles/main.css | 16 ++++++++++++ website/styles/menu.css | 9 ++++++- website/views/menu.php | 55 ++++++++++++++++++++++++++++++++++++++--- 4 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 website/js/menu.js diff --git a/website/js/menu.js b/website/js/menu.js new file mode 100644 index 0000000..56eab9b --- /dev/null +++ b/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(); + }); +}); diff --git a/website/styles/main.css b/website/styles/main.css index 33dbdd3..62036a7 100644 --- a/website/styles/main.css +++ b/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 { diff --git a/website/styles/menu.css b/website/styles/menu.css index 52c89a1..3aa47a7 100644 --- a/website/styles/menu.css +++ b/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; +} diff --git a/website/views/menu.php b/website/views/menu.php index 2f8d415..f2fc2ad 100644 --- a/website/views/menu.php +++ b/website/views/menu.php @@ -1,5 +1,5 @@