start styling news for mobile

public/css/main.less

@@ -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
 //* {

views/account/show.jade

@@ -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

views/challengeMap/show.jade

@@ -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

views/field-guide/show.jade

@@ -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.no-padding
-        .panel.panel-info
         .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
+#fieldGuideId.hidden= fieldGuideId
-    script.
+script.
     $(document).ready(function() {
         $('body').keydown(function(e) {
             if (e.ctrlKey && e.keyCode == 13) {

views/nonprofits/show.jade

@@ -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

views/stories/hot-stories.jade

@@ -1,6 +1,6 @@
 .spacer
-.col-xs-12
+.spacer
-    #story-list.story-list
+#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'>" +
+                            "<div class='row'>" +
-                                    "<h2 class='col-xs-1 col-sm-1 positive-5'>" +
+                                "<div class='hidden-xs col-sm-2 col-md-1 positive-5 news-number'>" +
                                     (i + 1) +
-                                    "</h2>" +
+                                "</div>" +
-                                    "<div class='col-xs-2 col-sm-1'>" +
+                                "<div class='visible-xs col-sm-2 col-md-1'>" +
-                                        "<a href='/" + data[i].author.username + "'>" +
+                                    "<a href='" + data[i].link + "'>" +
-                                            "<img src='" + data[i].author.picture + "' class='img-news'/>" +
+                                        "<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'));
                     }
                 });

views/stories/index.jade

@@ -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')

views/stories/news-nav.jade

@@ -1,43 +1,63 @@
-.col-xs-12
+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
-    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'));
-        });
-
 .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'));
+                    }
+                });
+    }

views/stories/search-stories.jade

@@ -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'));
-                    }
-                });
-
-    }