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 */
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.alert-info {
color: #31708f;
@ -63,11 +61,10 @@
}
.phx-modal-content {
background-color: #fefefe;
margin: 15vh auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
}
.phx-modal-close {
@ -118,3 +115,9 @@
0% { opacity: 1; }
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.enableLatencySim(1000) // enabled for duration of browser session
// >> 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-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-window-keydown={JS.dispatch("click", to: "#close")}
phx-key="escape"

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

@ -9,35 +9,33 @@
phx-change="validate"
phx-submit="save">
<%= label f, :title %>
<%= textarea f, :title %>
<%= error_tag f, :title %>
<div class="form-group">
<%= label f, :title %>
<%= text_input f, :title, class: "form-control" %>
<%= error_tag f, :title %>
</div>
<%= label f, :body %>
<%= textarea f, :body %>
<%= error_tag f, :body %>
<div class="form-group mt-2">
<%= label f, :body %>
<%= textarea f, :body, class: "form-control" %>
<%= error_tag f, :body %>
</div>
<%= if !Ecto.assoc_loaded?(@post.upload) do %>
<%= live_file_input @uploads.upload %>
<%= for upload <- @uploads.upload.entries do %>
<div class="row">
<div class="column">
<%= live_img_preview upload, height: 80 %>
<div class="form-group mt-2">
<%= if !Ecto.assoc_loaded?(@post.upload) do %>
<%= live_file_input @uploads.upload %>
<%= for upload <- @uploads.upload.entries do %>
<div class="row">
<div class="column">
<%= live_img_preview upload, height: 80 %>
</div>
</div>
</div>
<% end %>
<% end %>
<% else %>
<%= 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>
<%= submit "Save", phx_disable_with: "Saving..." %>
<div class="mt-2">
<%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-primary" %>
</div>
</.form>
</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
{:ok, socket} = assign_socket_room_and_user_or_error(params, session, socket)
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}
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 %>
<.modal return_to={Routes.post_index_path(@socket, :index, @room)}>
@ -14,29 +14,40 @@
</.modal>
<% 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>
<%= 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 %>
<li><%= @current_user.email %></li>
<li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
<li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
<li class="nav-item active">
<%= link "Settings", to: Routes.user_settings_path(@conn, :edit), class: "nav-link" %>
</li>
<li class="nav-item active">
<%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete, class: "nav-link" %>
</li>
<% else %>
<li><%= link "Register", to: Routes.user_registration_path(@conn, :new) %></li>
<li><%= link "Log in", to: Routes.user_session_path(@conn, :new) %></li>
<% end %>
</ul>
<li class="nav-item active">
<%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "nav-link" %>
</li>
<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 name="viewport" content="width=device-width, initial-scale=1.0"/>
<%= 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")}/>
<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>
<body>
<body class="bg-secondary min-vh-100">
<header>
<section class="container">
<nav>
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
<% end %>
</ul>
<%= render "_user_menu.html", assigns %>
</nav>
</section>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a href="/" class="navbar-brand">
AggiEdit
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="toggle">
<ul class="navbar-nav">
<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>
<%= @inner_content %>
<div class="container mt-2 bg-light p-2 shadow rounded">
<%= @inner_content %>
</div>
</body>
</html>

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

@ -1,41 +1,26 @@
<section class="phx-hero">
<h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
<p>Peace of mind from prototype to production</p>
</section>
<section class="row">
<article class="column">
<h2>Resources</h2>
<ul>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix">Source</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix/blob/v1.6/CHANGELOG.md">v1.6 Changelog</a>
</li>
</ul>
</article>
<article class="column">
<h2>Help</h2>
<ul>
<li>
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
</li>
<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>
<div>
<h1>
Welcome to AggiEdit!
</h1>
</div>
<div>
<h3>
How does it work?
</h3>
<p>
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.
For example, if you sign up with your email address "joe@mailinator.com" you are assigned to the sub-aggie "mailinator.com".
<br>
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
chat-room is created for each post in the sub-aggie to discuss that post.
</p>
<%= if !@current_user do %>
<p>
Get started by <%= link "registering", to: Routes.user_registration_path(@conn, :new) %> to be able to view posts in your sub-aggie!
</p>
<% else %>
<p>
You are signed in! <%= link "Visit your sub-aggie!", to: "/room/#{@current_user.room_id}" %>
</p>
<% end %>
</div>

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

@ -1,11 +1,11 @@
<h1>Confirm account</h1>
<.form let={_f} for={:user} action={Routes.user_confirmation_path(@conn, :update, @token)}>
<div>
<%= submit "Confirm my account" %>
<div class="form-group">
<%= submit "Confirm my account", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<p>
<%= link "Register", to: Routes.user_registration_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>
<.form let={f} for={:user} action={Routes.user_confirmation_path(@conn, :create)}>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<div class="form-group">
<%= label f, :email %>
<%= email_input f, :email, required: true, class: "form-control" %>
</div>
<div>
<%= submit "Resend confirmation instructions" %>
<div class="mt-2">
<%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<p>
<%= link "Register", to: Routes.user_registration_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>
<% end %>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= error_tag f, :email %>
<div class="form-group mt-2">
<%= label f, :email %>
<%= email_input f, :email, required: true, class: "form-control" %>
<%= error_tag f, :email %>
</div>
<%= label f, :username %>
<%= text_input f, :username, required: true %>
<%= error_tag f, :username %>
<div class="form-group mt-2">
<%= label f, :username %>
<%= text_input f, :username, required: true, class: "form-control" %>
<%= error_tag f, :username %>
</div>
<%= label f, :password %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<div class="form-group mt-2">
<%= label f, :password %>
<%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<div>
<%= submit "Register" %>
<div class="mt-2">
<%= submit "Register", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<p>
<%= link "Log in", to: Routes.user_session_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>
<% end %>
<%= label f, :password, "New password" %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<div class="form-group mt-2">
<%= label f, :password, "New Password" %>
<%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<%= label f, :password_confirmation, "Confirm new password" %>
<%= password_input f, :password_confirmation, required: true %>
<%= error_tag f, :password_confirmation %>
<div class="form-group mt-2">
<%= label f, :password_confirmation, "Confirm new password" %>
<%= password_input f, :password_confirmation, required: true, class: "form-control" %>
<%= error_tag f, :password_confirmation %>
</div>
<div>
<%= submit "Reset password" %>
<div class="form-group mt-2">
<%= submit "Reset password", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<p>
<%= link "Register", to: Routes.user_registration_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>
<% end %>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= label f, :password %>
<%= password_input f, :password, required: true %>
<%= label f, :remember_me, "Keep me logged in for 60 days" %>
<%= checkbox f, :remember_me %>
<div>
<%= submit "Log in" %>
<div class="form-group">
<%= label f, :email %>
<%= email_input f, :email, required: true, class: "form-control" %>
</div>
<div class="form-group mt-2">
<%= label f, :password %>
<%= password_input f, :password, required: true, class: "form-control" %>
</div>
<div class="form-check mt-2">
<%= label f, :remember_me, "Keep me logged in for 60 days" %>
<%= checkbox f, :remember_me, class: "form-check-input" %>
</div>
<div class="mt-2">
<%= submit "Log in", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<p>
<%= link "Register", to: Routes.user_registration_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" %>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= error_tag f, :email %>
<div class="form-group">
<%= label 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" %>
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
<%= error_tag f, :current_password %>
<div class="form-group mt-2">
<%= label f, :current_password, for: "current_password_for_email" %>
<%= 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>
<%= submit "Change email" %>
<div class="mt-2">
<%= submit "Change email", class: "btn btn-primary" %>
</div>
</.form>
<hr>
<h3>Change password</h3>
<.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" %>
<%= label f, :password, "New password" %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<div class="form-group">
<%= label f, :password, "New password" %>
<%= password_input f, :password, required: true, class: "form-control" %>
<%= error_tag f, :password %>
</div>
<%= label f, :password_confirmation, "Confirm new password" %>
<%= password_input f, :password_confirmation, required: true %>
<%= error_tag f, :password_confirmation %>
<div class="form-group mt-2">
<%= label f, :password_confirmation, "Confirm new password" %>
<%= 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" %>
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
<%= error_tag f, :current_password %>
<div class="form-group mt-2">
<%= label f, :current_password, for: "current_password_for_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>
<%= submit "Change password" %>
<div class="mt-2">
<%= submit "Change password", class: "btn btn-primary" %>
</div>
</.form>