Merge pull request #18 from tatiananantes/Album

Album
tatiananantes · Dec 17, 2021 · 40337b3 · 40337b3
2 parents c054ebe + 2fd6832
commit 40337b3
Show file tree

Hide file tree

Showing 51 changed files with 166 additions and 17 deletions.
diff --git a/app/assets/stylesheets/album.scss b/app/assets/stylesheets/album.scss
diff --git a/app/assets/stylesheets/albums.scss b/app/assets/stylesheets/albums.scss
@@ -1,3 +1,19 @@
 // Place all the styles related to the Albums controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+.modal {
+  .modal-body {
+    .img-thumbnail {
+      width: 100%;
+      background: transparent;
+      padding: 0;
+      border: 0;
+    }
+  }
+}
+
+.albums {
+  img {
+    margin-top: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,6 +1,7 @@
 @import "bootstrap";
 @import "posts";
 @import "users";
+@import "albums";
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
 @import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap");
 
@@ -87,7 +88,7 @@ body {
 }
 
 #flash {
-  .flash.alert {
+  .flash.alert, .flash.notice {
     position: fixed;
     bottom: 5%;
     background: rgba(67,118,212, 0.8);

diff --git a/app/assets/stylesheets/posts.scss b/app/assets/stylesheets/posts.scss
@@ -32,6 +32,7 @@
   .post-body {
     img {
       max-width: 100%;
+      width: 100%;
       margin-bottom: 10px;
     }
   }
@@ -57,6 +58,7 @@
 
 .post-container {
   width: 90vw;
+  max-width: 100%;
   margin: 0 auto;
   @media (min-width: 768px) {
     width: 60vw;

diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss
@@ -17,7 +17,7 @@
       color: #4376d4;
     }
   }
-  img {
+  .img-profile {
     height: 200px;
     width: 200px;
     background: white;
@@ -28,4 +28,25 @@
     margin-bottom: 15px;
     border: 1px solid rgba(0, 0, 0, 0.2);
   }
+}
+
+.album-viewer {
+  padding: 20px 0;
+  width: 85%;
+  a {
+    display: block;
+  }
+  img {
+    width: 100%;
+  }
+  .album-cover {
+    box-shadow: 0 3px 4px -4px black;
+    padding: 4px;
+    border-radius: 4px;
+    text-align: center;
+    a {
+      color: #333;
+      text-decoration: none;
+    }
+  }
 }
diff --git a/app/controllers/albums_controller.rb b/app/controllers/albums_controller.rb
@@ -27,7 +27,7 @@ def album_params
   end
 
   def find_user
-    @user = User.find_by_id(session[:user_id])
+    @user = User.find_by_id(params[:user_id])
   end
 
 end
diff --git a/app/controllers/photos_controller.rb b/app/controllers/photos_controller.rb
@@ -1,2 +1,30 @@
 class PhotosController < ApplicationController
+    before_action :find_user
+    before_action :find_album
+
+
+    def new
+        @photo = Photo.new 
+    end
+
+    def create
+
+        @photo = @album.photos.create(photo_params.merge(user_id: @user.id, album_id: @album.id))
+        redirect_to user_album_path(@user, @album)
+    end
+
+
+    private
+
+    def photo_params
+        params.require(:photo).permit(:image)
+    end
+
+    def find_user
+        @user = User.find_by_id(params[:user_id])
+    end
+
+    def find_album
+        @album = @user.albums.find_by_id(params[:album_id])
+    end
 end
diff --git a/app/views/albums/index.html.erb b/app/views/albums/index.html.erb
@@ -1,3 +1,9 @@
 <% @user.albums.reverse.each do |album| %>
-<p><%= album.name%></p>
-<%end%>
+<p>
+  <a href="/users/<%=@user.id%>/albums/<%=album.id%>">
+    <%= album.name %>
+  </a>
+</p>
+<%end%>
+
+
diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb
@@ -1,3 +1,50 @@
-<%=@album.name%>
+<h1><%= @album.name %></h1>
 
-This is an album
+
+<% if @user.id == session[:user_id]%>
+<div class="text-right">
+    <%= link_to "Add new photo to album", new_user_album_photo_path(@user, @album), :class => "btn btn-primary"%>
+  </div>
+<%end%>
+
+<div class= "row albums">
+    <% @album.photos.reverse.each do |photo| %>
+        <div class="col-sm-3">
+            <a href="#" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
+            <%= image_tag photo.image.variant(resize_to_limit: [600, 600]), class: "img-fluid img-thumbnail" %>
+            </a>
+        </div>
+    <% end %>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body text-center">
+
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+    var exampleModal = document.getElementById('exampleModal')
+    exampleModal.addEventListener('show.bs.modal', function (event) {
+    // Button that triggered the modal
+    var button = event.relatedTarget;
+    // Extract info from data-bs-* attributes
+    var recipient = button.innerHTML;
+    // If necessary, you could initiate an AJAX request here
+    // and then do the updating in a callback.
+    //
+    // Update the modal's content.
+    var modalBody = exampleModal.querySelector('.modal-body');
+
+    modalBody.innerHTML = recipient;
+    })
+
+</script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -57,4 +57,4 @@
       </div>
     </div>
   </body>
-</html>
+</html>
diff --git a/app/views/photos/new.html.erb b/app/views/photos/new.html.erb
@@ -0,0 +1,15 @@
+<div class="center-block">
+<div class="form-group-wrap">
+
+<%= form_with model: [ @user, @album, @album.photos.build ], local: true do |form| %>
+
+    <div class="form-group">
+    <%= form.label :image, class: "control-label"%>
+    <%= form.file_field :image,  class:"form-control", required: "true" %>
+  </div>
+    <div class="form-group">
+  <%= form.submit "Create!", class: "btn btn-primary" %>
+  </div>
+<% end %>
+</div>
+</div>
diff --git a/app/views/photos/show.html.erb b/app/views/photos/show.html.erb
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
@@ -7,21 +7,37 @@
   <div class="col-sm-4 col-lg-5">
     <div class="profile-main">
       <% if @user.avatar.attached? %>
-        <%= image_tag @user.avatar.variant(resize_to_limit: [200, 200]) %>
+        <%= image_tag @user.avatar.variant(resize_to_limit: [200, 200]), class: "img-fluid img-profile" %>
       <%end%>
-      <div>
+      <div style="width: 100%;">
         <h1 class="h3"> <%= @user.username %> </h1>
         <p>Member since: <%= @user.created_at.strftime("%d %B %G") %></p>
         <% if @user.id == session[:user_id]%>
           <%= link_to "Edit details", edit_user_path(@user) %>
         <%end%>
-
-        <% @user.albums.reverse.each do |album| %>
-        <p><a href="/users/<%=@user.id%>/albums/<%=album.id%>"><%= album.name%></p></a>
-        <%end%>
+        <div class="row album-viewer">
+          <% if @user.albums.count > 0 %>
+            <div class="soft-top border-top">
+            <h3 class="h4">Albums</h3>
+            </div>
+          <% end %>
+          <% @user.albums.reverse.each do |album| %>
+            <% if album.photos.count > 0 %>
+              <div class="col-sm-3">
+                <div class="bg-white album-cover">
+                  <a href="/users/<%=@user.id%>/albums/<%=album.id%>">
+                    <%= image_tag album.photos[0].image.variant(resize_to_limit: [100, 100]), class: "img-fluid rounded" %>
+                    <p><%= album.name %></p>
+                  </a>
+                </div>
+              </div>
+            <%end%>
+          <%end%>
+        </div>
 
         <% if @user.id == session[:user_id]%>
           <%= link_to "Create album", new_user_album_path(@user) %>
+          <%= link_to "My albums", user_albums_path(@user) %>
         <%end%>
 
       </div>

diff --git a/storage/17/n0/17n0z0ax86um2f1ndmf2dmjf41pp b/storage/17/n0/17n0z0ax86um2f1ndmf2dmjf41pp
diff --git a/storage/41/wv/41wvw035n9togu8062z31f92uh44 b/storage/41/wv/41wvw035n9togu8062z31f92uh44
diff --git a/storage/4w/qj/4wqjeb2ovx5vlwe4hxy4d24wbr4a b/storage/4w/qj/4wqjeb2ovx5vlwe4hxy4d24wbr4a
diff --git a/storage/5u/t5/5ut5jzklcuxk90ckwcqv9rf886sy b/storage/5u/t5/5ut5jzklcuxk90ckwcqv9rf886sy
diff --git a/storage/7k/gw/7kgwm7db4eq49kne1htiexe9ee7g b/storage/7k/gw/7kgwm7db4eq49kne1htiexe9ee7g
diff --git a/storage/93/2y/932y0olko4lxx2x5x7x37ponefdx b/storage/93/2y/932y0olko4lxx2x5x7x37ponefdx
diff --git a/storage/9r/fv/9rfvupjlhjcp5ybsmvtcbkihhd84 b/storage/9r/fv/9rfvupjlhjcp5ybsmvtcbkihhd84
diff --git a/storage/gb/gl/gbglday37bcvvymkfbbumag72hvm b/storage/gb/gl/gbglday37bcvvymkfbbumag72hvm
diff --git a/storage/gw/g9/gwg9fvkju6el6neys085fq6piw4k b/storage/gw/g9/gwg9fvkju6el6neys085fq6piw4k
diff --git a/storage/l1/kd/l1kdqljgriomj2hn8tq7bus0q9k1 b/storage/l1/kd/l1kdqljgriomj2hn8tq7bus0q9k1
diff --git a/storage/ov/i1/ovi1qvablgmw29eosw84nt2wyxnj b/storage/ov/i1/ovi1qvablgmw29eosw84nt2wyxnj
diff --git a/storage/qd/q1/qdq14a80ys1h981xtjbqtazfaa5b b/storage/qd/q1/qdq14a80ys1h981xtjbqtazfaa5b
diff --git a/storage/uo/7v/uo7vzh8yha2b3tyx37z0rc9oywyg b/storage/uo/7v/uo7vzh8yha2b3tyx37z0rc9oywyg
diff --git a/storage/v3/jp/v3jpu4b67yq02plqghehoj6e0ra8 b/storage/v3/jp/v3jpu4b67yq02plqghehoj6e0ra8
diff --git a/...z0ax86um2f1ndmf2dmjf41pp/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...z0ax86um2f1ndmf2dmjf41pp/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...z0ax86um2f1ndmf2dmjf41pp/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...z0ax86um2f1ndmf2dmjf41pp/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...w035n9togu8062z31f92uh44/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...w035n9togu8062z31f92uh44/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...eb2ovx5vlwe4hxy4d24wbr4a/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...eb2ovx5vlwe4hxy4d24wbr4a/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...jzklcuxk90ckwcqv9rf886sy/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...jzklcuxk90ckwcqv9rf886sy/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...m7db4eq49kne1htiexe9ee7g/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...m7db4eq49kne1htiexe9ee7g/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...0olko4lxx2x5x7x37ponefdx/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...0olko4lxx2x5x7x37ponefdx/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...0olko4lxx2x5x7x37ponefdx/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...0olko4lxx2x5x7x37ponefdx/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...upjlhjcp5ybsmvtcbkihhd84/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...upjlhjcp5ybsmvtcbkihhd84/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...day37bcvvymkfbbumag72hvm/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...day37bcvvymkfbbumag72hvm/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...day37bcvvymkfbbumag72hvm/d22d29d38393e844509e519a81db9789797c225b8eb8c334d9120bab21401b01 b/...day37bcvvymkfbbumag72hvm/d22d29d38393e844509e519a81db9789797c225b8eb8c334d9120bab21401b01
diff --git a/...fvkju6el6neys085fq6piw4k/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...fvkju6el6neys085fq6piw4k/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...fvkju6el6neys085fq6piw4k/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...fvkju6el6neys085fq6piw4k/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...qljgriomj2hn8tq7bus0q9k1/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...qljgriomj2hn8tq7bus0q9k1/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...qljgriomj2hn8tq7bus0q9k1/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...qljgriomj2hn8tq7bus0q9k1/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...qvablgmw29eosw84nt2wyxnj/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...qvablgmw29eosw84nt2wyxnj/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...qvablgmw29eosw84nt2wyxnj/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...qvablgmw29eosw84nt2wyxnj/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...4a80ys1h981xtjbqtazfaa5b/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...4a80ys1h981xtjbqtazfaa5b/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...4a80ys1h981xtjbqtazfaa5b/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...4a80ys1h981xtjbqtazfaa5b/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...zh8yha2b3tyx37z0rc9oywyg/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...zh8yha2b3tyx37z0rc9oywyg/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...u4b67yq02plqghehoj6e0ra8/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b b/...u4b67yq02plqghehoj6e0ra8/eebe8c804ad0baac89479dd4a8484c7da8b1c0c80dc361d277ea837f4c72817b
diff --git a/...utupoh0xrq4rsdlogk8jac1u/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f b/...utupoh0xrq4rsdlogk8jac1u/2e07992f45e78d264cb0d0832f9e86f34f2931716c6382e51b27cab3807be98f
diff --git a/...utupoh0xrq4rsdlogk8jac1u/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...utupoh0xrq4rsdlogk8jac1u/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/storage/wf/02/wf02utupoh0xrq4rsdlogk8jac1u b/storage/wf/02/wf02utupoh0xrq4rsdlogk8jac1u
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,4 +57,4 @@ @@
           </div>
         </div>
       </body>
-    </html>
+    </html>