Update Archive Index View

[dsu1]

Add meta information to the Archive Index page for each archive.

Additions:

• The total number of archives the user owns
• Refashion each Archive from a Title line to a boxed entity which displays:
  • The title of the archive
  • The number of entries in the archive
  • Time the archive was created

[dsu1]

views/layouts/application.html.erb

<div class="row">
	<div class="small-9 column">
		<%= yield %>
	</div>
	<div class="small-3 column">
		<%= yield :side %>
	</div>
</div>

• Changed the columns to use them more effectively and allow a sidebar next to the main content body. The 'side' identifier that gets yielded is provided by the archive index view.

views/archives/index.html.erb

<% if @archives.empty? %>
	...
<% else %>
	<ul class="no-list">
		<%= render partial: "archives", collection: @archives %>
	</ul>
<% end %>

<% content_for :side do %>
	<div class="side-section">
		<h4>General Info</h4>
		<% if @archives.count == 0 %>
			<span> You don't have any archives.</span>
		<% elsif @archives.count == 1 %>
			<span> You have one archive.</span>
		<% else %>
			<span> You have <%= @archives.count %> archives.</span>
		<% end %>
	</div>
<% end %>

• Wrapped the rendering archives in an unordered list with a list-style: none attached. This removes any list markers which I use later on to display each archive as a boxed entity.
• The Content-for yields the side box on this page which for now only displays the total number of archives the user owns.

views/archives/_archives

<li>
	<div class="small-6 column archive-card">
		<h4 class="archive-title"><%= link_to "#{archives.name} &rarr;".html_safe,  archive_path(archives.id) %></h4><br />
		<% if archives.contents.count == 0 %>
			<span>This archive is empty.</span><br />
		<% elsif archives.contents.count == 1 %>
			<span>This archive has one entry.</span><br />
		<% else %>
			<span>This archive has <%= archives.contents.count %> entries.</span><br />
		<% end %>
		<span><%= archives.created_at.strftime("Created %-m/%-d/%y at %-l:%M%p") %></span><br />
	</div>
</li>

• This is the partial template that's rendered for each archive into the archive index view. Each archive is wrapped in a list tag so they are displayed in order.
• The column 6 allows these cards to be displayed side by side.
• Each card hyperlinks to the archive show page of whatever title the user clicks on. In addition, the number of contents and the time the archive was created are shown.
• Added a right pointing arrow next to an archive title to sort of indicate for the user to click and go there. I use the UTF-8 code, html entity, for this arrow so I needed to escape this code within the embedded ruby or it would simply wouldn't render due to Rails' XSS protection:
  link_to "#{archives.name} →".html_safe
• I use a formatted string to clean up the archive's created_at for the user to see. The '-' sign removes preceding 0's that Rails dates and times contains for days, months, minutes, and hours by default, since it didn't look too good on the page:
  <span><%= archives.created_at.strftime("Created %-m/%-d/%y at %-l:%M%p") %></span>

stylesheets/archive_index.css

.side-section, .archive-card {
	border: 1px solid black;
	border-radius: 5px;
	background-color: maroon;
	margin-top: 30px;
	padding: 5px 10px 15px;
	box-shadow: 7px 7px 5px #888888;
	color: white;
}

.side-section > * {
	color: white;
}

.archive-card {
	box-sizing: border-box;
	width: 30%;
	margin-right: 29px;
	padding: 10px;
	height: 110px;
}

.no-list {
	list-style: none;
}

• Added and adjusted some of the styling for the side box and archive cards

foundation_and_overrides.scss

• I increased the row-width so that more space is used to fill in with content on my webpages:
  $row-width: em-calc(1200);

views/users/show.html.erb

<ul class="no-list">
	<%= render partial: "archives/archives", collection: @archives %>
</ul>

• Since I was rendering the archives partial from the user's show page as well, I wrapped it in a ul container like I do in the archives index.

Results: