From 372da9c8692925b87f4029ca39cbfc13dcd92086 Mon Sep 17 00:00:00 2001
From: Andrew Brown <drusepth@gmail.com>
Date: Sun, 27 Jun 2021 15:30:58 -0700
Subject: [PATCH] folder view polish

---
 .../content/list/_document_table.html.erb     | 495 +++++++++---------
 app/views/folders/show.html.erb               |   2 +-
 2 files changed, 262 insertions(+), 235 deletions(-)

diff --git a/app/views/content/list/_document_table.html.erb b/app/views/content/list/_document_table.html.erb
index 32a7adb4..e5d633d5 100644
--- a/app/views/content/list/_document_table.html.erb
+++ b/app/views/content/list/_document_table.html.erb
@@ -1,36 +1,119 @@
 <%# Usage: render partial: 'content/list/document_table', locals: { content_list: @content, content_type: @content_type_class } %>
 
-<table class="highlight z-depth-1 js-content-cards-list">
-  <thead>
-    <tr>
-      <th></th>
-      <th>Title</th>
-      <th>Length</th>
-      <th>Last edited</th>
-    </tr>
-  </thead>
-  <% content_list.each do |document| %>
-    <tr class="white js-content-card-container hoverable modal-trigger" data-target="document-info-<%= document.id %>" style="cursor: pointer">
-      <td class="center">
-          <i class="material-icons medium <%= Document.color %>-text"><%= Document.icon %></i>
-      </td>
-      <td>
-        <div>
+<% if content_list.any? %>
+  <table class="highlight z-depth-1 js-content-cards-list">
+    <thead>
+      <tr>
+        <th></th>
+        <th>Title</th>
+        <th>Length</th>
+        <th>Last edited</th>
+      </tr>
+    </thead>
+    <% content_list.each do |document| %>
+      <tr class="white js-content-card-container hoverable modal-trigger" data-target="document-info-<%= document.id %>" style="cursor: pointer">
+        <td class="center">
+            <i class="material-icons medium <%= Document.color %>-text"><%= Document.icon %></i>
+        </td>
+        <td>
           <div>
-            <% if user_signed_in? && document.user == current_user %>
-              <i class="material-icons left orange-text"
-                data-content-id="<%= document.id %>"
-                data-content-class="<%= document.class.name.downcase.pluralize %>">
-                <%= document.favorite? ? 'star' : 'star_border' %>
-              </i>
-            <% else %>
-              <i class="material-icons left orange-text tooltipped" data-tooltip="This document has been shared with you.">folder_shared</i>
+            <div>
+              <% if user_signed_in? && document.user == current_user %>
+                <i class="material-icons left orange-text"
+                  data-content-id="<%= document.id %>"
+                  data-content-class="<%= document.class.name.downcase.pluralize %>">
+                  <%= document.favorite? ? 'star' : 'star_border' %>
+                </i>
+              <% else %>
+                <i class="material-icons left orange-text tooltipped" data-tooltip="This document has been shared with you.">folder_shared</i>
+              <% end %>
+          
+              <strong style="font-size: 1.2em" class="js-content-name">
+                <%= document.title %>
+              </strong>
+            </div>
+            <div>
+              <%= link_to document.user, class: "#{User.color}-text" do %>
+                <i class="material-icons left"><%= User.icon %></i>
+                by <%= document.user.display_name %>
+              <% end %>
+            </div>
+            <% if document.universe %>
+              <div class="clearfix">
+                <%= link_to document.universe, class: "#{Universe.color}-text" do %>
+                  <i class="material-icons left"><%= Universe.icon %></i>
+                  in <%= document.universe.try(:name) || 'Unknown universe' %>
+                <% end %>
+              </div>
             <% end %>
-        
-            <strong style="font-size: 1.2em" class="js-content-name">
-              <%= document.title %>
-            </strong>
+            <% if document.respond_to?(:page_tags) %>
+                <p class="tags-container">
+                  <% document.page_tags.each do |tag| %>
+                    <% if user_signed_in? && document.user == current_user %>
+                      <%=
+                        link_to send(
+                          "page_tag_documents_path",
+                          slug: PageTagService.slug_for(tag.tag)
+                        ) do
+                      %>
+                        <span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
+                      <% end %>
+                    <% else %>
+                      <span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
+                    <% end %>
+                  <% end %>
+                </p>
+              <% end %>
           </div>
+        </td>
+        <td>
+          <div>
+            <i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
+            <%= pluralize document.word_count, 'word' %>
+          </div>
+          <div>
+            <i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
+            <%= document.reading_estimate %>
+          </div>
+        </td>
+        <td>
+          <span class="tooltipped" data-tooltip="Last edited at <%= document.updated_at.strftime("%m/%d/%Y %H:%M UTC") %>">
+            <%= document.updated_at == document.created_at ? 'created' : 'updated' %>
+            <%= time_ago_in_words document.updated_at %> ago
+          </span>
+        </td>
+      </tr>
+    <% end %>
+  </table>
+
+  <%# Build info modals %>
+  <% content_list.each do |document| %>
+    <div id="document-info-<%= document.id %>" class="modal modal-fixed-footer">
+      <div class="modal-content">
+        <h4 class="<%= Document.color %>-text">
+          <i class="material-icons left large"><%= Document.icon %></i>
+          <%= document.title %>
+
+          <%
+            if document.favorite?
+              icon = 'star'
+              action = 'Unfavorite'
+            else
+              icon = 'star_border'
+              action = 'Favorite'
+            end
+          %>
+
+          <% if user_signed_in? && document.user == current_user %>
+            <i class="material-icons right orange-text favorite-button tooltipped" 
+              data-tooltip="<%= action %> this page"
+              data-content-id="<%= document.id %>"
+              data-content-class="<%= document.class.name.downcase.pluralize %>">
+              <%= icon %>
+            </i>
+          <% end %>
+        </h4>
+        <div class="left">
           <div>
             <%= link_to document.user, class: "#{User.color}-text" do %>
               <i class="material-icons left"><%= User.icon %></i>
@@ -45,231 +128,175 @@
               <% end %>
             </div>
           <% end %>
-          <% if document.respond_to?(:page_tags) %>
-              <p class="tags-container">
-                <% document.page_tags.each do |tag| %>
-                  <% if user_signed_in? && document.user == current_user %>
-                    <%=
-                      link_to send(
-                        "page_tag_documents_path",
-                        slug: PageTagService.slug_for(tag.tag)
-                      ) do
-                    %>
-                      <span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
-                    <% end %>
-                  <% else %>
-                    <span class="new badge <%= params[:slug] == tag.slug ? 'orange' : Document.color %> left" data-badge-caption="<%= tag.tag %>"></span>
-                  <% end %>
-                <% end %>
-              </p>
-            <% end %>
         </div>
-      </td>
-      <td>
-        <div>
-          <i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
-          <%= pluralize document.word_count, 'word' %>
-        </div>
-        <div>
-          <i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
-          <%= document.reading_estimate %>
-        </div>
-      </td>
-      <td>
-        <span class="tooltipped" data-tooltip="Last edited at <%= document.updated_at.strftime("%m/%d/%Y %H:%M UTC") %>">
-          <%= document.updated_at == document.created_at ? 'created' : 'updated' %>
-          <%= time_ago_in_words document.updated_at %> ago
-        </span>
-      </td>
-    </tr>
-  <% end %>
-</table>
-
-<%# Build info modals %>
-<% content_list.each do |document| %>
-  <div id="document-info-<%= document.id %>" class="modal modal-fixed-footer">
-    <div class="modal-content">
-      <h4 class="<%= Document.color %>-text">
-        <i class="material-icons left large"><%= Document.icon %></i>
-        <%= document.title %>
-
-        <%
-          if document.favorite?
-            icon = 'star'
-            action = 'Unfavorite'
-          else
-            icon = 'star_border'
-            action = 'Favorite'
-          end
-        %>
-
-        <% if user_signed_in? && document.user == current_user %>
-          <i class="material-icons right orange-text favorite-button tooltipped" 
-            data-tooltip="<%= action %> this page"
-            data-content-id="<%= document.id %>"
-            data-content-class="<%= document.class.name.downcase.pluralize %>">
-            <%= icon %>
-          </i>
-        <% end %>
-      </h4>
-      <div class="left">
-        <div>
-          <%= link_to document.user, class: "#{User.color}-text" do %>
-            <i class="material-icons left"><%= User.icon %></i>
-            by <%= document.user.display_name %>
-          <% end %>
-        </div>
-        <% if document.universe %>
-          <div class="clearfix">
-            <%= link_to document.universe, class: "#{Universe.color}-text" do %>
-              <i class="material-icons left"><%= Universe.icon %></i>
-              in <%= document.universe.try(:name) || 'Unknown universe' %>
-            <% end %>
-          </div>
-        <% end %>
-      </div>
-      <div class="clearfix row">
-        <%= form_for document, remote: true do |f| %>
-          <div class="col s12 m12 l4">
-            <!--
-            <%= link_to analysis_document_path(document) do %>
-              <div class="card-panel orange white-text hoverable uppercase">
-                <i class="material-icons left">bar_chart</i>
-                Analyze
-              </div>
-            <% end %>
-            -->
-
-            <h5>Folder</h5>
-            <% if current_user.can_update?(document) %>
-              <%= 
-                f.select :folder_id, current_user.folders.pluck(:title, :id), 
-                  { include_blank: 'No folder' }, 
-                  { class: ' autosave-closest-form-on-change' }
-              %>
-              <style>
-                .dropdown-content {
-                  max-height: 350px;
-                }
-              </style>
-            <% else %>
-              <% if document.folder_id %>
-                <%= link_to document.folder.title, document.folder, class: "#{Folder.color}-text" %>
-              <% else %>
-                Not in a folder
+        <div class="clearfix row">
+          <%= form_for document, remote: true do |f| %>
+            <div class="col s12 m12 l4">
+              <!--
+              <%= link_to analysis_document_path(document) do %>
+                <div class="card-panel orange white-text hoverable uppercase">
+                  <i class="material-icons left">bar_chart</i>
+                  Analyze
+                </div>
               <% end %>
-            <% end %>
+              -->
 
-            <h5>About</h5>
-            <ul>
-              <li>
-                <i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
-                <%= pluralize document.word_count, 'word' %>
-              </li>
-              <li>
-                <i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
-                <%= document.reading_estimate %>
-              </li>
-              <li>
-                <i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
-                created <%= time_ago_in_words document.created_at %> ago
-              </li>
-              <% if document.created_at != document.updated_at %>
+              <h5>Folder</h5>
+              <% if current_user.can_update?(document) %>
+                <%= 
+                  f.select :folder_id, current_user.folders.pluck(:title, :id), 
+                    { include_blank: 'No folder' }, 
+                    { class: ' autosave-closest-form-on-change' }
+                %>
+                <style>
+                  .dropdown-content {
+                    max-height: 350px;
+                  }
+                </style>
+              <% else %>
+                <% if document.folder_id %>
+                  <%= link_to document.folder.title, document.folder, class: "#{Folder.color}-text" %>
+                <% else %>
+                  Not in a folder
+                <% end %>
+              <% end %>
+
+              <h5>About</h5>
+              <ul>
+                <li>
+                  <i class="material-icons tiny" style="position: relative; top: 3px;">text_snippet</i>
+                  <%= pluralize document.word_count, 'word' %>
+                </li>
+                <li>
+                  <i class="material-icons tiny" style="position: relative; top: 3px;">timer</i>
+                  <%= document.reading_estimate %>
+                </li>
                 <li>
                   <i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
-                  last updated <%= time_ago_in_words document.updated_at %> ago
+                  created <%= time_ago_in_words document.created_at %> ago
                 </li>
-              <% end %>
-            </ul>
+                <% if document.created_at != document.updated_at %>
+                  <li>
+                    <i class="material-icons tiny" style="position: relative; top: 3px;">history</i>
+                    last updated <%= time_ago_in_words document.updated_at %> ago
+                  </li>
+                <% end %>
+              </ul>
 
-            <!--
-            <h5>Actions</h5>
-            <ul>
-              <li><%= link_to 'View Revision log', document_document_revisions_path(document) %><br /><br /></li>
-              <li><%= link_to 'View plaintext', plaintext_document_path(document) %></li>
-            </ul>
-            -->
-          </div>
+              <!--
+              <h5>Actions</h5>
+              <ul>
+                <li><%= link_to 'View Revision log', document_document_revisions_path(document) %><br /><br /></li>
+                <li><%= link_to 'View plaintext', plaintext_document_path(document) %></li>
+              </ul>
+              -->
+            </div>
 
-          <div class="col s12 m12 l8" style="padding-right: 1em">
-            <% if current_user.can_update?(document) %>
-              <div class="content-field">
-                <h5>Document synopsis</h5>
-                <div class="input-field">
-                  <%= f.text_area :synopsis, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: 'What happens in this document?' %>
-                  <span class="helper-text">Changes will automatically save.</span>
+            <div class="col s12 m12 l8" style="padding-right: 1em">
+              <% if current_user.can_update?(document) %>
+                <div class="content-field">
+                  <h5>Document synopsis</h5>
+                  <div class="input-field">
+                    <%= f.text_area :synopsis, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: 'What happens in this document?' %>
+                    <span class="helper-text">Changes will automatically save.</span>
+                  </div>
                 </div>
-              </div>
 
-              <div class="content-field">
-                <h5>Document notes</h5>
-                <div class="input-field">
-                  <%= f.text_area :notes_text, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: "Write as little or as much as you'd like!" %>
-                  <span class="helper-text">Changes will automatically save. These notes will be available while writing.</span>
+                <div class="content-field">
+                  <h5>Document notes</h5>
+                  <div class="input-field">
+                    <%= f.text_area :notes_text, class: 'materialize-textarea autosave-closest-form-on-change', placeholder: "Write as little or as much as you'd like!" %>
+                    <span class="helper-text">Changes will automatically save. These notes will be available while writing.</span>
+                  </div>
                 </div>
-              </div>
 
-              <h5>Document tags</h5>
-              <%=
-                render partial: 'content/form/field_types/tags', locals: {
-                  f:     f,
-                  page:  document,
-                  field: AttributeField.new
-                }
-              %>
-            <% else %>
-              <h5>Document synopsis</h5>
-              <% if document.synopsis %>
-                <%= simple_format ContentFormatterService.show(
-                  text:         document.synopsis,
-                  viewing_user: current_user
-                ) %>
-              <% else %>
-                <em>None yet</em>
-              <% end %>
-
-              <h5>Document notes</h5>
-              <% if document.notes_text %>
-                <%= simple_format ContentFormatterService.show(
-                  text:         document.notes_text,
-                  viewing_user: current_user
-                ) %>
-              <% else %>
-                <em>None yet</em>
-              <% end %>
-
-              <% if document.page_tags.any? %>
                 <h5>Document tags</h5>
                 <%=
-                  render partial: "content/display/attribute_value/tags", 
-                          locals: { value: document.page_tags.pluck(:tag), content: document }
+                  render partial: 'content/form/field_types/tags', locals: {
+                    f:     f,
+                    page:  document,
+                    field: AttributeField.new
+                  }
                 %>
-              <% end %>
+              <% else %>
+                <h5>Document synopsis</h5>
+                <% if document.synopsis %>
+                  <%= simple_format ContentFormatterService.show(
+                    text:         document.synopsis,
+                    viewing_user: current_user
+                  ) %>
+                <% else %>
+                  <em>None yet</em>
+                <% end %>
 
-            <% end %>
-          </div>
+                <h5>Document notes</h5>
+                <% if document.notes_text %>
+                  <%= simple_format ContentFormatterService.show(
+                    text:         document.notes_text,
+                    viewing_user: current_user
+                  ) %>
+                <% else %>
+                  <em>None yet</em>
+                <% end %>
+
+                <% if document.page_tags.any? %>
+                  <h5>Document tags</h5>
+                  <%=
+                    render partial: "content/display/attribute_value/tags", 
+                            locals: { value: document.page_tags.pluck(:tag), content: document }
+                  %>
+                <% end %>
+
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <% if current_user.can_read?(document) %>
+          <%= link_to polymorphic_path(document), class: 'blue white-text text-lighten-1 btn hoverable' do %>
+            <i class="material-icons left"><%= content_type.icon %></i>
+            View
+          <% end %>
+        <% end %>
+        <% if current_user.can_update?(document) %>
+          <%= link_to edit_polymorphic_path(document), class: 'green white-text btn hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
+            <i class="material-icons left"><%= content_type.icon %></i>
+            Edit
+          <% end %>
+        <% end %>
+        <% if current_user.can_update?(document) %>
+          <%= link_to analysis_document_path(document), class: 'orange white-text btn left hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
+            <i class="material-icons left">bar_chart</i>
+            Analyze
+          <% end %>
         <% end %>
       </div>
     </div>
-    <div class="modal-footer">
-      <% if current_user.can_read?(document) %>
-        <%= link_to polymorphic_path(document), class: 'blue white-text text-lighten-1 btn hoverable' do %>
-          <i class="material-icons left"><%= content_type.icon %></i>
-          View
-        <% end %>
-      <% end %>
-      <% if current_user.can_update?(document) %>
-        <%= link_to edit_polymorphic_path(document), class: 'green white-text btn hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
-          <i class="material-icons left"><%= content_type.icon %></i>
-          Edit
-        <% end %>
-      <% end %>
-      <% if current_user.can_update?(document) %>
-        <%= link_to analysis_document_path(document), class: 'orange white-text btn left hoverable', target: document.is_a?(Document) ? '_new' : '_self' do %>
-          <i class="material-icons left">bar_chart</i>
-          Analyze
-        <% end %>
-      <% end %>
+  <% end %>
+<% else %>
+
+  <div class="row">
+    <div class="col s12 m8 offset-m2">
+      <div class="hoverable card center" style="margin: 50px 0; padding: 50px 0; border-bottom: 10px solid <%= Document.hex_color %>">
+        <h4>
+          You haven't created any documents
+          <% if @universe_scope %>in the <%= link_to @universe_scope.name, @universe_scope, class: Universe.color + "-text" %> universe<% end %>
+          <% if @folder %>in this folder<% end %>
+          yet!
+        </h4>
+        <h1>
+          <i class="material-icons <%= Document.color %>-text" style="font-size: 200%">
+            <%= Document.icon %>
+          </i>
+        </h1>
+        <p>
+          You can create an unlimited number of documents with no limits on length. Enjoy!
+        </p>
+        <br />
+        <%= link_to "Create your first document", new_document_path, target: '_blank', class: "btn #{Document.color}" %>
+      </div>
     </div>
   </div>
+
 <% end %>
\ No newline at end of file
diff --git a/app/views/folders/show.html.erb b/app/views/folders/show.html.erb
index e498a1d4..80f77fd3 100644
--- a/app/views/folders/show.html.erb
+++ b/app/views/folders/show.html.erb
@@ -29,7 +29,7 @@
       <%= render partial: 'folders/list', locals: { folders: @child_folders } %>
 
       <div class="row">
-        <%= render partial: 'content/components/list_filter_bar', locals: { content_type: Document } %>
+        <%= render partial: 'content/components/list_filter_bar', locals: { content_type: Document } if @content.any? %>
         <%= render partial: 'content/list/document_table', locals: { content_list: @content, content_type: Document } %>
       </div>
     </div>