Commit 7df96161 authored by Kjetil Thuen's avatar Kjetil Thuen

Updated look and feel

parent 18effe7e
......@@ -6,16 +6,15 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
margin: 2em;
font-size: 150%;
background: #eee;
background: url(http://subtlepatterns.com/patterns/light_toast.png);
}
ul#studies_list li:first-child {
margin-top: 50%;
}
ul#studies_list {
......@@ -24,14 +23,14 @@
}
ul#studies_list li:last-child {
margin-bottom: 50%;
margin-bottom: 20em;
}
ul#studies_list li {
color: #888;
max-height: 190px;
overflow: hidden;
text-align: center;
border-bottom: 1px solid #bbb;
}
ul#studies_list li div.abstract {
......@@ -42,30 +41,24 @@
color: black;
}
#targetwrapper {
position: fixed;
top: 30%;
height: 40%;
left: 12.5%;
width: 75%;
}
#target {
top: 20%;
height: 10%;
width: 100%;
min-height: 1em;
z-index: -2;
border: 1px solid black;
height: 1em;
position: relative;
border-radius: 5px;
position: fixed;
background: rgba(200,237,200,0.8);
}
#expansionzone {
position: fixed;
left: 12.5%;
width: 75%;
z-index: 2;
display: none;
border: 1px solid black;
position: relative;
max-height: 70%;
box-shadow: 5px 5px 5px rgba(100,100,100,0.8);
border-radius:25px;
background: rgba(255,255,255,0.8);
background: rgba(200,237,200,0.8);
padding: 1em;
}
......@@ -94,85 +87,101 @@
<script>
var horizontalCenter = Math.floor(window.innerWidth/2);
var centerOfHeadline = 0;
var centerOfHeadline = 0;
var target_top = 0;
var scrollTimeout;
var focusedElement;
var build_list = function(data) {
var source = $("#study_list").html();
var jsondata = {};
var scrollVal;
var build_list = function() {
var source = $('#study_list').html();
var template = Handlebars.compile(source);
var listhtml = template(data);
$("#content").html(listhtml);
var listhtml = template(jsondata);
$('#content').html(listhtml);
}
var load_data = function() {
var initialize_page = function() {
target_top = $('#content').position().top;
$('#target').css({top: target_top});
horizontalCenter = Math.floor(window.innerWidth/2);
centerOfHeadline = $('#target').offset().top - $(window).scrollTop() + ($('#target').height() / 2);
}
var load_data = function() {
$.ajax({
url: "https://nesstar-dev.nsd.uib.no/nesstardrop/study/list",
datatype: "json",
async: true,
context: document.body
}).done(function(data) {
build_list(data);
jsondata = data;
build_list();
});
}
var show_expanded_info = function() {
var listElem = $(focusedElement).closest('li');
if (listElem.is("LI")) {
var listElemTop = listElem.offset().top;
var scrollVal = listElemTop - centerOfHeadline + ($('#target').height() / 4);
$(document).scroll(function() {return false;});
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function () {
$(document).scroll(set_selected_element);
$('#target').height(listElem.height());
listElem.addClass('selected');
console.log("triggered");
var listElem = $('#studies_list li.selected');
$(document).scroll(function() {return false;});
console.log("disabled");
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scrollVal}, 'fast', function() {
$('#target').animate({height: listElem.height()}, 'fast', function() {
details = listElem.find("div.abstract").html();
if (details != null) {
$('#expansionzone').css({top: target_top + $('#target').height()});
$('#expansionzone div.abstract').html(details);
$('#expansionzone').fadeIn();
}
});
}
$('#expansionzone').slideDown();
console.log("enabling");
window.clearTimeout(scrollTimeout);
$(document).scroll(set_selected_element);
}
});
});
}
var set_selected_element = function () {
var set_selected_element = function() {
window.clearTimeout(scrollTimeout);
$('#expansionzone').fadeOut();
$('ul#studies_list li').removeClass("selected");
$('#targetwrapper').hide();
focusedElement = document.elementFromPoint(horizontalCenter, centerOfHeadline);
if (focusedElement) {
window.clearTimeout(scrollTimeout);
scrollTimeout = window.setTimeout(show_expanded_info, 500);
var listElem = $(focusedElement).closest('li');
if (listElem.is("LI")) {
listElem.addClass('selected');
scrollVal = listElem.offset().top - $('#studies_list').position().top;
scrollTimeout = window.setTimeout(show_expanded_info, 500);
}
} else {
$('#expansionzone').hide();
}
$('#targetwrapper').show();
}
</script>
</head>
<body>
<div class="hero-unit">
<h1>Data fra Skolenesstar</h1>
Finn interresante studier i listen under.
</div>
<div id="content">
</div>
<div id="targetwrapper">
<h2 id="target"></h2>
<div id="expansionzone">
<div class="metadata">
<div class="abstract lead"></div>
<button class="btn btn-primary">Velg studie</button>
<button class="btn btn-primary">Mer metadata</button>
</div>
<h2 id="target"></h2>
<div id="expansionzone">
<div class="metadata">
<div class="abstract lead"></div>
<button class="btn btn-primary"><i class="icon-ok-sign"></i> Velg studie</button>
<button class="btn"><i class="icon-info-sign"></i> Mer metadata</button>
</div>
</div>
<script>
$('#expansionzone').fadeOut();
initialize_page();
load_data();
$(document).scroll(set_selected_element);
$(window).resize(function() {initialize_page();build_list();});
</script>
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment