Skip to content

Commit

Permalink
small things
Browse files Browse the repository at this point in the history
  • Loading branch information
tbrittoborges committed Mar 31, 2015
1 parent d23774d commit aa0ff7b
Show file tree
Hide file tree
Showing 10 changed files with 3,117 additions and 93 deletions.
114 changes: 114 additions & 0 deletions css/gridder.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
/* MIXINS */
.gridder.hasSelectedItem .gridder-list {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
}

.gridder.hasSelectedItem .gridder-list.selectedItem {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 100;
}

.gridder-list {
float: none;
display: inline-block;
width: 150px;
vertical-align: top;
margin: 0px;
}

.gridder-list .gridder-thumb {
cursor: pointer;
}

.gridder-list .title {
display: block;
/*font-weight: bold;*/
color: #FFF;
/*font-size: 14px;*/
justify-content: center;
}

.gridder-list .description {
color: red;
min-height: 30px;
}

.gridder-list .image {
background: #242424 url("../images/loading-spin.svg") no-repeat center;
height: 273px;
}

@media only screen and (max-width: 768px) {

.gridder-list {
width: 48%;
}

.gridder-list .image {
height: auto;
}
}

@media only screen and (max-width: 768px) {

.gridder-list {
width: 48%;
}

.gridder-list .image {
height: auto;
}
}

@media only screen and (max-width: 768px) {
.gridder-show {
padding: 15px;
}
}

.gridder-show {
padding: 50px;
margin-bottom: 20px;
background: white;
-webkit-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
-moz-box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
box-shadow: inset 0px 0px 20px 5px rgba(0, 0, 0, 0.16);
}

.gridder-navigation {
position: absolute;
right: 50px;
top: 25px;
}

.gridder-navigation a {
color: #FFF;
display: inline-block;
background: #4A4A4A;
border-radius: 5px;
margin-left: 5px;
padding: 5px;
font-size: 12px;
text-transform: uppercase;
}

.gridder-navigation a:hover {
text-decoration: none;
background: #CCC;
}

@media only screen and (max-width: 768px) and (max-width: 1200px) {
.gridder-navigation {
position: relative;
right: auto;
top: auto;
margin-bottom: 15px;
}
}

.gridder-expanded-content {
color: #000000;
}

/*font-family: 'Arial', sans-serif; font-size: 14px; line-height: 150%; color: red; }*/
38 changes: 11 additions & 27 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -582,28 +582,6 @@ body {
padding-bottom: 10%;
}

#team .thumbnail {
width: 70%;
background-color: transparent;
border-color: transparent;
}

#team .caption {
color: slategrey;
}

#team .thumbnail:focus,
#team .thumbnail:hover {
border: 1px solid #DA291C;
outline: 0;
cursor: pointer !important;
}

#team .thumbnail:focus,
#team .thumbnail:hover > .caption {
color: #DA291C;
}

.popover {
color: #000000;
width: 100%;
Expand All @@ -627,6 +605,8 @@ div.window {
text-align: center;
margin: 0 auto;
max-width: 85%;
padding-bottom: 10%;

/*background-color: red;*/
}

Expand All @@ -643,6 +623,10 @@ div.window label:hover {
cursor: pointer;
}

#speakers img {
padding-bottom: inherit;
}

/*#sue + #mathias + #tim + */
#speakers label:after {
content: "Bio"
Expand All @@ -652,27 +636,27 @@ div.window label:hover {
content: "Close"
}


input.toggle ~ div {
#speakers input.toggle ~ div {
height: 0;
overflow: hidden;
/*transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)*/

}

input.toggle:checked ~ div {
#speakers input.toggle:checked ~ div {
height: auto;
/*background-color: white;*/
/*color: #000000;*/

}

input.toggle:checked + label {
#speakers input.toggle:checked + label {
background: darkgrey;
content: "Close"

}

input.toggle {
#speakers input.toggle {
display: none;
}

191 changes: 191 additions & 0 deletions gridder.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.gridder.min.css" rel="stylesheet">

<!-- Custom CSS -->
<!--<link href="css/style.css" rel="stylesheet">-->
<link href="css/gridder.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


</head>
<body>
<!-- Gridder navigation -->
<ul class="gridder">
<li class="gridder-list" data-griddercontent="#dianbo">
<div class="gridder-thumb">
<img src="img/dianbo.png" class="img-circle"/>
<span class="title text-center">Dianbo Liu</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#gillian">
<div class="gridder-thumb">
<img src="img/gillian.png" class="img-circle"/>
<span class="title text-center">Gillian Dunphy</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#stefan">
<div class="gridder-thumb">
<img src="img/stefan.png" class="img-circle"/>
<span class="title text-center">Stefan Tomov</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#thiago">
<div class="gridder-thumb">
<img src="img/thiago.png" class="img-circle"/>
<span class="title text-center">Thiago Britto-Borges</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#sarah">
<div class="gridder-thumb">
<img src="img/sarah.png" class="img-circle"/>
<span class="title text-center">Sarah-Lena Offenburger</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#fabio">
<div class="gridder-thumb">
<img src="img/fabio.png" class="img-circle"/>
<span class="title text-center">F&aacute;bio Madeira</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#darya">
<div class="gridder-thumb">
<img src="img/darya.png" class="img-circle"/>
<span class="title text-center">Darya Baranovka</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#kushal">
<div class="gridder-thumb">
<img src="img/kushal.png" class="img-circle"/>
<span class="title text-center">Kushal Rugjee</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#sam">
<div class="gridder-thumb">
<img src="img/sam.png" class="img-circle"/>
<span class="title text-center">Sam Watkins</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#dora">
<div class="gridder-thumb">
<img src="img/dora.png" class="img-circle"/>
<span class="title text-center">Teodora Maghear</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#alasdair">
<div class="gridder-thumb">
<img src="img/alasdair.png" class="img-circle"/>
<span class="title text-center">Alasdair McGill</span>
</div>
</li>
<li class="gridder-list" data-griddercontent="#yuri">
<div class="gridder-thumb">
<img src="img/yuri.png" class="img-circle"/>
<span class="title text-center">Yuri Alexandrov</span>
</div>
</li>
</ul>

<!-- Gridder content -->
<div id="dianbo" class="gridder-content">Dianbo Liu is the licence holder for the
upcoming TEDxUniversityofDundee event. He is the leader
of the team and is currently studying for a PhD within the
Computational and Physical Biology department at the
University of Dundee. He is interested in making links
among seemingly unrelated fields, and therefore come up
with innovative and useful inventions.</div>
<div id="gillian" class="gridder-content">Gillian Dunphy was born and raised in Glasgow but was
compelled to make the lengthy journey to Dundee after being
lured by its East Coast charm. She is currently studying for
a PhD in Immunology at the University of Dundee. She is
currently managing a team of student volunteers in the areas
of Graphic Design and Stage Design. She is also involved in
marketing and speaker recruitment.</div>
<div id="stefan" class="gridder-content">Stefan Tomov is a recent University of Dundee
graduate in the field of Economics and Politics. He comes
from Bulgaria and is currently the Deputy President of
Dundee University Students' Association (DUSA). Stefan is
responsible for securing the logistics required to make
TEDxUniversityofDundee a resounding success.</div>
<div id="thiago" class="gridder-content">Thiago Britto-Borges is a Brazilian PhD student within
the Computational Biology department of the University of Dundee
He has an inexhaustible passion for learning and enjoys spreading knowledge. Thiago
is responsible for developing and designing the TEDxUniversityofDundee website.</div>
<div id="sarah" class="gridder-content">Sarah-Lena Offenburger is pursuing a PhD in
Neurobiology at the University of Dundee. When Sarah is not
in the lab, you will probably find her doing sports, taking
pictures or just having a coffee with friends. Sarah is a
curator within our team and is responsible for recruiting
and liasing with the speakers of the event.</div>
<div id="fabio" class="gridder-content">Originally from Portugal, F&aacute;bio Madeira is
currently studying for a PhD within the Cell and Molecular
Biology department at the University of Dundee,
specialising in Computational Biology. Alongside with Thiago, he helps managing and developing the website of the event.</div>
<div id="darya" class="gridder-content">is the president of Enterprise
Gym which is a University of Dundee department where
students learn about entrepreneurship. She comes from the
small and pretty town of Liepaya, which is located on the
Latvian coast of the Baltic Sea. Darya is responsible for
the recruitment of volunteers and organising the logistics
of the event.</div>
<div id="kushal" class="gridder-content">moved from the island of
Mauritius to equally sunny Dundee to pursue a PhD in
Microbiology. His role in the team is to co-ordinate the
overall organisation of the TEDx event and to ensure that
progress is being made.</div>
<div id="sam" class="gridder-content">is currently studying Computer Science at the University of Dundee.
He is in his third year now and interested in Web
Programming, Product Development and Entrepreneurship. Sam
is our Social Media Officer, taking care of our Twitter and
Facebook accounts.</div>
<div id="dora" class="gridder-content">is the Enterprise Assistant & Coordinator
at the Enterprise Gym, University of Dundee.
Her perseverance and passion for entrepreneurship and innovation has seen her work her way up in the roles in the department.
She received her BSc in business Economics with marketing from Dundee University in 2014. Dora is actively contributing her
expertise in a number of areas of the project.</div>
<div id="alasdair" class="gridder-content">is Head of Enterprise &
Entrepreneurial Strategy at the University of Dundee.
Not a man to sit about, Alasdair has a brain that's always
busy and he loves thinking of creative ways to make a
difference. As well as his role at the university, Alasdair
is also a director and founder of several companies in
industries as diverse as retail, software, sports and
financial services. He is a formidable adviser within our
team.</div>
<div id="yuri" class="gridder-content">is currently pursuing a master's
degree in Data Engineering. He studies Data because he likes
to observe and find patterns in the environment that
surrounds us. Yuri serves as a curator along with Sarah in
our team. He is involved in the recruitment of speakers.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.gridder.min.js"></script>
<script>
$(function() {

// Call Gridder
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
onStart: function(){
console.log("Gridder Inititialized");
},
onContent: function(){
console.log("Gridder Content Loaded");
},
onClosed: function(){
console.log("Gridder Closed");
}
});
});
</script>
</body>
</html>
Loading

0 comments on commit aa0ff7b

Please sign in to comment.