Skip to content

Commit 3c51a3e

Browse files
ptrandevptrandev
committed
site redesign using bootstrap
1 parent 2c92bae commit 3c51a3e

10 files changed

+495
-260
lines changed

‎all-questions.html

+60-31
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,74 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
4-
<title>StackOverflow Lite</title>
5+
<title>StackOverflow Lite | All Questions</title>
56
<meta charset="utf-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
10+
crossorigin="anonymous">
11+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
12+
crossorigin="anonymous"></script>
13+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
14+
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
15+
crossorigin="anonymous"></script>
716
<link rel="stylesheet" href="css/main.css">
8-
<link rel="stylesheet" media="screen and (min-width: 850px)" href="css/bpmin850.css">
9-
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 700px)" href="css/small_screen.css">
10-
<link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 700px)" href="css/medium_screen.css">
11-
17+
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 700px)"
18+
href="css/small_screen.css">
19+
<link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 700px)"
20+
href="css/medium_screen.css">
1221
</head>
22+
1323
<body>
14-
<!-- header of the page-->
24+
<!-- header of the page-->
1525

16-
<header class="page-header">
17-
<div class="inner-header">
18-
<!--<img id="avatar" src="img/avatar.jpg" alt="profile photo">-->
19-
<img class="profile-pic" src="img/avatar.jpg" alt="profile photo">
20-
<div class="intro-summary">
21-
<ul class="menu-items-ul">
22-
<li role="menuitem"><a href="profile.html"><span class="menu-item">My Profile</span></a></li>
23-
<li><a href="ask-question.html"><span class="menu-item">Ask a question</span></a></li>
24-
<li><a href="my-questions.html"><span class="menu-item">My Questions</span></a></li>
25-
<li><a href="all-questions.html"><span class="menu-item">All Questions</span></a></li>
26-
<li><a onclick="authenticate()"><span class="menu-item" id="auth-text"></span></a></li>
27-
<li><a href="signup.html"><span class="menu-item" id="auth-signup-text">Register</span></a></li>
26+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
27+
<a class="navbar-brand font-weight-bold" href="/">StackOverflow Lite</a>
28+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
29+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
32+
33+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
34+
<ul class="navbar-nav ml-auto">
35+
<li class="nav-item">
36+
<a class="nav-link" href="/">Home</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="profile.html">My Profile</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="ask-question.html">Ask a Question</a>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link" href="my-questions.html">My Questions</a>
46+
</li>
47+
<li class="nav-item active">
48+
<a class="nav-link" href="all-questions.html">All Questions</a>
49+
</li>
50+
<li class="nav-item "></li>
51+
<a class="font-weight-bold nav-link" href="login.html">Login</a>
52+
</li>
53+
<li class="nav-item">
54+
<a class="font-weight-bold nav-link" href="signup.html">Sign Up</a>
55+
</li>
2856
</ul>
2957
</div>
30-
</div>
31-
</header>
32-
<hr class="hr">
33-
<div>
34-
<ul id="questions-list">
58+
</nav>
3559

36-
</ul>
37-
</div>
60+
<div class="container pt-3">
61+
<div class="col">
62+
<ul id="questions-list">
63+
</ul>
64+
</div>
65+
</div>
3866

39-
<script type="text/javascript" src="scripts/misc.js"></script>
40-
<script defer type="text/javascript" src="scripts/queries.js"></script>
41-
<script defer type="text/javascript" src="scripts/auth.js"></script>
42-
<script defer type="text/javascript" src="scripts/questions.js"></script>
43-
<script defer type="text/javascript" src="scripts/all-questions.js"></script>
67+
<script type="text/javascript" src="scripts/misc.js"></script>
68+
<script defer type="text/javascript" src="scripts/queries.js"></script>
69+
<script defer type="text/javascript" src="scripts/auth.js"></script>
70+
<script defer type="text/javascript" src="scripts/questions.js"></script>
71+
<script defer type="text/javascript" src="scripts/all-questions.js"></script>
4472
</body>
45-
</html>
73+
74+
</html>

‎ask-question.html

+74-36
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,88 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
4-
<title>StackOverflow Lite| Ask a question</title>
5+
<title>StackOverflow Lite| Ask a Question</title>
56
<meta charset="utf-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
9+
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
10+
crossorigin="anonymous">
11+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
12+
crossorigin="anonymous"></script>
13+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
14+
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
15+
crossorigin="anonymous"></script>
716
<link rel="stylesheet" href="css/main.css">
8-
<link rel="stylesheet" href="css/question.css">
9-
<link rel="stylesheet" media="screen and (min-width: 850px)" href="css/bpmin850.css">
10-
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 700px)" href="css/small_screen.css">
11-
<link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 700px)" href="css/medium_screen.css">
12-
17+
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 700px)"
18+
href="css/small_screen.css">
19+
<link rel="stylesheet" media="screen and (min-width: 500px) and (max-width: 700px)"
20+
href="css/medium_screen.css">
1321
</head>
22+
1423
<body>
15-
<!-- header of the page-->
24+
<!-- header of the page-->
25+
26+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
27+
<a class="navbar-brand font-weight-bold" href="/">StackOverflow Lite</a>
28+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
29+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
30+
<span class="navbar-toggler-icon"></span>
31+
</button>
1632

17-
<header class="page-header">
18-
<div class="inner-header">
19-
<!--<img id="avatar" src="img/avatar.jpg" alt="profile photo">-->
20-
<a href="https://devpool-client.herokuapp.com/"><img class="profile-pic" src="img/avatar.jpg" alt="profile photo"></a>
21-
<div class="intro-summary">
22-
<ul class="menu-items-ul">
23-
<li role="menuitem"><a href="profile.html"><span class="menu-item">My Profile</span></a></li>
24-
<li><a href="ask-question.html"><span class="menu-item">Ask a question</span></a></li>
25-
<li><a href="my-questions.html"><span class="menu-item">My Questions</span></a></li>
26-
<li><a href="all-questions.html"><span class="menu-item">All Questions</span></a></li>
27-
<li><a onclick="authenticate()"><span class="menu-item" id="auth-text"></span></a></li>
28-
<li><a href="signup.html"><span class="menu-item" id="auth-signup-text">Register</span></a></li>
33+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
34+
<ul class="navbar-nav ml-auto">
35+
<li class="nav-item">
36+
<a class="nav-link" href="/">Home</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="profile.html">My Profile</a>
40+
</li>
41+
<li class="nav-item active">
42+
<a class="nav-link" href="ask-question.html">Ask a Question</a>
43+
</li>
44+
<li class="nav-item">
45+
<a class="nav-link" href="my-questions.html">My Questions</a>
46+
</li>
47+
<li class="nav-item">
48+
<a class="nav-link" href="all-questions.html">All Questions</a>
49+
</li>
50+
<li class="nav-item"></li>
51+
<a class="font-weight-bold nav-link" href="login.html">Login</a>
52+
</li>
53+
<li class="nav-item">
54+
<a class="font-weight-bold nav-link" href="signup.html">Sign Up</a>
55+
</li>
2956
</ul>
3057
</div>
58+
</nav>
59+
60+
<div class="container pt-3">
61+
<div class="col">
62+
<div class="question-link">
63+
<h2>Ask a Question</h2>
64+
<form method="post" onsubmit="return false" class="ask-question-form">
65+
<div class="form-group">
66+
<label for="ask-question-title">Title</label>
67+
<input class="form-control" onchange="checkValidQuestion()" type="text" name="question_title"
68+
id="ask-question-title">
69+
</div>
70+
<div class="form-group">
71+
<label id="ask-question-body-label" for="question-body">Enter Your Question Here</label>
72+
<textarea class="form-control" onmouseout="checkValidQuestion()" onchange="checkValidQuestion()"
73+
name="question" id="question-body" aria-invalid="false"> </textarea>
74+
</div>
75+
<input type="hidden" name="user_id" id="featured-question-id">
76+
<button class="btn btn-primary" id="ask-question-submit-button" onclick="submitQuestion()">Submit</button>
77+
<span id="saving-question-text">Saving...</span>
78+
</form>
79+
</div>
80+
</div>
3181
</div>
32-
</header>
33-
<hr class="hr">
34-
<div class="question-link">
35-
<h3>Ask a question</h3>
36-
<form method="post" onsubmit="return false" class="ask-question-form">
37-
<label for="ask-question-title">Title</label><br>
38-
<input onchange="checkValidQuestion()" type="text" name="question_title" id="ask-question-title"><br>
39-
<label id="ask-question-body-label" for="question-body">Enter your Question here:</label><br>
40-
<textarea onmouseout="checkValidQuestion()" onchange="checkValidQuestion()" name="question" id="question-body" aria-invalid="false"> </textarea>
41-
<input type="hidden" name="user_id" id="featured-question-id"><br>
42-
<button id="ask-question-submit-button" onclick="submitQuestion()">Submit</button><span id="saving-question-text">saving...</span>
43-
</form>
44-
</div>
4582

46-
<script type="text/javascript" src="scripts/misc.js"></script>
47-
<script defer type="text/javascript" src="scripts/ask-question.js"></script>
48-
<script type="text/javascript" src="scripts/auth.js"></script>
83+
<script type="text/javascript" src="scripts/misc.js"></script>
84+
<script defer type="text/javascript" src="scripts/ask-question.js"></script>
85+
<script type="text/javascript" src="scripts/auth.js"></script>
4986
</body>
50-
</html>
87+
88+
</html>

‎css/bpmin850.css

-9
This file was deleted.

‎css/main.css

+15-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@import url('https://fonts.googleapis.com/css?family=Encode+Sans:400,700');
2+
3+
14
a:-webkit-any-link {
25
color: #000000;
36
cursor: grab;
@@ -11,11 +14,13 @@ body {
1114
height: 100%;
1215
}
1316

17+
h1, h2, h3, h4, h5, h6 {
18+
font-weight: 700;
19+
}
20+
1421

1522
body {
16-
font-size: 12px;
17-
font-family: monospace;
18-
color:inherit;
23+
font-family: 'Encode Sans', sans-serif;
1924
}
2025

2126
.featured-question-title{
@@ -98,12 +103,14 @@ footer {
98103
.menus{
99104
display: inline-flex; list-style: none; text-decoration: none;
100105
}
101-
.login-form{
102-
float: contour;
103-
text-align: center;
104-
border: 24px solid whitesmoke;
105-
border-radius: 10%;
106+
107+
/* Login/Registration Form */
108+
109+
.login-form {
110+
max-width: 420px;
111+
width: 100%;
106112
}
113+
107114
/*featured-skills heading*/
108115

109116
.featured-heading {

‎css/question.css

+1-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,10 @@
44
}
55
#ask-question-title{
66
margin-bottom: 2em;
7-
border-radius: 4px;
8-
border-style: ridge;
97
width: 20vw;
108
height: 2em
119
}
10+
1211
#question-body{
1312
width: 60vw;
1413
height: 10em;

0 commit comments

Comments
 (0)