From d0d7b70586abb72f414d239b77af8af815a4b19c Mon Sep 17 00:00:00 2001 From: Mark Peterson Date: Thu, 12 Mar 2015 17:39:47 -0700 Subject: [PATCH] Global Nav functioning on Events and Leaderboard --- Web/public/stylesheets/respon-nav.css | 20 ++++++-- Web/scripts/ts/Event.ts | 2 + Web/scripts/ts/GlobalNav.ts | 68 ++++++++++++++------------- Web/scripts/ts/HelloVineCache.ts | 8 ---- Web/scripts/ts/LoadLeaderboard.ts | 1 + Web/views/event.ejs | 1 + Web/views/leaderboard.ejs | 1 + 7 files changed, 56 insertions(+), 45 deletions(-) diff --git a/Web/public/stylesheets/respon-nav.css b/Web/public/stylesheets/respon-nav.css index ddff626..5dd3169 100644 --- a/Web/public/stylesheets/respon-nav.css +++ b/Web/public/stylesheets/respon-nav.css @@ -1,13 +1,15 @@ + nav { - display:block + display:block; } nav ol,nav ul { list-style:none; margin:0; - padding:0 + padding:0; } + .nav-collapse.disable-pointer-events { pointer-events:none !important; @@ -23,14 +25,17 @@ nav ol,nav ul -moz-box-sizing:border-box; box-sizing:border-box } + .nav-collapse,.nav-collapse ul { margin:0; padding:0; list-style:none; width:100%; - float:left + /* float:left */ + } + @media screen and (min-width:46.25em) { .nav-collapse,.nav-collapse ul @@ -38,12 +43,14 @@ nav ol,nav ul text-align:center } } + .nav-collapse li { - float:left; + /* float:left; */ width:100%; display:block } + @media screen and (min-width:46.25em) { .nav-collapse li @@ -57,6 +64,7 @@ nav ol,nav ul margin-right:.2em } } + .nav-collapse a { text-transform:uppercase; @@ -69,13 +77,14 @@ nav ol,nav ul background:#4e9a06; border-bottom:1px solid white; padding:.5em 1em; - float:left +/* float:left */ } .nav-collapse a:focus { background:#306004; outline:none } + @media screen and (min-width:46.25em) { .nav-collapse a @@ -132,6 +141,7 @@ nav ol,nav ul max-height:none } } + .nav-collapse.opened { max-height:9999px diff --git a/Web/scripts/ts/Event.ts b/Web/scripts/ts/Event.ts index c690bf4..f144109 100644 --- a/Web/scripts/ts/Event.ts +++ b/Web/scripts/ts/Event.ts @@ -11,6 +11,8 @@ if (document.readyState === "complete") { function initPageNew() { var title = document.title + + GlobalNav.GlobalNavBuilder.buildNav(); var header = document.createElement("h1"); header.innerText = title; document.body.appendChild(header); diff --git a/Web/scripts/ts/GlobalNav.ts b/Web/scripts/ts/GlobalNav.ts index b94aceb..deb9287 100644 --- a/Web/scripts/ts/GlobalNav.ts +++ b/Web/scripts/ts/GlobalNav.ts @@ -1,38 +1,42 @@ -function initNav() { +module GlobalNav { + class NavBar { + buildNav() { + var linkTag = document.createElement("link"); + linkTag.rel = "stylesheet"; + linkTag.href = "../stylesheets/respon-nav.css"; + var scriptTagHdr = document.createElement("script"); + scriptTagHdr.type = "text/javascript"; + scriptTagHdr.src = "responsive-nav.js"; + document.head.appendChild(linkTag); + document.head.appendChild(scriptTagHdr); - var linkTag = document.createElement("link"); - linkTag.rel = "stylesheet"; - linkTag.href = "../stylesheets/respon-nav.css"; - var scriptTagHdr = document.createElement("script"); - scriptTagHdr.type = "text/javascript"; - scriptTagHdr.src = "responsive-nav.js"; - document.head.appendChild(linkTag); - document.head.appendChild(scriptTagHdr); + var navContainer = document.createElement("div"); + navContainer.id = "nav"; + navContainer.className = "nav-collapse"; - var navContainer = document.createElement("div"); - navContainer.id = "nav"; - navContainer.className = "nav-collapse"; + var navItems= { + Event: "event", + Leaders: "leaderboard" + } - var navItems= { - Map: "home.html", - Leaders: "leaderboard.html" - } - - var list = document.createElement("ul"); - var listItem; - for (var property in navItems) { - if (navItems.hasOwnProperty(property)) { - listItem = document.createElement("li"); - var aTag = document.createElement("a"); - aTag.innerText = property; - aTag.href = navItems[property]; - listItem.appendChild(aTag); - list.appendChild(listItem); + var list = document.createElement("ul"); + var listItem; + for (var property in navItems) { + if (navItems.hasOwnProperty(property)) { + listItem = document.createElement("li"); + var aTag = document.createElement("a"); + aTag.innerText = property; + aTag.href = navItems[property]; + listItem.appendChild(aTag); + list.appendChild(listItem); + } + } + navContainer.appendChild(list); + var scriptTag = document.createElement("script"); + scriptTag.innerText = "var nav = responsiveNav('#nav');" + navContainer.appendChild(scriptTag); + document.body.appendChild(navContainer); } } - navContainer.appendChild(list); - var scriptTag = document.createElement("script"); - scriptTag.innerText = "var nav = responsiveNav('#nav');" - navContainer.appendChild(scriptTag); - document.body.appendChild(navContainer); + export var GlobalNavBuilder = new NavBar(); } \ No newline at end of file diff --git a/Web/scripts/ts/HelloVineCache.ts b/Web/scripts/ts/HelloVineCache.ts index 4efb5a9..69e0e60 100644 --- a/Web/scripts/ts/HelloVineCache.ts +++ b/Web/scripts/ts/HelloVineCache.ts @@ -41,14 +41,6 @@ var list = EventList.EventListBuilder.buildList(); listCol.appendChild(list); - var button = document.createElement("button"); - button.type = "button"; - button.innerText= "OK"; - button.onclick=function () { - window.location.href = './fungus'; - } - listCol.appendChild(button); - row.appendChild(imgCol); row.appendChild(listCol); diff --git a/Web/scripts/ts/LoadLeaderboard.ts b/Web/scripts/ts/LoadLeaderboard.ts index 1952745..0b4cbc0 100644 --- a/Web/scripts/ts/LoadLeaderboard.ts +++ b/Web/scripts/ts/LoadLeaderboard.ts @@ -8,6 +8,7 @@ } function initPage() { + GlobalNav.GlobalNavBuilder.buildNav(); var list = PlayerSummaryList.PlayerSummaryListBuilder.buildList(); document.body.appendChild(list); } diff --git a/Web/views/event.ejs b/Web/views/event.ejs index f7cfacf..1ebf7e6 100644 --- a/Web/views/event.ejs +++ b/Web/views/event.ejs @@ -25,6 +25,7 @@ + diff --git a/Web/views/leaderboard.ejs b/Web/views/leaderboard.ejs index 4950df6..07417c1 100644 --- a/Web/views/leaderboard.ejs +++ b/Web/views/leaderboard.ejs @@ -18,6 +18,7 @@ +