Skip to content

Commit

Permalink
Merge pull request #288 from github/styling-refresh
Browse files Browse the repository at this point in the history 
Update style, tidy custom components
  • Loading branch information
Jordan McCullough committed Dec 29, 2014
2 parents 0712187 + a1772f5 commit a4616e6
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 108 deletions.
23 changes: 7 additions & 16 deletions _javascript/curriculum.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,8 @@ $(function(){
{
url: "https://api.github.com/users/"+username,
success: function(data, textStatus, jqXHR){

$("<span/>",
{
class: "teacher-name",
text: data.name
}).appendTo("#teacher-name");

$("#teacher-name").html(data.name);

$("<span/>",
{
text: data.login
Expand Down Expand Up @@ -143,24 +138,18 @@ $(function(){

//Time toggle keybinding
$(".timer-label").click(function(){
$(".timer-wrapper").toggleClass("fade-out");
$(".timer-amount").show();
resetTimer();
});
$(".timer-exit").click(function(){
$(".timer-wrapper").toggleClass("fade-out");
$("#timer-check").removeAttr("checked");
// $(".timer-amount").();
resetTimer();
});
$("#start-stop").click(function(){

var timeLeftDisplay = $("#time-left")
var min = $("#minutes").attr("value");
var duration = min*60;

resetTimer();

$(".timer-amount").hide();
$(".time-amount").hide();
$("#start-stop").hide();

timeLeftInterval = setInterval(function(){
timeLeftDisplay.html( Math.floor((duration)/60) + ":" + (duration%60 < 10 ? "0"+duration%60:duration%60) );
Expand All @@ -173,6 +162,8 @@ $(function(){
});
function resetTimer(){
clearInterval(timeLeftInterval);
$("#start-stop").show();
$(".time-amount").show();
$("#time-left").html("");
}

Expand Down
34 changes: 19 additions & 15 deletions _layouts/curriculum.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
---

<!-- Modal -->
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade" id="help" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
<h4 class="modal-title" id="timerModalLabel">Help / Shortcuts</h4>
</div>
<div class="modal-body">
<table>
Expand All @@ -26,7 +26,7 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
<td>Hide/show table of contents</td>
</tr>
</table>

<table>
<tr>
<th>URL Command</th>
Expand All @@ -48,16 +48,19 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
</div>
</div>

<div class="timer-wrapper fade-out">
<div class="timer">
<div class="timer-exit"><span class="octicon octicon-x"></span></div>
<div class="timer-amount">
<input type="number" id="minutes" name="minutes" min="1" max="20" value="5" placeholder="min" class="form-control">
<!-- <input type="number" id="seconds" name="seconds" min="1" max="60" value="0" placeholder="sec" class="form-control"> -->
<button id="start-stop" type="submit" class="btn btn-default">Start</button>
</div>
<div class="timer-content">
<span class="time-left" id="time-left"></span>


<!-- Modal -->
<div class="modal fade" id="timerModal" tabindex="-1" role="dialog" aria-labelledby="timerModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content text-center">
<input type="number" id="minutes" name="minutes" min="1" max="60" value="5" placeholder="min" class="form-control time-amount">
<div class="time-left" id="time-left"></div>

<div class="modal-footer">
<button id="start-stop" type="submit" class="btn btn-default">Start</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Expand All @@ -67,7 +70,8 @@ <h4 class="modal-title" id="myModalLabel">Help / Shortcuts</h4>
<div class="alignment">
<div id="teacher-avatar" class=""></div>
<div class="" id="teacher-info">
<div id="teacher-name"></div>

<h3 id="teacher-name"></h3>

<span id="teacher-username">
<span class="octicon octicon-octoface"></span>
Expand Down Expand Up @@ -121,7 +125,7 @@ <h4>Table of Contents</h4>
<li>
<div class="timer-toggle"></div>
<input type="checkbox" name="timer-check" id="timer-check" class="timer-check" value="true">
<label for="timer-check" class="timer-label">Timer</label>
<label for="timer-check" class="timer-label" data-toggle="modal" data-target="#timerModal">Timer</label>
</li>
</ul>
</div>
Expand Down
142 changes: 65 additions & 77 deletions _stylesheets/curriculum.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,23 @@

---

// Import external dependencies
@import "octicons/octicons/sprockets-octicons.scss";
@import "bootstrap-sass/lib/bootstrap.scss";


body{
background: $body-bg;
}

// Incorporate Bootstrap table striping
table{
@extend .table;
@extend .table-striped;
@extend .table-bordered;
}

// Octicon mixin
@mixin octicon-link($char){
font: normal normal 1em octicons;
text-decoration: none;
Expand All @@ -22,38 +30,51 @@ table{
}
}


// Custom columns for hide/show of TOC
.col-content, .col-toc{
transition: padding 300ms, opacity 200ms;
}

.col-toc{
position: fixed;
right: -16.66667%;
right: 0;
opacity: 0;
}

.shift-left{
&.col-content{
padding-right: 16.66667%;
}

&.col-toc{
right: 0;
opacity: 1;
}
}

// Custom Octicon styling
.mega-octicon{
font-size: 110px;
color: $brand-primary;

&:after{
content: "";
display: block;
width: 170px;
height: 170px;
border: solid 1px $gray-light;
border-radius: 50%;
padding: 20px;
margin-top: -142px;
}
}

// Table of contents
#toc-wrapper{
opacity: .5;
transition: all 200ms;
&:hover{
opacity: 1;
}
}

#toc{
transition: margin 300ms;
font-size: .7em;
Expand All @@ -62,43 +83,19 @@ table{
}
}


.fade-out{
background: none !important;
margin-left: 100%;
position: fixed;
left: -35px !important;

.octicon{
font-size: 14px !important;
}

&.timer-wrapper{
background-color: none !important;
}

.timer{
margin: 0 0 !important;
}

.timer-toggle{
padding-left: 0px !important;
opacity: .3;
text-align: left !important;
}

.timer-amount{
visibility: hidden;
}
}

.display-controls{
border-top: solid 2px $gray-lighter;
margin-top: 5px;
padding-top: 10px;
}


// Custom components
.time-amount{
text-align: center;
}
.time-left{
font-size: 88px;
}

.timer-check{
visibility: hidden;
Expand Down Expand Up @@ -135,7 +132,6 @@ table{
width: 14px;
height: 14px;
box-shadow: 0 0 0 1px $gray-light;
// padding-top: 1px;
}
}

Expand Down Expand Up @@ -218,32 +214,45 @@ table{

.deck{
position: relative;
font-size: 16px;
font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif;
font-weight: 300;
color: $gray-darker;

.mega-octicon{
font-size: 600%;
h1,h2,h3,h4,h5,h6,p,ul,li{
font-weight: inherit;
}

#teacher-avatar{
img{
height: 300px;
width: 300px;
.slide{
h2{
font-size: 52px;
}
h3,h4{
font-size: 42px;
}
p,ul{
font-size: 20px;
color: $gray;
}
}

.teacher-name{
color: $brand-primary;
font-size: 300%;
}
#teacher{
.octicon{
color: $brand-primary;
}
span{
margin: auto 4px;
}

#teacher-username,#teacher-email, #teacher-organization, #teacher-location{
margin: auto .75em;
opacity: .6;
.teacher-badges{
margin-top: 10px;
}
}

.teacher-badges{
margin: 1em 0;
opacity: .5;
#teacher-avatar{
img{
height: 300px;
width: 300px;
}
}

&>hr{
Expand All @@ -252,43 +261,22 @@ table{

.slide{
width: 100%;
background: #ffffff;
display: table;

h2,h3,h4,h5{
text-align: center;
font-size: 400%;
}

h1,h2,h3,h4,h5,h6,p,ul,pre,svg{
margin-left: 0;
margin-right: 0;
}

pre{
width: 80%;
padding: 2em;
font-size: 120%;
text-align: left;
margin: 0 auto;
background: #222;
color: #f9f9f9;
background: $gray-darker;
color: $gray-lighter;

code{
font-size: 1.5em;
}
}

ul,ol{
display: inline-block;
text-align: left;
}
.lab{
text-align: left;
ul, ol{
display: block;
}
}

.alignment{
display: table-cell;
Expand Down

3 comments on commit a4616e6

@bocky05
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disculpen me comprometera

@bocky05
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me comprometere

@bocky05
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me comprometere disculpa

Please sign in to comment.