Content show/edit pages polish

app/models/character.rb

@@ -48,30 +48,30 @@ class Character < ActiveRecord::Base
 
   def self.attribute_categories
     {
-      general: {
+      overview: {
         icon: 'info',
         attributes: %w(name role gender age universe_id)
       },
-      appearance: {
+      looks: {
         icon: 'face',
         attributes: %w(weight height haircolor hairstyle facialhair eyecolor race skintone bodytype identmarks)
       },
       social: {
         icon: 'groups',
-        attributes: %w(best_friends religion politics prejudices occupation)
+        attributes: %w(best_friends archenemies religion politics prejudices occupation)
       },
       # TODO: remove schema for mannerisms
       history: {
         icon: 'info',
         attributes: %w(birthday birthplaces education background)
       },
-      favorites: {
+      faves: {
         icon: 'star',
         attributes: %w(fave_color fave_food fave_possession fave_weapon fave_animal)
       },
-      relations: {
+      family: {
         icon: 'face',
-        attributes: %w(mothers fathers spouses siblings archenemies children)
+        attributes: %w(mothers fathers spouses siblings children)
       },
       notes: {
         icon: 'edit',

app/models/item.rb

@@ -32,20 +32,20 @@ class Item < ActiveRecord::Base
 
   def self.attribute_categories
     {
-      general_information: {
+      overview: {
         icon: 'info',
         attributes: %w(name item_type description universe_id)
       },
-      appearance: {
-        icon: 'face',
+      looks: {
+        icon: 'redeem',
         attributes: %w(weight)
       },
       history: {
-        icon: 'face',
+        icon: 'book',
         attributes: %w(original_owners current_owners makers materials year_made)
       },
       abilities: {
-        icon: 'face',
+        icon: 'flash_on',
         attributes: %w(magic)
       },
       notes: {

app/models/location.rb

@@ -38,7 +38,7 @@ class Location < ActiveRecord::Base
 
   def self.attribute_categories
     {
-      general_information: {
+      overview: {
         icon: 'info',
         attributes: %w(name type_of description universe_id)
       },
@@ -48,15 +48,15 @@ class Location < ActiveRecord::Base
         attributes: %w(leaders population language currency motto)
       },
       cities: {
-        icon: 'face',
+        icon: 'business',
         attributes: %w(capital_cities largest_cities notable_cities)
       },
       geography: {
-        icon: 'edit',
+        icon: 'map',
         attributes: %w(area crops located_at)
       },
       history: {
-        icon: 'edit',
+        icon: 'book',
         attributes: %w(established_year notable_wars)
       },
       notes: {

app/models/universe.rb

@@ -35,21 +35,21 @@ class Universe < ActiveRecord::Base
 
   def self.attribute_categories
     {
-      general_information: {
+      overview: {
         icon: 'info',
         attributes: %w(name description)
       },
       history: {
-        icon: 'face',
+        icon: 'book',
         attributes: %w(history)
       },
-      settings: {
-        icon: 'face',
-        attributes: %w(privacy)
-      },
       notes: {
         icon: 'edit',
         attributes: %w(notes private_notes)
+      },
+      settings: {
+        icon: 'build',
+        attributes: %w(privacy)
       }
     }
   end

app/views/content/_form.html.erb

@@ -6,7 +6,7 @@
       <div class="card-content">
         <div class="card-title center">
           <span class="right">
-            <i class="material-icons red-text"><%= content.class.icon %></i>
+            <i class="material-icons <%= content.class.color %>-text"><%= content.class.icon %></i>
             <%= render 'content/form/actions_dropdown', content: content %>
           </span>
 
@@ -14,32 +14,65 @@
         </div>
 
         <%# Tabs %>
-        <ul class="hoverable tabs">
+        <ul class="hoverable tabs hide-on-small-only">
           <% content.class.attribute_categories.each do |category, data| %>
             <li class="tab col s12">
               <a href="#<%= category %>">
-                <i class="material-icons hide-on-med-and-down" style="font-size: 18px;"><%= data[:icon] %></i>
+                <i class="material-icons hide-on-med-and-down" style="font-size: 18px; position: relative; top: 3px;"><%= data[:icon] %></i>
                 <%= category.to_s.humanize %>
               </a>
             </li>
           <% end %>
         </ul>
+        <ul class="tabs hide-on-med-and-up">
+          <% content.class.attribute_categories.each do |category, data| %>
+            <li class="tab col s12">
+              <a href="#<%= category %>" class="tooltipped" data-position="bottom" data-delay="100" data-tooltip="<%= category.to_s.humanize %>">
+                <i class="material-icons" style="font-size: 18px; position: relative; top: 3px;"><%= data[:icon] %></i>
+              </a>
+            </li>
+          <% end %>
+        </ul>
         <br />
 
         <%# Content panels %>
         <% content.class.attribute_categories.each do |category, data| %>
           <div id="<%= category %>" class="row">
             <% data[:attributes].each do |attribute| %>
-              <div class="col s10 m8 l4">
+
+              <% # Do some dynamic resizing of columns based on how many columns there are
+                 # TODO: move this into some service or something? Dunno, doesn't belong here.
+
+                s_width = 12
+                m_width = 6
+                l_width = 4
+
+                if data[:attributes].length == 1
+                  # If there's only one field on this tab, go full-width on all screen sizes
+                  s_width = m_width = l_width = 12
+                elsif data[:attributes].length == 2
+                  # If there's two fields on this tab, go half-width on medium- and large-screens
+                  s_width = 12
+                  m_width = l_width = 6
+                elsif data[:attributes].length > 2
+                  # If there's at least 3 fields, use the defaults (detailed above)
+                end
+              %>
+
+              <div class="col <%= "s#{s_width} m#{m_width} l#{l_width}" %>">
+
                 <% value = content.send(attribute) %>
                 <% if value.is_a?(ActiveRecord::Associations::CollectionProxy) %>
+                  <%# Relation-setting UI %>
                   <% through_class = content.class.reflect_on_association(attribute).options[:through].to_s %>
                   <%= render 'content/form/relation_input', f: f, attribute: attribute, relation: through_class %>
+
                 <% elsif attribute == 'universe_id' %>
                   <div class="input-field">
                     <%= f.label attribute %><br />
                     <%= f.select attribute, current_user.universes.sort_by(&:name).map { |u| [u.name, u.id] }.compact, include_blank: true, selected: (f.object.persisted? ? f.object.universe_id : session[:universe_id]) %>
                   </div>
+
                 <% elsif attribute == 'privacy' %>
                   <div class="input-field">
                     <%= f.label attribute %><br />
@@ -49,8 +82,16 @@
                       characters, locations, and items within this universe also.
                     </div>
                   </div>
+
+                <% elsif attribute == 'private_notes' %>
+                  <%= render 'content/form/text_input', f: f, attribute: attribute %>
+                    <div class="help-text">
+                      Private notes are <em>always</em> visible to only you, even if content is made public and shared.
+                    </div>
+
                 <% else %>
                   <%= render 'content/form/text_input', f: f, attribute: attribute %>
+
                 <% end %>
               </div>
             <% end %>

app/views/content/_share.html.erb

@@ -1,43 +1,43 @@
 <div id="share-modal" class="modal">
-    <div class="modal-content">
-        <h4>Share <%= shared_content.name %></h4>
+  <div class="modal-content">
+    <h4>Share <%= shared_content.name %></h4>
 
-        <div class="row">
-          <div class="input-field col s12">
-              <input type="text" id="share_url" readonly onclick="this.focus();this.select()" value="<%= polymorphic_url(shared_content) %>">
-              <label for="share_url">Share URL</label>
-          </div>
-        </div>
-
-        <% if current_user && shared_content.user == current_user %>
-
-            <div class="row">
-              <p class="col s12">To be shareable, content must be <b>public</b> <em>or</em> in a <b>public</b> Universe.</p>
-            </div>
-
-            <% if ((shared_content.respond_to? :universe) && shared_content.universe.present?) %>
-            <div class="row">
-                <%= render partial: 'content/form/privacy_toggle', locals: { content: shared_content.universe } %>
-            </div>
-            <% end %>
-
-            <% if shared_content.respond_to? :privacy %>
-            <div class="row">
-                <%= render partial: 'content/form/privacy_toggle', locals: { content: shared_content } %>
-            </div>
-            <% end %>
-
-        <% else %>
-
-            <div class="row">
-                <p class="col s12">
-                    This <%= shared_content.class.to_s.downcase %> is being shared on Notebook.ai by <%= link_to shared_content.user.name, shared_content.user %>.
-                </p>
-            </div>
-
-        <% end %>
-    </div>
-    <div class="modal-footer">
-        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">close</a>
+    <div class="row">
+      <div class="input-field col s12">
+        <input type="text" id="share_url" readonly onclick="this.focus();this.select()" value="<%= polymorphic_url(shared_content) %>">
+        <label for="share_url">Share URL</label>
+      </div>
     </div>
+
+    <% if current_user && shared_content.user == current_user %>
+
+      <div class="row">
+        <p class="col s12">To be shareable, content must be <b>public</b> <em>or</em> in a <b>public</b> Universe.</p>
+      </div>
+
+      <% if ((shared_content.respond_to? :universe) && shared_content.universe.present?) %>
+      <div class="row">
+        <%= render partial: 'content/form/privacy_toggle', locals: { content: shared_content.universe } %>
+      </div>
+      <% end %>
+
+      <% if shared_content.respond_to? :privacy %>
+      <div class="row">
+        <%= render partial: 'content/form/privacy_toggle', locals: { content: shared_content } %>
+      </div>
+      <% end %>
+
+    <% else %>
+
+      <div class="row">
+        <p class="col s12">
+          This <%= shared_content.class.to_s.downcase %> is being shared on Notebook.ai by <%= link_to shared_content.user.name, shared_content.user %>.
+        </p>
+      </div>
+
+    <% end %>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">close</a>
+  </div>
 </div>

app/views/content/_show.html.erb

@@ -32,6 +32,7 @@ set_meta_tags title: content.name, description: content.description
           <div id="<%= category %>" class="row">
             <% data[:attributes].each do |attribute| %>
               <% next if attribute.start_with?("private") && @content.user != current_user %>
+              <% next if content.send(attribute).blank? %>
               <div class="row">
                 <div class="col s3 m3 l2 right-align flow-text grey-text"><%= attribute.humanize.capitalize %></div>
 

app/views/content/form/_groupship_fields.html.erb

@@ -18,10 +18,20 @@
     <% klass = parent.send(attribute.pluralize).build.class.name.downcase %>
 
     <div class="input-field">
-      <%= f.label attribute %>
+      <%= f.label attribute, class: 'active' %>
       <%# todo scope to universe %>
-      <%= f.select "#{attribute}_id", current_user.send(klass.pluralize).sort_by(&:name).map { |c| [c.name, c.id] }.compact, include_blank: true %>
-      <%= link_to_remove_association 'remove', f %>
+
+      <div class="row">
+        <div class="col s10">
+          <%= f.select "#{attribute}_id", current_user.send(klass.pluralize).sort_by(&:name).map { |c| [c.name, c.id] }.compact, include_blank: true %>
+        </div>
+
+        <div class="col s2">
+          <%= link_to_remove_association f do %>
+            <i class="material-icons red-text">close</i>
+          <% end %>
+        </div>
+      </div>
     </div>
 
     <script type="text/javascript">

app/views/content/form/_relation_input.html.erb

@@ -1,20 +1,22 @@
 <%# Usage: render 'content/form/relation_input', f: f, attribute: attribute, relation: through_class %>
-<div>
-  <%= f.label attribute, attribute.humanize.capitalize %>
-</div>
-
-<div id="<%= relation %>">
-  <%= f.fields_for relation do |builder| %>
-    <%= render 'content/form/groupship_fields', f: builder, attribute: attribute.singularize, parent: f.object %>
-  <% end %>
-  <div class="links">
-    <% color = f.object.send(attribute).build.class.color %>
-    <%= link_to_add_association "add #{attribute.to_s.singularize.humanize}", f, relation,
-        class: "btn #{color}",
-        partial: 'content/form/groupship_fields',
-        render_options: { locals: {
-            attribute: attribute.singularize,
-            parent: f.object
-        }} %>
+<div class="hoverable" style="padding: 8px">
+  <div>
+    <%= f.label attribute, attribute.humanize.capitalize %>
   </div>
-</div>
+
+  <div id="<%= relation %>">
+    <%= f.fields_for relation do |builder| %>
+      <%= render 'content/form/groupship_fields', f: builder, attribute: attribute.singularize, parent: f.object %>
+    <% end %>
+    <div class="links">
+      <% color = f.object.send(attribute).build.class.color %>
+      <%= link_to_add_association "add #{attribute.to_s.singularize.humanize}", f, relation,
+          class: "btn #{color}",
+          partial: 'content/form/groupship_fields',
+          render_options: { locals: {
+              attribute: attribute.singularize,
+              parent: f.object
+          }} %>
+    </div>
+  </div>
+</div>

app/views/universes/new.html.erb

@@ -1,4 +1,3 @@
-<h4>Create a new universe</h4>
 <%= form_for @content do |form| %>
   <%= render partial: 'content/form', locals: { f: form, content: @content } %>
 <% end %>