simponic/Aggiedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update UI

Browse Source
This commit is contained in:
Logan Hunt 2022-04-14 00:18:01 -06:00
parent 43f225e181
commit ddfab312f7
Signed by untrusted user who does not match committer: simponic
GPG Key ID: 52B3774857EB24B1
16 changed files with 233 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/app.css
View File

@ -1,12 +1,10 @@
/* This file is for your main application CSS */
@import "./phoenix.css";
/* Alerts and form errors used by phx.new */ /* Alerts and form errors used by phx.new */
.alert { .alert {
padding: 15px; padding: 15px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
cursor: pointer;
} }
.alert-info { .alert-info {
color: #31708f; color: #31708f;
@ -63,11 +61,10 @@
} }
.phx-modal-content { .phx-modal-content {
background-color: #fefefe;
margin: 15vh auto; margin: 15vh auto;
padding: 20px; padding: 20px;
border: 1px solid #888;
width: 80%; width: 80%;
max-width: 600px;
} }
.phx-modal-close { .phx-modal-close {
@ -118,3 +115,9 @@
0% { opacity: 1; } 0% { opacity: 1; }
100% { opacity: 0; } 100% { opacity: 0; }
} }
.thumbnail {
max-width: 100px;
max-height: 100px;
}

101
assets/css/phoenix.css
View File

File diff suppressed because one or more lines are too long

5
assets/js/app.js
View File

@ -41,4 +41,7 @@ liveSocket.connect()
// >> liveSocket.enableDebug() // >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim() // >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket window.liveSocket = liveSocket
// Hack to remove alerts on click
Array.from(window.document.getElementsByClassName('alert')).forEach((x) => x.addEventListener('click', () => x.style.display = "none"))

2
lib/aggiedit_web/live/live_helpers.ex
View File

@ -38,7 +38,7 @@ defmodule AggieditWeb.LiveHelpers do
<div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}> <div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}>
<div <div
id="modal-content" id="modal-content"
class="phx-modal-content fade-in-scale" class="phx-modal-content shadow-lg fade-in-scale rounded bg-white"
phx-click-away={JS.dispatch("click", to: "#close")} phx-click-away={JS.dispatch("click", to: "#close")}
phx-window-keydown={JS.dispatch("click", to: "#close")} phx-window-keydown={JS.dispatch("click", to: "#close")}
phx-key="escape" phx-key="escape"

46
lib/aggiedit_web/live/post_live/form_component.html.heex
View File

@ -9,35 +9,33 @@
phx-change="validate" phx-change="validate"
phx-submit="save"> phx-submit="save">
<%= label f, :title %> <div class="form-group">
<%= textarea f, :title %> <%= label f, :title %>
<%= error_tag f, :title %> <%= text_input f, :title, class: "form-control" %>
<%= error_tag f, :title %>
</div>
<%= label f, :body %> <div class="form-group mt-2">
<%= textarea f, :body %> <%= label f, :body %>
<%= error_tag f, :body %> <%= textarea f, :body, class: "form-control" %>
<%= error_tag f, :body %>
</div>
<%= if !Ecto.assoc_loaded?(@post.upload) do %> <div class="form-group mt-2">
<%= live_file_input @uploads.upload %> <%= if !Ecto.assoc_loaded?(@post.upload) do %>
<%= for upload <- @uploads.upload.entries do %> <%= live_file_input @uploads.upload %>
<div class="row"> <%= for upload <- @uploads.upload.entries do %>
<div class="column"> <div class="row">
<%= live_img_preview upload, height: 80 %> <div class="column">
<%= live_img_preview upload, height: 80 %>
</div>
</div> </div>
</div> <% end %>
<% end %> <% end %>
<% else %> </div>
<%= if !is_nil(@post.upload) do %>
<div class="row">
<div class="column">
<img style="height:80px" src={Routes.static_path(@socket, "/uploads/#{@post.upload.file}")} />
</div>
</div>
<% end %>
<% end %>
<div> <div class="mt-2">
<%= submit "Save", phx_disable_with: "Saving..." %> <%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
</div> </div>

2
lib/aggiedit_web/live/post_live/index.ex
View File

@ -10,7 +10,7 @@ defmodule AggieditWeb.PostLive.Index do
def mount(%{"room_id" => _room_id} = params, session, socket) do def mount(%{"room_id" => _room_id} = params, session, socket) do
{:ok, socket} = assign_socket_room_and_user_or_error(params, session, socket) {:ok, socket} = assign_socket_room_and_user_or_error(params, session, socket)
case socket.assigns do case socket.assigns do
%{:room => room} -> {:ok, assign(socket, %{:posts => room |> Repo.preload(:posts) |> Map.get(:posts)})} %{:room => room} -> {:ok, assign(socket, %{:posts => room |> Repo.preload(posts: [:user, :upload]) |> Map.get(:posts)})}
_ -> {:ok, socket} _ -> {:ok, socket}
end end
end end

63
lib/aggiedit_web/live/post_live/index.html.heex
View File

@ -1,4 +1,4 @@
<h1>Listing Posts</h1> <h1>@<%= @room.domain %></h1>
<%= if @live_action in [:new, :edit] do %> <%= if @live_action in [:new, :edit] do %>
<.modal return_to={Routes.post_index_path(@socket, :index, @room)}> <.modal return_to={Routes.post_index_path(@socket, :index, @room)}>
@ -14,29 +14,40 @@
</.modal> </.modal>
<% end %> <% end %>
<table>
<thead>
<tr>
<th>Title</th>
<th>Body</th>
<th></th>
</tr>
</thead>
<tbody id="posts">
<%= for post <- @posts do %>
<tr id={"post-#{post.id}"}>
<td><%= post.title %></td>
<td><%= post.body %></td>
<td>
<span><%= live_redirect "Show", to: Routes.post_show_path(@socket, :show, @room, post) %></span>
<span><%= live_patch "Edit", to: Routes.post_index_path(@socket, :edit, @room, post) %></span>
<span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: post.id, data: [confirm: "Are you sure?"] %></span>
</td>
</tr>
<% end %>
</tbody>
</table>
<span><%= live_patch "New Post", to: Routes.post_index_path(@socket, :new, @room) %></span> <span><%= live_patch "New Post", to: Routes.post_index_path(@socket, :new, @room) %></span>
<%= for post <- @posts do %>
<div class="card d-flex flex-row align-items-center p-2 m-2 shadow">
<%= if !is_nil(post.upload) do %>
<%= live_redirect to: Routes.post_show_path(@socket, :show, @room, post) do %>
<div class="card-image d-flex justify-content-center" style="width: 100px">
<img class="fluid-img thumbnail" src={Routes.static_path(@socket, "/uploads/#{post.upload.file}")} />
</div>
<% end %>
<% end %>
<div class="card-body">
<%= live_redirect to: Routes.post_show_path(@socket, :show, @room, post) do %>
<h4 class="card-title"><%= post.title %></h4>
<% end %>
<h6 class="card-subtitle mb-2"><span class="text-muted">aggie/</span><%= post.user.username %></h6>
<p class="card-text"><%= post.body %></p>
<%= if Aggiedit.Roles.guard?(@current_user, :edit, post) && Aggiedit.Roles.guard?(@current_user, :edit, post) do %>
<span><%= live_patch "Edit", to: Routes.post_index_path(@socket, :edit, @room, post) %></span>
<span><%= link "Delete", to: "#", phx_click: "delete", phx_value_id: post.id %></span>
<% end %>
</div>
</div>
<!--
<div class=>
</div>
<tr id={"post-#{post.id}"}>
<td><%= post.title %></td>
<td><%= post.body %></td>
<td>
<span></span>
</td>
</tr>
-->
<% end %>

21
lib/aggiedit_web/templates/layout/_user_menu.html.heex
View File

@ -1,10 +1,15 @@
<ul>
<%= if @current_user do %> <%= if @current_user do %>
<li><%= @current_user.email %></li> <li class="nav-item active">
<li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li> <%= link "Settings", to: Routes.user_settings_path(@conn, :edit), class: "nav-link" %>
<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li> </li>
<li class="nav-item active">
<%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete, class: "nav-link" %>
</li>
<% else %> <% else %>
<li><%= link "Register", to: Routes.user_registration_path(@conn, :new) %></li> <li class="nav-item active">
<li><%= link "Log in", to: Routes.user_session_path(@conn, :new) %></li> <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "nav-link" %>
<% end %> </li>
</ul> <li class="nav-item active">
<%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "nav-link" %>
</li>
<% end %>

47
lib/aggiedit_web/templates/layout/root.html.heex
View File

@ -5,24 +5,43 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<%= csrf_meta_tag() %> <%= csrf_meta_tag() %>
<%= live_title_tag assigns[:page_title] || "Aggiedit", suffix: " · Phoenix Framework" %> <%= live_title_tag assigns[:page_title] || "Aggiedit" %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/> <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
<script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script> <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head> </head>
<body> <body class="bg-secondary min-vh-100">
<header> <header>
<section class="container"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<nav> <div class="container">
<ul> <a href="/" class="navbar-brand">
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li> AggiEdit
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %> </a>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li> <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#toggle">
<% end %> <span class="navbar-toggler-icon"></span>
</ul> </button>
<%= render "_user_menu.html", assigns %> <div class="navbar-collapse collapse" id="toggle">
</nav> <ul class="navbar-nav">
</section> <li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<%= if @current_user do %>
<li class="nav-item active">
<%= link "My SubAggie", to: "/room/#{@current_user.room_id}", class: "nav-link" %>
</li>
<% end %>
</ul>
<ul class="navbar-nav ms-auto">
<%= render "_user_menu.html", assigns %>
</ul>
</div>
</div>
</nav>
</header> </header>
<%= @inner_content %> <div class="container mt-2 bg-light p-2 shadow rounded">
<%= @inner_content %>
</div>
</body> </body>
</html> </html>

67
lib/aggiedit_web/templates/page/index.html.heex
View File

@ -1,41 +1,26 @@
<section class="phx-hero"> <div>
<h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1> <h1>
<p>Peace of mind from prototype to production</p> Welcome to AggiEdit!
</section> </h1>
</div>
<section class="row"> <div>
<article class="column"> <h3>
<h2>Resources</h2> How does it work?
<ul> </h3>
<li> <p>
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a> AggiEdit is a Reddit clone, but "sub-aggies" are only available to other users that share the same domain name in the email as yourself.
</li> For example, if you sign up with your email address "joe@mailinator.com" you are assigned to the sub-aggie "mailinator.com".
<li> <br>
<a href="https://github.com/phoenixframework/phoenix">Source</a> In a sub-aggie, you can create posts with a title, a body, and an attachment. Posts are visible to everyone in your sub-aggie, and a realtime
</li> chat-room is created for each post in the sub-aggie to discuss that post.
<li> </p>
<a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md">v1.6 Changelog</a> <%= if !@current_user do %>
</li> <p>
</ul> Get started by <%= link "registering", to: Routes.user_registration_path(@conn, :new) %> to be able to view posts in your sub-aggie!
</article> </p>
<article class="column"> <% else %>
<h2>Help</h2> <p>
<ul> You are signed in! <%= link "Visit your sub-aggie!", to: "/room/#{@current_user.room_id}" %>
<li> </p>
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a> <% end %>
</li> </div>
<li>
<a href="https://web.libera.chat/#elixir">#elixir on Libera Chat (IRC)</a>
</li>
<li>
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
</li>
<li>
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
</li>
<li>
<a href="https://discord.gg/elixir">Elixir on Discord</a>
</li>
</ul>
</article>
</section>

6
lib/aggiedit_web/templates/user_confirmation/edit.html.heex
View File

@ -1,11 +1,11 @@
<h1>Confirm account</h1> <h1>Confirm account</h1>
<.form let={_f} for={:user} action={Routes.user_confirmation_path(@conn, :update, @token)}> <.form let={_f} for={:user} action={Routes.user_confirmation_path(@conn, :update, @token)}>
<div> <div class="form-group">
<%= submit "Confirm my account" %> <%= submit "Confirm my account", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<p> <p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> | <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>

12
lib/aggiedit_web/templates/user_confirmation/new.html.heex
View File

@ -1,14 +1,16 @@
<h1>Resend confirmation instructions</h1> <h1>Resend confirmation instructions</h1>
<.form let={f} for={:user} action={Routes.user_confirmation_path(@conn, :create)}> <.form let={f} for={:user} action={Routes.user_confirmation_path(@conn, :create)}>
<%= label f, :email %> <div class="form-group">
<%= email_input f, :email, required: true %> <%= label f, :email %>
<%= email_input f, :email, required: true, class: "form-control" %>
</div>
<div> <div class="mt-2">
<%= submit "Resend confirmation instructions" %> <%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<p> <p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> | <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>

30
lib/aggiedit_web/templates/user_registration/new.html.heex
View File

@ -7,23 +7,29 @@
</div> </div>
<% end %> <% end %>
<%= label f, :email %> <div class="form-group mt-2">
<%= email_input f, :email, required: true %> <%= label f, :email %>
<%= error_tag f, :email %> <%= email_input f, :email, required: true, class: "form-control" %>
<%= error_tag f, :email %>
</div>
<%= label f, :username %> <div class="form-group mt-2">
<%= text_input f, :username, required: true %> <%= label f, :username %>
<%= error_tag f, :username %> <%= text_input f, :username, required: true, class: "form-control" %>
<%= error_tag f, :username %>
</div>
<%= label f, :password %> <div class="form-group mt-2">
<%= password_input f, :password, required: true %> <%= label f, :password %>
<%= error_tag f, :password %> <%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<div> <div class="mt-2">
<%= submit "Register" %> <%= submit "Register", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<p> <p>
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> | <%= link "Log in", to: Routes.user_session_path(@conn, :new) %> |
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %> <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>

22
lib/aggiedit_web/templates/user_reset_password/edit.html.heex
View File

@ -7,19 +7,23 @@
</div> </div>
<% end %> <% end %>
<%= label f, :password, "New password" %> <div class="form-group mt-2">
<%= password_input f, :password, required: true %> <%= label f, :password, "New Password" %>
<%= error_tag f, :password %> <%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<%= label f, :password_confirmation, "Confirm new password" %> <div class="form-group mt-2">
<%= password_input f, :password_confirmation, required: true %> <%= label f, :password_confirmation, "Confirm new password" %>
<%= error_tag f, :password_confirmation %> <%= password_input f, :password_confirmation, required: true, class: "form-control" %>
<%= error_tag f, :password_confirmation %>
</div>
<div> <div class="form-group mt-2">
<%= submit "Reset password" %> <%= submit "Reset password", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<p> <p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> | <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>

27
lib/aggiedit_web/templates/user_session/new.html.heex
View File

@ -7,20 +7,25 @@
</div> </div>
<% end %> <% end %>
<%= label f, :email %> <div class="form-group">
<%= email_input f, :email, required: true %> <%= label f, :email %>
<%= email_input f, :email, required: true, class: "form-control" %>
<%= label f, :password %> </div>
<%= password_input f, :password, required: true %> <div class="form-group mt-2">
<%= label f, :password %>
<%= label f, :remember_me, "Keep me logged in for 60 days" %> <%= password_input f, :password, required: true, class: "form-control" %>
<%= checkbox f, :remember_me %> </div>
<div class="form-check mt-2">
<div> <%= label f, :remember_me, "Keep me logged in for 60 days" %>
<%= submit "Log in" %> <%= checkbox f, :remember_me, class: "form-check-input" %>
</div>
<div class="mt-2">
<%= submit "Log in", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<p> <p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> | <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %> <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>

50
lib/aggiedit_web/templates/user_settings/edit.html.heex
View File

@ -11,19 +11,25 @@
<%= hidden_input f, :action, name: "action", value: "update_email" %> <%= hidden_input f, :action, name: "action", value: "update_email" %>
<%= label f, :email %> <div class="form-group">
<%= email_input f, :email, required: true %> <%= label f, :email %>
<%= error_tag f, :email %> <%= email_input f, :email, required: true, class: "form-control" %>
<%= error_tag f, :email %>
</div>
<%= label f, :current_password, for: "current_password_for_email" %> <div class="form-group mt-2">
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %> <%= label f, :current_password, for: "current_password_for_email" %>
<%= error_tag f, :current_password %> <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email", class: "form-control" %>
<%= error_tag f, :current_password %>
</div>
<div> <div class="mt-2">
<%= submit "Change email" %> <%= submit "Change email", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>
<hr>
<h3>Change password</h3> <h3>Change password</h3>
<.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password"> <.form let={f} for={@password_changeset} action={Routes.user_settings_path(@conn, :update)} id="update_password">
@ -35,19 +41,25 @@
<%= hidden_input f, :action, name: "action", value: "update_password" %> <%= hidden_input f, :action, name: "action", value: "update_password" %>
<%= label f, :password, "New password" %> <div class="form-group">
<%= password_input f, :password, required: true %> <%= label f, :password, "New password" %>
<%= error_tag f, :password %> <%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<%= label f, :password_confirmation, "Confirm new password" %> <div class="form-group mt-2">
<%= password_input f, :password_confirmation, required: true %> <%= label f, :password_confirmation, "Confirm new password" %>
<%= error_tag f, :password_confirmation %> <%= password_input f, :password_confirmation, required: true, class: "form-control" %>
<%= error_tag f, :password_confirmation %>
</div>
<%= label f, :current_password, for: "current_password_for_password" %> <div class="form-group mt-2">
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %> <%= label f, :current_password, for: "current_password_for_password" %>
<%= error_tag f, :current_password %> <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password", class: "form-control" %>
<%= error_tag f, :current_password %>
</div>
<div> <div class="mt-2">
<%= submit "Change password" %> <%= submit "Change password", class: "btn btn-primary" %>
</div> </div>
</.form> </.form>