mythic-insight/legendary-doc-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Standardize vertical and horizontal spacing

Browse source
This commit is contained in:
Robert Prehn 2020-09-15 16:19:40 -05:00
parent a5cdecfabb
commit 1e726cbf57
9 changed files with 59 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/app/priv/templates/phx.gen.html/index.html.eex
View file

@ -1,9 +1,9 @@
<div class="p-6">
<div class="flex pb-6">
<div class="w-/12 flex-1 text-4xl">
<h1 class="px-5 -mb-2 mt-2"><%= schema.human_plural %></h1>
<h1 class="px-4 -mb-2 mt-2"><%= schema.human_plural %></h1>
</div>
<div class="w-/12 text-4xl text-right px-5">
<div class="w-/12 text-4xl text-right px-4">
<%%= styled_button_link "New <%= schema.human_singular %>", to: Routes.<%= schema.route_helper %>_path(@conn, :new) %>
</div>
</div>
@ -12,16 +12,16 @@
<table class="min-w-full leading-normal">
<thead>
<tr>
<%= for {k, _} <- schema.attrs do %> <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th>
<%= for {k, _} <- schema.attrs do %> <th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"><%= Phoenix.Naming.humanize(Atom.to_string(k)) %></th>
<% end %>
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th>
<th class="px-4 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider"></th>
</tr>
</thead>
<tbody>
<%%= case @<%= schema.plural %> do %>
<%%= [] -> %>
<tr>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>">
<td class="px-4 py-6 border-b border-gray-200 bg-white text-sm" colspan="<%= (schema.attrs |> Enum.count()) + 1 %>">
No results.
</td>
</tr>
@ -29,15 +29,15 @@
<%%= for <%= schema.singular %> <- @<%= schema.plural %> do %>
<tr>
<%= for {k, _} <- schema.attrs do %>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
<%%= link <%= schema.singular %>.<%= k %>, to: Routes.<%= schema.route_helper %>_path(@conn, :show, <%= schema.singular %>) %>
</td>
<% end %>
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
<td class="px-4 py-6 border-b border-gray-200 bg-white text-sm">
<label class="relative">
...
<input type="checkbox" class="hidden hidden-options-toggle">
<div class="hidden absolute right-0 rounded bg-white border shadow-lg py-4 w-48">
<div class="hidden absolute right-0 rounded bg-white border shadow-lg py-6 w-48">
<%%= link "Edit", to: Routes.<%= schema.route_helper %>_path(@conn, :edit, <%= schema.singular %>), class: "block px-4 py-2 hover:bg-gray-100" %>
<%%= link "Delete", to: Routes.<%= schema.route_helper %>_path(@conn, :delete, <%= schema.singular %>), method: :delete, data: [confirm: "Are you sure?"], class: "text-red-600 block px-4 py-2 hover:bg-gray-100" %>
</div>

2
apps/auth_web/lib/auth_web/templates/pow/registration/new.html.eex
View file

@ -9,7 +9,7 @@
<% end %>
<div class="flex flex-wrap mt-6">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
</div>
</div>

4
apps/auth_web/lib/auth_web/templates/pow/session/new.html.eex
View file

@ -10,12 +10,12 @@
<% end %>
<% end %>
<div class="w-full flex flex-wrap mt-6">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
</div>
<%= if pow_extension_enabled?(PowResetPassword) do %>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new), class: "text-blue-100") %></span>
</div>
<% end %>

4
apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/new.html.eex
View file

@ -6,11 +6,11 @@
<% end %>
<% end %>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
</div>
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-6 px-4">
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
</div>
<% end %>

72
apps/content/lib/content_web/templates/posts/static_pages/index.html.eex
View file

@ -18,7 +18,7 @@
<h1 class="text-white font-semibold text-5xl">
Your story starts with us.
</h1>
<p class="mt-4 text-lg text-gray-300">
<p class="mt-6 text-lg text-gray-300">
This is a simple example of a Landing Page you can build using
Tailwind Starter Kit. It features multiple CSS components
based on the Tailwindcss design system.
@ -52,16 +52,16 @@
<div class="flex flex-wrap">
<div class="lg:pt-12 pt-6 w-full md:w-4/12 px-4 text-center">
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
>
<div class="px-4 py-5 flex-auto">
<div class="px-4 py-6 flex-auto">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-red-400"
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-red-400"
>
<i class="fas fa-award"></i>
</div>
<h6 class="text-xl font-semibold">Awarded Agency</h6>
<p class="mt-2 mb-4 text-gray-600">
<p class="mt-2 mb-6 text-gray-600">
Divide details about your product or agency work into parts.
A paragraph describing a feature will be enough.
</p>
@ -70,16 +70,16 @@
</div>
<div class="w-full md:w-4/12 px-4 text-center">
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
>
<div class="px-4 py-5 flex-auto">
<div class="px-4 py-6 flex-auto">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-blue-400"
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-6 shadow-lg rounded-full bg-blue-400"
>
<i class="fas fa-retweet"></i>
</div>
<h6 class="text-xl font-semibold">Free Revisions</h6>
<p class="mt-2 mb-4 text-gray-600">
<p class="mt-2 mb-6 text-gray-600">
Keep you user engaged by providing meaningful information.
Remember that by this time, the user is curious.
</p>
@ -88,16 +88,16 @@
</div>
<div class="pt-6 w-full md:w-4/12 px-4 text-center">
<div
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg"
class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-lg"
>
<div class="px-4 py-5 flex-auto">
<div class="px-4 py-6 flex-auto">
<div
class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-400"
>
<i class="fas fa-fingerprint"></i>
</div>
<h6 class="text-xl font-semibold">Verified Company</h6>
<p class="mt-2 mb-4 text-gray-600">
<p class="mt-2 mb-6 text-gray-600">
Write a few lines about each one. A paragraph describing a
feature will be enough. Keep you user engaged!
</p>
@ -116,14 +116,14 @@
Working with us is a pleasure
</h3>
<p
class="text-lg font-light leading-relaxed mt-4 mb-4 text-gray-700"
class="text-lg font-light leading-relaxed mt-6 mb-6 text-gray-700"
>
Don't let your uses guess by attaching tooltips and popoves to
any element. Just make sure you enable them first via
JavaScript.
</p>
<p
class="text-lg font-light leading-relaxed mt-0 mb-4 text-gray-700"
class="text-lg font-light leading-relaxed mt-0 mb-6 text-gray-700"
>
The kit comes with three pre-built pages to help you get started
faster. You can change the text and images and you're good to
@ -131,7 +131,7 @@
</p>
<a
href="https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation"
class="font-bold text-gray-800 mt-8"
class="font-bold text-gray-800 mt-6"
>Check Tailwind Starter Kit!</a
>
</div>
@ -144,7 +144,7 @@
src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1051&amp;q=80"
class="w-full align-middle rounded-t-lg"
/>
<blockquote class="relative p-8 mb-4">
<blockquote class="relative p-8 mb-6">
<svg
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
@ -208,7 +208,7 @@
<i class="fas fa-rocket text-xl"></i>
</div>
<h3 class="text-3xl font-semibold">A growing company</h3>
<p class="mt-4 text-lg leading-relaxed text-gray-600">
<p class="mt-6 text-lg leading-relaxed text-gray-600">
The extension comes with three pre-built pages to help you get
started faster. You can change the text and images and you're
good to go.
@ -266,7 +266,7 @@
<div class="flex flex-wrap justify-center text-center mb-24">
<div class="w-full lg:w-6/12 px-4">
<h2 class="text-4xl font-semibold">Here are our heroes</h2>
<p class="text-lg leading-relaxed m-4 text-gray-600">
<p class="text-lg leading-relaxed mx-4 my-6 text-gray-600">
According to the National Oceanic and Atmospheric
Administration, Ted, Scambos, NSIDClead scentist, puts the
potentially record maximum.
@ -275,7 +275,7 @@
</div>
<div class="flex flex-wrap">
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6">
<div class="px-4">
<img
alt="..."
src="./assets/img/team-1-800x800.jpg"
@ -309,7 +309,7 @@
</div>
</div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6">
<div class="px-4">
<img
alt="..."
src="./assets/img/team-2-800x800.jpg"
@ -338,7 +338,7 @@
</div>
</div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6">
<div class="px-4">
<img
alt="..."
src="./assets/img/team-3-800x800.jpg"
@ -372,7 +372,7 @@
</div>
</div>
<div class="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
<div class="px-6">
<div class="px-4">
<img
alt="..."
src="./assets/img/team-4-470x470.png"
@ -437,7 +437,7 @@
<div class="flex flex-wrap text-center justify-center">
<div class="w-full lg:w-6/12 px-4">
<h2 class="text-4xl font-semibold text-white">Build something</h2>
<p class="text-lg leading-relaxed mt-4 mb-4 text-gray-500">
<p class="text-lg leading-relaxed mt-6 mb-6 text-gray-500">
Put the potentially record low maximum sea ice extent tihs year
down to low ice. According to the National Oceanic and
Atmospheric Administration, Ted, Scambos.
@ -451,7 +451,7 @@
>
<i class="fas fa-medal text-xl"></i>
</div>
<h6 class="text-xl mt-5 font-semibold text-white">
<h6 class="text-xl mt-6 font-semibold text-white">
Excelent Services
</h6>
<p class="mt-2 mb-4 text-gray-500">
@ -465,10 +465,10 @@
>
<i class="fas fa-poll text-xl"></i>
</div>
<h5 class="text-xl mt-5 font-semibold text-white">
<h5 class="text-xl mt-6 font-semibold text-white">
Grow your market
</h5>
<p class="mt-2 mb-4 text-gray-500">
<p class="mt-2 mb-6 text-gray-500">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
@ -479,8 +479,8 @@
>
<i class="fas fa-lightbulb text-xl"></i>
</div>
<h5 class="text-xl mt-5 font-semibold text-white">Launch time</h5>
<p class="mt-2 mb-4 text-gray-500">
<h5 class="text-xl mt-6 font-semibold text-white">Launch time</h5>
<p class="mt-2 mb-6 text-gray-500">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
@ -497,34 +497,34 @@
>
<div class="flex-auto p-5 lg:p-10">
<h4 class="text-2xl font-semibold">Want to work with us?</h4>
<p class="leading-relaxed mt-1 mb-4 text-gray-600">
<p class="leading-relaxed mt-1 mb-6 text-gray-600">
Complete this form and we will get back to you in 24 hours.
</p>
<div class="relative w-full mb-3 mt-8">
<div class="relative w-full mb-6 mt-6">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="full-name"
>Full Name</label
><input
type="text"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Full Name"
style="transition: all 0.15s ease 0s;"
/>
</div>
<div class="relative w-full mb-3">
<div class="relative w-full mb-6">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="email"
>Email</label
><input
type="email"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Email"
style="transition: all 0.15s ease 0s;"
/>
</div>
<div class="relative w-full mb-3">
<div class="relative w-full mb-6">
<label
class="block uppercase text-gray-700 text-xs font-bold mb-2"
for="message"
@ -532,13 +532,13 @@
><textarea
rows="4"
cols="80"
class="px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
class="px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
placeholder="Type a message..."
></textarea>
</div>
<div class="text-center mt-6">
<button
class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
class="bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
type="button"
style="transition: all 0.15s ease 0s;"
>

1
apps/core/assets/.stylelintignore Normal file
View file

@ -0,0 +1 @@
node_modules

5
apps/core/assets/postcss.config.js
View file

@ -1,7 +1,10 @@
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-import')({
plugins: [
require('stylelint')(),
]
}),
require('tailwindcss'),
require('autoprefixer'),
require('csswring')(),

2
apps/core/lib/core_web/templates/layout/_menu.html.eex
View file

@ -6,7 +6,7 @@
</div>
<div class="block lg:hidden">
<button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
<button id="nav-toggle" class="flex items-center px-4 py-2 border rounded text-white border-grey-dark hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>

6
apps/core/lib/core_web/views/helpers.ex
View file

@ -125,17 +125,17 @@ defmodule CoreWeb.Helpers do
"bg-white shadow rounded p-3"
end
defp default_classes_for_type(:checkbox), do: "appearance-none h-10 w-10 bg-white checked:bg-gray-500 rounded shadow focus:outline-none focus:shadow-outline text-white text-xl font-bold mb-2"
defp default_classes_for_type(_), do: "px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
defp default_classes_for_type(_), do: "px-4 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full"
def styled_button(text) do
~E"""
<%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
<%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
"""
end
def styled_button_link(text, opts) do
~E"""
<%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %>
<%= link text, opts ++ [class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-4 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full"] %>
"""
end