Skip to content

Commit 27a93b8

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #252 from topcoder-platform/reskin-or-nav
fix: header footer not sticky
2 parents 762c053 + 321b74b commit 27a93b8

File tree

4 files changed

+72
-58
lines changed

4 files changed

+72
-58
lines changed

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

Lines changed: 10 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -138,12 +138,15 @@ body {
138138
text-decoration: none !important;
139139
}
140140

141+
.mainFooter {
142+
position: sticky;
143+
bottom: calc(-1 * var(--footer-height));
144+
z-index: 99;
145+
}
146+
141147
.mainTabs {
142148
width: 100%;
143149
background-color: var(--black-10);
144-
position: fixed;
145-
top: var(--header-height);
146-
z-index: 998;
147150
font-family: Barlow, sans-serif;
148151
text-transform: uppercase;
149152
font-weight: 600;
@@ -182,20 +185,18 @@ body {
182185

183186
.content {
184187
margin: 0;
185-
padding-bottom: 90px;
186-
padding-top: 116px;
187-
min-height: 100vh;
188+
min-height: calc(100vh - var(--header-height) - var(--footer-height) - 56px);
188189
}
189190

190191
.content--manageProject,
191192
.content--projectDetails {
192-
padding-bottom: 200px;
193+
/* padding-bottom: 200px; */
193194
}
194195

195196
.content--viewSpec,
196197
.content--viewApproval,
197198
.content--projectPayment {
198-
padding-bottom: 135px;
199+
/* padding-bottom: 135px; */
199200
}
200201

201202
.content__inner {
@@ -829,11 +830,8 @@ table.scorecard td.reviewerResp input {
829830
}
830831

831832
.cta {
832-
position: fixed;
833833
width: 100%;
834834
background-color: #fff;
835-
bottom: var(--footer-height);
836-
z-index: 99;
837835
box-shadow: 0 0 16px 16px rgb(42 42 42 / 10%);
838836
}
839837

@@ -2572,11 +2570,6 @@ td.resourcesTable__empty {
25722570
height: 74px;
25732571
}
25742572

2575-
.viewManageButtom {
2576-
position: absolute;
2577-
right: 0;
2578-
}
2579-
25802573
.editProject__checkbox .when {
25812574
margin-left: 8px;
25822575
order: 1;
@@ -2649,18 +2642,11 @@ td.resourcesTable__empty {
26492642
}
26502643

26512644
#headerNav {
2652-
position: fixed;
26532645
width: 100%;
2654-
z-index: 999;
2655-
top: 0;
26562646
}
26572647

26582648
#footerNav {
2659-
position: fixed;
26602649
width: 100%;
2661-
z-index: 99;
2662-
bottom: 0;
2663-
left: 0;
26642650
}
26652651

26662652
.checkPoint__chevron {
@@ -2758,9 +2744,6 @@ td.resourcesTable__empty {
27582744
height: 35px;
27592745
}
27602746

2761-
.ctaOpen {
2762-
bottom: 386px !important;
2763-
}
27642747
.approvalRadioBtn {
27652748
display: flex;
27662749
align-items: flex-start;
@@ -2781,4 +2764,4 @@ td.resourcesTable__empty {
27812764

27822765
.lateness {
27832766
width: 110px;
2784-
}
2767+
}

‎web/jsp/viewProjectDetails.jsp

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -171,39 +171,69 @@
171171
</div>
172172
</div>
173173
174-
<div class="cta">
175-
<div class="cta__inner">
176-
<c:if test="${isAllowedToViewPayments}">
177-
<a href="ViewProjectPayments?pid=${project.id}"><or:text key='viewProjectDetails.btnPayments.alt' /></a>
178-
</c:if>
179-
<c:if test="${requestScope.isAllowedToManageProjects}">
180-
<a href="ViewManagementConsole?pid=${project.id}"><or:text key='viewProjectDetails.btnManagementConsoleLink.alt' /></a>
181-
</c:if>
182-
<c:if test="${isAllowedToEditProjects}">
183-
<a href="EditProjectLinks?pid=${project.id}"><or:text key='viewProjectDetails.btnEditLink.alt' /></a>
184-
</c:if>
185-
<c:if test="${isAllowedToEditProjects}">
186-
<a href="EditProject?pid=${project.id}"><or:text key='viewProjectDetails.btnEdit.alt' /></a>
187-
</c:if>
174+
<div class="mainFooter">
175+
<div class="cta">
176+
<div class="cta__inner">
177+
<c:if test="${isAllowedToViewPayments}">
178+
<a href="ViewProjectPayments?pid=${project.id}"><or:text key='viewProjectDetails.btnPayments.alt' /></a>
179+
</c:if>
180+
<c:if test="${requestScope.isAllowedToManageProjects}">
181+
<a href="ViewManagementConsole?pid=${project.id}"><or:text key='viewProjectDetails.btnManagementConsoleLink.alt' /></a>
182+
</c:if>
183+
<c:if test="${isAllowedToEditProjects}">
184+
<a href="EditProjectLinks?pid=${project.id}"><or:text key='viewProjectDetails.btnEditLink.alt' /></a>
185+
</c:if>
186+
<c:if test="${isAllowedToEditProjects}">
187+
<a href="EditProject?pid=${project.id}"><or:text key='viewProjectDetails.btnEdit.alt' /></a>
188+
</c:if>
189+
</div>
188190
</div>
191+
<jsp:include page="/includes/inc_footer_reskin.jsp" />
189192
</div>
190193
191-
<jsp:include page="/includes/inc_footer_reskin.jsp" />
192194
<script type="text/javascript">
193-
window.onload = () => {
194-
var footerDetails = document.getElementById("footerNav").childNodes[0];
195-
if (document.getElementById("footerNav")) {
196-
var footerHeight = document.getElementById("footerNav").clientHeight;
197-
}
198-
var cta = document.querySelector(".cta")
199-
if (footerHeight) {
200-
cta.style.bottom = (footerHeight) + 'px';
201-
}
202-
footerDetails.children[0].addEventListener("click", function(){
203-
if (cta) {
204-
cta.classList.toggle("ctaOpen")
195+
window.onload = function () {
196+
var root = document.querySelector(':root')
197+
198+
var footerMain = document.getElementsByClassName('mainFooter')[0];
199+
var footerNav = document.querySelector("#footerNav");
200+
201+
var intervalId = setInterval(function () {
202+
var footerDetails = footerNav.childNodes[0];
203+
if (footerDetails) {
204+
var toggleBar = footerDetails.childNodes[0];
205+
toggleBar.addEventListener("click", function() {
206+
root.style.setProperty('--footer-height', footerNav.clientHeight + 'px');
207+
})
208+
clearInterval(intervalId);
205209
}
206-
})
210+
}, 1000)
211+
}
212+
213+
window.onresize = function () {
214+
var root = document.querySelector(':root')
215+
216+
var footerMain = document.getElementsByClassName('mainFooter')[0];
217+
var footerNav = document.getElementById("footerNav");
218+
var footerDetails = footerNav.childNodes[0];
219+
220+
root.style.setProperty('--footer-height', footerNav.clientHeight + 'px');
221+
}
222+
223+
window.onscroll = function () {
224+
var html = document.querySelector('html')
225+
226+
var cta = document.querySelector('.cta')
227+
var footer = document.querySelector('#footerNav');
228+
229+
var rect = footer.getBoundingClientRect();
230+
var footerVisible = rect.top < (window.innerHeight || document.documentElement.clientHeight)
231+
232+
if (footerVisible) {
233+
cta.style.boxShadow = 'none';
234+
} else {
235+
cta.style.boxShadow = '';
236+
}
207237
}
208238
209239
</script>

‎web/jsp/viewProjectManagementConsole.jsp

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@
284284
</td>
285285
</tr>
286286
</table>
287-
<div class="saveChanges__button viewManageButtom">
287+
<div class="saveChanges__button">
288288
<button id="saveChanges" form="ManageProject" value="Submit" class="saveChanges__save"><or:text key='btnSaveChanges.alt' /></button>
289289
<a href="<or:url value='/actions/ViewProjectDetails?pid=${project.id}' />" class="saveChanges__cancel"><or:text key='btnCancel.alt' /></a>
290290
</div>
@@ -874,7 +874,7 @@
874874
</tbody>
875875
</table>
876876
</div>
877-
<div class="saveChanges__button viewManageButtom">
877+
<div class="saveChanges__button">
878878
<button id="reviewSaveBtn" form="SaveReviewPayments" value="Submit" class="saveChanges__save"><or:text key='btnSaveChanges.alt' /></button>
879879
<a href="<or:url value='/actions/ViewProjectDetails?pid=${project.id}' />" class="saveChanges__cancel"><or:text key='btnCancel.alt' /></a>
880880
</div>
@@ -887,6 +887,7 @@
887887
</div><!-- //tabconentcontainer -->
888888
</div>
889889
</div>
890+
</div>
890891
</div>
891892
<jsp:include page="/includes/inc_footer_reskin.jsp" />
892893
</body>

‎web/jsp/viewProjectPayments.jsp

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@
143143
</div>
144144
</div>
145145
</div>
146-
<div align="right" style="margin-top: 56px;">
146+
<div align="right" style="margin-top: 56px; margin-bottom: 32px;">
147147
<c:if test="${isAllowedToEditPayments}">
148148
<a class="editPaymentBtn" href="EditProjectPayments?pid=${project.id}"><or:text key='projectPayments.btnEditPayments.alt' /></a>
149149
</c:if>

0 commit comments

Comments
 (0)