Skip to content
Browse files

cleanup view & css

  • Loading branch information...
1 parent fb5c591 commit 3cbc3775b03b3d3625bc2505bb37a4944bed27f3 @nov committed
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."

0 comments on commit 3cbc377

Please sign in to comment.
Something went wrong with that request. Please try again.