Difference between revisions of "Team:Nottingham/Human Practices"
| Line 1: | Line 1: | ||
{{Template:Nottingham/include}} | {{Template:Nottingham/include}} | ||
{{Template:Nottingham/menu}} | {{Template:Nottingham/menu}} | ||
| + | <html> | ||
| + | |||
| + | <section class="sidebar-content"> | ||
| + | <div class="main appear"> | ||
| + | |||
| + | </div> | ||
| + | <div class="ui sticky rail sidebar-list"> | ||
| + | <div class="menu-collapse-expand appear"> | ||
| + | <div class="ui circular icon button minimize-button"><i class="ui chevron up icon"></i></div> | ||
| + | <div class="ui circular icon button maximize-button" style="display:none;"><i class="ui bars icon"></i></div> | ||
| + | </div> | ||
| + | |||
| + | <div class="ui vertical fluid inverted green menu appear"> | ||
| + | <a class="item" id="overview-button" href="#overview"> | ||
| + | Overview | ||
| + | </a> | ||
| + | <a class="yellow item" id="silver-button" href="#silver"> | ||
| + | Silver | ||
| + | </a> | ||
| + | <a class="item" id="gold-button" href="#gold"> | ||
| + | Gold | ||
| + | </a> | ||
| + | <a class="item"> | ||
| + | Outreach 2 | ||
| + | </a> | ||
| + | <a class="item"> | ||
| + | Collaborations | ||
| + | </a> | ||
| + | <a class="item"> | ||
| + | Media | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </section> | ||
| + | |||
| + | </html> | ||
{{Template:Nottingham/sponsers}} | {{Template:Nottingham/sponsers}} | ||
<html> | <html> | ||
| Line 11: | Line 47: | ||
}) | }) | ||
</script> | </script> | ||
| + | <style> | ||
| + | section.sidebar-content { | ||
| + | display:flex; | ||
| + | justify-content: space-between; | ||
| + | padding-bottom:50px; | ||
| + | } | ||
| + | section.sidebar-content .main { | ||
| + | width: 70%; | ||
| + | } | ||
| + | section.sidebar-content .sidebar-list { | ||
| + | width: 27.5%; | ||
| + | } | ||
| + | .ui.vertical.menu { | ||
| + | text-align: center; | ||
| + | } | ||
| + | .ui.segment { | ||
| + | border:none; | ||
| + | color: #4a4a4a; | ||
| + | } | ||
| + | .menu-collapse-expand { | ||
| + | display:flex; | ||
| + | justify-content: flex-end; | ||
| + | } | ||
| + | a.anchor { | ||
| + | display: block; | ||
| + | position: relative; | ||
| + | top: -100px; | ||
| + | visibility: hidden; | ||
| + | } | ||
| + | </style> | ||
| + | <script> | ||
| + | $(".ui.sticky") | ||
| + | .sticky({ | ||
| + | context: ".main", | ||
| + | offset: 30, | ||
| + | }) | ||
| + | ; | ||
| + | var firstSegmentPassed = false; | ||
| + | var maximized = true; | ||
| + | var anchors = ["#overview", "#gold", "#silver"]; | ||
| + | anchors.forEach(anchor => { | ||
| + | $(anchor).visibility({ | ||
| + | onOnScreen: calculations => { | ||
| + | $(anchor + "-button").addClass("active"); | ||
| + | }, | ||
| + | onOffScreen: calculations => { | ||
| + | $(anchor + "-button").removeClass("active"); | ||
| + | }, | ||
| + | continuous: true | ||
| + | }) | ||
| + | }) | ||
| + | $(".maximize-button").css("cssText", "display: none !important") | ||
| + | $(".minimize-button").on("click", () => { | ||
| + | $(".ui.menu").hide(); | ||
| + | $(".main").css("width", "calc(100% - 60px)"); | ||
| + | |||
| + | $(".minimize-button").css("cssText", "display: none !important"); | ||
| + | $(".maximize-button").show(); | ||
| + | $(".ui.sticky").sticky("refresh"); | ||
| + | if(!firstSegmentPassed) setTimeout( () => $(".sidebar-list").css("width", "60px"), 1) | ||
| + | maximized = false; | ||
| + | }) | ||
| + | $(".maximize-button").on("click", () => { | ||
| + | $(".ui.menu").show(); | ||
| + | $(".main").css("width", "70%"); | ||
| + | $(".sidebar-list").css("width", "27.5%"); | ||
| + | $(".maximize-button").css("cssText", "display: none !important"); | ||
| + | $(".minimize-button").show(); | ||
| + | $(".ui.sticky").sticky("refresh"); | ||
| + | maximized = true; | ||
| + | }) | ||
| + | |||
| + | $($(".ui.segment")[0]).visibility({ | ||
| + | onTopPassed: function(calculations) { | ||
| + | firstSegmentPassed = true; | ||
| + | |||
| + | }, | ||
| + | onTopPassedReverse: function(calculations) { | ||
| + | firstSegmentPassed = false; | ||
| + | if(!maximized) $(".sidebar-list").css("width", "60px") | ||
| + | }, | ||
| + | continuous: true | ||
| + | }) | ||
| + | </script> | ||
| + | |||
| + | |||
| + | <script> | ||
| + | </script> | ||
</html> | </html> | ||
Revision as of 14:42, 2 October 2018
