gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

tighten up the interface for mobile

Browse Source
This commit is contained in:
Michael Q Larson
2015-03-07 16:48:57 -08:00
parent 49886ca097
commit 87ac659038
5 changed files with 68 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
views/stories/index.jade
View File

@ -15,7 +15,13 @@ block content
if (page === 'recent') if (page === 'recent')
include ./new-stories include ./new-stories
if (page === 'submit') if (page === 'submit')
include ./preliminary-submit if (user)
include ./preliminary-submit
else
.spacer
.text-center
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Sign in to post your story (it's free)
.spacer
if (page === 'search') if (page === 'search')
include ./search-stories include ./search-stories
if (page === 'storySubmission') if (page === 'storySubmission')

45
views/stories/news-nav.jade
View File

@ -1,17 +1,36 @@
.col-xs-12 .col-xs-12
.btn-group.input-group.btn-group-justified(data-toggle='buttons') .visible-xs.visible-sm
label.btn.btn-primary.btn-big(class="#{ page === 'hot' ? 'active' : '' }") .btn-group.input-group.btn-group-justified(data-toggle='buttons')
input#option1(href='/stories/hot', type='radio', name='options') label.btn.btn-primary.btn-big(class="#{ page === 'hot' ? 'active' : '' }")
| Hot input#option1(href='/stories/hot', type='radio', name='options')
label.btn.btn-primary.btn-big(class="#{ page === 'recent' ? 'active' : '' }") i.ion-ios-pulse-strong
input#option2(href='/stories/recent', type='radio', name='options') label.btn.btn-primary.btn-big(class="#{ page === 'recent' ? 'active' : '' }")
| New input#option2(href='/stories/recent', type='radio', name='options')
label.btn.btn-primary.btn-big(class="#{ page === 'submit' ? 'active' : page === 'storySubmission' ? 'active' : '' }") i.ion-ios-clock
input#option3(href='/stories/submit', type='radio', name='options') label.btn.btn-primary.btn-big(class="#{ page === 'submit' ? 'active' : page === 'storySubmission' ? 'active' : '' }")
| Submit input#option3(href='/stories/submit', type='radio', name='options')
label.btn.btn-primary.btn-big(class="#{ page === 'search' ? 'active' : '' }") i.ion-plus-circled
input#option4(href='/stories/search', type='radio', name='options') label.btn.btn-primary.btn-big(class="#{ page === 'search' ? 'active' : '' }")
| Search input#option4(href='/stories/search', type='radio', name='options')
i.ion-search
.visible-md.visible-lg
.btn-group.input-group.btn-group-justified(data-toggle='buttons')
label.btn.btn-primary.btn-big(class="#{ page === 'hot' ? 'active' : '' }")
input#option1(href='/stories/hot', type='radio', name='options')
i.ion-ios-pulse-strong  
| Hot
label.btn.btn-primary.btn-big(class="#{ page === 'recent' ? 'active' : '' }")
input#option2(href='/stories/recent', type='radio', name='options')
i.ion-ios-clock  
| New
label.btn.btn-primary.btn-big(class="#{ page === 'submit' ? 'active' : page === 'storySubmission' ? 'active' : '' }")
input#option3(href='/stories/submit', type='radio', name='options')
i.ion-plus-circled  
| Submit
label.btn.btn-primary.btn-big(class="#{ page === 'search' ? 'active' : '' }")
input#option4(href='/stories/search', type='radio', name='options')
i.ion-search  
| Search
script. script.
$('label').on('click', function() { $('label').on('click', function() {

33
views/stories/preliminary-submit.jade
View File

@ -1,17 +1,24 @@
.spacer
.col-xs-12 .col-xs-12
form.form-horizontal.control-label-story-submission#story-submission-form .spacer
.col-xs-2.img-story-post .input-group
img.img-responsive(src='#{user.profile.picture}') input#story-url.big-text-field.form-control(placeholder='Paste your link here', name='Link', autofocus)
.col-xs-10 span.input-group-btn
.form-group button#preliminary-story-submit.btn.btn-big.btn-primary(type='button') Submit
.col-xs-1 .spacer
label.control-label.control-label-story-submission(for='name') Link
.col-xs-11
input#story-url.form-control(placeholder='Paste your link here', name='Link') //
.spacer .col-xs-12
.form-group form.form-horizontal.control-label-story-submission#story-submission-form
button.btn.btn-big.btn-block.btn-primary#preliminary-story-submit Submit .col-xs-2.img-story-post
img.img-responsive(src='#{user.profile.picture}')
.col-xs-10
.form-group
.col-xs-11
input#story-url.form-control(placeholder='Paste your link here', name='Link')
.spacer
.form-group
button.btn.btn-big.btn-block.btn-primary Submit
script. script.
$('#story-url').on('keypress', function(e) { $('#story-url').on('keypress', function(e) {
if (e.which === 13 || e === 13) { if (e.which === 13 || e === 13) {

2
views/stories/search-stories.jade
View File

@ -1,7 +1,7 @@
.col-xs-12 .col-xs-12
.spacer .spacer
.input-group .input-group
input#searchArea.big-text-field.form-control(type='text', placeholder='Search for...', autofocus) input#searchArea.big-text-field.form-control(type='text', placeholder='Search our stories', autofocus)
span.input-group-btn span.input-group-btn
button#searchbutton.btn.btn-big.btn-primary(type='button') Search button#searchbutton.btn.btn-big.btn-primary(type='button') Search
.spacer .spacer

18
views/stories/submit-story.jade
View File

@ -4,23 +4,21 @@
var storyURL = !{JSON.stringify(storyURL)}; var storyURL = !{JSON.stringify(storyURL)};
var storyTitle = !{JSON.stringify(storyTitle)}; var storyTitle = !{JSON.stringify(storyTitle)};
form.form-horizontal.control-label-story-submission#story-submission-form form.form-horizontal.control-label-story-submission#story-submission-form
.col-xs-2.img-story-post .col-xs-12
img.img-responsive(src='#{user.profile.picture}')
.col-xs-10
.form-group .form-group
.col-xs-1 .col-xs-12.col-md-1
label.control-label.control-label-story-submission(for='name') Link label.control-label.control-label-story-submission(for='name') Link
.col-xs-11 .col-xs-12.col-md-11
input#story-url.form-control(placeholder='Paste your link here', name='Link') input#story-url.form-control(placeholder='Paste your link here', name='Link')
.form-group .form-group
.col-xs-1 .col-xs-12.col-md-1
label.control-label.control-label-story-submission(for='name') Title label.control-label.control-label-story-submission(for='name') Title
.col-xs-11 .col-xs-12.col-md-11
input#story-title.form-control(placeholder='Type a headline for your link here', name='Title') input#story-title.form-control(placeholder='Type a headline for your link here', name='Title')
.form-group .form-group
.col-xs-1 .col-xs-12.col-md-1
label.control-label.control-label-story-submission(for='name') label.control-label.control-label-story-submission(for='name') Description
.col-xs-11 .col-xs-12.col-md-11
textarea#description-box.form-control(name="comment-box", rows=5, placeholder="Start off the discussion with a description of your post") textarea#description-box.form-control(name="comment-box", rows=5, placeholder="Start off the discussion with a description of your post")
.spacer .spacer