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

feat: Replace semantic-ui with tailwind in content section

Browse source
This commit is contained in:
Robert Prehn 2020-09-11 14:21:49 -05:00
parent 3e1d8d3f3a
commit e3f540b785
24 changed files with 331 additions and 390 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
apps/app/priv/templates/phx.gen.html/edit.html.eex
View file

@ -1,20 +1,15 @@
<div class="p-6 mx-auto max-w-2xl">
<div class="flex pb-6">
<div class="w-/12 flex-1 text-4xl">
<h1 class="ui header">Edit <%= schema.human_singular %></h1>
<h1>Edit <%= schema.human_singular %></h1>
</div>
<div class="w-/12 text-4xl text-right">
<%%= styled_button_link "Back", to: Routes.<%= schema.route_helper %>_path(@conn, :index)%>
</div>
</div>
<div class="centered row">
<div class="center aligned column">
<%%= changeset_error_block(@changeset) %>
<div class="bg-white shadow rounded px-4 py-6 bg-gray-300">
<%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :update, @<%= schema.singular %>)) %>
</div>
</div>
</div>
<%%= changeset_error_block(@changeset) %>
<div class="bg-white shadow rounded px-4 py-6 bg-gray-300">
<%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :update, @<%= schema.singular %>)) %>
</div>
</div>

2
apps/app/priv/templates/phx.gen.html/form.html.eex
View file

@ -1,4 +1,4 @@
<%%= form_for @changeset, @action, [class: "ui large form"], fn f -> %>
<%%= form_for @changeset, @action, [], fn f -> %>
<div>
<%= for input <- Mix.Legendary.inputs(schema) do %>
<%= input %>

11
apps/app/priv/templates/phx.gen.html/new.html.eex
View file

@ -8,13 +8,8 @@
</div>
</div>
<div class="centered row">
<div class="center aligned column">
<%%= changeset_error_block(@changeset) %>
<div class="bg-white shadow rounded px-4 py-6 bg-gray-300">
<%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :create)) %>
</div>
</div>
</div>
<%%= changeset_error_block(@changeset) %>
<div class="bg-white shadow rounded px-4 py-6 bg-gray-300">
<%%= render "form.html", Map.put(assigns, :action, Routes.<%= schema.route_helper %>_path(@conn, :create)) %>
</div>
</div>

2
apps/auth/lib/auth/user.ex
View file

@ -27,7 +27,7 @@ defmodule Auth.User do
user_or_changeset
|> pow_user_id_field_changeset(attrs)
|> Changeset.cast(attrs, [:roles])
|> Changeset.cast(attrs, [:roles, :display_name])
|> pow_extension_changeset(attrs)
end

29
apps/auth_web/lib/auth_web/templates/pow/registration/edit.html.eex
View file

@ -1,24 +1,19 @@
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Update My Account
</div>
</h2>
<%= flash_block(@conn) %>
<%= changeset_error_block(@changeset) %>
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
<div class="ui stacked left aligned segment">
<%= styled_input f, :current_password, icon: "lock", type: "password" %>
<%= floating_page_wrapper do %>
<%= floating_form "Update My Account", @changeset do %>
<%= form_for @changeset, @action, [as: :user], fn f -> %>
<div>
<%= styled_input f, :current_password, icon: "lock", type: "password", autocomplete: "current-password" %>
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), icon: "user" %>
<%= styled_input f, :password, icon: "lock", label: "New Password", type: "password", class: "right labeled" do %>
<div class="ui label js-passwordRevealer"><i class="eye icon" style="margin: 0;"></i></div>
<%= styled_input f, :password, [icon: "lock", label: "New Password", type: "password", autocomplete: "new-password"], nil do %>
<div class="password-revealer js-passwordRevealer flex items-center justify-center text-gray-500 bg-gray-200 hover:bg-gray-300 rounded-r">
<span class="fa fa-eye inline"></span>
</div>
<% end %>
<%= submit "Create My Account", class: "ui fluid large teal submit button" %>
<%= styled_button "Create My Account" %>
</div>
<% end %>
</div>
</div>
<% end %>
<% end %>

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

@ -1,12 +1,10 @@
<%= floating_page_wrapper do %>
<%= floating_form "Sign Up", @changeset do %>
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
<div class="ui stacked left aligned segment">
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), placeholder: "E-mail address" %>
<%= styled_input f, :password, placeholder: "Password" %>
<%= form_for @changeset, @action, [as: :user], fn f -> %>
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), placeholder: "E-mail address" %>
<%= styled_input f, :password, placeholder: "Password", autocomplete: "new-password" %>
<%= styled_button "Create My Account" %>
</div>
<%= styled_button "Create My Account" %>
<% end %>
<% end %>

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

@ -1,8 +1,8 @@
<%= floating_page_wrapper do %>
<%= floating_form "Log In", @changeset do %>
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
<%= form_for @changeset, @action, [as: :user], fn f -> %>
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), icon: "user", placeholder: "joe@example.org" %>
<%= styled_input f, :password, icon: "lock", type: "password" %>
<%= styled_input f, :password, icon: "lock", type: "password", autocomplete: "current-password" %>
<%= hidden_input f, :persistent_session, value: "true" %>
<div class="text-center mt-6">
<%= styled_button "Sign In" %>

29
apps/auth_web/lib/auth_web/templates/pow_reset_password/reset_password/edit.html.eex
View file

@ -1,19 +1,12 @@
<div class="ui middle aligned center aligned grid">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Reset Password
</div>
</h2>
<%= flash_block(@conn) %>
<%= changeset_error_block(@changeset) %>
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
<div class="ui stacked left aligned segment">
<%= styled_input f, :password, [icon: "lock", type: "password", class: "right labeled"] do %>
<div class="ui label js-passwordRevealer"><i class="eye icon" style="margin: 0;"></i></div>
<% end %>
</div>
<%= submit "Reset My Password", class: "ui fluid large teal submit button" %>
<%= floating_page_wrapper do %>
<%= floating_form "Reset Password", @changeset do %>
<%= form_for @changeset, @action, [as: :user], fn f -> %>
<%= styled_input f, :password, [icon: "lock", label: "New Password", type: "password", autocomplete: "new-password"], nil do %>
<div class="password-revealer js-passwordRevealer flex items-center justify-center text-gray-500 bg-gray-200 hover:bg-gray-300 rounded-r">
<span class="fa fa-eye inline"></span>
</div>
<% end %>
<%= styled_button "Reset My Password" %>
<% end %>
</div>
</div>
<% end %>
<% end %>

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

@ -1,6 +1,6 @@
<%= floating_page_wrapper do %>
<%= floating_form "Reset Password", @changeset do %>
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
<%= form_for @changeset, @action, [as: :user], fn f -> %>
<%= styled_input f, :email, [placeholder: "joe@example.org", icon: "user"] %>
<%= styled_button "Reset My Password" %>
<% end %>

26
apps/content/lib/content_web/templates/posts/comments.html.eex
View file

@ -1,22 +1,20 @@
<div class="ui feed">
<div>
<%= Enum.map(Content.Comments.children(@parent_id, @post.comments), fn comment -> %>
<div class="event">
<div class="label">
<img src="<%= comment.author_email |> gravatar_url_for_email %>" />
</div>
<div class="content">
<div class="summary">
<span class="user">
<div class="rounded shadow bg-gray-200 px-4 py-6 my-6">
<div class="flex pb-6 items-center">
<img class="w-10 h-10 rounded-full mr-2" src="<%= comment.author_email |> gravatar_url_for_email %>" />
<div class="flex-1 px-2">
<p class="text-base font-bold text-base md:text-xl leading-none mb-2">
<%= comment.author || "Anonymous" %>
</span>
<div class="date">
</p>
<p class="text-gray-600 text-xs md:text-base date">
<%= comment.date |> Timex.format!("%F", :strftime) %>
</div>
</div>
<div class="extra text">
<%= sanitize comment.content |> auto_paragraph_tags |> elem(1) |> IO.iodata_to_binary() %>
</p>
</div>
</div>
<div class="extra text">
<%= sanitize comment.content |> auto_paragraph_tags |> elem(1) |> IO.iodata_to_binary() %>
</div>
</div>
<% end) %>
</div>

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

@ -1,17 +1,15 @@
<%= for post <- @posts do %>
<article class="ui text container <%= post_class(post) %> h-entry">
<div class="ui main padded text container">
<h1 class="ui header p-name">
<%= link to: Routes.posts_path(@conn, :show, post), class: "u-url" do %>
<%= raw post.title %>
<% end %>
</h1>
<%= post_topmatter(@conn, post) %>
</div>
<article class="max-w-lg mx-auto <%= post_class(post) %> h-entry py-12">
<h1 class="text-4xl">
<%= link to: Routes.posts_path(@conn, :show, post), class: "u-url" do %>
<%= raw post.title %>
<% end %>
</h1>
<%= post_topmatter(@conn, post) %>
<div class="Article-content <%= if post.format, do: post.format.slug %> e-content">
<%= if authenticated_for_post?(@conn, post) do %>
<%= render "thumb.html", post: post, thumbs: @thumbs %>
<div class="Article-content-words" style="padding-bottom: 4em; padding-top: 4em;">
<div class="Article-content-words">
<%= raw post |> Content.Post.content_page(1) |> Content.Post.before_more |> process_content |> raw %>
<%= if post.content =~ "<!--more-->" do %>
<p>
@ -24,61 +22,30 @@
<%= render "password_form.html", post: post, conn: @conn %>
<% end %>
</div>
<div class="ui grid">
<div class="ui center aligned one column row CategoryBlock" style="padding-top: 2rem;">
<div class="ui column">
<%= case post.categories || [] do %>
<% [] -> %>
<%= "" %>
<% categories -> %>
<%= for term <- categories do %>
<div class="ui label">
<%= link term.name, to: Routes.category_path(@conn, :index_posts, term.slug), class: "p-category" %>
</div>
<% end %>
<%= case post.categories || [] do %>
<% [] -> %>
<%= "" %>
<% categories -> %>
<div class="flex pt-6">
<h3 class="text-xl mr-4">Categories</h3>
<%= for term <- categories do %>
<%= link term.name, to: Routes.category_path(@conn, :index_posts, term.slug), class: "rounded-full bg-gray-300 px-4 py-1 mr-2" %>
<% end %>
</div>
</div>
</div>
<% end %>
</article>
<% end %>
<nav class="ui text container paginator">
<div class="ui grid">
<div class="ui center aligned one column row">
<div class="column">
<h3 class="ui header">
Pages
</h3>
<div class="ui buttons">
<%= if @page > 1 do %>
<%= link 1, to: paginated_posts_path(@conn, @category, 1), class: "ui button" %>
<% end %>
<%= if @page > 3 do %>
<span class="paginator-page ui button disabled">...</span>
<% end %>
<%= if @page > 2 do %>
<%= link @page - 1, to: paginated_posts_path(@conn, @category, @page - 1), class: "ui button" %>
<% end %>
<span class="paginator-page ui button disabled"><%= @page %></span>
<%= if @page + 1 < @last_page do %>
<%= link @page + 1, to: paginated_posts_path(@conn, @category, @page + 1), class: "ui button" %>
<% end %>
<%= if @page + 2 < @last_page do %>
<span class="paginator-page ui button disabled">...</span>
<% end %>
<%= if @page < @last_page do %>
<%= link @last_page, to: paginated_posts_path(@conn, @category, @last_page), class: "ui button" %>
<% end %>
</div>
</div>
</div>
<nav class="max-w-lg mx-auto flex justify-center">
<div class="flex shadow rounded">
<%= paginator(1..@last_page, @page, fn first..last, page ->
link page,
to: paginated_posts_path(@conn, @category, page),
style: "min-width: 3.5rem",
class: "#{if page == @page, do: "font-bold"} text-center flex-1 border bg-gray-100 hover:bg-gray-300 text-gray-500 p-4 #{group_rounding_class(first..last, page)}"
end)
%>
</div>
</nav>

46
apps/content/lib/content_web/templates/posts/reply_form.html.eex
View file

@ -1,35 +1,11 @@
<div class="ui middle aligned grid" style="padding-top: 2em;">
<div class="column">
<h2 class="ui teal image header">
<div class="content">
Leave My Comment
</div>
</h2>
<%= changeset_error_block(@comment_changeset) %>
<div class="ui stacked left aligned segment">
<%= form_for @comment_changeset, Routes.comment_path(@conn, :create), [class: "ui form"], fn f -> %>
<%= hidden_input f, :parent %>
<%= hidden_input f, :post_id %>
<%= label f, :author do %>
Your Name
<%= text_input f, :author %>
<% end %>
<%= label f, :author_email do %>
Your Email
<%= email_input f, :author_email %>
<% end %>
<%= label f, :author_url do %>
Your Website
<%= text_input f, :author_url %>
<% end %>
<%= label f, :content do %>
Comment
<%= textarea f, :content %>
<% end %>
<div class="form-group">
<%= submit "Leave My Comment", class: "ui fluid large teal submit button" %>
</div>
<% end %>
</div>
</div>
</div>
<%= floating_form "Leave My Comment", @comment_changeset do %>
<%= form_for @comment_changeset, Routes.comment_path(@conn, :create), fn f -> %>
<%= hidden_input f, :parent %>
<%= hidden_input f, :post_id %>
<%= styled_input f, :author, label: "Your Name" %>
<%= styled_input f, :author_email, label: "Your Email" %>
<%= styled_input f, :author_url, label: "Your Website" %>
<%= styled_input f, :content, label: "Comment", input_helper: :textarea %>
<%= styled_button "Leave My Comment" %>
<% end %>
<% end %>

34
apps/content/lib/content_web/templates/posts/show.html.eex
View file

@ -1,35 +1,31 @@
<article class="ui <%= post_class(@post) %> h-entry text container">
<div class="ui main padded text container">
<h1 class="ui header p-name">
<article class="max-w-lg mx-auto <%= post_class(@post) %> h-entry py-12">
<div>
<h1 class="text-4xl">
<%= link to: Routes.posts_path(@conn, :show, @post), class: "u-url" do %>
<%= raw @post.title %>
<% end %>
</h1>
<%= post_topmatter(@conn, @post) %>
</div>
<div class="ui text container <%= if @post.format, do: @post.format.slug %> e-content" style="padding-bottom: 4em; padding-top: 4em;">
<div class="<%= if @post.format, do: @post.format.slug %> e-content py-12">
<%= render "thumb.html", post: @post, thumbs: @thumbs %>
<%= @post |> Content.Post.content_page(@page) |> process_content |> raw %>
<div class="ui grid">
<div class="ui center aligned one column row CategoryBlock" style="padding-top: 2rem;">
<div class="ui column">
<%= case @post.categories || [] do %>
<% [] -> %>
<%= "" %>
<% categories -> %>
<%= for term <- categories do %>
<div class="ui label">
<%= link term.name, to: Routes.category_path(@conn, :index_posts, term.slug), class: "p-category" %>
</div>
<% end %>
<%= case @post.categories || [] do %>
<% [] -> %>
<%= "" %>
<% categories -> %>
<div class="flex pt-6">
<h3 class="text-xl font-bold mr-4">Categories</h3>
<%= for term <- categories do %>
<%= link term.name, to: Routes.category_path(@conn, :index_posts, term.slug), class: "rounded-full bg-gray-300 px-4 py-1 mr-2" %>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
<%= render "pagination.html", conn: @conn, post: @post, current_page: @page %>
<%= if @post.comment_status == "open" do %>
<h3>Comments</h3>
<h3 class="text-3xl">Comments</h3>
<%= render "comments.html", post: @post, parent_id: 0, conn: @conn %>
<%=
render "reply_form.html",

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

@ -11,7 +11,7 @@
class="w-full h-full absolute opacity-75 bg-gray-700"
></span>
</div>
<div class="container relative mx-auto">
<div class="relative mx-auto">
<div class="items-center flex flex-wrap">
<div class="w-full lg:w-6/12 px-4 ml-auto mr-auto text-center">
<div class="pr-12">

28
apps/content/lib/content_web/templates/posts/static_pages/theming.html.eex
View file

@ -1,28 +0,0 @@
<style>
.ui.container > h2.dividing.header {
font-size: 2em;
font-weight: normal;
margin: 4em 0em 3em;
}
</style>
<div class="ui container">
<h1>Theming Examples</h1>
<h2 class="ui dividing header">Site</h2>
<%= render "static_pages/theming/_site.html", conn: @conn %>
<h2 class="ui dividing header">Menu</h2>
<%= render "static_pages/theming/_menu.html", conn: @conn %>
<h2 class="ui dividing header">Buttons</h2>
<%= render "static_pages/theming/_buttons.html", conn: @conn %>
<h2 class="ui dividing header">Table</h2>
<%= render "static_pages/theming/_tables.html", conn: @conn %>
<h2 class="ui dividing header">Input</h2>
<%= render "static_pages/theming/_input.html", conn: @conn %>
<h2 class="ui dividing header">Card</h2>
<%= render "static_pages/theming/_card.html", conn: @conn %>
</div>

302
apps/content/lib/content_web/templates/posts/static_pages/theming/_buttons.html.eex
View file

@ -1,160 +1,156 @@
<div class="ui container">
<div class="ui stackable equal width grid">
<div class="column">
<button class="ui button">Default</button>
<button class="ui primary button">Primary</button>
<button class="ui secondary button">Secondary</button>
<button class="ui basic button">Basic</button>
<button class="ui compact button">
Compact
</button>
<div class="column">
<button class="ui button">Default</button>
<button class="ui primary button">Primary</button>
<button class="ui secondary button">Secondary</button>
<button class="ui basic button">Basic</button>
<button class="ui compact button">
Compact
</button>
<div class="ui divider"></div>
<button class="ui icon button">
<i class="heart icon"></i>
</button>
<button class="ui labeled icon button">
<i class="heart icon"></i>
Labeled
</button>
<button class="ui right labeled icon button">
<i class="heart icon"></i>
Labeled
</button>
<div class="ui divider"></div>
<button class="ui icon button">
<i class="heart icon"></i>
</button>
<button class="ui labeled icon button">
<i class="heart icon"></i>
Labeled
</button>
<button class="ui right labeled icon button">
<i class="heart icon"></i>
Labeled
</button>
<div class="ui divider"></div>
<div class="ui divider"></div>
<div class="ui buttons">
<button class="ui button">Combo</button>
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
</div>
<div class="ui buttons">
<button class="ui button">Combo</button>
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Choice 1</div>
<div class="item">Choice 2</div>
<div class="item">Choice 3</div>
</div>
<div class="ui floating search dropdown button">
<span class="text">Search Dropdown</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui animated button" tabindex="0">
<div class="visible content">Horizontal</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="visible content">Vertical</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Fade In</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui divider"></div>
<button class="ui disabled button">Disabled</button>
<button class="ui loading button">Loading</button>
<div class="ui divider"></div>
<div class="ui buttons">
<button class="ui button">1</button>
<button class="ui button">2</button>
<button class="ui button">3</button>
</div>
<div class="ui icon buttons">
<button class="ui button"><i class="align left icon"></i></button>
<button class="ui button"><i class="align center icon"></i></button>
<button class="ui button"><i class="align right icon"></i></button>
<button class="ui button"><i class="align justify icon"></i></button>
</div>
<div class="ui buttons">
<button class="ui button">1</button>
<div class="or"></div>
<button class="ui button">2</button>
</div>
<div class="ui divider"></div>
<div class="ui two top attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
<div class="ui attached segment">
<img src="<%= Routes.static_path(@conn, "/images/wireframe/paragraph.png") %>" class="ui wireframe image">
</div>
<div class="ui two bottom attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
</div>
<div class="column">
<button class="ui mini button">Mini</button>
<button class="ui tiny button">Tiny</button>
<button class="ui small button">Small</button>
<button class="ui large button">Large</button>
<button class="ui big button">Big</button>
<button class="ui huge button">Huge</button>
<button class="ui massive button">Massive</button>
<div class="ui divider"></div>
<div class="spaced">
<button class="yellow ui button">Yellow</button>
<button class="orange ui button">Orange</button>
<button class="green ui button">Green</button>
<button class="teal ui button">Teal</button>
<button class="blue ui button">Blue</button>
<button class="purple ui button">Purple</button>
<button class="pink ui button">Pink</button>
<button class="red ui button">Red</button>
<button class="black ui button">Black</button>
</div>
<div class="ui divider"></div>
<div class="ui inverted segment">
<button class="ui inverted button">Inverted</button>
<button class="ui inverted basic button">Basic</button>
<button class="ui inverted blue button">Colored</button>
<button class="ui inverted blue basic button">Basic Colored</button>
</div>
</div>
</div>
<div class="ui floating search dropdown button">
<span class="text">Search Dropdown</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui animated button" tabindex="0">
<div class="visible content">Horizontal</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui vertical animated button" tabindex="0">
<div class="visible content">Vertical</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui animated fade button" tabindex="0">
<div class="visible content">Fade In</div>
<div class="hidden content">
Hidden
</div>
</div>
<div class="ui divider"></div>
<button class="ui disabled button">Disabled</button>
<button class="ui loading button">Loading</button>
<div class="ui divider"></div>
<div class="ui buttons">
<button class="ui button">1</button>
<button class="ui button">2</button>
<button class="ui button">3</button>
</div>
<div class="ui icon buttons">
<button class="ui button"><i class="align left icon"></i></button>
<button class="ui button"><i class="align center icon"></i></button>
<button class="ui button"><i class="align right icon"></i></button>
<button class="ui button"><i class="align justify icon"></i></button>
</div>
<div class="ui buttons">
<button class="ui button">1</button>
<div class="or"></div>
<button class="ui button">2</button>
</div>
<div class="ui divider"></div>
<div class="ui two top attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
<div class="ui attached segment">
<img src="<%= Routes.static_path(@conn, "/images/wireframe/paragraph.png") %>" class="ui wireframe image">
</div>
<div class="ui two bottom attached buttons">
<div class="ui button">One</div>
<div class="ui button">Two</div>
</div>
</div>
<div class="column">
<button class="ui mini button">Mini</button>
<button class="ui tiny button">Tiny</button>
<button class="ui small button">Small</button>
<button class="ui large button">Large</button>
<button class="ui big button">Big</button>
<button class="ui huge button">Huge</button>
<button class="ui massive button">Massive</button>
<div class="ui divider"></div>
<div class="spaced">
<button class="yellow ui button">Yellow</button>
<button class="orange ui button">Orange</button>
<button class="green ui button">Green</button>
<button class="teal ui button">Teal</button>
<button class="blue ui button">Blue</button>
<button class="purple ui button">Purple</button>
<button class="pink ui button">Pink</button>
<button class="red ui button">Red</button>
<button class="black ui button">Black</button>
</div>
<div class="ui divider"></div>
<div class="ui inverted segment">
<button class="ui inverted button">Inverted</button>
<button class="ui inverted basic button">Basic</button>
<button class="ui inverted blue button">Colored</button>
<button class="ui inverted blue basic button">Basic Colored</button>
</div>
</div>

23
apps/content/lib/content_web/views/posts_view.ex
View file

@ -67,20 +67,23 @@ defmodule Content.PostsView do
assigns = %{post: post, author: author, conn: conn}
~E"""
<% _ = assigns # suppress unused assigns warning %>
<div class="Comment-topmatter">
<h4>
<%= link to: author.homepage_url || "#", rel: "author", class: "p-author h-card" do %>
<%= img_tag gravatar_url_for_email(author.email), alt: "Photo of #{author.display_name}", class: "Gravatar u-photo ui avatar image" %>
<span><%= author.display_name %></span>
&#8226;
<%= link to: Routes.posts_path(conn, :show, post) do %>
<div class="flex w-full items-center font-sans py-6">
<%= link to: author.homepage_url || "#", rel: "author", class: "p-author h-card" do %>
<%= img_tag gravatar_url_for_email(author.email), alt: "Photo of #{author.display_name}", class: "Gravatar u-photo w-10 h-10 rounded-full mr-4" %>
<div class="flex-1 px-2">
<p class="text-base font-bold text-base md:text-xl leading-none mb-2">
<%= author.display_name %>
</p>
<%= link to: Routes.posts_path(conn, :show, post) do %>
<p class="text-gray-600 text-xs md:text-base">
Published
<time class="dt-published" datetime="<%= post.date %>">
<%= post.date |> Timex.format!("%F", :strftime) %>
</time>
<% end %>
</p>
<% end %>
</h4>
</div>
<% end %>
</div>
"""
end

10
apps/core/assets/css/app.css
View file

@ -4,6 +4,8 @@
@import "tailwindcss/utilities";
@import "@fortawesome/fontawesome-free/css/all.css";
input[type="checkbox"]::after {
content: "";
color: currentColor;
@ -21,3 +23,11 @@ input[type="checkbox"]:checked::after {
.hidden-options-toggle:checked+.hidden {
display: block;
}
.password-revealer {
@apply absolute;
height: 45px;
width: 45px;
right: 0;
bottom: 0;
}

5
apps/core/assets/package-lock.json generated
View file

@ -943,6 +943,11 @@
"to-fast-properties": "^2.0.0"
}
},
"@fortawesome/fontawesome-free": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz",
"integrity": "sha512-OfdMsF+ZQgdKHP9jUbmDcRrP0eX90XXrsXIdyjLbkmSBzmMXPABB8eobUJtivaupucYaByz6WNe1PI1JuYm3qA=="
},
"@fullhuman/postcss-purgecss": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",

2
apps/core/assets/package.json
View file

@ -9,8 +9,10 @@
"profile": "webpack --mode development --plugin webpack/lib/debug/ProfilingPlugin"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"autoprefixer": "^9.8.6",
"csswring": "^7.0.0",
"glob": "^7.1.6",
"gulp": "^4.0.2",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",

26
apps/core/assets/webpack.config.js
View file

@ -45,8 +45,13 @@ module.exports = (env, options) => {
},
{
test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/,
exclude: [nodeModulesPath],
loader: 'file-loader',
options: {
publicPath: '/fonts',
outputPath: (url, resourcePath, context) => {
return `/fonts/${url}`;
},
}
},
{
test: /\.js$/,
@ -77,5 +82,24 @@ module.exports = (env, options) => {
},
]),
],
resolve: {
alias: {
"../webfonts/fa-brands-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"),
"../webfonts/fa-brands-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"),
"../webfonts/fa-brands-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"),
"../webfonts/fa-brands-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"),
"../webfonts/fa-brands-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg"),
"../webfonts/fa-regular-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot"),
"../webfonts/fa-regular-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"),
"../webfonts/fa-regular-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff"),
"../webfonts/fa-regular-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf"),
"../webfonts/fa-regular-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg"),
"../webfonts/fa-solid-900.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot"),
"../webfonts/fa-solid-900.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"),
"../webfonts/fa-solid-900.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff"),
"../webfonts/fa-solid-900.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"),
"../webfonts/fa-solid-900.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg"),
}
},
}
};

4
apps/core/lib/core_web/templates/layout/app.html.eex
View file

@ -13,9 +13,7 @@
<main role="main">
<!-- Page Contents -->
<div class="bg-gray-100 min-h-screen">
<div class="ui inverted vertical masthead center aligned segment">
<%= render "_menu.html", assigns %>
</div>
<%= render "_menu.html", assigns %>
<%= flash_block(@conn) %>

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

@ -139,6 +139,24 @@ defmodule CoreWeb.Helpers do
"""
end
def paginator(first..last, current, callback) do
[first, current - 1, current, current + 1, last]
|> Enum.sort()
|> Enum.filter(& &1 >= first)
|> Enum.filter(& &1 <= last)
|> Enum.dedup()
|> Enum.map(& callback.(first..last, &1))
end
def group_rounding_class(first..last, current, [first_class, middle_class, last_class] \\ ["rounded-l", "", "rounded-r"]) do
cond do
first == last -> "#{first_class} #{last_class}"
current == first -> first_class
current == last -> last_class
true -> middle_class
end
end
def floating_form(title, changeset, do: content) do
~E"""
<h1 class="relative text-white text-xl font-semibold text-center pb-6"><%= title %></h1>

4
mix.lock
View file

@ -12,7 +12,7 @@
"credo": {:hex, :credo, "1.4.0", "92339d4cbadd1e88b5ee43d427b639b68a11071b6f73854e33638e30a0ea11f5", [:mix], [{:bunt, "~> 0.2.0", [hex: :bunt, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "1fd3b70dce216574ce3c18bdf510b57e7c4c85c2ec9cad4bff854abaf7e58658"},
"crontab": {:hex, :crontab, "1.1.10", "dc9bb1f4299138d47bce38341f5dcbee0aa6c205e864fba7bc847f3b5cb48241", [:mix], [{:ecto, "~> 1.0 or ~> 2.0 or ~> 3.0", [hex: :ecto, repo: "hexpm", optional: true]}], "hexpm", "1347d889d1a0eda997990876b4894359e34bfbbd688acbb0ba28a2795ca40685"},
"db_connection": {:hex, :db_connection, "2.2.2", "3bbca41b199e1598245b716248964926303b5d4609ff065125ce98bcd368939e", [:mix], [{:connection, "~> 1.0.2", [hex: :connection, repo: "hexpm", optional: false]}], "hexpm", "642af240d8a8affb93b4ba5a6fcd2bbcbdc327e1a524b825d383711536f8070c"},
"decimal": {:hex, :decimal, "1.8.1", "a4ef3f5f3428bdbc0d35374029ffcf4ede8533536fa79896dd450168d9acdf3c", [:mix], [], "hexpm", "3cb154b00225ac687f6cbd4acc4b7960027c757a5152b369923ead9ddbca7aec"},
"decimal": {:hex, :decimal, "1.9.0", "83e8daf59631d632b171faabafb4a9f4242c514b0a06ba3df493951c08f64d07", [:mix], [], "hexpm", "b1f2343568eed6928f3e751cf2dffde95bfaa19dd95d09e8a9ea92ccfd6f7d85"},
"earmark": {:hex, :earmark, "1.4.10", "bddce5e8ea37712a5bfb01541be8ba57d3b171d3fa4f80a0be9bcf1db417bcaf", [:mix], [{:earmark_parser, ">= 1.4.10", [hex: :earmark_parser, repo: "hexpm", optional: false]}], "hexpm", "12dbfa80810478e521d3ffb941ad9fbfcbbd7debe94e1341b4c4a1b2411c1c27"},
"earmark_parser": {:hex, :earmark_parser, "1.4.10", "6603d7a603b9c18d3d20db69921527f82ef09990885ed7525003c7fe7dc86c56", [:mix], [], "hexpm", "8e2d5370b732385db2c9b22215c3f59c84ac7dda7ed7e544d7c459496ae519c0"},
"ecto": {:hex, :ecto, "3.4.6", "08f7afad3257d6eb8613309af31037e16c36808dfda5a3cd0cb4e9738db030e4", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "6f13a9e2a62e75c2dcfc7207bfc65645ab387af8360db4c89fee8b5a4bf3f70b"},
@ -30,7 +30,7 @@
"html_entities": {:hex, :html_entities, "0.5.1", "1c9715058b42c35a2ab65edc5b36d0ea66dd083767bef6e3edb57870ef556549", [:mix], [], "hexpm", "30efab070904eb897ff05cd52fa61c1025d7f8ef3a9ca250bc4e6513d16c32de"},
"html_sanitize_ex": {:hex, :html_sanitize_ex, "1.0.1", "2572e7122c78ab7e57b613e7c7f5e42bf9b3c25e430e32f23f1413d86db8a0af", [:mix], [{:mochiweb, "~> 2.12.2", [hex: :mochiweb, repo: "hexpm", optional: false]}], "hexpm", "c334e2835e094fb9c04658bd4cfc7533fa51a8f56f11343c57ab9cb2a01d8613"},
"idna": {:hex, :idna, "6.0.1", "1d038fb2e7668ce41fbf681d2c45902e52b3cb9e9c77b55334353b222c2ee50c", [:rebar3], [{:unicode_util_compat, "0.5.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "a02c8a1c4fd601215bb0b0324c8a6986749f807ce35f25449ec9e69758708122"},
"jason": {:hex, :jason, "1.2.1", "12b22825e22f468c02eb3e4b9985f3d0cb8dc40b9bd704730efa11abd2708c44", [:mix], [{:decimal, "~> 1.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b659b8571deedf60f79c5a608e15414085fa141344e2716fbd6988a084b5f993"},
"jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"},
"kaffy": {:hex, :kaffy, "0.9.0", "bef34c9729f6a3af4d0dea8eede8bcb9e11371a83ac9a8b393991bce81839517", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.11", [hex: :phoenix_html, repo: "hexpm", optional: false]}], "hexpm", "d18ff57b8e68feb433aed11e71510cd357abc7034e75358af5deff7d0d4c6ed3"},
"libring": {:hex, :libring, "1.5.0", "44313eb6862f5c9168594a061e9d5f556a9819da7c6444706a9e2da533396d70", [:mix], [], "hexpm", "04e843d4fdcff49a62d8e03778d17c6cb2a03fe2d14020d3825a1761b55bd6cc"},
"linguist": {:hex, :linguist, "0.3.0", "2984dfce6720d1212ddd7bba82496f92627a39aecd4d32c7016ec00393e1f925", [:mix], [{:ex_cldr, "~> 2.0", [hex: :ex_cldr, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:yaml_elixir, "~> 2.0", [hex: :yaml_elixir, repo: "hexpm", optional: false]}], "hexpm", "1923876545db22b63334c9d203ef56397a2946daa018117767b068f856be41e4"},