LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update the design of the help center portal (#6775)

Browse Source
This commit is contained in:
Pranav Raj S
2023-05-08 15:31:38 -07:00
committed by GitHub
parent 2b88ecdfc4
commit ce3e38df0f
20 changed files with 73 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@@ -177,6 +177,7 @@ group :development do
gem 'bullet'
gem 'letter_opener'
gem 'web-console'
gem 'scss_lint', require: false
# used in swagger build
gem 'json_refs'

8
Gemfile.lock
View File

@@ -643,6 +643,11 @@ GEM
sexp_processor (~> 4.6)
ruby_parser (3.20.0)
sexp_processor (~> 4.16)
sass (3.7.4)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
sassc (2.4.0)
ffi (~> 1.9)
sassc-rails (2.1.2)
@@ -653,6 +658,8 @@ GEM
tilt
scout_apm (5.3.3)
parser
scss_lint (0.60.0)
sass (~> 3.5, >= 3.5.5)
seed_dump (3.3.1)
activerecord (>= 4)
activesupport (>= 4)
@@ -874,6 +881,7 @@ DEPENDENCIES
rubocop-rails
rubocop-rspec
scout_apm
scss_lint
seed_dump
sentry-rails
sentry-ruby

2
app/controllers/api/v1/accounts/portals_controller.rb
View File

@@ -30,7 +30,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
ActiveRecord::Base.transaction do
@portal.update!(portal_params) if params[:portal].present?
# @portal.custom_domain = parsed_custom_domain
process_attached_logo
process_attached_logo if params[:blob_id].present?
rescue StandardError => e
Rails.logger.error e
render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity

2
app/javascript/portal/application.scss
View File

@@ -11,7 +11,7 @@
html,
body {
font-family: $font-family;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
height: 100%;

12
app/javascript/portal/components/PublicArticleSearch.vue
View File

@@ -1,8 +1,5 @@
<template>
<div
v-on-clickaway="closeSearch"
class="mx-auto max-w-md w-full relative my-4"
>
<div v-on-clickaway="closeSearch" class="max-w-2xl w-full relative my-4">
<public-search-input
v-model="searchTerm"
:search-placeholder="searchTranslations.searchPlaceholder"
@@ -10,7 +7,7 @@
/>
<div
v-if="shouldShowSearchBox"
class="absolute show-search-box w-full"
class="absolute top-16 w-full"
@mouseover="openSearch"
>
<search-suggestions
@@ -122,8 +119,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.show-search-box {
top: 4rem;
}
</style>

9
app/javascript/portal/components/PublicSearchInput.vue
View File

@@ -1,17 +1,16 @@
<template>
<div
class="w-full flex items-center rounded-md border-solid h-16 bg-white px-4 py-2 text-slate-600"
class="w-full flex items-center rounded-md border-solid border-2 h-16 bg-white px-4 py-2 text-slate-600"
:class="{
'shadow border-2 border-woot-100': isFocused,
'border border-slate-50 shadow-sm': !isFocused,
'shadow border-woot-100': isFocused,
'border-slate-50 shadow-sm': !isFocused,
}"
>
<fluent-icon icon="search" />
<input
:value="value"
type="text"
class="w-full search-input focus:outline-none text-base h-full bg-white px-2 py-2
text-slate-700 placeholder-slate-500 sm:text-sm"
class="w-full focus:outline-none text-base h-full bg-white px-2 py-2 text-slate-700 placeholder-slate-500"
:placeholder="searchPlaceholder"
role="search"
@input="onChange"

2
app/javascript/shared/assets/stylesheets/shadows.scss
View File

@@ -13,7 +13,7 @@
0 0.4rem 1.2rem rgb(0 0 0 / 7%);
--shadow-bulk-action-container:
6px 3px 22px 9px rgb(181 181 181 / 25%);
--shadow-context-menu: rgb(22 23 24 / 35%) 0px 10px 38px -10px,
--shadow-context-menu: rgb(22 23 24 / 30%) 0px 10px 38px -10px,
rgb(22 23 24 / 20%) 0px 10px 20px -15px;
--shadow-widget-builder: 0 0px 20px 5px rgb(0 0 0 / 10%);
}

1
app/views/public/api/v1/models/_article.json.jbuilder
View File

@@ -7,6 +7,7 @@ json.status article.status
json.position article.position
json.account_id article.account_id
json.last_updated_at article.updated_at
json.slug article.slug
if article.portal.present?
json.portal do

2
app/views/public/api/v1/portals/_category-block.html.erb
View File

@@ -1,6 +1,6 @@
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
<div class="flex justify-between items-center w-full">
<h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
<h3 class="text-xl text-slate-800 font-medium font-semibold leading-relaxed hover:underline">
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
<%= category.name %>
</a>

11
app/views/public/api/v1/portals/_header.html.erb
View File

@@ -1,8 +1,11 @@
<header class="bg-white mx-auto px-4 max-w-5xl w-full">
<nav class="px-0 flex" aria-label="Top">
<div class="w-full py-8 flex items-center">
<a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="text-base font-semibold">
<header class="bg-white w-full shadow-sm sticky top-0 z-50">
<nav class=" flex bg-white mx-auto max-w-6xl px-8" aria-label="Top">
<div class="w-full py-5 flex items-center">
<a href="/hc/<%= @portal.slug %>/<%= @portal.config['default_locale'] || params[:locale] %>/" class="h-10 text-lg flex items-center text-slate-900 font-semibold">
<% if @portal.logo.present? %>
<img src="<%= url_for(@portal.logo) %>" class="h-10 w-auto mr-2" />
<% end %>
<%= @portal.name %>
</a>
<% if @portal.homepage_link %>

10
app/views/public/api/v1/portals/_hero.html.erb
View File

@@ -1,10 +1,10 @@
<section class="bg-gradient-to-b from-white to-slate-75 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
<div class="mx-auto w-full max-w-2xl flex flex-col items-center">
<h1 class="text-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-normal text-center">
<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
<section class="pt-8 pb-16 md:py-20 w-full bg-woot-50 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
<div class="mx-auto max-w-6xl px-8 flex flex-col items-center sm:items-start">
<h1 class="text-2xl md:text-4xl text-slate-900 font-semibold leading-normal">
<%= portal.header_text %>
</h1>
<p class="text-slate-600 py-2 text-center my-2 max-w-sm leading-normal"><%= I18n.t('public_portal.hero.sub_title') %></p>
<p class="text-slate-600 text-center text-lg leading-normal pt-4 pb-4"><%= I18n.t('public_portal.hero.sub_title') %></p>
<div id="search-wrap"></div>
</div>
</section>

2
app/views/public/api/v1/portals/_uncategorized-block.html.erb
View File

@@ -1,6 +1,6 @@
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
<div class="flex justify-between items-center w-full">
<h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline">
<h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline">
<%= category %>
</h3>
<span class="text-slate-500">

8
app/views/public/api/v1/portals/articles/index.html.erb
View File

@@ -12,7 +12,7 @@
<span>/</span>
</div>
<% @articles.each do |article| %>
<h1 class="text-4xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
<h1 class="text-4xl font-semibold md:tracking-normal leading-snug md:text-5xl text-slate-900">
<%= article.title %></h1>
<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
<div class="flex items-center space-x-2">
@@ -28,9 +28,9 @@
</div>
</div>
</div>
<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
<article class="space-y-8 ">
<div class="text-slate-800 font-sans leading-8 text-lg subpixel-antialiased max-w-3xl blog-content">
<div class="max-w-4xl flex-grow w-full px-8 py-16 mx-auto space-y-12">
<article class="space-y-8">
<div class="text-slate-800 font-sans leading-8 text-lg max-w-3xl blog-content">
</div>
</article>
</div>

45
app/views/public/api/v1/portals/articles/show.html.erb
View File

@@ -11,26 +11,25 @@
<% end %>
<% end %>
<div class="bg-gradient-to-b from-white to-slate-50">
<div class="max-w-5xl px-8 lg:px-4 pt-8 pb-16 mx-auto space-y-4 w-full">
<% if @article.category.present? %>
<div>
<a
class="text-slate-700 hover:underline leading-8 text-sm font-medium"
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
>
<%= I18n.t('public_portal.common.home') %>
</a>
<span class="text-xs text-slate-600 px-1">/</span>
<a
class="text-slate-700 hover:underline leading-8 text-sm font-medium"
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
>
<%= @article.category.name %>
</a>
</div>
<% end %>
<h1 class="text-3xl font-bold md:tracking-normal leading-snug md:text-5xl text-slate-900">
<!-- The inline styles are intentional, migrate it to classes after upgrading to tailwind v3 -->
<div class="bg-woot-50 py-8 shadow-inner" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
<div class="max-w-6xl px-8 pt-8 pb-16 mx-auto space-y-4 w-full">
<div>
<a
class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>"
>
Home
</a>
<span class="text-xs text-slate-600 px-1">/</span>
<a
class="text-slate-700 hover:underline leading-8 text-sm font-semibold"
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/categories/<%= @article.category.slug %>"
>
<%= @article.category.name %>
</a>
</div>
<h1 class="text-3xl font-semibold md:tracking-normal leading-snug md:text-4xl text-slate-900">
<%= @article.title %>
</h1>
<div class="flex flex-col items-start justify-between w-full md:flex-row md:items-center pt-2">
@@ -47,9 +46,9 @@
</div>
</div>
</div>
<div class="max-w-5xl flex-grow w-full px-6 py-8 mx-auto space-y-12">
<article class="space-y-8 ">
<div class="text-slate-800 leading-8 text-lg subpixel-antialiased max-w-3xl prose break-words">
<div class="max-w-6xl flex-grow w-full px-8 py-8 mx-auto space-y-12">
<article class="space-y-8">
<div class="text-slate-800 text-lg max-w-3xl prose break-words">
<p><%= @parsed_content %></p>
</div>
</article>

2
app/views/public/api/v1/portals/categories/_category-block.html.erb
View File

@@ -1,7 +1,7 @@
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
<div class="flex justify-between items-center w-full">
<h3 class="text-xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed hover:underline"">
<h3 class="text-xl text-slate-900 font-semibold leading-relaxed hover:underline"">
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/categories/<%= category.slug %>">
<%= category.name %>
</a>

2
app/views/public/api/v1/portals/categories/_hero.html.erb
View File

@@ -1,7 +1,7 @@
<section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
<div class="mx-auto max-w-2xl">
<h1 class="text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
<h1 class="text-4xl text-slate-900 font-semibold leading-relaxed text-center"><%= portal.header_text %></h1>
<p class="text-slate-700 py-2 text-center"><%= I18n.t('public_portal.hero.sub_title') %></p>
</div>
</section>

2
app/views/public/api/v1/portals/categories/index.html.erb
View File

@@ -1,6 +1,6 @@
<%= render "hero", portal: @portal %>
<div class="max-w-4xl w-full flex-grow mx-auto py-16">
<div class="max-w-6xl w-full flex-grow mx-auto py-16">
<div class="grid grid-cols-2 gap-x-32 gap-y-12">
<% @categories.each do |category| %>
<%= render "category-block", category: category, portal: @portal %>

12
app/views/public/api/v1/portals/categories/show.html.erb
View File

@@ -5,17 +5,17 @@
<% end %>
<% end %>
<div class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16">
<div class="max-w-5xl px-4 mx-auto space-y-2">
<div class="bg-woot-50 pt-16 pb-20" style="background: url(/assets/images/hc/grid.svg) color-mix(in srgb, <%= @portal.color %> 10%, white)">
<div class="max-w-6xl px-8 mx-auto space-y-2">
<a
class="text-slate-700 text-sm hover:underline leading-8"
class="text-slate-700 text-sm hover:underline leading-8 font-semibold"
href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
>
<%= I18n.t('public_portal.common.home') %>
</a>
<span class="text-xs text-slate-600 px-1">/</span>
<div class="flex justify-start items-center w-full">
<h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
<h1 class="text-3xl font-semibold leading-snug md:tracking-normal text-slate-900">
<%= @category.name %>
</h1>
<div class="text-slate-500 px-8 mt-2">
@@ -25,7 +25,7 @@
</div>
</div>
<section class="bg-white max-w-5xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
<section class="bg-white max-w-6xl w-full mx-auto py-6 px-8 flex flex-col items-center justify-center flex-grow">
<div class="py-4 w-full mt-2 flex-grow">
<% if @category.articles.published.size == 0 %>
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl py-6">
@@ -38,7 +38,7 @@
href="/hc/<%= @portal.slug %>/articles/<%= article.slug %>"
>
<div>
<p class="font-medium mb-2 hover:underline"><%= article.title %></p>
<p class="mb-2 hover:underline font-semibold"><%= article.title %></p>
<p class="text-sm">
<%= I18n.t('public_portal.common.last_updated_on', last_updated_on: article.updated_at.strftime("%b %d, %Y")) %>
</p>

2
app/views/public/api/v1/portals/show.html.erb
View File

@@ -1,5 +1,5 @@
<%= render "public/api/v1/portals/hero", portal: @portal %>
<div class="max-w-5xl w-full flex-grow mx-auto py-8 px-4">
<div class="max-w-6xl w-full flex-grow mx-auto py-8 px-4">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-32 gap-y-0 lg:gap-y-12">
<% @portal.categories.where(locale: @locale).joins(:articles).where(articles:{ status: :published }).order(position: :asc).group('categories.id').each do |category| %>
<%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>

4
public/assets/images/hc/grid.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="#0f172a"
stroke-opacity="0.04">
<path d="M0 .5H31.5V32" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 173 B