fix: profile layout

chore: move <head> back into app.html.erb * rendering the _head partial seemed to be negating the benefit of turbo: took 1.4ms to render that partial. chore: remove bad seed file
sean-garwood · Nov 19, 2024 · 9723378 · 9723378
1 parent f3e21c8
commit 9723378
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 90 deletions.
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -16,6 +16,7 @@
 
 @import "comment";
 @import "post";
+@import "profile";
 
 html {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

diff --git a/app/assets/stylesheets/post.css b/app/assets/stylesheets/post.css
@@ -4,6 +4,11 @@
   margin: 10px;
 }
 
+.post-body-container {
+  font-size: 1.2em;
+  background-color: antiquewhite;
+}
+
 .post-container {
   margin: 10px;
   padding: 10px;
@@ -16,9 +21,18 @@
   /* fit content to width with max at 80vw */
 }
 
-.post-body-container {
-  font-size: 1.2em;
-  background-color: antiquewhite;
+.post-form {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  background-color: lightgray;
+}
+
+.post-form-fields-container {
+  display: flex;
+  flex-direction: column;
+  margin: 10px;
+  gap: 10px;
 }
 
 .author-info-container {

diff --git a/app/assets/stylesheets/profile.css b/app/assets/stylesheets/profile.css
@@ -0,0 +1,20 @@
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+.profile-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  background-color: azure;
+  padding-left: 1em;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
diff --git a/app/views/follow_requests/create.html.erb b/app/views/follow_requests/create.html.erb
diff --git a/app/views/follow_requests/destroy.html.erb b/app/views/follow_requests/destroy.html.erb
diff --git a/app/views/follow_requests/new.html.erb b/app/views/follow_requests/new.html.erb
diff --git a/app/views/follow_requests/show.html.erb b/app/views/follow_requests/show.html.erb
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,7 +2,18 @@
 <html>
   <div class="container">
     <head>
-      <%= render partial: "layouts/header/head" %>
+      <title><%= content_for(:title) || "Top Odinbook" %></title>
+      <meta name="viewport" content="width=device-width,initial-scale=1">
+      <meta name="apple-mobile-web-app-capable" content="yes">
+      <%= csrf_meta_tags %>
+      <%= csp_meta_tag %>
+      <%= yield :head %>
+      <link rel="manifest" href="/manifest.json">
+      <link rel="icon" href="/icon.png" type="image/png">
+      <link rel="icon" href="/icon.svg" type="image/svg+xml">
+      <link rel="apple-touch-icon" href="/icon.png">
+      <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+      <%= javascript_importmap_tags %>
     </head>
     <body>
       <%= render partial: "layouts/header" %>

diff --git a/app/views/layouts/header/_head.html.erb b/app/views/layouts/header/_head.html.erb
diff --git a/app/views/posts/_post_form.html.erb b/app/views/posts/_post_form.html.erb
@@ -1,10 +1,20 @@
-<div>
-  <h2>create or edit a post here</h2>
-  <div class="form">
-    <%= form_with model: @post do |post_form| %>
-      <%= post_form.text_field :title %>
-      <%= post_form.text_field :body  %>
-      <%= post_form.submit "Submit" %>
-    <% end %>
-  </div>
+<div class="post-form">
+  <%= form_with model: @post do |post_form| %>
+    <fieldset>
+      <legend>
+        <h2><%= "#{action_name.capitalize} post" %></h2>
+      </legend>
+      <div class="post-form-fields-container">
+        <div class="post-title">
+          <%= post_form.label :title %>
+          <%= post_form.text_field :title %>
+        </div>
+        <div class="post-body">
+          <%= post_form.label :body  %>
+          <%= post_form.text_area :body  %>
+        </div>
+      </div>
+    </fieldset>
+    <%= post_form.submit "Submit" %>
+  <% end %>
 </div>
diff --git a/app/views/posts/edit.html.erb b/app/views/posts/edit.html.erb
@@ -1,3 +1 @@
-<h1>Posts#edit</h1>
-<p>Find me in app/views/posts/edit.html.erb</p>
 <%= render partial: "post_form" %>
diff --git a/app/views/posts/index.html.erb b/app/views/posts/index.html.erb
@@ -1,5 +1,4 @@
-<h1>Posts#index</h1>
-<p>Find me in app/views/posts/index.html.erb</p>
+<h1>Feed</h1>
 <div class="posts-container">
   <% @posts.each do |post| %>
     <div class="post-container">

diff --git a/app/views/posts/new.html.erb b/app/views/posts/new.html.erb
@@ -1,3 +1 @@
-<h1>Posts#new</h1>
-<p>Find me in app/views/posts/new.html.erb</p>
 <%= render partial: "post_form" %>
diff --git a/app/views/posts/show.html.erb b/app/views/posts/show.html.erb
@@ -1,4 +1,3 @@
 <%= render partial: 'post' %>
 <%= render partial: 'actions' %>
 <%= render partial: 'comments' %>
-<%# TODO: make a comment button %>
diff --git a/app/views/profile/_form.html.erb b/app/views/profile/_form.html.erb
@@ -0,0 +1,5 @@
+<%= form_with model: @profile do |profile_form| %>
+  <%= profile_form.label :bio %>
+  <%= profile_form.text_area :bio %>
+  <%= profile_form.submit "Save Changes", data: {turbo_confirm: "Really save?"} %>
+<% end %>
diff --git a/app/views/profile/_header.html.erb b/app/views/profile/_header.html.erb
@@ -0,0 +1,8 @@
+<h1><%= action_name == "edit" ? "Edit" : nil %> Profile</h1>
+<p>Keep the world apprised of your state--as if it cares.</p>
+<h2>
+  <div class="profile-header">
+    <span class="profile-banner"><img class="avatar" src=<%=
+        avatar_src_url(@email) %>&alt="profile pic"></span><%= @email %>
+  </div>
+</h2>
diff --git a/app/views/profile/edit.html.erb b/app/views/profile/edit.html.erb
@@ -1,14 +1,4 @@
-<h1>Profile#edit</h1>
-<p>Find me in app/views/profile/edit.html.erb</p>
 <div class="profile-container">
-  <div class="profile">
-    <h2><%= @profile.user.email %>'s profile</h2>
-    <%= form_with model: @profile do |profile_form| %>
-      <div class="form">
-        <%= profile_form.label :bio %>
-        <%= profile_form.text_area :bio %>
-        <%= profile_form.submit "Submit" %>
-      </div>
-    <% end %>
-  </div>
+  <%= render partial: 'header' %>
+  <%= render partial: 'form' %>
 </div>
diff --git a/app/views/profile/show.html.erb b/app/views/profile/show.html.erb
@@ -1,13 +1,7 @@
-<h1>Profile#show</h1>
-<p>Find me in app/views/profile/show.html.erb</p>
 <div class="profile-container">
-  <div class="profile">
-    <div class="profile-header">
-      <h2><span><img src=<%= avatar_src_url(@email) %>&alt="profile pic"></span><%= @email %></h2>
-    </div>
-    <p><%= @profile.bio %></p>
-  </div>
+  <%= render partial: 'header' %>
+  <p><%= @profile.bio %></p>
 </div>
 <div>
-  <%= link_to "Edit Profile", edit_profile_path %>
+  <%= button_to "Edit Profile", edit_profile_path, method: :get %>
 </div>
diff --git a/db/seeds.rb b/db/seeds.rb