Difference between revisions of "Team:Nottingham/Team"

@@ Line 1: / Line 1: @@
-{{Nottingham}}
+{{Template:Nottingham/include}}
+{{Template:Nottingham/menu}}
 <html>
-<div class="column two_thirds_size" >
+<section class="sidebar-content">
+	<div class="main appear" style="opacity: 1; transform: none; width: 70%;">
+		<div class="ui breadcrumb" style="padding-bottom:23px;">
+			<a class="section">Home</a>
+			<i class="right angle icon divider"></i>
+			<div class="active section">Achievements</div>
+		</div>
+		<a class="anchor" id="medal-criteria"></a>
+		<div class="ui segment">
+			<h2>Medal Criteria</h2>
+			<div class="ui label">Content coming soon!</div>
+		</div>
+		<a class="anchor" id="parts"></a>
+		<div class="ui segment">
+			<h2>Parts</h2>
+			<div class="ui label">Content coming soon!</div>
+		</div>
+		<a class="anchor" id="improved-parts"></a>
+		<div class="ui segment">
+			<h2>Improved parts</h2>
+			<div class="ui label">Content coming soon!</div>
+		</div>
+		<a class="anchor" id="demonstrate"></a>
+		<div class="ui segment">
+			<h2>Demonstrate</h2>
+			<div class="ui label">Content coming soon!</div>
+		</div>
+		<a class="anchor" id="conclusion"></a>
+		<div class="ui segment">
+			<h2>General Conclusion</h2>
+			<div class="ui label">Content coming soon!</div>
+		</div>
+	</div>
+	<div class="ui sticky rail sidebar-list" style="left: 965.844px;">
+		<div class="menu-collapse-expand appear" style="opacity: 1; transform: none;">
+			<div class="ui circular icon button minimize-button" style=""><i class="ui chevron up icon"></i></div>
+			<div class="ui circular icon button maximize-button" style="display: none !important;"><i class="ui bars icon"></i></div>
+		</div>
+		<div class="ui vertical fluid inverted green menu appear" style="opacity: 1; transform: none;">
+			  <a class="item" id="medal-criteria-button" href="#medal-criteria">
+			    Medal Criteria
+			  </a>
+			  <a class="item" id="parts-button" href="#parts">
+			    Parts
+			  </a>
+			  <a class="item" id="improved-parts-button" href="#improved-parts">
+			    Improved parts
+			  </a>
+			  <a class="item" id="demonstrate-button" href="#demonstrate">
+			    Demonstrate
+			  </a>
+			  <a class="item" id="conclusion-button" href="#conclusion">
+			    General conclusion
+			  </a>
+		</div>
+	</div>
+</section>
-<h1>Team</h1>
+</html>
-<p>In this page you can introduce your team members, instructors, and advisors. </p>
+{{Template:Nottingham/sponsers}}
+<html>
+<script>
-<h3>What should this page contain?</h3>
+		$("#top_title").remove()
-<ul>
+		$("#content").attr("id", null)
-<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+		$(document).ready(() => {
-<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+			$(".appear").css("opacity", "1")
-<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+			$(".appear").css("transform", "none")
-<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+		})
-</ul>
+	</script>
-</div>
+<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>
-<div class="column third_size" >
+<script>
-<div class="highlight decoration_A_full">
+</script>
-<h3>Inspiration</h3>
-<p>You can look at what other teams did to get some inspiration! <br />
-Here are a few examples:</p>
-<ul>
-<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
-<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
-<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
-<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
-</ul>
-</div>
-</div>
 </html>