Permalink
Browse files

make the UI usable on mobile, don't need much more than that

  • Loading branch information...
nolanlawson committed Nov 13, 2013
1 parent ed62556 commit fee99bf588799951d81bdbffaae2b6d95d3354b2
Showing with 69 additions and 33 deletions.
  1. +1 −1 Gruntfile.js
  2. +3 −3 app-config.json
  3. +3 −3 app/index.jade
  4. +51 −15 app/styles/main.scss
  5. +10 −10 app/views/blocks/navbar.jade
  6. +1 −1 app/views/faq.jade
@@ -105,7 +105,7 @@ module.exports = function (grunt) {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost',
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
@@ -1,9 +1,9 @@
{
"development": {
"couchdb": {
"blocks_url" : "http://localhost:5984/block_summaries2",
"related_url" : "http://localhost:5984/related_blocks2",
"hints_url" : "http://localhost:5984/block_hints2",
"blocks_url" : "http://localhost:5984/block_summaries_tmp",
"related_url" : "http://localhost:5984/related_blocks_tmp",
"hints_url" : "http://localhost:5984/block_hints_tmp",
"users_db_url" : "http://koholint-wired:5985"
},
"solr_url" : "http://localhost:8983/solr"
@@ -14,7 +14,7 @@ html.no-js
title Ultimate Crossword
meta(name="description", content="The world's largest crossword puzzle, brought to you by bad security.")
meta(name="author", content="Nolan Lawson")
meta(name='viewport', content='width=device-width, initial-scale=1.0')
meta(name='viewport', content='width=device-width, initial-scale=1.0',maximum-scale="1.0", user-scalable="no")
// Place favicon.ico and apple-touch-icon.png in the root directory
// build:css(.tmp) styles/main.css
link(rel='stylesheet', href='styles/main.css')
@@ -52,7 +52,7 @@ html.no-js
// build:js(app) scripts/plugins.js
//-script(src='bower_components/bootstrap-sass/js/bootstrap-affix.js')
//-script(src='bower_components/bootstrap-sass/js/bootstrap-alert.js')
//-script(src='bower_components/bootstrap-sass/js/bootstrap-dropdown.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-dropdown.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-tooltip.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-modal.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-transition.js')
@@ -61,7 +61,7 @@ html.no-js
//-script(src='bower_components/bootstrap-sass/js/bootstrap-typeahead.js')
//-script(src='bower_components/bootstrap-sass/js/bootstrap-carousel.js')
//-script(src='bower_components/bootstrap-sass/js/bootstrap-scrollspy.js')
//-script(src='bower_components/bootstrap-sass/js/bootstrap-collapse.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-collapse.js')
script(src='bower_components/bootstrap-sass/js/bootstrap-tab.js')
script(src='bower_components/pouchdb-nightly.min.js/index.js')
script(src='bower_components/angular-resource/angular-resource.js')
@@ -3,10 +3,59 @@ $iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";

@import "bootstrap-overrides";
@import "bootstrap-sass/lib/bootstrap";
@import "bootstrap-sass/lib/responsive";

/* Put your CSS here */
html, body {
margin: 20px;


@mixin big-logo-inner {
text-align : center;
padding : 10px 20px 10px 20px;
background-color : #f9f9f9;
border-radius:6px;
max-width : 700px;
margin : 0 auto;
}
/* Portrait tablet to landscape and desktop and large desktop*/
@media (min-width : 980px) {
html, body {
margin : 20px auto;
}
.big-logo {
margin : 10px 20px 40px 20px;

& > .big-logo-inner {
@include big-logo-inner;
}
}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
html, body {
margin: 0px;
}
.big-logo {
margin : 10px 10px 10px 10px;

& > .big-logo-inner {
@include big-logo-inner;
}
}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
html, body {
margin: 0px;
}
}

/* Landscape phones and down */
@media (max-width: 480px) {
html, body {
margin: 0px;
}
}

body {
@@ -23,19 +72,6 @@ ul > li {
margin-left : 20px;
}

.big-logo {
margin : 10px 20px 40px 20px;

& > .big-logo-inner {
text-align : center;
padding : 10px 20px 10px 20px;
background-color : #f9f9f9;
border-radius:6px;
max-width : 700px;
margin : 0 auto;
}
}

.bold-text {
font-weight : bold;
}
@@ -12,13 +12,13 @@
a(href='#',ng-href='{{tab.getHref()}}',ng-bind='tab.title')
form.navbar-search.pull-left(ng-submit="performSearch()")
input.search-query(type="text",placeholder="Search",ng-model="searchService.q")
ul.pull-right.ng-cloak.horizontal-navbar
li: span.nav-username(ng-show="session.loggedIn")
| {{session.username}}
li: button.btn.btn-primary.pull-right.ng-cloak(data-target="#signup-login-modal",
bs-modal="'views/signup-login-modal.html'"
data-toggle="modal",
ng-hide="session.loggedIn")
| Signup / Login
li: button.btn.btn-primary.pull-right.ng-cloak(ng-show="session.loggedIn",ng-click="session.logout()")
| Logout
ul.pull-right.ng-cloak.horizontal-navbar
li: span.nav-username(ng-show="session.loggedIn")
| {{session.username}}
li: button.btn.btn-primary.pull-right.ng-cloak(data-target="#signup-login-modal",
bs-modal="'views/signup-login-modal.html'"
data-toggle="modal",
ng-hide="session.loggedIn")
| Signup / Login
li: button.btn.btn-primary.pull-right.ng-cloak(ng-show="session.loggedIn",ng-click="session.logout()")
| Logout
@@ -14,7 +14,7 @@ html
p
| I got the idea from this XKCD
| comic:
p.image-box
.image-box
a(href='http://xkcd.com/1286/')
img(src="http://imgs.xkcd.com/comics/encryptic.png",width=473,height=541)
h4 How does it work?

0 comments on commit fee99bf

Please sign in to comment.