start styling news for mobile
Quincy Larson
parent
38525eb77a
commit
589059aa05
|
|
@ -913,12 +913,28 @@ iframe.iphone {
|
|||
// background-color: #e5e5e5;
|
||||
//}
|
||||
|
||||
.media-news {
|
||||
.news-box {
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -40px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
padding: 5px;
|
||||
border-color: @brand-info;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.story-headline {
|
||||
font-size: 20px;
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#reply-to-main-post, #upvote {
|
||||
|
|
@ -954,6 +970,19 @@ iframe.iphone {
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
.news-number {
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mobile-story-image {
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
@media (max-width: 768px) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -980,6 +1009,9 @@ iframe.iphone {
|
|||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.border-radius-5 {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
//uncomment this to see the dimensions of all elements outlined in red
|
||||
//* {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ extends ../layout
|
|||
block content
|
||||
script.
|
||||
var challengeName = 'Profile View';
|
||||
.col-xs-12.col-sm-12.col-md-12
|
||||
.panel.panel-info
|
||||
.panel-heading.text-center
|
||||
h1 #{username}'s portfolio
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
extends ../layout
|
||||
block content
|
||||
.col-xs-12.col-sm-12.col-md-12
|
||||
.panel.panel-info
|
||||
.panel-heading.text-center
|
||||
h1 Challenge Map
|
||||
.panel-body
|
||||
.col-xs-12
|
||||
if (Math.random() > 0.99)
|
||||
img.img-responsive.img-center(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner-dino.png')
|
||||
img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner-dino.png')
|
||||
else
|
||||
img.img-responsive.img-center(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner.png')
|
||||
img.img-responsive.img-center.border-radius-5(src='https://s3.amazonaws.com/freecodecamp/wide-social-banner.png')
|
||||
.col-xs-12.col-md-8.col-md-offset-2
|
||||
h2.text-center
|
||||
span.text-primary #{camperCount}  
|
||||
|
|
@ -22,7 +20,7 @@ block content
|
|||
span.fa.fa-flag
|
||||
| Waypoints (200 hours of lessons)
|
||||
|
||||
.col-xs-12
|
||||
.col-xs-12.no-right-padding
|
||||
h3.negative-15
|
||||
ol
|
||||
for waypoint in waypoints
|
||||
|
|
|
|||
|
|
@ -2,13 +2,10 @@ extends ../layout
|
|||
block content
|
||||
script.
|
||||
var challengeName = 'Field Guide View';
|
||||
.col-xs-12.col-sm-12.col-md-12
|
||||
.panel.panel-info
|
||||
.panel.panel-info.no-padding
|
||||
.panel-heading.text-center
|
||||
h1= title
|
||||
.panel-body
|
||||
.row
|
||||
.col-xs-12
|
||||
div!= description
|
||||
.spacer
|
||||
.spacer
|
||||
|
|
@ -23,15 +20,15 @@ block content
|
|||
.ten-pixel-break
|
||||
a.btn.btn-big.signup-btn.btn-block(href="/login") Start learning to code (it's free)
|
||||
.spacer
|
||||
#show-all-dialog.modal(tabindex='-1')
|
||||
#show-all-dialog.modal(tabindex='-1')
|
||||
.modal-dialog.animated.fadeInUp.fast-animation
|
||||
.modal-content
|
||||
.modal-header.all-list-header Field Guide Articles
|
||||
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
|
||||
.modal-body
|
||||
include ../partials/field-guide
|
||||
#fieldGuideId.hidden= fieldGuideId
|
||||
script.
|
||||
#fieldGuideId.hidden= fieldGuideId
|
||||
script.
|
||||
$(document).ready(function() {
|
||||
$('body').keydown(function(e) {
|
||||
if (e.ctrlKey && e.keyCode == 13) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ extends ../layout
|
|||
block content
|
||||
script.
|
||||
var challengeName = 'Nonprofits View';
|
||||
.col-xs-12.col-sm-12.col-md-12
|
||||
.panel.panel-info
|
||||
.panel-heading.text-center= title
|
||||
.panel-body
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.spacer
|
||||
.col-xs-12
|
||||
#story-list.story-list
|
||||
.spacer
|
||||
#story-list.story-list
|
||||
|
||||
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
|
||||
script.
|
||||
|
|
@ -21,23 +21,28 @@
|
|||
|
||||
$(div)
|
||||
.html(
|
||||
"<div class='col-xs-12 text-left'>" +
|
||||
"<h2 class='col-xs-1 col-sm-1 positive-5'>" +
|
||||
"<div class='row'>" +
|
||||
"<div class='hidden-xs col-sm-2 col-md-1 positive-5 news-number'>" +
|
||||
(i + 1) +
|
||||
"</h2>" +
|
||||
"<div class='col-xs-2 col-sm-1'>" +
|
||||
"<a href='/" + data[i].author.username + "'>" +
|
||||
"<img src='" + data[i].author.picture + "' class='img-news'/>" +
|
||||
"</div>" +
|
||||
"<div class='visible-xs col-sm-2 col-md-1'>" +
|
||||
"<a href='" + data[i].link + "'>" +
|
||||
"<img class='mobile-story-image img-responsive' src='" + (!!data[i].image ? data[i].image : data[i].author.picture) + "'/>" +
|
||||
"</a>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-9 col-sm-10'>" +
|
||||
"<div class='hidden-xs col-sm-2 col-md-1'>" +
|
||||
"<a href='/" + data[i].author.username + "'>" +
|
||||
"<img class='img-responsive ' src='" + data[i].author.picture + "'/>" +
|
||||
"</a>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-12 col-sm-8 col-md-10'>" +
|
||||
"<div class='row'>" +
|
||||
"<div class='story-headline col-xs-12'>" +
|
||||
"<div class='story-headline col-xs-12 wrappable'>" +
|
||||
"<a href='" + data[i].link + "' target='_blank'>" +
|
||||
data[i].headline +
|
||||
"</a>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-12'>" +
|
||||
"<div class='hidden-xs'>" +
|
||||
"<span>" +
|
||||
"<a class='btn btn-no-shadow btn-primary btn-xs btn-primary-ghost' href='/stories/" + linkedName + "'>discuss</a> · " +
|
||||
rank + (rank > 1 ? " points" : " point") + " · posted " +
|
||||
|
|
@ -45,11 +50,21 @@
|
|||
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
|
||||
"</span>" +
|
||||
"</div>" +
|
||||
"<div class='visible-xs'>" +
|
||||
"<div class='col-xs-12 text-center'>" +
|
||||
rank + (rank > 1 ? " points" : " point") + " · posted " +
|
||||
moment(data[i].timePosted).fromNow() +
|
||||
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
|
||||
"</div>" +
|
||||
"<div class='col-xs-12'>" +
|
||||
"<br><a class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost' href='/stories/" + linkedName + "'>discuss</a>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>"
|
||||
);
|
||||
$(div).addClass('story-list')
|
||||
$(div).addClass('story-list news-box')
|
||||
$(div).appendTo($('#story-list'));
|
||||
}
|
||||
});
|
||||
|
|
@ -19,8 +19,6 @@ block content
|
|||
.spacer
|
||||
if (page === 'hot')
|
||||
include ./hot-stories
|
||||
if (page === 'recent')
|
||||
include ./new-stories
|
||||
if (page === 'submit')
|
||||
if (user)
|
||||
include ./preliminary-submit
|
||||
|
|
@ -29,8 +27,6 @@ block content
|
|||
.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')
|
||||
include ./search-stories
|
||||
if (page === 'storySubmission')
|
||||
include ./submit-story
|
||||
if (page === 'show')
|
||||
|
|
|
|||
|
|
@ -1,43 +1,63 @@
|
|||
.col-xs-12
|
||||
|
||||
a.btn.btn-primary.btn-big.btn-block(href='/stories/submit' class="#{ page === 'hot' ? '' : 'hidden' }") Submit a Code-related Link
|
||||
a.btn.btn-success.btn-big.btn-block(href='/stories/hot' class="#{ (page === 'show' || page === 'submit' || page === 'storySubmission') ? '' : 'hidden' }") Show all Links
|
||||
//.visible-xs.visible-sm
|
||||
// .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
|
||||
// label.btn.btn-primary.btn-big(class="#{ page === 'recent' ? 'active' : '' }")
|
||||
// input#option2(href='/stories/recent', type='radio', name='options')
|
||||
// i.ion-ios-clock
|
||||
// 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
|
||||
// label.btn.btn-primary.btn-big(class="#{ page === 'search' ? 'active' : '' }")
|
||||
// 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.
|
||||
$('label').on('click', function() {
|
||||
window.location = ($(this).children('input').attr('href'));
|
||||
});
|
||||
|
||||
a.btn.btn-primary.btn-big.btn-block(href='/stories/submit' class="#{ page === 'hot' ? '' : 'hidden' }") Submit a link
|
||||
a.btn.btn-success.btn-big.btn-block(href='/stories/hot' class="#{ (page === 'show' || page === 'submit' || page === 'storySubmission') ? '' : 'hidden' }") Show all Links
|
||||
.spacer
|
||||
.input-group(class="#{ page === 'hot' ? '' : 'hidden' }")
|
||||
input#searchArea.big-text-field.field-responsive.form-control(type='text', placeholder='Search our links', autofocus)
|
||||
span.input-group-btn
|
||||
button#searchbutton.btn.btn-big.btn-primary.btn-responsive(type='button') Search
|
||||
.spacer
|
||||
#search-results
|
||||
.spacer
|
||||
#story-list
|
||||
ul#stories
|
||||
script.
|
||||
$('#searchArea').keypress(function (event) {
|
||||
if (event.keyCode === 13 || event.which === 13) {
|
||||
executeSearch();
|
||||
$('#searchArea').focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
$('#searchbutton').on('click', function () {
|
||||
executeSearch();
|
||||
});
|
||||
function executeSearch() {
|
||||
$('#stories').empty();
|
||||
var searchTerm = $('#searchArea').val();
|
||||
var getLinkedName = function getLinkedName(name) {
|
||||
return name.toLowerCase().replace(/\s/g, '-');
|
||||
}
|
||||
$.post('/stories/search',
|
||||
{
|
||||
data: {
|
||||
searchValue: searchTerm
|
||||
}
|
||||
})
|
||||
.fail(function (xhr, textStatus, errorThrown) {
|
||||
})
|
||||
.done(function (data, textStatus, xhr) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var div = document.createElement('div');
|
||||
var linkedName = getLinkedName(data[i].storyLink);
|
||||
var rank = data[i].rank;
|
||||
$(div).html(
|
||||
"<div class='row text-left'>" +
|
||||
"<div class='col-xs-4 col-sm-2 col-md-1'>" +
|
||||
"<a href='" + data[i].link + "' target='_blank'>" +
|
||||
"<img src='" + data[i].author.picture + "' class='img-responsive mobile-story-image'/>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-8 col-sm-10 col-md-11 text-center'>" +
|
||||
"<div class='story-headline'>" +
|
||||
"<a href='/stories/" + linkedName + "'>"
|
||||
+ data[i].storyLink +
|
||||
"</a><br>" +
|
||||
"</div>" +
|
||||
"Posted " +
|
||||
moment(data[i].timePosted).fromNow() +
|
||||
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
|
||||
"</div>" +
|
||||
"</div>")
|
||||
$(div).appendTo($('#search-results'));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
.col-xs-12
|
||||
.spacer
|
||||
h1.text-center Search
|
||||
.input-group
|
||||
input#searchArea.big-text-field.field-responsive.form-control(type='text', placeholder='Search our links', autofocus)
|
||||
span.input-group-btn
|
||||
button#searchbutton.btn.btn-big.btn-primary.btn-responsive(type='button') Search
|
||||
.spacer
|
||||
|
||||
#story-list
|
||||
ul#stories
|
||||
script.
|
||||
$('#searchArea').keypress(function(event) {
|
||||
if (event.keyCode === 13 || event.which === 13) {
|
||||
executeSearch();
|
||||
$('#searchArea').focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
$('#searchbutton').on('click', function() {
|
||||
executeSearch();
|
||||
});
|
||||
function executeSearch() {
|
||||
$('#stories').empty();
|
||||
var searchTerm = $('#searchArea').val();
|
||||
var getLinkedName = function getLinkedName(name) {
|
||||
return name.toLowerCase().replace(/\s/g, '-');
|
||||
}
|
||||
$.post('/stories/search',
|
||||
{
|
||||
data: {
|
||||
searchValue: searchTerm
|
||||
}
|
||||
})
|
||||
.fail(function (xhr, textStatus, errorThrown) {
|
||||
})
|
||||
.done(function (data, textStatus, xhr) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var li = document.createElement('li');
|
||||
var linkedName = getLinkedName(data[i].storyLink);
|
||||
var rank = data[i].rank;
|
||||
|
||||
$(li).html(
|
||||
"<div class='row text-left'>" +
|
||||
"<div class='col-xs-3 col-sm-1'>" +
|
||||
"<div class='story-up-votes'>" +
|
||||
"<span>" + rank + "</span>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-2 col-sm-1'>" +
|
||||
"<img src='" + data[i].author.picture + "' class='img-responsive'/>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-7 col-sm-10'>" +
|
||||
"<div class='row'>" +
|
||||
"<div class='col-xs-12'>" +
|
||||
"<a href='/stories/" + linkedName + "'>"
|
||||
+ data[i].storyLink +
|
||||
"</a>" +
|
||||
"</div>" +
|
||||
"<div class='col-xs-12'>" +
|
||||
"<span>Posted " +
|
||||
moment(data[i].timePosted).fromNow() +
|
||||
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</li>");
|
||||
$(li).appendTo($('#stories'));
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue