Skip to content

Commit c1ec61d

Browse files
jmgasperjmgasper
committed
Initial changes for universal nav
https://topcoder.atlassian.net/browse/PROD-3114
1 parent d9f05e4 commit c1ec61d

File tree

3 files changed

+56
-71
lines changed

3 files changed

+56
-71
lines changed

‎web/css/reskin-or/reskin.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
--legacy-100: #fd7d01;
3838
--turq-180: #0d664e;
3939
--screen-max: 1376px;
40-
--header-height: 80px;
40+
--header-height: 60px;
4141
--footer-height: 51px;
4242
}
4343

@@ -108,6 +108,10 @@ body {
108108
width: 24px;
109109
}
110110

111+
.webHeader__avatar {
112+
display: none;
113+
}
114+
111115
.webHeader__avatar a {
112116
font-family: 'Barlow Condensed', sans-serif;
113117
font-style: normal;
@@ -139,7 +143,7 @@ body {
139143
width: 100%;
140144
top: var(--header-height);
141145
background-color: var(--black-10);
142-
z-index: 999;
146+
z-index: 1;
143147

144148
font-family: Barlow, sans-serif;
145149
text-transform: uppercase;

‎web/includes/inc_footer_reskin.jsp

Lines changed: 7 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,18 @@
22
<%@ taglib prefix="or" uri="/or-tags" %>
33
<%@ taglib prefix="orfn" uri="/tags/or-functions" %>
44
<%@ page import="com.topcoder.onlinereview.component.webcommon.ApplicationServer" %>
5-
<script type="text/javascript">
6-
document.addEventListener("DOMContentLoaded", function() {
7-
const modals = document.querySelectorAll("[data-modal]");
8-
9-
modals.forEach(function (trigger) {
10-
trigger.addEventListener("click", function (event) {
11-
event.preventDefault();
12-
const modal = document.getElementById(trigger.dataset.modal);
13-
initValidate();
14-
modal.querySelector(".modal__body").scrollTop = 0;
15-
modal.classList.add("show");
16-
const exits = modal.querySelectorAll(".modal__exit");
17-
exits.forEach(function (exit) {
18-
exit.addEventListener("click", function (event) {
19-
event.preventDefault();
20-
document.getElementById("contactSupport").reset();
21-
clearAllError(fields);
22-
modal.classList.remove("show");
23-
});
24-
});
25-
});
26-
});
27-
});
28-
</script>
295

306
<script language="JavaScript" type="text/javascript" src="/js/or/validation.js"><!-- @ --></script>
317
<script language="JavaScript" type="text/javascript" src="/js/toasts.js"><!-- @ --></script>
328

33-
<footer class="webFooter">
34-
<div class="webFooter__inner">
35-
<div class="webFooter__links">
36-
<span>&copy; 2022 Topcoder</span>
37-
<a data-modal="supportModal">Support</a>
38-
<a data-modal="termsModal">Terms</a>
39-
<a data-modal="privacyPolicyModal">Privacy Policy</a>
40-
</div>
9+
<script type="text/javascript">
10+
tcUniNav('init', 'footerNav', {
11+
type: 'footer',
12+
});
13+
</script>
14+
15+
<div id="footerNav"></div>
4116

42-
<div class="webFooter__socials">
43-
<a href="https://www.facebook.com/topcoder" target="_blank" rel="noreferrer">
44-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM6.66667 6.66667H5.33333V8H6.66667V12H8.66667V8H9.88L10 6.66667H8.66667V6.11133C8.66667 5.79267 8.73067 5.66667 9.03867 5.66667H10V4H8.39733C7.19867 4 6.66667 4.528 6.66667 5.53867V6.66667Z" fill="#767676"></path></svg>
45-
</a>
46-
<a href="https://www.youtube.com/channel/UCFv29ANLT2FQmtvS9DRixNA" target="_blank" rel="noreferrer">
47-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.82 4.73466C9.48534 4.64399 6.51201 4.64466 5.17934 4.73466C3.73601 4.83333 3.56667 5.70533 3.55534 7.99999C3.56667 10.2907 3.73534 11.1667 5.18001 11.2653C6.51267 11.3553 9.486 11.356 10.8207 11.2653C12.264 11.1667 12.434 10.294 12.4453 7.99999C12.4333 5.70933 12.2647 4.83333 10.82 4.73466ZM6.66667 9.4813V6.51864L9.852 7.9973L6.66667 9.4813ZM8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0Z" fill="#767676"></path></svg>
48-
</a>
49-
<a href="https://www.linkedin.com/company/topcoder" target="_blank" rel="noreferrer">
50-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM6.66667 5.3333C6.66667 5.70463 6.36867 6.0053 6 6.0053C5.63133 6.0053 5.33333 5.7053 5.33333 5.3333C5.33333 4.96196 5.63133 4.6613 6 4.6613C6.36867 4.6613 6.66667 4.96263 6.66667 5.3333ZM6.66667 6.66667H5.33333V10.6667H6.66667V6.66667ZM8.66667 6.66669H7.33333V10.6667H8.66667V8.75935C8.66667 7.61135 10.0013 7.50535 10.0013 8.75935V10.6667H11.3333V8.42735C11.3333 6.23802 9.248 6.31802 8.66667 7.39535V6.66669Z" fill="#767676"></path></svg>
51-
</a>
52-
<a href="https://twitter.com/topcoder" target="_blank" rel="noreferrer">
53-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM12.3333 5.85203C12.0393 5.9827 11.7227 6.0707 11.3907 6.1107C11.73 5.90736 11.9893 5.58603 12.1127 5.2027C11.7953 5.3907 11.444 5.52736 11.07 5.6007C10.7713 5.28136 10.344 5.08203 9.87267 5.08203C8.81267 5.08203 8.034 6.0707 8.27333 7.09736C6.91 7.0287 5.7 6.37536 4.89067 5.3827C4.46067 6.12003 4.668 7.08536 5.39867 7.57403C5.13 7.56536 4.87733 7.49136 4.656 7.3687C4.638 8.1287 5.18333 8.84003 5.97267 8.9987C5.742 9.06137 5.48867 9.07603 5.23133 9.0267C5.44 9.6787 6.04733 10.1527 6.76467 10.166C6.07333 10.7074 5.20467 10.9494 4.33333 10.8467C5.06 11.3127 5.922 11.584 6.84867 11.584C9.89667 11.584 11.618 9.01003 11.514 6.70136C11.8353 6.4707 12.1133 6.18136 12.3333 5.85203Z" fill="#767676"></path></svg>
54-
</a>
55-
<a href="https://www.instagram.com/topcoder" target="_blank" rel="noreferrer">
56-
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.676 1.33333 14.6667 4.324 14.6667 8C14.6667 11.676 11.676 14.6667 8 14.6667C4.324 14.6667 1.33333 11.676 1.33333 8C1.33333 4.324 4.324 1.33333 8 1.33333ZM8 0C3.582 0 0 3.582 0 8C0 12.418 3.582 16 8 16C12.418 16 16 12.418 16 8C16 3.582 12.418 0 8 0ZM8 4.72135C9.068 4.72135 9.19466 4.72535 9.61666 4.74469C10.7013 4.79402 11.2067 5.30802 11.2567 6.38402C11.2753 6.80602 11.2793 6.93202 11.2793 8.00002C11.2793 9.06802 11.2753 9.19469 11.2567 9.61602C11.2067 10.6914 10.702 11.2067 9.61666 11.256C9.19466 11.2747 9.06866 11.2794 8 11.2794C6.932 11.2794 6.80533 11.2754 6.384 11.256C5.29733 11.206 4.794 10.69 4.744 9.61602C4.72533 9.19469 4.72066 9.06802 4.72066 8.00002C4.72066 6.93202 4.72533 6.80535 4.744 6.38402C4.79333 5.30735 5.29866 4.79335 6.384 4.74402C6.80533 4.72469 6.932 4.72135 8 4.72135ZM8 4C6.91333 4 6.778 4.00467 6.35067 4.02467C4.89733 4.09133 4.09067 4.89733 4.024 6.35067C4.00467 6.778 4 6.914 4 8C4 9.08667 4.00467 9.22267 4.024 9.64933C4.09067 11.102 4.89733 11.9093 6.35067 11.976C6.778 11.9953 6.91333 12 8 12C9.08667 12 9.22267 11.9953 9.65 11.976C11.1007 11.9093 11.9107 11.1033 11.976 9.64933C11.9953 9.22267 12 9.08667 12 8C12 6.914 11.9953 6.778 11.976 6.35067C11.9107 4.89933 11.1033 4.09067 9.65 4.02467C9.22267 4.00467 9.08667 4 8 4ZM8 5.94596C6.866 5.94596 5.946 6.8653 5.946 7.99996C5.946 9.13463 6.866 10.054 8 10.054C9.134 10.054 10.054 9.13463 10.054 7.99996C10.054 6.86596 9.134 5.94596 8 5.94596ZM8 9.33333C7.26333 9.33333 6.66667 8.73667 6.66667 8C6.66667 7.264 7.26333 6.66667 8 6.66667C8.736 6.66667 9.334 7.26333 9.334 8C9.334 8.73667 8.736 9.33333 8 9.33333ZM10.1347 5.38534C9.87 5.38534 9.65466 5.6 9.65466 5.86534C9.65466 6.13 9.86933 6.34534 10.1347 6.34534C10.4 6.34534 10.6153 6.13067 10.6153 5.86534C10.6153 5.6 10.4007 5.38534 10.1347 5.38534Z" fill="#767676"></path></svg>
57-
</a>
58-
</div>
59-
</div>
60-
</footer>
6117
<div class="loading-spinner">
6218
<div class="spinner"></div>
6319
</div>

‎web/includes/inc_header_reskin.jsp

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,50 @@
55
<%@ taglib prefix="or" uri="/or-tags" %>
66
<%@ taglib prefix="orfn" uri="/tags/or-functions" %>
77
<%@ taglib prefix="tc-webtag" uri="/tags/tc-webtags" %>
8+
89
<jsp:useBean id="sessionInfo" class="com.topcoder.onlinereview.component.webcommon.SessionInfo" scope="request" />
10+
<c:set var="userId" value="${orfn:getLoggedInUserId(pageContext.request)}"/>
11+
912
<script language="JavaScript" type="text/javascript" src="/js/tcscript.js"><!-- @ --></script>
1013

11-
<header class="webHeader">
12-
<div class="webHeader__inner">
13-
<div class="webHeader__logo">
14-
<a tabindex="-1" href="https://topcoder.com/home">
15-
<svg xmlns="http://www.w3.org/2000/svg"><path d="M41.3598 6.43783C37.8628 2.64752 33.1651 0.327393 28 0.327393C22.8349 0.327393 18.1372 2.64752 14.6402 6.43783C16.7252 6.82006 18.8493 7.3265 20.9764 7.9341C22.7938 8.4532 24.5036 9.01807 25.937 9.55388C26.5096 9.76795 27.9438 10.3927 28 10.4211C28.0562 10.3927 29.4904 9.76795 30.063 9.55388C31.4964 9.01807 33.2062 8.4532 35.0236 7.9341C37.1507 7.3265 39.2748 6.82006 41.3598 6.43783ZM8.83198 13.3831C8.069 15.3838 7.54812 17.4959 7.28463 19.6728C2.98383 19.2056 0 12.5212 0 10.9236C0 8.27456 3.13148 6.95003 6.40964 6.95003C8.30361 6.95003 10.2342 7.11194 12.119 7.37528C10.7874 9.15687 9.67395 11.1752 8.83198 13.3831ZM27.3253 11.5859C26.6506 11.5859 20.97 13.2585 17.0361 15.3939C16.159 15.87 15.3006 16.3765 14.4666 16.8686L14.4666 16.8687C12.3377 18.1249 10.368 19.2872 8.65205 19.6101C8.91402 17.5897 9.40587 15.6565 10.0957 13.8474C10.9754 11.5408 12.177 9.43597 13.6346 7.60968C21.0212 8.85963 27.3253 11.4603 27.3253 11.5859ZM46.9714 12.8832C47.8417 15.0298 48.4297 17.3129 48.7154 19.6728C53.0162 19.2057 56 12.5212 56 10.9236C56 8.27456 52.8685 6.95003 49.5904 6.95003C47.6963 6.95003 45.7656 7.11195 43.8808 7.37531C45.1106 9.02084 46.1548 10.869 46.9714 12.8832ZM38.9639 15.3939C35.03 13.2585 29.3494 11.5859 28.6747 11.5859C28.6747 11.4603 34.9788 8.85963 42.3654 7.60968C43.7224 9.30997 44.8576 11.2516 45.7176 13.3729C46.5058 15.317 47.0629 17.4119 47.3479 19.6101C45.632 19.2872 43.6623 18.1249 41.5334 16.8687L41.5334 16.8687L41.5333 16.8686C40.6994 16.3765 39.841 15.87 38.9639 15.3939Z"></path></svg>
16-
</a>
17-
</div>
18-
<div class="webHeader__nav">
19-
<div class="webHeader__navMenu webHeader__navMenu--active">
20-
Online Review
21-
</div>
22-
</div>
23-
<c:if test="${orfn:isUserLoggedIn(pageContext.request)}">
24-
<div class="webHeader__avatar">
25-
<tc-webtag:handle coderId="${orfn:getLoggedInUserId(pageContext.request)}" />
26-
</div>
27-
</c:if>
14+
<script type="text/javascript">
15+
var currEnv = '<%=ApplicationServer.ENVIRONMENT%>';
16+
var prodEnv = '<%=ApplicationServer.PROD%>';
17+
var scriptURL = '//uni-nav.topcoder-dev.com/v1/tc-universal-nav.js';
18+
19+
if (currEnv === prodEnv) {
20+
scriptURL = '//uni-nav.topcoder.com/v1/tc-universal-nav-1.js';
21+
}
22+
23+
!function(n,t,e,a,c,i,o){n['TcUnivNavConfig']=c,n[c]=n[c]||function(){
24+
(n[c].q=n[c].q??[]).push(arguments)},n[c].l=1*new Date();i=t.createElement(e),
25+
o=t.getElementsByTagName(e)[0];i.async=1;i.type="module";i.src=a;o.parentNode.insertBefore(i,o)
26+
}(window,document,"script",scriptURL,"tcUniNav");
27+
28+
var userId = `${userId}`;
29+
var handle = "${userHandle}";
30+
var initials = handle ? handle.substr(0, 2).toUpperCase() : '';
31+
32+
var user = {
33+
userId,
34+
initials,
35+
handle
36+
};
37+
38+
tcUniNav('init', 'headerNav', {
39+
type: 'tool',
40+
toolName: 'Online Review',
41+
user,
42+
signOut() {
43+
window.location.replace("http://<%=ApplicationServer.SERVER_NAME%>/tc?module=Logout")
44+
}
45+
});
46+
</script>
47+
48+
<c:if test="${orfn:isUserLoggedIn(pageContext.request)}">
49+
<div class="webHeader__avatar">
50+
<tc-webtag:handle coderId="${orfn:getLoggedInUserId(pageContext.request)}" />
2851
</div>
29-
</header>
52+
</c:if>
53+
54+
<div id="headerNav"></div>

0 commit comments

Comments
 (0)