show page

Author: mcstr

.gitignore

@@ -40,3 +40,4 @@ yarn-debug.log*
 *.swp
 .DS_Store
 .env*
+.env*

app/assets/stylesheets/application.scss

@@ -12,6 +12,7 @@
 @import "components/index";
 @import "pages/index";
 @import "pages/search";
+@import "pages/show";
 
 
 .content {

app/assets/stylesheets/pages/_show.scss

@@ -0,0 +1,10 @@
+.show-card{
+  background-size : fit;
+  background-color: #333;
+  color: white,
+}
+
+
+show-pic{
+  border: 2px solid #A01170
+}

app/views/masks/show.html.erb

@@ -1,11 +1,14 @@
-<h1><%= @mask.name %></h1>
-<h2><%= @mask.price %>€</h2>
-<p><%= @mask.description %></p>
-<% if @mask.photo.attached? %>
-  <%= cl_image_tag @mask.photo.key, height: 300, width: 400, crop: :fill %>
-<% end %>
-<p><%= @mask.category %></p>
-<%= link_to 'Edit the mask', edit_mask_path(@mask) %>
-<%= link_to 'See all masks', masks_path %>
-<%= link_to 'Delete the mask!', mask_path(@mask), method: :delete %>
-
+  <div class="container-product">
+    <div class = "show-card">
+      <h1><%= @mask.name %></h1>
+      <h2><%= @mask.price %>€</h2>
+      <p>Description: <%= @mask.description %></p>
+      <% if @mask.photo.attached? %>
+        <%= cl_image_tag @mask.photo.key, height: 300, width: 400, crop: :fit  %>
+      <% end %>
+      <p><%= @mask.category %></p>
+      <%= link_to 'Edit the mask', edit_mask_path(@mask) %>
+      <%= link_to 'See all masks', masks_path %>
+      <%= link_to 'Delete the mask!', mask_path(@mask), method: :delete %>
+    </div>
+  </div>