Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

cleanup view & css

  • Loading branch information...
commit 3cbc3775b03b3d3625bc2505bb37a4944bed27f3 1 parent fb5c591
@nov authored
View
1  app/assets/stylesheets/_common_variables.scss
@@ -1,5 +1,6 @@
/* colors */
+$white: #fff;
$gray: #666;
$dark_gray: #333;
$light_gray: #ddd;
View
19 app/assets/stylesheets/layout.css.scss
@@ -1,24 +1,5 @@
@import "common_variables";
-dl {
- dt {
- font-weight: bold;
- }
- dd {
- margin-left: 1em;
- }
-}
-
-.boxes {
- display: -webkit-box;
-}
-
-@media only screen and (max-width: 767px) {
- .boxes {
- display: block;
- }
-}
-
div.jGrowl {
div.notice div.jGrowl-message {
color: $green;
View
10 app/assets/stylesheets/payments.css.scss
@@ -1,14 +1,18 @@
@import "common_variables";
+$padding: 15px;
+
.payments {
- dl {
+ pre {
+ overflow-y: auto;
margin: 1% 0;
- padding: 15px;
+ padding: $padding;
border: 1px solid $light_gray;
border-radius: $default_radius;
+ background: transparentize($white, 0.8);
}
.unsubscribe {
- font-size: 12px;
+ font-size: .6em;
a {
color: $dark_red;
text-decoration: none;
View
69 app/assets/stylesheets/top.css.scss
@@ -1,5 +1,9 @@
@import "common_variables";
+@function box_width($num_boxes) {
+ @return 100% / $num_boxes - $article_margin / 2 - $article_padding * 2;
+}
+
$article_margin: 2%;
$article_padding: 2%;
@@ -7,42 +11,49 @@ $article_padding: 2%;
section {
margin: 20px 0;
}
- article {
- width: 50% - $article_margin / 2 - $article_padding * 2;
- margin: 10px 0;
- padding: 10px $article_padding;
- border: 1px solid $light_gray;
- border-radius: $default_radius;
- form {
- text-align: right;
- }
- input[type=submit] {
- opacity: 0.6;
- text-indent: -9999px;
- width: 150px;
- height: 33px;
- border: none;
- background: url(https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif);
- &:hover {
- opacity: 1;
+ .boxes {
+ display: -webkit-box;
+ article {
+ width: box_width(2);
+ margin: 10px 0;
+ padding: 10px $article_padding;
+ border: 1px solid $light_gray;
+ border-radius: $default_radius;
+ &:not(:first-child) {
+ margin-left: $article_margin;
+ }
+ form {
+ text-align: right;
}
- &:active {
- opacity: 0.8;
+ input[type=submit] {
+ opacity: 0.6;
+ text-indent: -9999px;
+ width: 150px;
+ height: 33px;
+ border: none;
+ background: url(https://www.paypal.com/en_US/i/btn/btn_dg_pay_w_paypal.gif);
+ &:hover {
+ opacity: 1;
+ }
+ &:active {
+ opacity: 0.8;
+ }
}
}
}
- .boxes article:first-child {
- margin-right: $article_margin;
- }
@media only screen and (max-width: 767px) {
+ $article_margin: 0;
$article_padding: $article_padding * 2;
- article {
- width: 100% - $article_padding * 2;
- padding: 10px $article_padding;
- }
- .boxes article:first-child {
- margin-right: 0;
+ .boxes {
+ display: block;
+ article {
+ width: box_width(1);
+ padding: 10px $article_padding;
+ &:not(:first-child) {
+ margin-left: 0;
+ }
+ }
}
.popup {
display: none;
View
1  app/controllers/payments_controller.rb
@@ -3,6 +3,7 @@ class PaymentsController < ApplicationController
def show
@payment = Payment.find_by_identifier! params[:id]
+ @details = @payment.details(client)
end
def create
View
20 app/models/payment.rb
@@ -6,6 +6,26 @@ class Payment < ActiveRecord::Base
scope :digital, where(digital: true)
scope :popup, where(popup: true)
+ def goods_type
+ digital? ? :digital : :real
+ end
+
+ def payment_type
+ recurring? ? :recurring : :instant
+ end
+
+ def ux_type
+ popup? ? :popup : :redirect
+ end
+
+ def details(client)
+ if recurring?
+ client.subscription(self.identifier)
+ else
+ client.details(self.token)
+ end
+ end
+
attr_reader :redirect_uri, :popup_uri
def setup!(client)
response = client.setup(
View
2  app/views/layouts/_header.html.erb
@@ -1,6 +1,6 @@
<header>
<h1><%= link_to t('title'), root_path %></h1>
- <p><%= t 'description' %></p>
+ <p><%=t 'description' %></p>
<div class="money">
<figure>
<%= image_tag 'money.png' %>
View
3  app/views/layouts/application.html.erb
@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8"/>
- <title><%= t 'title' %></title>
+ <title><%=t 'title' %></title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
@@ -16,5 +16,6 @@
<%= render 'layouts/header' %>
<%= yield %>
<%= render 'layouts/footer' %>
+ <%= yield :bottom %>
<% end %>
</html>
View
35 app/views/payments/show.html.erb
@@ -1,32 +1,11 @@
<article>
- <h1><%= t 'payment.title' %></h1>
- <dl>
- <% if @payment.digital? %>
- <dt><%= t 'payment_types.digital_goods.title' %></dt>
- <dd><%= t 'payment_types.digital_goods.description' %></dd>
- <% else %>
- <dt><%= t 'payment_types.real_goods.title' %></dt>
- <dd><%= t 'payment_types.real_goods.description' %></dd>
- <% end %>
+ <h1>
+ <%=t @payment.payment_type %> Payment for <%=t @payment.goods_type %> Goods
<% if @payment.recurring? %>
- <dt>
- <%= t 'payment_types.recurring.title' %>
- <span class="unsubscribe">
- (<%= link_to 'Unsubscribe', payment_path(@payment.identifier), method: :delete %>)
- </span>
- </dt>
- <dd><%= t 'payment_types.recurring.description' %></dd>
- <dt>Profile ID</dt>
- <dd><%= @payment.identifier %></dd>
- <% else %>
- <dt><%= t 'payment_types.instant.title' %></dt>
- <dd><%= t 'payment_types.instant.description' %></dd>
- <dt>Transaction ID</dt>
- <dd><%= @payment.identifier %></dd>
- <dt>Payer ID</dt>
- <dd><%= @payment.payer_id %></dd>
+ <span class="unsubscribe">
+ (<%= link_to t('unsubscribe'), payment_path(@payment.identifier), method: :delete %>)
+ </span>
<% end %>
- <dt>Token</dt>
- <dd><%= @payment.token %></dd>
- </dl>
+ </h1>
+ <pre><%= JSON.pretty_generate JSON.parse(@details.to_json) %></pre>
</article>
View
115 app/views/top/index.html.erb
@@ -1,80 +1,43 @@
<section>
- <h1><%= t 'top.title' %></h1>
- <p><%= t 'top.pay_for_me' %></p>
- <p><%= t 'top.set_your_own' %></p>
-
- <section>
- <h2><%= t 'payment_types.real_goods.title'%></h2>
- <p><%= t 'payment_types.real_goods.description' %></p>
- <div class="boxes">
- <article>
- <h3><%= t 'payment_types.instant.title' %></h3>
- <p><%= t 'payment_types.instant.description' %></p>
- <p><%= t 'payment_types.instant.example' %></p>
- <%= render 'payments/form', payment: Payment.new %>
- </article>
- <article>
- <h3><%= t 'payment_types.recurring.title' %></h3>
- <p><%= t 'payment_types.recurring.description' %></p>
- <p><%= t 'payment_types.recurring.example' %></p>
- <%= render 'payments/form', payment: Payment.recurring.new %>
- </article>
- </div>
- </section>
-
- <section>
- <h2><%= t 'payment_types.digital_goods.title'%></h2>
- <p><%= t 'payment_types.digital_goods.description' %></p>
- <div class="boxes">
- <article>
- <h3><%= t 'payment_types.instant.title' %></h3>
- <p><%= t 'payment_types.instant.description' %></p>
- <p><%= t 'payment_types.instant.digital.example' %></p>
- <%= render 'payments/form', payment: Payment.digital.new %>
- </article>
- <article>
- <h3><%= t 'payment_types.recurring.title' %></h3>
- <p><%= t 'payment_types.recurring.description' %></p>
- <p><%= t 'payment_types.recurring.digital.example' %></p>
- <%= render 'payments/form', payment: Payment.digital.recurring.new %>
- </article>
- </div>
- </section>
-
- <section class="popup">
- <h2><%= t 'payment_types.digital_goods.title'%> (Popup)</h2>
- <p><%= t 'payment_types.digital_goods.description' %></p>
- <p><%= t 'payment_types.digital_goods.popup.description' %></p>
- <div class="boxes">
- <article>
- <h3><%= t 'payment_types.instant.title' %></h3>
- <p><%= t 'payment_types.instant.description' %></p>
- <p><%= t 'payment_types.instant.digital.example' %></p>
- <%= render 'payments/form', payment: Payment.digital.popup.new %>
- </article>
- <article>
- <h3><%= t 'payment_types.recurring.title' %></h3>
- <p><%= t 'payment_types.recurring.description' %></p>
- <p><%= t 'payment_types.recurring.digital.example' %></p>
- <%= render 'payments/form', payment: Payment.digital.popup.recurring.new %>
- </article>
- </div>
- </section>
-
+ <h1><%=t 'top.title' %></h1>
+ <p><%=t 'top.pay_for_me' %></p>
+ <p><%=t 'top.set_your_own' %></p>
+ <% [
+ [Payment.new, Payment.recurring.build ],
+ [Payment.digital.build, Payment.digital.recurring.build ],
+ [Payment.digital.popup.build, Payment.digital.popup.recurring.build]
+ ].each do |payments| %>
+ <% payment = payments.first %>
+ <%= content_tag :section, :class => payment.ux_type do %>
+ <h2>
+ <%=t "payments.#{payment.goods_type}.title" %>
+ <% if payment.popup? %>(Popup)<% end %>
+ </h2>
+ <p><%=t "payments.#{payment.goods_type}.description" %></p>
+ <% if payment.popup? %>
+ <p><%=t "payments.popup.description" %></p>
+ <% end %>
+ <div class="boxes">
+ <%= render payments %>
+ </div>
+ <% end %>
+ <% end %>
</section>
-<script src="https://www.paypalobjects.com/js/external/dg.js"></script>
-<script>
- $(function () {
- var popup_forms = $('.popup form');
- $.each(popup_forms, function (index, form) {
- var sandbox = <%= Paypal.sandbox?.to_json %>;
- var submit_id = 'paypayl_submit_' + index;
- $('input[type=submit]', form).attr({id: submit_id});
- flow_config = {trigger: submit_id};
- if (sandbox) flow_config.stage = sandbox;
- window.paypal_flows = [];
- window.paypal_flows.push(new PAYPAL.apps.DGFlow(flow_config));
+<%= content_for :bottom do %>
+ <script src="https://www.paypalobjects.com/js/external/dg.js"></script>
+ <script>
+ $(function () {
+ var popup_forms = $('.popup form');
+ $.each(popup_forms, function (index, form) {
+ var sandbox = <%= Paypal.sandbox?.to_json %>;
+ var submit_id = 'paypayl_submit_' + index;
+ $('input[type=submit]', form).attr({id: submit_id});
+ flow_config = {trigger: submit_id};
+ if (sandbox) flow_config.stage = sandbox;
+ window.paypal_flows = [];
+ window.paypal_flows.push(new PAYPAL.apps.DGFlow(flow_config));
+ });
});
- });
-</script>
+ </script>
+<% end %>
View
18 config/locales/en.yml
@@ -8,26 +8,26 @@ en:
title: How to Learn?
pay_for_me: "You can pay $1 for me on this site. It's great for me."
set_your_own: You can also download the source code and set your own merchant account (maybe sandbox account).
- payment:
- title: Payment Details
- payment_types:
+ payments:
instant:
title: Instant Payment
description: Pay money and complete the transaction.
- example: ex.) Buy a book
+ real:
+ example: ex.) Buy a book
digital:
example: ex.) Buy online game items
recurring:
title: Recurring Payment
description: Pay fixed amount of money every month/week.
- example: ex.) Subscribe a magazine
+ real:
+ example: ex.) Subscribe a magazine
digital:
example: ex.) Pay online membership fee
- real_goods:
+ real:
title: Real Goods
description: Buy a real goods online. You gives your shipment address to the buyer.
- digital_goods:
+ digital:
title: Digital Goods
description: Buy a digital goods without disclosing your shipment address.
- popup:
- description: "Popup UX would be important for online games which don't want to let users leave their site."
+ popup:
+ description: "Popup UX would be important for online games which don't want to let users leave their site."
Please sign in to comment.
Something went wrong with that request. Please try again.