start styling news for mobile

pull/402/head
Quincy Larson 2015-04-28 22:29:59 -07:00
parent 38525eb77a
commit 589059aa05
9 changed files with 499 additions and 516 deletions

View File

@ -913,12 +913,28 @@ iframe.iphone {
// background-color: #e5e5e5;
//}
.media-news {
width: 100%;
.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
//* {

View File

@ -2,162 +2,161 @@ 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
.panel-body
if (user && user.profile.username === username)
.row.text-center
.col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account
.spacer
.col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp
.spacer
.row
.col-xs-12
.col-xs-12.col-sm-12.col-md-5
if picture
img.img-center.img-responsive.public-profile-img(src=picture)
else
img.img-center.img-responsive.public-profile-img(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png')
h1.text-center.negative-5
- if (twitterHandle)
a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}", target='_blank')
- if (githubProfile)
a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile, target='_blank')
- if (linkedinProfile)
a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile, target='_blank')
- if (codepenProfile)
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile, target='_blank')
.visible-md.visible-lg
.col-xs-12.col-sm-12.col-md-4.text-justify
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.visible-xs.visible-sm
.col-xs-12.col-sm-12.col-md-4.text-center
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.col-xs-12.col-sm-12.col-md-3.text-center
.background-svg.img-center
.points-on-top
= "[ " + (user ? user.progressTimestamps.length : 0) + " ]"
.panel.panel-info
.panel-heading.text-center
h1 #{username}'s portfolio
.panel-body
if (user && user.profile.username === username)
.row.text-center
.col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account
.spacer
.col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp
.spacer
.row
.col-xs-12
.col-xs-12.col-sm-12.col-md-5
if picture
img.img-center.img-responsive.public-profile-img(src=picture)
else
img.img-center.img-responsive.public-profile-img(src='https://s3.amazonaws.com/freecodecamp/camper-image-placeholder.png')
h1.text-center.negative-5
- if (twitterHandle)
a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}", target='_blank')
- if (githubProfile)
a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile, target='_blank')
- if (linkedinProfile)
a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile, target='_blank')
- if (codepenProfile)
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile, target='_blank')
.visible-md.visible-lg
.col-xs-12.col-sm-12.col-md-4.text-justify
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.visible-xs.visible-sm
.col-xs-12.col-sm-12.col-md-4.text-center
h1.flat-top.wrappable= name
h3.flat-top.bolded.wrappable= location
h4.flat-top.wrappable= bio
.col-xs-12.col-sm-12.col-md-3.text-center
.background-svg.img-center
.points-on-top
= "[ " + (user ? user.progressTimestamps.length : 0) + " ]"
.row
.col-xs-12
if (website1Title && website1Link && website1Image)
.row
.col-xs-12.col-md-5
img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website1Title
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website1Title && website1Link && !website1Image)
.col-xs-12.col-md-12
.row
.col-xs-12
if (website1Title && website1Link && website1Image)
.row
.col-xs-12.col-md-5
img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website1Title
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website2Title && website2Link && website2Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website2Title
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website1Title && website1Link && !website1Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website1Title
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website2Title && website2Link && !website2Image)
.col-xs-12.col-md-12
if (website2Title && website2Link && website2Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website2Title
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website3Title && website3Link && website3Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website3Title
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
i.fa.icon-beaker
| Try it out
if (website3Title && website3Link && !website3Image)
.col-xs-12.col-md-12
br
if (website2Title && website2Link && !website2Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website2Title
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
i.fa.icon-beaker
| Try it out
br
if (website3Title && website3Link && website3Image)
.row
.col-xs-12.col-md-5
img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title}")
.col-xs-12.col-md-7
h3.text-center.wrappable.flat-top= website3Title
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
i.fa.icon-beaker
| Try it out
if (website3Title && website3Link && !website3Image)
.col-xs-12.col-md-12
h3.text-center.wrappable.flat-top= website3Title
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
i.fa.icon-beaker
| Try it out
.hidden-xs.col-sm-12
script(src="//d3js.org/d3.v3.min.js")
script(src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js")
#cal-heatmap.img-center
script.
$(document).ready(function() {
setTimeout(function() {
var cal = new CalHeatMap();
var calendar = !{JSON.stringify(calender)};
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
subDomain: "day",
data: calendar,
cellSize: 15,
align: 'center',
cellRadius: 3,
cellPadding: 2,
tooltip: true,
range: 4,
start: new Date().setDate(new Date().getDate() - 90),
legendColors: ["#cccccc", "#215f1e"],
legend: [1, 2, 3]
});
}, 300);
});
.row
.hidden-xs.col-sm-12.text-center
.row.text-primary
h4.col-sm-6.text-right Longest Streak: #{longestStreak}
h4.col-sm-6.text-left Current Streak: #{currentStreak}
.hidden-xs.col-sm-12
script(src="//d3js.org/d3.v3.min.js")
script(src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js")
#cal-heatmap.img-center
script.
$(document).ready(function() {
setTimeout(function() {
var cal = new CalHeatMap();
var calendar = !{JSON.stringify(calender)};
cal.init({
itemSelector: "#cal-heatmap",
domain: "month",
subDomain: "day",
data: calendar,
cellSize: 15,
align: 'center',
cellRadius: 3,
cellPadding: 2,
tooltip: true,
range: 4,
start: new Date().setDate(new Date().getDate() - 90),
legendColors: ["#cccccc", "#215f1e"],
legend: [1, 2, 3]
});
}, 300);
});
.row
.hidden-xs.col-sm-12.text-center
.row.text-primary
h4.col-sm-6.text-right Longest Streak: #{longestStreak}
h4.col-sm-6.text-left Current Streak: #{currentStreak}
- if (challenges.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Challenge
th.col-xs-2 Completed
th.col-xs-6 Link
for challenge in challenges
tr
td.col-xs-4= challenge.name
td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6
a(href=challenge.solution) View my solution
- if (challenges.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Challenge
th.col-xs-2 Completed
th.col-xs-6 Link
for challenge in challenges
tr
td.col-xs-4= challenge.name
td.col-xs-2= moment(challenge.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6
a(href=challenge.solution) View my solution
br
- if (bonfires.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Bonfire
th.col-xs-2 Completed
th.col-xs-6 Solution
for bonfire in bonfires
tr
td.col-xs-4= bonfire.name
td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6= bonfire.solution
br
br
- if (bonfires.length > 0)
.col-sm-12
table.table.table-striped
thead
tr
th.col-xs-4 Bonfire
th.col-xs-2 Completed
th.col-xs-6 Solution
for bonfire in bonfires
tr
td.col-xs-4= bonfire.name
td.col-xs-2= moment(bonfire.completedDate, 'x').format("MMM DD, YYYY")
td.col-xs-6= bonfire.solution
br

View File

@ -1,116 +1,114 @@
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')
else
img.img-responsive.img-center(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}  
| campers have joined our community
br
| since we launched  
span.text-primary #{daysRunning}  
| days ago.
h2
span.fa.fa-flag
|   Waypoints (200 hours of lessons)
.panel.panel-info
.panel-heading.text-center
h1 Challenge Map
.panel-body
if (Math.random() > 0.99)
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.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}  
| campers have joined our community
br
| since we launched  
span.text-primary #{daysRunning}  
| days ago.
h2
span.fa.fa-flag
|   Waypoints (200 hours of lessons)
.col-xs-12
h3.negative-15
ol
for waypoint in waypoints
if completedCoursewareList.indexOf(waypoint._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{waypoint.name}")= waypoint.name
.col-xs-12.no-right-padding
h3.negative-15
ol
for waypoint in waypoints
if completedCoursewareList.indexOf(waypoint._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{waypoint.name}")= waypoint.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{waypoint.name}")= waypoint.name
h2
span.ion-bonfire
|   Bonfires (200 hours of JavaScript algorithm practice)
.col-xs-12
h3.negative-15
ol
for bonfire in bonfires
if completedBonfireList.indexOf(bonfire._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/bonfires/#{bonfire.name}")= bonfire.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/bonfires/#{bonfire.name}")= bonfire.name
h2
span.fa.fa-angle-double-right
|   Ziplines (200 hours of front end development)
.col-xs-12
h3.negative-15
ol
for zipline in ziplines
if completedCoursewareList.indexOf(zipline._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{zipline.name}")= zipline.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{zipline.name}")= zipline.name
h2
span.fa.fa-level-down
|   Basejumps (200 hours of full stack development)
.col-xs-12
h3.negative-15
ol
for basejump in basejumps
if completedCoursewareList.indexOf(basejump._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{basejump.name}")= basejump.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{basejump.name}")= basejump.name
h2
span.ion-ios-heart   Nonprofit Projects (800 hours of real-world experience)*
h3.negative-15
ul
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/nonprofits/directory") Browse our nonprofit projects
p * Complete all Waypoints, Bonfires, Ziplines and Basejumps to be assigned your first nonprofit project
a(href="/challenges/#{waypoint.name}")= waypoint.name
h2
span.ion-bonfire
|   Bonfires (200 hours of JavaScript algorithm practice)
.col-xs-12
h3.negative-15
ol
for bonfire in bonfires
if completedBonfireList.indexOf(bonfire._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/bonfires/#{bonfire.name}")= bonfire.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/bonfires/#{bonfire.name}")= bonfire.name
h2
span.fa.fa-angle-double-right
|   Ziplines (200 hours of front end development)
.col-xs-12
h3.negative-15
ol
for zipline in ziplines
if completedCoursewareList.indexOf(zipline._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{zipline.name}")= zipline.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{zipline.name}")= zipline.name
h2
span.fa.fa-level-down
|   Basejumps (200 hours of full stack development)
.col-xs-12
h3.negative-15
ol
for basejump in basejumps
if completedCoursewareList.indexOf(basejump._id) > -1
.row
.hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
.col-xs-12.col-sm-9.col-md-10
li.faded
a(href="/challenges/#{basejump.name}")= basejump.name
else
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/challenges/#{basejump.name}")= basejump.name
h2
span.ion-ios-heart   Nonprofit Projects (800 hours of real-world experience)*
h3.negative-15
ul
.row
.hidden-xs.col-sm-3.col-md-2
span
.col-xs-12.col-sm-9.col-md-10
li
a(href="/nonprofits/directory") Browse our nonprofit projects
p * Complete all Waypoints, Bonfires, Ziplines and Basejumps to be assigned your first nonprofit project
//#announcementModal.modal(tabindex='-1')
// .modal-dialog

View File

@ -2,40 +2,37 @@ extends ../layout
block content
script.
var challengeName = 'Field Guide View';
.col-xs-12.col-sm-12.col-md-12
.panel.panel-info
.panel-heading.text-center
h1= title
.panel-body
.row
.col-xs-12
div!= description
.spacer
.spacer
.spacer
.col-xs-12.col-sm-6.col-sm-offset-3
.text-center
if user
.next-field-guide-button.btn.btn-primary.btn-big.btn-block Next article (ctrl + enter)
.ten-pixel-break
#showAllButton.btn.btn-info.btn-big.btn-block Show me all articles
if !user
.ten-pixel-break
a.btn.btn-big.signup-btn.btn-block(href="/login") Start learning to code (it's free)
.panel.panel-info.no-padding
.panel-heading.text-center
h1= title
.panel-body
div!= description
.spacer
#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.
$(document).ready(function() {
$('body').keydown(function(e) {
if (e.ctrlKey && e.keyCode == 13) {
$('.next-field-guide-button').click();
}
});
.spacer
.spacer
.col-xs-12.col-sm-6.col-sm-offset-3
.text-center
if user
.next-field-guide-button.btn.btn-primary.btn-big.btn-block Next article (ctrl + enter)
.ten-pixel-break
#showAllButton.btn.btn-info.btn-big.btn-block Show me all articles
if !user
.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')
.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.
$(document).ready(function() {
$('body').keydown(function(e) {
if (e.ctrlKey && e.keyCode == 13) {
$('.next-field-guide-button').click();
}
});
});

View File

@ -2,77 +2,76 @@ 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
.row
.col-xs-12.col-sm-10.col-sm-offset-1
.row
.panel.panel-info
.panel-heading.text-center= title
.panel-body
.row
.col-xs-12.col-sm-10.col-sm-offset-1
.row
.col-xs-12
img.img-center.img-responsive(src=imageUrl)
.spacer
.row
.col-xs-12.col-sm-4
img.img-responsive(src=logoUrl)
.col-xs-12.col-sm-8
.col-xs-12
img.img-center.img-responsive(src=imageUrl)
.spacer
.row
.col-xs-12.col-sm-4
img.img-responsive(src=logoUrl)
.col-xs-12.col-sm-8
.col-xs-12
h4= whatDoesNonprofitDo
h4
a(href=websiteLink)= websiteLink
.spacer
h3 Project Description:
.col-xs-12
h4.negative-15 #{projectDescription} (About #{estimatedHours} hours per camper)
.spacer
h3 This project involves building:
h4.negative-15.col-xs-12
if (approvedWebsite)
.ion-android-globe   Website
if (approvedDonor)
.ion-card   Donor Management System
if (approvedInventory)
.ion-ios-box   Inventory Management System
if (approvedVolunteer)
.ion-android-calendar   Volunteer Management System
if (approvedForm)
.ion-ios-list   Webform
if (approvedCommunity)
.ion-ios-people   Community Management System
if (approvedELearning)
.ion-university   E-learning Platform
if (approvedOther)
.ion-settings   Other tools
h3 Project Status: #{currentStatus}
if (interestedCampers && interestedCampers.length > 0)
h3 Interested campers:
.col-xs-12.text-left
for interestedCamper in interestedCampers
a(href='/' + interestedCamper.username class="interested-camper-image")
img.profile-picture.float-right(src=interestedCamper.picture)
if (assignedCampers && assignedCampers.length > 0)
h3 Assigned campers:
.col-xs-12.text-left
for assignedCamper in assignedCampers
a(href='/' + assignedCamper.username class="interested-camper-image")
img.profile-picture.float-right(src=assignedCamper.picture)
.spacer
if (!buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2
.text-center
a.btn.btn-primary.btn-big.btn-block.disabled(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project *
p * Complete all our Bonfires, Ziplines, and Basejumps to unlock this.
#showAllButton.btn.btn-info.btn-big.btn-block Show all Nonprofits Projects
if (buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2
.text-center
a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project
#showAllButton.btn.btn-info.btn-big.btn-block Show all Nonprofits Projects
.row
.col-xs-12.text-center
if !user
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
h4= whatDoesNonprofitDo
h4
a(href=websiteLink)= websiteLink
.spacer
h3 Project Description:
.col-xs-12
h4.negative-15 #{projectDescription} (About #{estimatedHours} hours per camper)
.spacer
h3 This project involves building:
h4.negative-15.col-xs-12
if (approvedWebsite)
.ion-android-globe   Website
if (approvedDonor)
.ion-card   Donor Management System
if (approvedInventory)
.ion-ios-box   Inventory Management System
if (approvedVolunteer)
.ion-android-calendar   Volunteer Management System
if (approvedForm)
.ion-ios-list   Webform
if (approvedCommunity)
.ion-ios-people   Community Management System
if (approvedELearning)
.ion-university   E-learning Platform
if (approvedOther)
.ion-settings   Other tools
h3 Project Status: #{currentStatus}
if (interestedCampers && interestedCampers.length > 0)
h3 Interested campers:
.col-xs-12.text-left
for interestedCamper in interestedCampers
a(href='/' + interestedCamper.username class="interested-camper-image")
img.profile-picture.float-right(src=interestedCamper.picture)
if (assignedCampers && assignedCampers.length > 0)
h3 Assigned campers:
.col-xs-12.text-left
for assignedCamper in assignedCampers
a(href='/' + assignedCamper.username class="interested-camper-image")
img.profile-picture.float-right(src=assignedCamper.picture)
.spacer
if (!buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2
.text-center
a.btn.btn-primary.btn-big.btn-block.disabled(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project *
p * Complete all our Bonfires, Ziplines, and Basejumps to unlock this.
#showAllButton.btn.btn-info.btn-big.btn-block Show all Nonprofits Projects
if (buttonActive)
.col-xs-12.col-sm-8.col-sm-offset-2
.text-center
a.btn.btn-primary.btn-big.btn-block(href='/nonprofits/interested-in-nonprofit/#{dashedName}') I'm interested in building this project
#showAllButton.btn.btn-info.btn-big.btn-block Show all Nonprofits Projects
.row
.col-xs-12.text-center
if !user
a.btn.btn-cta.signup-btn.btn-primary(href="/login") Start learning to code (it's free)
.spacer
#show-all-dialog.modal(tabindex='-1')
.modal-dialog.animated.fadeInUp.fast-animation
.modal-content

View File

@ -1,55 +1,70 @@
.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.
script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
script.
var getLinkedName = function getLinkedName(name) {
return name.trim().toLowerCase().replace(/\s/g, '-');
}
$.ajax({
url: '/stories/hotStories',
type: 'GET'
})
.success(
function(data) {
for (var i = 0; i < data.length; i++) {
var div = document.createElement('div');
var linkedName = getLinkedName(data[i].storyLink);
var rank = data[i].rank;
var getLinkedName = function getLinkedName(name) {
return name.trim().toLowerCase().replace(/\s/g, '-');
}
$.ajax({
url: '/stories/hotStories',
type: 'GET'
})
.success(
function(data) {
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='col-xs-12 text-left'>" +
"<h2 class='col-xs-1 col-sm-1 positive-5'>" +
(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'/>" +
"</a>" +
"</div>" +
"<div class='col-xs-9 col-sm-10'>" +
"<div class='row'>" +
"<div class='story-headline col-xs-12'>" +
"<a href='" + data[i].link + "' target='_blank'>" +
data[i].headline +
"</a>" +
$(div)
.html(
"<div class='row'>" +
"<div class='hidden-xs col-sm-2 col-md-1 positive-5 news-number'>" +
(i + 1) +
"</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='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 wrappable'>" +
"<a href='" + data[i].link + "' target='_blank'>" +
data[i].headline +
"</a>" +
"</div>" +
"<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 " +
moment(data[i].timePosted).fromNow() +
" 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'>" +
"<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 " +
moment(data[i].timePosted).fromNow() +
" by <a href='/" + data[i].author.username + "'>@" + data[i].author.username + "</a> " +
"</span>" +
"<br><a class='btn btn-no-shadow btn-primary btn-block btn-primary-ghost' href='/stories/" + linkedName + "'>discuss</a>" +
"</div>" +
"</div>" +
"</div>" +
"</div>"
);
$(div).addClass('story-list')
$(div).appendTo($('#story-list'));
}
});
"</div>" +
"</div>"
);
$(div).addClass('story-list news-box')
$(div).appendTo($('#story-list'));
}
});

View File

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

View File

@ -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 &thinsp;
// | Hot
// label.btn.btn-primary.btn-big(class="#{ page === 'recent' ? 'active' : '' }")
// input#option2(href='/stories/recent', type='radio', name='options')
// i.ion-ios-clock &thinsp;
// | 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 &thinsp;
// | Submit
// label.btn.btn-primary.btn-big(class="#{ page === 'search' ? 'active' : '' }")
// input#option4(href='/stories/search', type='radio', name='options')
// i.ion-search &thinsp;
// | 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'));
}
});
}

View File

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