Skip to content

Commit f1d8771

Browse files
marcoranierimarcoranieri
authored
Merge pull request #1417 from Nexmo/APIDOC-195_new_documentation_page
API-195: New layout/design for landing page in /documentation + bump …
2 parents 5e157d4 + f791bb1 commit f1d8771

File tree

11 files changed

+163
-4
lines changed

11 files changed

+163
-4
lines changed

‎lib/nexmo_developer/app/assets/stylesheets/application.scss

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
//= require stylesheets/nexmo-oas-renderer
22

33
@import "blog/*";
4+
@import "landing_page_documentation/*";
45

56
.Adp-use-cases__background {
67
filter: blur(100px);

‎lib/nexmo_developer/app/assets/stylesheets/blog/blog.scss

+37
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
.flex-between { display:flex;justify-content: space-between; }
1111

1212

13+
.h-100 { height: 100%; }
14+
15+
1316
// Author info column
1417
#author-column {
1518
width: 25%;
@@ -278,6 +281,40 @@
278281
}
279282
}
280283

284+
.my-4col-grid {
285+
min-width: 300px;
286+
287+
display: grid !important;
288+
grid-template-columns: repeat(4, 1fr) !important;
289+
grid-auto-rows: 1fr !important;
290+
grid-column-gap: 10px !important;
291+
grid-row-gap: 10px !important;
292+
293+
.Vlt-card:hover {
294+
-webkit-transform: none;
295+
transform: none;
296+
-webkit-box-shadow: 0 10px 30px rgba(19, 20, 21, .1);
297+
box-shadow: 0 10px 30px rgba(19, 20, 21, .1);
298+
transform: none;
299+
}
300+
301+
.Vlt-card {
302+
-webkit-box-shadow: none;
303+
box-shadow: none;
304+
border: 1px solid #e6e6e6;
305+
-webkit-transition: -webkit-box-shadow ease-in 0.25s;
306+
transition: -webkit-box-shadow ease-in 0.25s;
307+
transition: box-shadow ease-in 0.25s;
308+
transition: box-shadow ease-in 0.25s, -webkit-box-shadow ease-in 0.25s;
309+
}
310+
}
311+
312+
@media screen and (max-width: 767px) {
313+
.my-4col-grid {
314+
grid-template-columns: repeat(1, 1fr) !important;
315+
}
316+
}
317+
281318

282319
// Media query for MAIN MOBILE LAYOUT
283320
@media screen and (max-width: 480) {

‎lib/nexmo_developer/app/assets/stylesheets/landing_page_documentation/landing_page_documentation.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.pb-20 { padding-bottom: 20px; }
2+
3+
.landing_page_documentation .container {
4+
max-width: 1300px;
5+
padding: 24px 20px 0;
6+
margin: 50px auto;
7+
}

‎lib/nexmo_developer/app/controllers/static_controller.rb

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
class StaticController < ApplicationController
2-
before_action :canonical_redirect, only: :documentation
2+
before_action :canonical_redirect, only: %i[documentation landing_page_documentation]
33

44
def default_landing
55
yaml_name = request[:landing_page]
@@ -99,6 +99,13 @@ def documentation
9999
render layout: 'documentation'
100100
end
101101

102+
def landing_page_documentation
103+
@homepage = true
104+
@landing_info ||= LoadConfig.load_file('config/documentation_page/en/doc_landing.yml')
105+
106+
render layout: 'landing_page_documentation'
107+
end
108+
102109
def community
103110
@navigation = :community
104111
@document_title = 'Community'

‎lib/nexmo_developer/app/views/layouts/landing_page_documentation.html.erb

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<%= render partial: 'layouts/partials/head' %>
4+
5+
<body class="Nxd-template landing_page_documentation" data-push-state-root="<%= canonical_path %>">
6+
<%= render partial: 'layouts/partials/header' %>
7+
8+
<main class="wrapper wrapper--tint" tabindex="2">
9+
<%= render partial: 'layouts/partials/notices' %>
10+
<div class="container">
11+
<%= yield %>
12+
</div>
13+
<%= render partial: 'layouts/partials/improve_this_page' %>
14+
</main>
15+
16+
<% if @homepage %>
17+
<%= render partial: 'layouts/partials/footer' %>
18+
<% end %>
19+
</body>
20+
</html>

‎lib/nexmo_developer/app/views/static/landing_page_documentation.html.erb

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="wrapper wrapper--tint">
2+
<div class="center spacious content-block">
3+
<h1><%= @landing_info['title'].html_safe %></h1>
4+
<p><%= raw @landing_info['subtitle'].html_safe %></p>
5+
</div>
6+
7+
<div>
8+
9+
<!-- TOP section -->
10+
<% @landing_info['top-section'].each do |product| %>
11+
<hr class="hr--tall Vlt-gradient--blue-to-pink"></hr>
12+
<h2><%= product.keys.first %></h2>
13+
<br>
14+
15+
<div class="my-4col-grid">
16+
<% product[product.keys.first].each do |card| %>
17+
<%= render partial: 'static/landing_page_documentation/partials/small_product_card', locals: { product: card } %>
18+
<% end %>
19+
</div>
20+
<% end %>
21+
22+
<!-- BOTTOM section -->
23+
<% @landing_info['bottom-section'].each do |product| %>
24+
<hr class="hr--tall Vlt-gradient--blue-to-pink"></hr>
25+
<h2><%= product.keys.first %></h2>
26+
<br>
27+
28+
<div class="my-2col-grid">
29+
<% product[product.keys.first].each do |cards| %>
30+
<%= render partial: 'static/landing_page_documentation/partials/big_product_card', locals: { products: cards } %>
31+
<% end %>
32+
</div>
33+
<% end %>
34+
35+
</div>
36+
37+
</div>

‎lib/nexmo_developer/app/views/static/landing_page_documentation/partials/_big_product_card.html.erb

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="Vlt-card" style="padding: 35px;">
2+
<div class="d-flex-column h-100">
3+
4+
<div>
5+
<svg class="Vlt-icon Vlt-icon--larger Vlt-purple"><use xlink:href="/symbol/volta-icons.svg#<%= products['icon'] %>" /></svg>
6+
</div>
7+
8+
<h3 class="Vlt-purple pb-20">
9+
<%= products.keys.first %>
10+
</h3>
11+
12+
<div class="my-2col-grid">
13+
<% products[products.keys.first].each do |item| %>
14+
<div>
15+
<p><a href=<%= item['product_name_link'] %>><%= item['product_name'] %></a></p>
16+
17+
<p><%= item['product_description'] %></p>
18+
</div>
19+
<% end %>
20+
</div>
21+
22+
</div>
23+
</div>

‎lib/nexmo_developer/app/views/static/landing_page_documentation/partials/_small_product_card.html.erb

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div class="Vlt-card" style="padding: 35px;">
2+
<div class="d-flex-column h-100">
3+
4+
<div>
5+
<svg class="Vlt-icon Vlt-icon--larger Vlt-purple"><use xlink:href="/symbol/volta-icons.svg#<%= product['icon'] %>" /></svg>
6+
</div>
7+
8+
<h3 class="Vlt-purple">
9+
<a href=<%= product['product_name_link'] %>><%= product['product_name'] %></a>
10+
</h3>
11+
12+
<div style="flex-grow: 1; padding: 25px 0;">
13+
<p><%= raw product['product_description'].html_safe %></p>
14+
</div>
15+
16+
<div class="Vlt-card__footer flex-between">
17+
<% if product['getting_started_link'].present? %>
18+
<a href=<%= product['getting_started_link'] %> class="Vlt-btn Vlt-btn--secondary Vlt-btn--app Vlt-btn--small">Getting Started</a>
19+
<% end %>
20+
21+
<% if product['api_reference_link'].present? %>
22+
<a href=<%= product['api_reference_link'] %> class="Vlt-btn Vlt-btn--white Vlt-btn--app Vlt-btn--small" style="border: 1px solid;">API Reference ></a>
23+
<% end %>
24+
</div>
25+
26+
</div>
27+
</div>

‎lib/nexmo_developer/config/routes.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
products.include?(request['product']) && includes_language
5656
}
5757

58-
get '(/:locale)/documentation', to: 'static#documentation', constraints: LocaleConstraint.new, as: :documentation
58+
get '(/:locale)/documentation', to: 'static#landing_page_documentation', constraints: LocaleConstraint.new, as: :documentation
5959

6060
get '/community/slack', to: 'slack#join'
6161
post '/community/slack', to: 'slack#invite'

‎lib/nexmo_developer/spec/controllers/static_controller_spec.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
describe 'GET default_landing' do
2323
before do
2424
Rails.application.routes.draw do
25-
get '(/:locale)/documentation', to: 'static#documentation', as: :documentation
25+
get '(/:locale)/documentation', to: 'static#landing_page_documentation', as: :documentation
2626
get '/use-cases', to: 'use_case#index', as: :use_cases
2727
get '/careers', to: 'careers#index', as: :careers
2828
get '(/:locale)/api', to: 'api#index', as: :api

‎lib/nexmo_developer/version.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module NexmoDeveloper
2-
VERSION = '0.2.6'.freeze
2+
VERSION = '0.3.0'.freeze
33
end

0 commit comments

Comments
 (0)