chore: Update design of the help-center articles (#5459)
- Update designs - Fixes meta tags - Update typography
This commit is contained in:
Pranav Raj S
GitHub
parent
54d0055e86
commit
eb8e348ec1
16 changed files with 228 additions and 226 deletions
|
|
@ -7,7 +7,7 @@
|
||||||
@import 'widget/assets/scss/buttons';
|
@import 'widget/assets/scss/buttons';
|
||||||
@import 'widget/assets/scss/mixins';
|
@import 'widget/assets/scss/mixins';
|
||||||
@import 'widget/assets/scss/forms';
|
@import 'widget/assets/scss/forms';
|
||||||
@import 'shared/assets/fonts/widget_fonts';
|
@import 'shared/assets/fonts/inter';
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|
@ -16,63 +16,3 @@ body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.woot-survey-wrap {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-content {
|
|
||||||
@apply text-lg;
|
|
||||||
@apply font-sans;
|
|
||||||
@apply text-slate-800;
|
|
||||||
@apply leading-normal;
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
@apply font-sans leading-relaxed font-extrabold text-slate-900;
|
|
||||||
@apply mb-4;
|
|
||||||
@apply mt-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
@apply text-5xl leading-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
@apply text-4xl leading-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
@apply text-3xl leading-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
@apply text-2xl leading-normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
@apply text-lg;
|
|
||||||
@apply font-sans;
|
|
||||||
@apply text-slate-800;
|
|
||||||
@apply leading-relaxed;
|
|
||||||
@apply mb-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
@apply list-disc;
|
|
||||||
@apply pl-8;
|
|
||||||
@apply ml-4;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
@apply text-lg;
|
|
||||||
@apply font-sans;
|
|
||||||
@apply text-slate-800;
|
|
||||||
@apply leading-relaxed;
|
|
||||||
@apply mb-2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -14,29 +14,25 @@ By default, it renders:
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="<%= I18n.locale %>">
|
<html lang="<%= I18n.locale %>">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="ROBOTS" content="NOODP">
|
<meta name="viewport" content="initial-scale=1">
|
||||||
<meta name="viewport" content="initial-scale=1">
|
<%= javascript_pack_tag 'portal' %>
|
||||||
|
<%= stylesheet_pack_tag 'portal' %>
|
||||||
<%= javascript_pack_tag 'portal' %>
|
<%= csrf_meta_tags %>
|
||||||
<%= stylesheet_pack_tag 'portal' %>
|
<% if content_for?(:head) %>
|
||||||
|
<%= yield(:head) %>
|
||||||
|
<% else %>
|
||||||
<%= csrf_meta_tags %>
|
<title><%= @portal.page_title%></title>
|
||||||
<title><%= @portal.page_title%></title>
|
<% end %>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="antialiased">
|
||||||
|
<main class="main-content min-h-screen flex flex-col" role="main">
|
||||||
<div class="app-container">
|
<%= render "public/api/v1/portals/header", portal: @portal %>
|
||||||
<main class="main-content min-h-screen flex flex-col" role="main">
|
<%= yield %>
|
||||||
<%= render "public/api/v1/portals/header", portal: @portal %>
|
<%= render "public/api/v1/portals/footer" %>
|
||||||
<%= yield %>
|
</main>
|
||||||
<%= render "public/api/v1/portals/footer" %>
|
</div>
|
||||||
</main>
|
</body>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
|
<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">
|
<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 subpixel-antialiased leading-relaxed hover:underline"">
|
||||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
|
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"><%= category.name %> </a>
|
||||||
</h3> <span class="text-slate-500"><%= category.articles.published.size %> articles</span>
|
</h3>
|
||||||
|
<span class="text-slate-500">
|
||||||
|
<%= category.articles.published.size %>
|
||||||
|
<%= category.articles.published.size === 1 ? 'article': 'articles' %>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="py-4 w-full mt-2 flex-grow">
|
<div class="py-4 w-full mt-2 flex-grow">
|
||||||
<% if category.articles.published.size == 0 %>
|
<% if category.articles.published.size == 0 %>
|
||||||
|
|
@ -11,32 +14,52 @@
|
||||||
<p class="text-sm text-slate-500">No articles here</p>
|
<p class="text-sm text-slate-500">No articles here</p>
|
||||||
</div>
|
</div>
|
||||||
<% else %>
|
<% else %>
|
||||||
<% category.articles.published.take(5).each do |article| %>
|
<% category.articles.published.take(5).each do |article| %>
|
||||||
<div class="flex justify-between content-center h-8 my-1">
|
<div class="flex justify-between content-center h-8 my-1">
|
||||||
<a class="text-slate-800 hover:underline leading-8"
|
<a
|
||||||
href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>" class=""><%= article.title %></a>
|
class="text-slate-800 hover:underline leading-8"
|
||||||
<span class="flex items-center">
|
href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>/<%= article.id %>"
|
||||||
<svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
>
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
<%= article.title %>
|
||||||
<path
|
</a>
|
||||||
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
|
<span class="flex items-center">
|
||||||
</svg>
|
<svg
|
||||||
</span>
|
class="w-4 h-4 fill-current text-slate-700"
|
||||||
</div>
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
<% end %>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
<a
|
||||||
class="flex flex-row items-center text-base font-sans font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
|
href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
||||||
|
class="flex flex-row items-center text-base font-medium text-woot-500 hover:underline mt-4"
|
||||||
|
style="color: <%= portal.color %>"
|
||||||
|
>
|
||||||
View all articles
|
View all articles
|
||||||
<span class="ml-2">
|
<span class="ml-2">
|
||||||
<svg class="w-4 h-4 fill-current text-woot-500" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
class="w-4 h-4 fill-current text-woot-500"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
style="color: <%= portal.color %>"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
<path
|
<path
|
||||||
d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" />
|
d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z"
|
||||||
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<footer class="bg-slate-50 py-16 flex flex-col items-center justify-center">
|
<footer class="pt-16 pb-8 flex flex-col items-center justify-center">
|
||||||
<div class="mx-auto max-w-2xl">
|
<div class="mx-auto max-w-2xl">
|
||||||
<p class="text-slate-700 py-2 text-center">Made with <a href="/" target="_blank">Chatwoot 💙</a>.</p>
|
<p class="text-slate-700 py-2 text-center">
|
||||||
|
Made with <a class="hover:underline" href="https://www.chatwoot.com" target="_blank" rel="noopener noreferrer nofoll/ow">Chatwoot</a> 💙.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,35 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<header class="bg-white mx-auto px-4 max-w-4xl w-full border border-slate-600">
|
<header class="bg-white mx-auto px-4 max-w-5xl w-full">
|
||||||
<nav class="px-0 flex" aria-label="Top">
|
<nav class="px-0 flex" aria-label="Top">
|
||||||
<div class="w-full py-4 flex items-center justify-between">
|
<div class="w-full py-8 flex items-center">
|
||||||
<div class="flex items-center">
|
<a href="/hc/<%= @portal.slug %>/<%= params[:locale] %>/" class="text-base font-semibold">
|
||||||
<a href="#">
|
<%= @portal.name %>
|
||||||
<span class="sr-only"><%= portal.name %>%></span>
|
</a>
|
||||||
<img class="h-8 w-auto"
|
<% if @portal.homepage_link %>
|
||||||
src="https://d33wubrfki0l68.cloudfront.net/973467c532160fd8b940300a43fa85fa2d060307/dc9a0/static/brand-73f58cdefae282ae74cebfa74c1d7003.svg"
|
<div class="ml-8 border-l-1 border-slate-50 hidden md:block">
|
||||||
alt="">
|
|
||||||
</a>
|
|
||||||
<div class="ml-8 border-l-1 border-slate-50">
|
|
||||||
<div class="flex-grow flex-shrink-0">
|
<div class="flex-grow flex-shrink-0">
|
||||||
<a href="#" class="flex flex-row items-center text-sm font-sans font-medium text-slate-700 hover:text-slate-800 hover:underline"> Goto main site
|
<a target="_blank" rel="noopener noreferrer nofollow" href="<%= @portal.homepage_link %>" class="flex flex-row items-center text-sm font-medium text-slate-700 hover:text-slate-800 hover:underline"> Go to main site
|
||||||
<span class="ml-2">
|
<span class="ml-2">
|
||||||
<svg class="w-4 h-4 fill-current text-slate-600" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
|
<svg class="w-4 h-4 fill-current text-slate-600" width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a.996.996 0 0 0 .3-.58.758.758 0 0 0-.001-.29.995.995 0 0 0-.3-.578l-7.419-7.067Z" /></svg>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-grow justify-end flex-shrink-0 items-center">
|
<div class="flex items-center">
|
||||||
|
<div class="inline-flex relative w-24">
|
||||||
<div>
|
<select
|
||||||
<select
|
data-portal-slug="<%= @portal.slug %>"
|
||||||
value="<%= @portal.config["default_locale"] %>"
|
class="appearance-none w-full bg-white px-3 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline locale-switcher"
|
||||||
data-portal-slug="<%= @portal.slug %>"
|
>
|
||||||
class="h-8 block w-full flex-shrink bg-slate-50 border border-slate-200 text-slate-700 py-1 px-4 pr-8 rounded leading-tight text-base font-medium focus:outline-none focus:bg-white focus:border-slate-500 locale-switcher">
|
<% @portal.config["allowed_locales"].each do |locale| %>
|
||||||
<% @portal.config["allowed_locales"].each do |locale| %>
|
<option <%= locale == params[:locale] ? 'selected': '' %> value="<%= locale %>"><%= locale %></option>
|
||||||
<option value="<%= locale %>"><%= locale %></option>
|
<% end %>
|
||||||
<% end %>
|
</select>
|
||||||
</select>
|
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
|
||||||
|
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<section class="bg-slate-50 py-24 flex flex-col items-center justify-center">
|
<section class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16 md:py-16 flex flex-col items-center justify-center">
|
||||||
<div class="mx-auto max-w-2xl">
|
<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-2xl px-5 md:text-4xl text-slate-900 font-semibold subpixel-antialiased leading-relaxed text-center">
|
||||||
<p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
|
<%= portal.header_text %>
|
||||||
|
</h1>
|
||||||
|
<p class="text-slate-700 py-2 text-center mt-10">Browse the categories below</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
<div class="bg-slate-50">
|
<div class="bg-slate-50">
|
||||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-12 w-full">
|
<div class="max-w-4xl px-6 py-16 mx-auto space-y-12 w-full">
|
||||||
<div class="space-y-4">
|
<div class="space-y-4">
|
||||||
|
|
@ -32,4 +31,3 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,54 @@
|
||||||
<div class="bg-slate-50">
|
<% content_for :head do %>
|
||||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-4 w-full">
|
<title><%= @article.title %> | <%= @portal.name %></title>
|
||||||
|
<% if @article.meta["title"].present? %>
|
||||||
<div>
|
<meta name="title" content="<%= @article.meta["title"] %>">
|
||||||
<a class="text-slate-700 hover:underline leading-8 text-sm font-medium"
|
<% end %>
|
||||||
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>" class=""><%= @portal.name %> Home</a>
|
<% if @article.meta["description"].present? %>
|
||||||
<span class="text-xs text-slate-600 px-1">/</span>
|
<meta name="description" content="<%= @article.meta["description"] %>">
|
||||||
<a class="text-slate-700 hover:underline leading-8 text-sm font-medium"
|
<% end %>
|
||||||
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/<%= @article.category.slug %>"
|
<% if @article.meta["tags"].present? %>
|
||||||
class=""><%= @article.category.name %></a>
|
<meta name="tags" content="<%= @article.meta["tags"].join(',') %>">
|
||||||
<span class="text-xs text-slate-600 px-1">/</span>
|
<% end %>
|
||||||
</div>
|
<% end %>
|
||||||
<h1 class="text-4xl font-bold 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 md:space-x-2">
|
|
||||||
<img src="<%= @article.author.avatar_url %>" alt="" class="w-12 h-812 border rounded-full">
|
|
||||||
<div>
|
|
||||||
<h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.name %></h5>
|
|
||||||
<p class="text-sm font-normal text-slate-700">
|
|
||||||
<%= @article.author.updated_at.strftime("%B %d %Y") %></p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-slate-700 hover:underline leading-8 text-sm font-medium"
|
||||||
|
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-medium"
|
||||||
|
href="/hc/<%= @portal.slug %>/<%= @article.category.locale %>/<%= @article.category.slug %>"
|
||||||
|
>
|
||||||
|
<%= @article.category.name %>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<h1 class="text-3xl font-bold 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">
|
||||||
|
<% if @article.author&.avatar_url&.present? %>
|
||||||
|
<img src="<%= @article.author.avatar_url %>" alt="<%= @article.author.display_name %>" class="w-12 h-12 border rounded-full">
|
||||||
|
<% end %>
|
||||||
|
<div class="pl-1">
|
||||||
|
<h5 class="text-base font-medium text-slate-900 mb-2"><%= @article.author.available_name %></h5>
|
||||||
|
<p class="text-sm font-normal text-slate-700">
|
||||||
|
Last updated on <%= @article.updated_at.strftime("%b %d, %Y") %></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-4xl flex-grow w-full px-6 py-16 mx-auto space-y-12">
|
<div class="max-w-5xl flex-grow w-full px-6 py-8 mx-auto space-y-12">
|
||||||
<article class="space-y-8 ">
|
<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="text-slate-800 leading-8 text-lg subpixel-antialiased max-w-3xl prose">
|
||||||
<p><%= @parsed_content %></p>
|
<p><%= @parsed_content %></p>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<section class="bg-white lg:container w-full py-6 px-4 flex flex-col h-full">
|
<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">
|
<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 subpixel-antialiased leading-relaxed hover:underline"">
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
<a href="/hc/<%= portal.slug %>/<%= category.locale %>/<%= category.slug %>"
|
||||||
class="flex flex-row items-center text-base font-sans font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
|
class="flex flex-row items-center text-base font-medium text-woot-600 hover:text-slate-900 hover:underline mt-4">
|
||||||
|
|
||||||
View all articles
|
View all articles
|
||||||
<span class="ml-2">
|
<span class="ml-2">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<!-- This example requires Tailwind CSS v2.0+ -->
|
|
||||||
<section class="bg-slate-50 py-24 flex flex-col items-center justify-center">
|
<section class="bg-slate-50 py-16 flex flex-col items-center justify-center">
|
||||||
<div class="mx-auto max-w-2xl">
|
<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 subpixel-antialiased leading-relaxed text-center"><%= portal.header_text %></h1>
|
||||||
<p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
|
<p class="text-slate-700 py-2 text-center">Search for the articles here or browse the categories below.</p>
|
||||||
|
|
|
||||||
|
|
@ -7,5 +7,3 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,41 +1,61 @@
|
||||||
|
<% content_for :head do %>
|
||||||
|
<title><%= @category.name %> | <%= @portal.name %></title>
|
||||||
|
<% if @category.description.present? %>
|
||||||
|
<meta name="description" content="<%= @category.description %>">
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
<div class="bg-slate-50">
|
<div class="bg-gradient-to-b from-white to-black-50 pt-8 pb-16">
|
||||||
<div class="max-w-4xl px-6 py-16 mx-auto space-y-8">
|
<div class="max-w-5xl px-4 mx-auto space-y-2">
|
||||||
<a class="text-slate-700 text-sm hover:underline leading-8"
|
<a
|
||||||
href="/hc/<%= @portal.slug %>/<%= @category.locale %>" class=""><%= @portal.name %> Home</a>
|
class="text-slate-700 text-sm hover:underline leading-8"
|
||||||
<span class="text-xs text-slate-600 px-1">/</span>
|
href="/hc/<%= @portal.slug %>/<%= @category.locale %>"
|
||||||
|
>
|
||||||
<div class="flex justify-start items-center w-full">
|
Home
|
||||||
<h1 class="text-3xl font-bold md:tracking-normal leading-snug text-slate-900">
|
</a>
|
||||||
<%= @category.name %></h1>
|
<span class="text-xs text-slate-600 px-1">/</span>
|
||||||
<span class="text-slate-500 px-8"><%= @category.articles.published.size %> articles</span>
|
<div class="flex justify-start items-center w-full">
|
||||||
</div>
|
<h1 class="text-3xl font-bold leading-snug md:tracking-normal text-slate-900">
|
||||||
|
<%= @category.name %>
|
||||||
|
</h1>
|
||||||
|
<div class="text-slate-500 px-8 mt-2"><%= @category.articles.published.size %> articles</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<section class="bg-white max-w-4xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
|
|
||||||
|
|
||||||
<div class="py-4 w-full mt-2 flex-grow">
|
<section class="bg-white max-w-5xl w-full mx-auto py-6 px-4 flex flex-col items-center justify-center flex-grow">
|
||||||
<% if @category.articles.published.size == 0 %>
|
<div class="py-4 w-full mt-2 flex-grow">
|
||||||
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl">
|
<% if @category.articles.published.size == 0 %>
|
||||||
<p class="text-sm text-slate-500">No articles here</p>
|
<div class="h-full flex items-center justify-center bg-slate-50 rounded-xl">
|
||||||
</div>
|
<p class="text-sm text-slate-500">No articles here</p>
|
||||||
<% else %>
|
|
||||||
<% @category.articles.published.each do |article| %>
|
|
||||||
<div class="flex justify-between content-center h-8 my-1">
|
|
||||||
<a class="text-slate-800 hover:underline"
|
|
||||||
href="/hc/<%= @portal.slug %>/<%= @category.locale %>/<%= @category.slug %>/<%= article.id %>"
|
|
||||||
class=""><%= article.title %></a>
|
|
||||||
<span>
|
|
||||||
<svg class="w-4 h-4 fill-current text-slate-700" width="24" height="24" fill="none" viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<% else %>
|
||||||
|
<% @category.articles.published.each do |article| %>
|
||||||
|
<a
|
||||||
|
class="text-slate-800 flex justify-between content-center mb-4 py-2"
|
||||||
|
href="/hc/<%= @portal.slug %>/<%= @category.locale %>/<%= @category.slug %>/<%= article.id %>"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p class="font-medium mb-2 hover:underline"><%= article.title %></p>
|
||||||
|
<p class="text-sm">Last updated on <%= article.updated_at.strftime("%b %d, %Y") %></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
class="w-4 h-4 fill-current text-slate-700"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M8.47 4.22a.75.75 0 0 0 0 1.06L15.19 12l-6.72 6.72a.75.75 0 1 0 1.06 1.06l7.25-7.25a.75.75 0 0 0 0-1.06L9.53 4.22a.75.75 0 0 0-1.06 0Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<% end %>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,8 @@
|
||||||
|
|
||||||
<%= render "public/api/v1/portals/hero", portal: @portal %>
|
<%= 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-4xl w-full flex-grow mx-auto py-16">
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-32 gap-y-0 lg:gap-y-12">
|
||||||
<div class="grid grid-cols-2 gap-x-32 gap-y-12">
|
<% @portal.categories.where(locale: params[:locale]).each do |category| %>
|
||||||
<% @portal.categories.each do |category| %>
|
|
||||||
<%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>
|
<%= render "public/api/v1/portals/category-block", category: category, portal: @portal %>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,6 +27,7 @@
|
||||||
"@rails/webpacker": "5.3.0",
|
"@rails/webpacker": "5.3.0",
|
||||||
"@sentry/tracing": "^6.19.7",
|
"@sentry/tracing": "^6.19.7",
|
||||||
"@sentry/vue": "^6.19.7",
|
"@sentry/vue": "^6.19.7",
|
||||||
|
"@tailwindcss/typography": "0.2.0",
|
||||||
"activestorage": "^5.2.6",
|
"activestorage": "^5.2.6",
|
||||||
"axios": "^0.21.2",
|
"axios": "^0.21.2",
|
||||||
"babel-plugin-syntax-jsx": "^6.18.0",
|
"babel-plugin-syntax-jsx": "^6.18.0",
|
||||||
|
|
|
||||||
|
|
@ -92,5 +92,8 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variants: {},
|
variants: {},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
// eslint-disable-next-line
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2822,6 +2822,11 @@
|
||||||
vue-docgen-loader "^1.5.0"
|
vue-docgen-loader "^1.5.0"
|
||||||
webpack ">=4.0.0 <6.0.0"
|
webpack ">=4.0.0 <6.0.0"
|
||||||
|
|
||||||
|
"@tailwindcss/typography@0.2.0":
|
||||||
|
version "0.2.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.2.0.tgz#b597c83502e3c3c6641a8aaabda223cd494ab349"
|
||||||
|
integrity sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==
|
||||||
|
|
||||||
"@types/anymatch@*":
|
"@types/anymatch@*":
|
||||||
version "1.3.1"
|
version "1.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
|
resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue