Skip to content
This repository was archived by the owner on Jan 11, 2020. It is now read-only.

Commit d02a838

Browse files
thenullterminatorprateek76
thenullterminator
authored and
prateek76
committed
Fixes #320: Add a reading progress bar to the page (#352)
* final version * Modified height and disabled scrollbar * Removed embedded trailer * modal changes undone
1 parent e9d4249 commit d02a838

File tree

2 files changed

+178
-36
lines changed

2 files changed

+178
-36
lines changed

‎css/main.css‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,51 @@
44
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/blob/master/LICENSE)
55
*/
66

7+
body{
8+
overflow-x:hidden;
9+
}
10+
11+
12+
.overlapissue
13+
{
14+
15+
z-index:1;!important
16+
}
17+
18+
19+
20+
.header {
21+
position: fixed;
22+
top: 79px;
23+
24+
width: 100%;
25+
background-color: #f1f1f1;
26+
}
27+
28+
29+
30+
.progress-container {
31+
width: 100%;
32+
height: 5px;
33+
background: #F7F8F9;
34+
}
35+
36+
.progress-bar {
37+
height: 5px;
38+
background:rgb(255, 102, 0);
39+
width: 0%;
40+
}
41+
42+
43+
744
body {
845
margin: 0;
946
padding: 0;
1047
}
1148

1249
#mainNav {
1350
padding: 1em 0;
51+
1452
}
1553

1654
.header-overlay {
@@ -42,11 +80,6 @@
4280
background: -webkit-linear-gradient(left, rgb(247, 112, 55) 0%, rgb(250, 168, 68) 100%);
4381
}
4482

45-
.nav-link:hover {
46-
color: #3366BB !important;
47-
font-weight: bold;
48-
49-
}
5083
.countdownContainer{
5184
position: relative;
5285
padding: 10px;
@@ -359,6 +392,7 @@ input:checked + .slider:before {
359392

360393
.pagination .active:hover{
361394
color: #fff;
395+
z-index:-1;
362396
}
363397

364398

‎index.html‎

Lines changed: 139 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,25 +28,53 @@
2828
<!-- Font for countdown -->
2929
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
3030

31+
32+
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
33+
<link rel="stylesheet" href="css/progress_bar.css">
34+
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
35+
3136
<style type="text/css">
3237
.modal-content iframe{
3338
margin: 0 auto;
3439
display: block;
3540
}
41+
42+
body
43+
{
44+
font-family: 'Ubuntu', sans-serif;
45+
font-weight:5px;
46+
}
47+
48+
49+
50+
51+
3652
</style>
3753

3854
</head>
3955

4056
<body class="loading">
57+
58+
59+
60+
61+
62+
4163
<a class=" ribbn-ref" href="https://github.com/opencodeiiita/Opencode-Collaborative-19" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
4264
<button onclick="topFunction()" id="myBtn" title="Go to top" class="dark-scrl-btn"><i class="fas fa-arrow-up"></i></button>
4365
<!-- Navigation -->
44-
<nav class="navbar navbar-expand-lg navbar-light bg-light a-nav navbar-fixed" id="mainNav">
66+
67+
68+
69+
70+
<nav class="navbar navbar-expand-lg navbar-light bg-light a-nav navbar-fixed" id="mainNav" >
4571
<div class="container">
72+
4673
<a class="navbar-brand d-flex align-items-center" href="index.html">
4774
<!-- OpenCode Logo added in navbar -->
4875
<img src="./assets/img/OClogo.jpg" width="40" height="37" class="d-inline-block align-top " style="padding-right:5px">Opencode 2019
4976
</a>
77+
5078
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
5179
<span class="navbar-toggler-icon"></span>
5280
</button>
@@ -67,7 +95,7 @@
6795
<li class="nav-item active">
6896
<a class="nav-link" data-toggle="modal" data-target="#myModal">Trailer</a>
6997
</li>
70-
98+
7199

72100

73101
<li class="nav-item dark-mode">
@@ -89,13 +117,26 @@
89117
</ul>
90118
</div>
91119
</div>
120+
<div class="header animated-1s bounceInDown" style="z-index:-1;!important" >
121+
<div class="progress-container">
122+
<div class="progress-bar" id="myBar"></div>
123+
</div>
124+
</div>
92125
</nav>
93126

127+
128+
129+
130+
131+
132+
133+
134+
94135
<div class="jumbotron jumbotron-fluid text-center header-overlay">
95136
<h1 class="display-4 typing-anim-ref"><b>Hello, world!</b></h1>
96137
<h4 class="a-landing-sub-text">Welcome to OpenCode'19</h4>
97138
<a href="#participants"><button class="header-btn mt-5 a-btn">Get Started</button></a>
98-
139+
99140
<div class="countdownContainer display-4 a-landing-header-text">
100141
<div class="values">OpenCode Countdown</div>
101142
<div class="info" style="font-family: 'Orbitron'">
@@ -115,44 +156,80 @@ <h4 class="a-landing-sub-text">Welcome to OpenCode'19</h4>
115156
</div>
116157
</div>
117158
</div>
159+
<!--
160+
<h2 style="position:relative;top:2px;left:400px;">Overview</h2>
161+
162+
<div style="border-top:2px gray solid;width:1098px;margin:0 auto;"></div>
163+
118164
165+
166+
<div style="margin:0 auto;background-color:rgb(220, 225, 229);width:1098px;height:585px;position:relative;top:40px;border-radius:20px">
167+
168+
<iframe style="padding-left:45px;padding-top:10px;border-radius:10px"width="1050px" height="900px" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fopencodeiiita%2Fvideos%2F2301796573173119%2F&show_text=0&width=1050"
169+
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
170+
</div>
171+
-->
172+
173+
174+
175+
176+
177+
<div style="position:relative;top:60px">
119178
<div class="container">
120179

180+
181+
182+
183+
184+
121185
<!-- Participants -->
122186
<div class="row">
123187
<div class="col-lg-12">
124188
<h2 class="my-4">Participants</h2>
189+
<div style="border-top:2px gray solid;width:1098px;margin:0 auto;position:relative;top:-20px"></div>
125190
</div>
126191
</div>
127192
<div class="row participants-card" id="participants">
128193
<!-- Feeding data from json -->
129194
</div>
130-
195+
196+
197+
198+
199+
200+
131201
<!-- Pagination -->
132-
<div class="d-flex justify-content-center">
133-
<nav aria-label="Page navigation example">
134-
<ul class="pagination pagination-participants text-primary">
135-
<li class="page-item prev" id="pagination">
136-
<a class="page-link" aria-label="Previous">
137-
<span aria-hidden="true">&laquo;</span>
138-
<span class="sr-only">Previous</span>
139-
</a>
140-
</li>
141-
142-
<li class="page-item next">
143-
<a class="page-link " aria-label="Next">
144-
<span aria-hidden="true">&raquo;</span>
145-
<span class="sr-only">Next</span>
202+
<div class="d-flex justify-content-center overlapissue" >
203+
<nav aria-label="Page navigation example" style="float:left;margin:0 auto;z-index:0">
204+
<ul class="pagination pagination-participants text-primary">
205+
<li class="page-item prev" id="pagination">
206+
<a class="page-link" aria-label="Previous">
207+
<span aria-hidden="true">&laquo;</span>
208+
<span class="sr-only">Previous</span>
146209
</a>
147-
</li>
148-
</ul>
149-
</nav>
150-
</div>
210+
</li>
211+
212+
<li class="page-item next">
213+
<a class="page-link " aria-label="Next">
214+
<span aria-hidden="true">&raquo;</span>
215+
<span class="sr-only">Next</span>
216+
</a>
217+
</li>
218+
</ul>
219+
</nav>
220+
</div>
221+
222+
223+
224+
225+
226+
151227

152228
<!-- Mentors -->
153229
<div class="row">
154230
<div class="col-lg-12">
155231
<h2 class="my-4">Mentors</h2>
232+
<div style="border-top:2px gray solid;width:1098px;margin:0 auto;position:relative;top:-20px"></div>
156233
</div>
157234
</div>
158235
<div class="row" id="mentors">
@@ -163,6 +240,7 @@ <h2 class="my-4">Mentors</h2>
163240
<div class="row">
164241
<div class="col-lg-12">
165242
<h2 class="my-4">Projects</h2>
243+
<div style="border-top:2px gray solid;width:1098px;margin:0 auto;position:relative;top:-20px"></div>
166244
</div>
167245
</div>
168246

@@ -174,39 +252,42 @@ <h2 class="my-4">Projects</h2>
174252

175253

176254

177-
255+
178256
<div id="myModal" class="modal fade" >
179257
<div class="modal-dialog" >
180258
<div class="modal-content" style="height:0px; position:relative; top:100px;">
181259
<div class="modal-body" >
182260
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fopencodeiiita%2Fvideos%2F2301796573173119%2F&show_text=0&width=560"
183261
width="560" height="315" style="position:relative; left: -70px; top: -70px;border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
184262
</div>
185-
<!-- <div class="modal-footer" height="0px">
263+
<!-- <div class="modal-footer" height="0px">
186264
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
187265
</div> -->
188266
</div>
189267
</div>
190268
</div>
269+
270+
271+
191272

192273

193274

194275

195276

196277

197278
<!-- Pagination -->
198-
<div class="d-flex justify-content-center">
199-
<nav aria-label="Page navigation example">
200-
<ul class="pagination pagination-project text-primary">
279+
<div class="d-flex justify-content-center overlapissue" >
280+
<nav aria-label="Page navigation example" style="float:left;margin:0 auto;z-index:0">
281+
<ul class="pagination pagination-project text-primary" >
201282
<li class="page-item prev-project" id="pagination-project">
202-
<a class="page-link" aria-label="Previous">
283+
<a class="page-link" aria-label="Previous">
203284
<span aria-hidden="true">&laquo;</span>
204285
<span class="sr-only">Previous</span>
205286
</a>
206287
</li>
207288

208289
<li class="page-item next-project">
209-
<a class="page-link" aria-label="Next">
290+
<a class="page-link" aria-label="Next">
210291
<span aria-hidden="true">&raquo;</span>
211292
<span class="sr-only">Next</span>
212293
</a>
@@ -231,6 +312,11 @@ <h2 class="my-4">Participant games</h2>
231312

232313

233314

315+
316+
317+
318+
319+
234320
<!---------------------------- list all issues ---------------------------->
235321

236322

@@ -785,7 +871,8 @@ <h2 class="my-4">Participant games</h2>
785871

786872
<!----------------------------All buttons here---------------------------->
787873
<section class="container issue-btn-section py-5">
788-
<h1 class="text-left issue-title" >ISSUES</h1>
874+
<h2 class="my-4">Issues</h2>
875+
<div style="border-top:2px gray solid;width:1098px;margin:0 auto;position:relative;top:-20px"></div>
789876
<div class="row row-c pt-3">
790877
<div class="col-md-4 col-sm-6 center-c">
791878
<button onclick="openNav1()" type="button" class="btn btn-secondary">HackerSkills</button>
@@ -927,9 +1014,19 @@ <h1 class="text-left issue-title" >ISSUES</h1>
9271014
<div class="spinner-wrapper">
9281015
<div class="spinner"></div>
9291016
</div>
930-
1017+
</div>
1018+
</div>
1019+
1020+
1021+
1022+
1023+
9311024
</body>
9321025

1026+
1027+
1028+
1029+
9331030
<!-- Bootstrap core JavaScript -->
9341031
<script src="vendor/jquery/jquery.min.js"></script>
9351032
<script src="js/issue-fetch.js"></script>
@@ -938,12 +1035,23 @@ <h1 class="text-left issue-title" >ISSUES</h1>
9381035

9391036
<!-- Preloader -->
9401037
<script>
1038+
9411039
$(document).ready(function() {
9421040
setTimeout(() => {
9431041
$(".spinner-wrapper").css({"display":"none"});
9441042
$('body').removeClass('loading');
9451043
}, 4000);
9461044
});
1045+
1046+
// When the user scrolls the page, execute myFunction
1047+
window.onscroll = function() {myFunction()};
1048+
1049+
function myFunction() {
1050+
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
1051+
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
1052+
var scrolled = (winScroll / height) * 100;
1053+
document.getElementById("myBar").style.width = scrolled + "%";
1054+
}
9471055
</script>
9481056

9491057
</html>

0 commit comments

Comments
 (0)