Skip to content

Commit

Permalink
Merge pull request #136 from debtcollective/feat/design-enhancements-…
Browse files Browse the repository at this point in the history 
…for-homepage

Feat/design enhancements for homepage
  • Loading branch information
@castrolem
castrolem authored Nov 26, 2019
2 parents 22b7a58 + 4ef0b08 commit 73219de
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 34 deletions.
3 changes: 3 additions & 0 deletions .env.template
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,6 @@ SSO_COOKIE_NAME=tdc_auth_token
DEV_HOST=fundraising.lvh.me
DISCOURSE_LOGIN_URL=http://lvh.me:3000/session/sso_cookies
DISCOURSE_SIGNUP_URL=http://lvh.me:3000/session/sso_cookies/signup
RECAPTCHA_SITE_KEY=6LdL6s--------------
RECAPTCHA_SECRET_KEY=6LdL6s--------------

32 changes: 31 additions & 1 deletion app/assets/stylesheets/static_pages.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
#plans {
background: linear-gradient($bg-color-primary, $bg-color-secondary 50%);
padding-top: 10rem !important;
padding-bottom: 10rem !important;
}

#money {
Expand All @@ -31,9 +32,12 @@

#money,
#cause {
font-size: 120%;

> .content {
@media(min-width: 48rem) {
max-width: 50%;
font-size: 130%;
}
}

Expand Down Expand Up @@ -62,7 +66,7 @@
}

@media (min-width: 80rem) {
min-height: 100vh;
min-height: 50vh;
}
}

Expand Down Expand Up @@ -102,6 +106,7 @@
color: $secondary-color;
border-radius: 0.4rem;
padding: 1.5rem;
text-decoration: none;

@media (min-width: 80rem) {
min-width: 18rem;
Expand All @@ -114,6 +119,11 @@
color: $primary-color;
}

&:hover {
background-color:lighten($primary-color,50);
border-color: lighten($primary-color,40);
}

h3 {
width: 100%;
font-weight: bold;
Expand Down Expand Up @@ -143,6 +153,26 @@
}
}

.section {
&__with-background {
position: relative;

.overlay {
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
}

.content {
z-index: 2;
color: white;
}
}
}

.retail {
&--products {
display: flex;
Expand Down
57 changes: 29 additions & 28 deletions app/views/static_pages/home.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,33 +32,33 @@
<p id="notice"><%= notice %></p>
<div class="subscription--plans">
<% @plans.each do |plan| %>
<div class="subscription--plan" id="subscription-<%= plan.name.parameterize.underscore %>">
<h3>
<%= plan.name %>
<span class="subscription--plan-price"><%= number_to_currency(plan.amount).gsub(/\.00$/, "") %><span>/mo</span></span>
</h3>
<h4><%= plan.headline %></h4>
<%= plan.description %>
<% if @current_user_subscription&.plan&.id == plan.id %>
<p>Subscribed</p>
<% else %>
<p><%= link_to 'Subscribe', @current_user ? new_subscription_charge_path(plan_id: plan) : login_path %></p>
<% end %>
</div>
<%= link_to @current_user ? new_subscription_charge_path(plan_id: plan) : login_path, class: "subscription--plan", id: "subscription-#{plan.name.parameterize.underscore}" do %>
<div>
<h3>
<%= plan.name %>
<span class="subscription--plan-price"><%= number_to_currency(plan.amount).gsub(/\.00$/, "") %><span>/mo</span></span>
</h3>
<h4><%= plan.headline %></h4>
<%= plan.description %>
<% if @current_user_subscription&.plan&.id == plan.id %>
<p><strong>Current subscription</strong></p>
<% end %>
</div>
<% end %>
<% end %>
<div class="subscription--plan" id="one-time-donation">
<%= link_to new_charge_path, class: "subscription--plan", id: "one-time-donation" do %>
<h3>Other</h3>
<h4>Pay what you can. Every dollar counts.</h4>
<p>“To each according to their ability, to each according to their need.” Contributing what you can, where you can is what we’re all about.</p>
<p>Folks who donate $100 on a one-time basis will receive a free gift from our store. People who pay dues at the rate of $100 per month or more will receive a thank you call from us.</p>
<p><%= link_to 'Make a donation today', new_charge_path %></p>
</div>
<%end%>
</div>
</section>

<%= image_tag('donate_photo_1_mobile.jpg', class: 'mobile-section-photo', alt: 'Help us fund our mission') %>

<section id="money">
<section class="section__with-background" id="money">
<div class="overlay"></div>
<div class="content">
<h2>Where is your money going?</h2>
<p>Organizing for big change requires resources. Becoming a dues- paying member is not charity. Instead, your support is an act of ongoing solidarity with other people in debt. Your money will go directly to funding:</p>
Expand All @@ -73,7 +73,8 @@

<%= image_tag('donate_photo_2_mobile.jpg', class: 'mobile-section-photo', alt: 'Push us closer to future projects') %>

<section id="cause">
<section class="section__with-background" id="cause">
<div class="overlay"></div>
<div class="content">
<h2>What are we fighting for?</h2>
<p>The Debt Collective believes that everyone has the right to basic needs without going into debt. We believe that there is power in numbers. Our mission is to make a better world together, including:</p>
Expand All @@ -89,19 +90,19 @@

<section id="retail">
<section class="retail--products">
<div class="retail--product">
<%= image_tag('product_1.jpg', alt: 'sweather') %>
</div>
<div class="retail--product">
<%= image_tag('product_1.jpg', alt: 't-shirt') %>
</div>
<div class="retail--product">
<%= image_tag('product_1.jpg', alt: 'stickers') %>
</div>
<a class="retail--product" href="https://teespring.com/debt-collective-hoodie?tsmac=store&tsmic=debt-collective&pid=377&cid=100057" target="_blank">
<%= image_tag('https://vangogh.teespring.com/v3/image/Blih3sQlMhOo3g6tisuAir-a97c/756/560.jpg', alt: 'classic pullover hoodie') %>
</a>
<a class="retail--product" href="https://teespring.com/i-am-your-professor?tsmac=store&tsmic=debt-collective&pid=389&cid=100028" target="_blank">
<%= image_tag('https://vangogh.teespring.com/v3/image/vutuslAnEfk1PfHMusvVTc6o0C8/756/560.jpg', alt: 'classic tee') %>
</a>
<a class="retail--product" href="https://teespring.com/i-am-your-professor?tsmac=store&tsmic=debt-collective&pid=388&cid=101860" target="_blank">
<%= image_tag('https://vangogh.teespring.com/v3/image/AHXiaeMgyuBvCGgDpAWoNcqR3dw/756/560.jpg', alt: 'women comfort tee') %>
</a>
</section>
<h2>Rather war your cause on your sleeve?</h2>
<p>You can also support the Debt Collective by purchasing merchandise through our online store.</p>
<a href="#" class="button primary as-block">Browse the Shop</a>
<a href="https://teespring.com/stores/debt-collective" class="button primary as-block" target="_blank">Browse the Shop</a>
</section>
</main>

Expand Down
4 changes: 2 additions & 2 deletions spec/features/donations_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
expect(page).to_not have_content('Log In') # checking user is logged in
expect(page).to have_content('Pay what you can')

click_link 'Make a donation today'
click_link 'one-time-donation'

expect(page).to have_content('Pay what you can. Every dollar counts.')

Expand All @@ -35,7 +35,7 @@
expect(page).to have_content('Log In') # checking user is logged in
expect(page).to have_content('Pay what you can')

click_link 'Make a donation today'
click_link 'one-time-donation'

expect(page).to have_content('Pay what you can. Every dollar counts.')

Expand Down
4 changes: 1 addition & 3 deletions spec/features/subscriptions_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@
expect(page).to_not have_content('Log In') # checking user is logged in
expect(page).to have_content(plan.name)

within "#subscription-#{plan.name.parameterize.underscore}" do
click_link 'Subscribe'
end
click_link "subscription-#{plan.name.parameterize.underscore}"

expect(page).to have_content(plan.name)
expect(page).to have_content(plan.description)
Expand Down

0 comments on commit 73219de

Please sign in to comment.