Skip to content

Commit

Permalink
makes try hab work on mobile - now the keyboard should pop up
Browse files Browse the repository at this point in the history
Signed-off-by: Ryan Keairns <[email protected]>

Pull request: #716
Approved by: smith
  • Loading branch information
Ryan Keairns authored and jtimberman committed Jun 12, 2016
1 parent 409b898 commit 9c5624c
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 7 deletions.
8 changes: 7 additions & 1 deletion www/source/javascripts/try.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,12 @@

/*global $, ansi_up, CodeMirror, Josh */

// Without this, you cannot open the keyboard on mobile devices since josh.js
// does not use actual HTML input elements.
$("#mobile-keyboard-trigger").click(function() {
$(this).focus();
});

(function () {
function format(text) {
return "<pre>" + ansi_up.ansi_to_html(ansi_up.escape_for_html(text)) +
Expand All @@ -22,7 +28,7 @@
}

function success(display) {
$("#success .button").removeClass("disabled").addClass("success");
$("#success .button").removeClass("secondary").addClass("cta");
if(display === "hide") {
$("#shell-cli").hide();
}
Expand Down
6 changes: 4 additions & 2 deletions www/source/stylesheets/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ $main-nav-breakpoint: 710px;
}

.main-nav--logo {
@include grid-column(4);
@include grid-column(3);

a {
display: block;
Expand All @@ -79,7 +79,7 @@ $main-nav-breakpoint: 710px;

.main-nav--links-wrap {
@include large-nav {
@include grid-column(8);
@include grid-column(9);
}
}

Expand Down Expand Up @@ -172,9 +172,11 @@ $main-nav-breakpoint: 710px;
.button {
@include button;
margin: rem-calc(7) 0 0 0;
padding: 0.85em 1em;

@include large-nav {
margin: 0;
padding: 0.85em 1.65em;
}

&:hover {
Expand Down
32 changes: 29 additions & 3 deletions www/source/stylesheets/_try.scss
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
// CSS for Try Habitat

.page-title--heading {
@include grid-column(6);
@include grid-column(12);

@include breakpoint(medium){
@include grid-column(6);
}
}

.progress-container {
@include grid-column(6);
@include grid-column(12);

@include breakpoint(medium){
@include grid-column(6);
}

.progress {
margin-bottom: 0;
Expand Down Expand Up @@ -52,7 +60,7 @@ code {
background-color: inherit;
border: 0;
color: inherit;
overflow: hidden;
overflow: visible;
}
}

Expand Down Expand Up @@ -84,10 +92,12 @@ code {

a.active {
background-color: $hab-blue !important;
color: $white;
}

a.updated {
background-color: $hab-orange;
color: $white;
}

a.active:hover {
Expand Down Expand Up @@ -119,3 +129,19 @@ pre.full-output {
display: none;
margin-top: rem-calc(-32);
}

@include breakpoint(small down) {
#success .secondary {
@include primary-button;
color: $white;
}
}

#mobile-keyboard-trigger {
color: transparent;
position: absolute;
width: 320px;
height: 100px;
left: -20px;
opacity: 0;
}
2 changes: 1 addition & 1 deletion www/source/try/partials/_advance_button.html.slim
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
= link_to "/try/#{current_page.data.step + 1}", :class => "disabled button cta" do
= link_to "/try/#{current_page.data.step + 1}", :class => "button secondary" do
= yield
3 changes: 3 additions & 0 deletions www/source/try/partials/_terminal.html.slim
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
#shell-panel
/! input trigger for displaying mobile keyboards
textarea id="mobile-keyboard-trigger" autocapitalize="off" autocorrect="off"

#shell-view
= yield

0 comments on commit 9c5624c

Please sign in to comment.