Skip to content

Commit 906a779

Browse files
HarryReinHarryRein
authored
Merge pull request #6 from edx/HarryRein/bootstrap-v4
Updating bootstrap variables to v4.
2 parents 8b1f901 + a2510c1 commit 906a779

File tree

12 files changed

+904
-1150
lines changed

12 files changed

+904
-1150
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "edx-bootstrap",
3-
"version": "0.1.7",
3+
"version": "0.2.0",
44
"description": "The Bootstrap theme for Open edX",
55
"license": "Apache-2.0",
66
"repository": {
@@ -14,7 +14,7 @@
1414
],
1515
"homepage": "https://github.com/andy-armstrong/edx-bootstrap#readme",
1616
"dependencies": {
17-
"bootstrap": "4.0.0-alpha.6"
17+
"bootstrap": "v4.0.0-beta"
1818
},
1919
"devDependencies": {
2020
"aws-cli": "^0.0.1",

‎samples/edx/course.html‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@
55
<meta charset="UTF-8">
66
<title>EdX Sample Course Page</title>
77
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
8-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
10-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
8+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
10+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
1111
</head>
12-
1312
<body>
1413

1514
<div class="container-fluid">
@@ -25,7 +24,7 @@
2524
</li>
2625
</ul>
2726
<div class="dropdown">
28-
<a class="btn btn-block btn-outline-primary dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Username</a>
27+
<a class="dropdown-toggle" href="#" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Username</a>
2928
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
3029
<a class="dropdown-item" href="#">Dashboard</a>
3130
<a class="dropdown-item" href="#">Profile</a>
@@ -63,19 +62,19 @@
6362

6463
<ul id="lesson-nav" class="nav nav-pills flex-column flex-sm-row justify-content-sm-between mb-3">
6564
<li class="nav-item"><a class="nav-link" href="#">Prev</a></li>
66-
<li class="nav-item w-100 text-md-center"><a class="nav-link" href="#">Introduction</a></li>
67-
<li class="nav-item w-100 text-md-center"><a class="nav-link" href="#">Your Area of Interest</a></li>
68-
<li class="nav-item w-100 text-md-center"><a class="nav-link active" href="#">Getting to Know You</a></li>
65+
<li class="nav-item text-md-center"><a class="nav-link" href="#">Introduction</a></li>
66+
<li class="nav-item text-md-center"><a class="nav-link" href="#">Your Area of Interest</a></li>
67+
<li class="nav-item text-md-center"><a class="nav-link active" href="#">Getting to Know You</a></li>
6968
<li class="nav-item"><a class="nav-link" href="#">Next</a></li>
7069
</ul>
7170

7271

7372

7473
<div class="mb-4">
7574
<h1>Sample Course Page</h1>
76-
<button type="button" class="btn btn-secondary" data-toggle="button" aria-pressed="false" autocomplete="off">Bookmark this page</button>
75+
<button type="button" class="btn btn-outline-secondary" data-toggle="button" aria-pressed="false" autocomplete="off">Bookmark this page</button>
7776
</div>
78-
<div class="mb-4">
77+
<div>
7978
<p>Welcome to Vocal Recording Technology! We are so excited that you have chosen to take this course and we hope your learning experience will empower you to achieve your goals. As a first step, we’d love to get to know you. Please take a few moments to tell us a little bit about yourself by clicking <a href="#">here</a>.</p>
8079
<p>Happy learning,<br/>The BerkleeX Team</p>
8180
</div>
@@ -88,8 +87,8 @@ <h1>Sample Course Page</h1>
8887
</div> -->
8988

9089
<div class="btn-group mt-4" role="group" aria-label="Pagination">
91-
<a class="btn btn-secondary" href="#">Previous</a>
92-
<a class="btn btn-secondary" href="#">Next</a>
90+
<a class="btn btn-outline-secondary" href="#">Previous</a>
91+
<a class="btn btn-outline-secondary" href="#">Next</a>
9392
</div>
9493
</div>
9594
</body>

‎samples/edx/dashboard.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
<meta charset="UTF-8">
66
<title>EdX Sample Dashboard</title>
77
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
8-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
10-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
8+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
10+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></head>
1111
</head>
1212

1313
<body>
1414

1515
<div class="container-fluid">
1616
<div class="row">
17-
<div class="col-8">
17+
<div class="col-10">
1818

1919
<h1>Dashboard</h1>
2020
<p>Browse recently launched courses and see what's new in your favorite subjects.</p>
2121

22-
<nav class="navbar navbar-dark bg-faded mb-3">
22+
<nav class="navbar mb-2">
2323
<ul class="nav nav-pills">
2424
<li class="nav-item"><a class="nav-link active" href="#">Courses</a></li>
2525
<li class="nav-item"><a class="nav-link disabled" href="#">Programs</a></li>
@@ -28,9 +28,9 @@ <h1>Dashboard</h1>
2828

2929
<h2 class="mb-4">Courses</h2>
3030

31-
<h3>In-Progress</h3>
31+
<h4>In-Progress</h4>
3232
<div class="mb-5">
33-
<div class="card mb-2">
33+
<div class="card mb-2 p-4">
3434
<div class="card-block">
3535
<h4 class="card-title">
3636
Course Title
@@ -45,7 +45,7 @@ <h6 class="card-subtitle text-muted">INSTx</h6>
4545
</div>
4646
</div>
4747

48-
<div class="card mb-2">
48+
<div class="card mb-2 p-4">
4949
<div class="card-block">
5050
<h4 class="card-title">Course Title</h4>
5151
<h6 class="card-subtitle text-muted">INSTx</h6>
@@ -59,9 +59,9 @@ <h6 class="card-subtitle text-muted">INSTx</h6>
5959
</div>
6060
</div>
6161

62-
<h3>Completed</h3>
62+
<h4>Completed</h4>
6363
<div class="mb-5">
64-
<div class="card card-outline-success mb-2">
64+
<div class="card card-outline-success mb-2 p-4">
6565
<div class="card-block">
6666
<div class="d-flex justify-content-end">
6767
<div>
@@ -71,7 +71,7 @@ <h4 class="card-title">
7171
</h4>
7272
<h6 class="card-subtitle text-muted">INSTx</h6>
7373
</div>
74-
<img class="ml-auto" src="img/verified.png" width="64px" height="47px"/>
74+
<img class="ml-auto" src="images/verified.png" width="89px" height="68px"/>
7575
</div>
7676
<div class="mt-3">
7777
<a href="#" class="card-link text-success">Download Certificate</a>
@@ -80,15 +80,15 @@ <h6 class="card-subtitle text-muted">INSTx</h6>
8080
</div>
8181
</div>
8282

83-
<div id="accordion" role="tablist" aria-multiselectable="true">
83+
<div class="mb-4" id="accordion" role="tablist" aria-multiselectable="true">
8484
<div class="clearfix">
8585
<h3 class="float-left">Hidden <span class="badge badge-pill badge-default">1</span></h3>
8686
<button class="btn btn-link float-left ml-2" type="button" data-toggle="collapse" data-target="#hiddenCourses" aria-expanded="false" aria-controls="hiddenCourses">Expand/Collapse</button>
8787
</div>
8888

8989
<div class="collapse" id="hiddenCourses">
9090

91-
<div class="card mb-2">
91+
<div class="card mb-2 p-4">
9292
<div class="card-block">
9393
<h4 class="card-title">Course Title</h4>
9494
<h6 class="card-subtitle text-muted">INSTx</h6>
@@ -105,7 +105,7 @@ <h6 class="card-subtitle text-muted">INSTx</h6>
105105

106106
</div>
107107

108-
<div class="col-4"></div>
108+
<div class="col-2"></div>
109109
</div>
110110
</div>
111111
</div>

‎samples/edx/register.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta charset="UTF-8">
66
<title>EdX Sample Registration Page</title>
77
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
8-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
10-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
8+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
10+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></head>
1111
</head>
1212

1313
<body>

‎samples/edx/search.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
<meta charset="UTF-8">
66
<title>EdX Sample Search Page</title>
77
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
8-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
10-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
8+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
10+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></head>
1111
</head>
1212

1313
<body>
1414

1515
<div class="container">
1616

17-
<div class="d-flex justify-content-between mb-5">
17+
<div class="d-flex justify-content-between mt-4 mb-5">
1818
<h1 class="h2">Viewing 1000 results matching</h1>
1919
<form class="form-inline">
2020
<label for="search">Search:</label>
@@ -82,7 +82,7 @@ <h3 class="h5 mb-2 mt-4">Subject</h3>
8282
<div class="card-header border-0">
8383
<h6 class="mb-0">Verified</h6>
8484
</div>
85-
<div class="card-block">
85+
<div class="card-block p-3">
8686
<h6 class="card-subtitle mb-1 text-muted">UQx</h6>
8787
<h4 class="card-title">IELTS Academic Test Preparation</h4>
8888
<p class="card-text">Prepare for the IELTS Academic tests in this comprehensive, self-paced course covering listening, speaking, reading and writing.</p>
@@ -95,7 +95,7 @@ <h4 class="card-title">IELTS Academic Test Preparation</h4>
9595
<div class="card-header border-0">
9696
<h6 class="mb-0">MicroMasters Program</h6>
9797
</div>
98-
<div class="card-block">
98+
<div class="card-block p-3">
9999
<h6 class="card-subtitle mb-1 text-muted">RITx</h6>
100100
<h4 class="card-title">Cybersecurity</h4>
101101
<p class="card-text">Launch your career in a high demand industry that projects 2 million new jobs annually by earning a Cybersecurity MicroMasters Credential from RIT.</p>
@@ -107,7 +107,7 @@ <h4 class="card-title">Cybersecurity</h4>
107107
<div class="card-header border-0">
108108
<h6 class="mb-0">Professional Education</h6>
109109
</div>
110-
<div class="card-block">
110+
<div class="card-block p-3">
111111
<h6 class="card-subtitle mb-1 text-muted">NYIF</h6>
112112
<h4 class="card-title">Measuring Risk: Equity, Fixed Income, Derivatives and FX</h4>
113113
<p class="card-text">Understand how to describe the various approaches utilized for determining value at risk.</p>

‎samples/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
<meta charset="UTF-8">
55
<title>EdX Bootstrap Samples</title>
66
<link rel="stylesheet" href="css/sample.css" type="text/css" media="all" />
7-
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
8-
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
9-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
7+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
9+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script></head>
1010
</head>
11+
1112
<body>
1213
<h1>EdX Bootstrap Samples</h1>
1314

0 commit comments

Comments
 (0)