From 9bcbb35c520eaac4ba59d0f537bc891e8a5d09a4 Mon Sep 17 00:00:00 2001 From: Jillian Anderson Date: Wed, 9 Nov 2016 15:36:49 -0500 Subject: [PATCH] Added metaknowledge credentials to top of page --- mkd3.js | 90 ++++++++++++++++++++++++++++++++++++++---------------- styles.css | 39 +++++++++++++++++++++-- 2 files changed, 100 insertions(+), 29 deletions(-) diff --git a/mkd3.js b/mkd3.js index 1bfdd2e..b46d79f 100644 --- a/mkd3.js +++ b/mkd3.js @@ -74,8 +74,8 @@ // Initialize Everything initHead() - initIcons(plotType) initDivs(plotType) + initIcons(plotType) initToolTip(plotType) initContextMenu(plotType) initStandardTable(plotType); @@ -109,8 +109,8 @@ // Initialize Everything initHead() - initIcons(plotType) initDivs(plotType) + initIcons(plotType) initToolTip(plotType) initContextMenu(plotType) initStandardTable(plotType); @@ -144,8 +144,8 @@ // Create the div container // Initialize Everything initHead() - initIcons(plotType) initDivs(plotType) + initIcons(plotType) initToolTip(plotType) initContextMenu(plotType) initStandardTable(plotType); @@ -190,8 +190,8 @@ // This initializes the divs everything will be placed in initHead() - initIcons(plotType) initDivs(plotType) + initIcons(plotType) initNetworkTable(plotType) initContextMenu(plotType) initToolTip(plotType) @@ -785,33 +785,69 @@ container.id = plotType + "Container"; container.className = "container"; + // Create the title - Vertical + var title = document.createElement('div'); + title.id = "title" + + var imgLink = document.createElement('a') + imgLink.href = "http://networkslab.org/metaknowledge/" + var img = document.createElement("img"); + img.id = "mkLogo" + img.src = "http://networkslab.org/metaknowledge/images/site-logo.png" + imgLink.appendChild(img) + title.appendChild(imgLink) + + var mk = document.createElement('div') + mk.appendChild(document.createTextNode("metaknowledge")) + mk.id = 'mkTitle' + var mkLink = document.createElement('a') + mkLink.href = "http://networkslab.org/metaknowledge/" + mkLink.appendChild(mk) + title.appendChild(mkLink) + + var netlab = document.createElement('div') + netlab.appendChild(document.createTextNode("NetLab, University of Waterloo")) + netlab.id = "netLab" + title.appendChild(netlab) + + var auth = document.createElement('div') + auth.appendChild(document.createTextNode('Reid McIlroy-Young, John McLevey, & Jillian Anderson')) + auth.id = "titleAuthors" + title.appendChild(auth) + + + + + // title.appendChild(document.createTextNode("http://networkslab.org/metaknowledge/")) + container.appendChild(title) + // Create the Visualization Area var visArea = document.createElement('div'); visArea.id = plotType + "VisArea"; visArea.className = "visArea"; - // Create the Options Panel - var panel = document.createElement('div'); - panel.id = plotType + "Panel"; - panel.className = "panel"; - visArea.appendChild(panel); + // Create the Options Panel + var panel = document.createElement('div'); + panel.id = plotType + "Panel"; + panel.className = "panel"; + visArea.appendChild(panel); - // Create the plot - var plot = document.createElement('div') - plot.id = plotType + "Plot" - plot.className = "plot RPYS"; - visArea.appendChild(plot); + // Create the plot + var plot = document.createElement('div') + plot.id = plotType + "Plot" + plot.className = "plot RPYS"; + visArea.appendChild(plot); - container.appendChild(visArea); + container.appendChild(visArea); - // Create the table - var table = document.createElement('div') - table.id = plotType + "TableContainer"; - table.className = "container"; + // Create the table + var table = document.createElement('div') + table.id = plotType + "TableContainer"; + table.className = "container"; - container.appendChild(table); + container.appendChild(table); - document.body.appendChild(container); + document.body.appendChild(container); } function initHead(){ @@ -821,11 +857,6 @@ document.title = "mkd3" - var cssLink = document.createElement('link') - cssLink.rel = "stylesheet" - cssLink.href = "mkd3/styles.css" - document.head.appendChild(cssLink) - var d3Script = document.createElement('script') d3Script.src="https://d3js.org/d3.v4.js" document.head.appendChild(d3Script) @@ -1035,7 +1066,12 @@ var div = document.createElement('div') div.appendChild(icon) div.appendChild(label) - document.body.appendChild(div) + + var firstChild = document.getElementById(plotType + "TableContainer") + var parent = document.getElementById(plotType + "Container") + parent.insertBefore(div, firstChild) + // parent.appendChild(div) + // document.body.appendChild(div) } function iconClick(type, bool, plotType){ diff --git a/styles.css b/styles.css index 9c4cf5a..571ab0b 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ body { font: 18px; - font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; + /*font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;*/ + font-family: "source-sans-pro",sans-serif } hr { width: 50%; } @@ -69,7 +70,7 @@ div.panel { display: inline-block; } .icon { margin: 3px; /*color: steelblue;*/ - margin-left: 10%; + margin-left: 0%; } .iconText { margin: 3px; } @@ -217,3 +218,37 @@ p.title { text-align: center; .customContextMenu li:hover { background-color: #DEF; } +#mkLogo { width: 80px; + height: auto; + /*padding-left: 0px; + padding-top: 0px; + padding-right: 5px; + padding-bottom: 5px;*/ + border-radius: 80px; + display: block; + margin-left: auto; + margin-right: auto; + } +#mkTitle { font-family: "source-sans-pro",sans-serif; + text-rendering: optimizeLegibility; + font-weight: bold; + font-size: 1.5em; + color: black; + text-align: center; + } +a { text-decoration: none; + } +#netLab { font-family: "volkhov",serif; + text-align: center; + font-size: 1em; + color: #555; + font-style: italic; + } +#titleAuthors { font-family: "volkhov",serif; + font-size: 0.8em; + text-align: center; + color: #555; + /*font-style: italic;*/ + text-rendering: optimizeLegibility; + } +#title { margin-bottom: 5px;}