Difference between revisions of "Team:Waterloo/Team"
| Line 10: | Line 10: | ||
{{Waterloo/head}} | {{Waterloo/head}} | ||
<html> | <html> | ||
| + | |||
| + | <style> | ||
| + | .teamMember { | ||
| + | height: 120px; | ||
| + | width: 120px; | ||
| + | cursor: pointer; | ||
| + | border-radius: 3px; | ||
| + | padding: 12px; | ||
| + | } | ||
| + | </style> | ||
<nav class="navbar navbar-toggleable-md navbar-inverse bg-primary fixed-top"><a class="navbar-brand" href="https://2017.igem.org/Team:Waterloo">Waterloo</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> | <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary fixed-top"><a class="navbar-brand" href="https://2017.igem.org/Team:Waterloo">Waterloo</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> | ||
| Line 72: | Line 82: | ||
</ul> | </ul> | ||
</div></nav> | </div></nav> | ||
| − | <div class="content"> | + | <div class="content team"> |
<div class="titleBox row" style="background: url(https://static.igem.org/mediawiki/2017/4/4c/T--Waterloo--2017_teamphoto.jpg)"> | <div class="titleBox row" style="background: url(https://static.igem.org/mediawiki/2017/4/4c/T--Waterloo--2017_teamphoto.jpg)"> | ||
<div class="layer shade"> | <div class="layer shade"> | ||
| Line 88: | Line 98: | ||
<div class="col-sm-2"></div> | <div class="col-sm-2"></div> | ||
<div class="col-sm-4"> | <div class="col-sm-4"> | ||
| − | <div class="lightbulb" style=" | + | <div class="lightbulb" v-bind:style="{ backgroundImage: 'url(' + member.photo + ')' }"></div> |
</div> | </div> | ||
<div class="col-sm-4"> | <div class="col-sm-4"> | ||
<div class="teamMemberInfo"> | <div class="teamMemberInfo"> | ||
| − | <h2> | + | <h2>^^member.name$$</h2> |
| − | <p> | + | <p>^^member.bio$$</p> |
</div> | </div> | ||
</div> | </div> | ||
<div class="col-sm-2"></div> | <div class="col-sm-2"></div> | ||
</div> | </div> | ||
| + | </div> | ||
| + | <div id="inserts"> | ||
| + | <center> | ||
| + | <div class="ip-group-wrapper"> | ||
| + | <div class="memberList"> | ||
| + | <img class="teamMember" v-on:click="member=me" v-for="me in ip.members" src="me.photo"> | ||
| + | </img> | ||
| + | </div> | ||
| + | </div> | ||
| + | </center> | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | <script src="https://unpkg.com/vue"></script> | ||
| + | <script> | ||
| + | var teamPage = new Vue({ | ||
| + | el: ".team", | ||
| + | delimiters: ['^^', '$$'], | ||
| + | data:{ | ||
| + | member: { | ||
| + | name: 'Click a team member to view their information', | ||
| + | bio: '', | ||
| + | photo: '', | ||
| + | }, | ||
| + | ip: { | ||
| + | parent: "IP", | ||
| + | members: [ | ||
| + | { | ||
| + | name: 'blah1', | ||
| + | bio: 'blah blah blah', | ||
| + | photo: 'blaaaah', | ||
| + | }, | ||
| + | { | ||
| + | name: 'blah2', | ||
| + | bio: 'blah blah blah', | ||
| + | photo: 'blaaaah', | ||
| + | }, | ||
| + | { | ||
| + | name: 'blah3', | ||
| + | bio: 'blah blah blah', | ||
| + | photo: 'blaaaah', | ||
| + | }, | ||
| + | ] | ||
| + | }}} | ||
| + | ) | ||
| + | </script> | ||
</html> | </html> | ||
{{Waterloo/footer}} | {{Waterloo/footer}} | ||
Revision as of 23:32, 1 November 2017
Our Lit Team
^^member.name$$
^^member.bio$$
