mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style content#new and content#edit to use the same design as content#show

Browse Source
This commit is contained in:
Andrew Brown 2017-02-23 16:55:43 +00:00
parent 7696a9d25a
commit cd3b606741
11 changed files with 174 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/attribute_fields/_modal.html.erb
View File

@ -27,7 +27,7 @@
this category by resubmitting this form.
</p>
<p class="grey-text help">
Examples of fields may be "Height", "Age married", "List of Adventures", etc. Anything you want to track!
Examples of fields may be "Height", "Age married", or "List of Adventures". Anything you want to track!
</p>
</div>
</div>

78
app/views/content/_form.html.erb
View File

@ -1,72 +1,12 @@
<%= render 'content/form/errors', content: content %>
<div class="row">
<div class="col s12">
<div class="card hoverable">
<div class="card-content">
<div class="left">
<i class="material-icons <%= content.class.color %>-text"><%= content.class.icon %></i>
</div>
<div class="right">
<% if content.persisted? %>
<%= link_to '#',
class: "share tooltipped #{content.class.color}-text",
data: { position: 'bottom', delay: '500', tooltip: 'Share this page with others'} do
%>
<i class="material-icons">share</i>
<% end %>
<% end %>
<div style="padding: 35px 20px;">
<%= link_to '#',
class: "expand tooltipped #{content.class.color}-text",
data: { position: 'bottom', delay: '500', tooltip: 'Expand all tabs vertically'} do
%>
<i class="material-icons">format_line_spacing</i>
<% end %>
<%= render 'content/form/actions_dropdown', content: content %>
</div>
<div class="card-title center">
<%= render 'content/form/title', content: content %>
</div>
<%# Tabs %>
<ul class="hoverable tabs tabs-fixed-width hide-on-small-only">
<% content.class.attribute_categories(current_user).each do |category| %>
<li class="tab">
<a href="#<%= category.name.gsub("'", '') %>_panel">
<i class="material-icons hide-on-med-and-down" style="font-size: 18px; position: relative; top: 3px;">
<%= category.icon %>
</i>
<%= category.label %>
</a>
</li>
<% end %>
</ul>
<ul class="tabs hide-on-med-and-up">
<% content.class.attribute_categories(current_user).each do |category| %>
<li class="tab col s12">
<a href="#<%= category.name.gsub("'", '') %>_panel" class="tooltipped" data-position="bottom" data-delay="100" data-tooltip="<%= category.label %>">
<i class="material-icons" style="font-size: 18px; position: relative; top: 3px;"><%= category.icon %></i>
</a>
</li>
<% end %>
</ul>
<br />
<%# Content panels %>
<% content.class.attribute_categories(current_user).each do |category| %>
<%= render 'content/form/panel', category: category, f: f, content: content %>
<% end %>
</div>
<div class="card-action center">
<button class="btn waves-effect waves-<%= content.class.color %> <%= content.class.color %>" type="submit" name="action">
<%= content.new_record? ? 'Create' : 'Update' %>
</button>
</div>
</div>
</div>
<%# Content panels %>
<% content.class.attribute_categories(current_user).each do |category| %>
<%= render 'content/form/panel', category: category, f: f, content: content %>
<% end %>
</div>
<div class="card-action center grey-text">
Tip: You don't need to save before changing categories (on the right). Just remember to save when you're done!
</div>

65
app/views/content/display/_floating_action_buttons.html.erb
View File

@ -1,16 +1,57 @@
<%= link_to edit_polymorphic_path(@content),
class: "btn-floating btn-large halfway-fab waves-effect waves-light #{@content.class.color}",
style: 'z-index: 500;' do %>
<i class="material-icons">edit</i>
<%
editing = defined?(editing) && editing
personal_content = user_signed_in? && current_user.id == @content.user_id
%>
<%# Primary FAB %>
<% if personal_content %>
<% if editing %>
<button class="btn-floating btn-large halfway-fab waves-effect waves-light <%= @content.class.color %>" type="submit" name="action" style="z-index: 500">
<i class="material-icons">save</i>
</button>
<% else %>
<%= link_to edit_polymorphic_path(@content),
class: "btn-floating btn-large halfway-fab waves-effect waves-light #{@content.class.color}",
style: 'z-index: 500;' do %>
<i class="material-icons">edit</i>
<% end %>
<% end %>
<% elsif @content.persisted? %>
<%= link_to '#',
class: "btn-floating btn-large halfway-fab waves-effect waves-light #{@content.class.color} share",
style: 'z-index: 500;' do %>
<i class="material-icons">share</i>
<% end %>
<% else %>
<%= link_to '#',
class: "btn-floating btn-large halfway-fab waves-effect waves-light #{@content.class.color} expand",
style: 'z-index: 500;' do %>
<i class="material-icons">format_line_spacing</i>
<% end %>
<% end %>
<%= link_to '#',
class: "btn-floating btn-small halfway-fab waves-effect waves-light white expand",
style: 'z-index: 500; margin-right: 61px;' do %>
<%#data: { position: 'bottom', delay: '500', tooltip: 'Expand all tabs vertically'}%>
<i class="material-icons black-text">format_line_spacing</i>
<% if @content.persisted? %>
<%# Hidden on new-content forms (not yet persisted) because it's moved to the primary FAB %>
<%= link_to '#',
class: "btn-floating btn-small halfway-fab waves-effect waves-light white expand",
style: 'z-index: 500; margin-right: 61px;' do %>
<%#data: { position: 'bottom', delay: '500', tooltip: 'Expand all tabs vertically'}%>
<i class="material-icons black-text">format_line_spacing</i>
<% end %>
<% end %>
<a class="btn-floating btn-small halfway-fab waves-effect waves-light white share" style="z-index: 500; margin-right: 105px;">
<i class="material-icons black-text">share</i>
</a>
<% if personal_content && @content.persisted? %>
<a class="btn-floating btn-small halfway-fab waves-effect waves-light white share" style="z-index: 500; margin-right: 105px;">
<i class="material-icons black-text">share</i>
</a>
<% end %>
<% if @content.persisted? && editing %>
<%= link_to @content,
class: 'btn-floating btn-small halfway-fab waves-effect waves-light white delete left',
style: 'z-index: 500;',
method: :delete,
data: { confirm: "Are you sure? Deleting this #{@content.class.name.downcase} cannot be undone!" } do %>
<i class="material-icons red-text text-lighten-2">delete</i> sip
<% end %>
<% end %>

8
app/views/content/display/_image_card_header.html.erb
View File

@ -1,4 +1,3 @@
<div class="card-image">
<div class="slider" style="height: 140px;">
<ul class="slides">
@ -16,13 +15,10 @@
<li>
<%= image_tag "card-headers/#{@content.class.name.downcase.pluralize}" %>
<div class="caption center-align" style="text-shadow: 2px 2px #000000;">
<h3><%= @content.name %></h3>
<h3><%= @content.persisted? ? @content.name : "New #{@content.class.name}" %></h3>
<h5 class="light grey-text text-lighten-3"><%= @content.description %></h5>
</div>
</li>
<% end %>
</ul>
</div>
<%= render partial: 'content/display/floating_action_buttons' %>
</div>
</div>

34
app/views/content/display/_sidelinks.html.erb
View File

@ -1,14 +1,31 @@
<%
creating = defined?(creating) && creating
editing = defined?(editing) && editing
%>
<ul class="collection with-header content-tabs">
<li class="collection-header center">
<h4><%= @content.class.name %></h4>
</li>
<% if creating || editing %>
<li class="collection-header center">
<button class="btn waves-effect waves-<%= @content.class.color %> <%= @content.class.color %>" type="submit" name="action" style="margin: 20px 0;">
<%= @content.new_record? ? 'Create' : 'Save Changes' %>
</button>
</li>
<% end %>
<% @content.class.attribute_categories(current_user).each do |category| %>
<% fields = category.attribute_fields %>
<%
if category.name == 'gallery'
if creating || editing
# Show everything on create/edit forms
elsif category.name == 'gallery'
# Only show gallery tab if the content has any images
next if @content.image_uploads.empty?
else
# Only show other tabs if it has at least one piece of data in it, or it's a custom tab
next if fields.all? do |field|
if @content.respond_to?(field.name.to_sym)
value = @content.send(field.name.to_sym)
@ -25,15 +42,16 @@
<a href="#<%= category.name.gsub("'", '') %>_panel" class="<%= 'red-text' if category.label == 'Overview' %>">
<i class="material-icons left"><%= category.icon %></i>
<%= category.label.capitalize %>
<!--<span class="badge"><%= [rand(400), 100].min %>%</span>-->
</a>
</li>
<% end %>
<li class="collection-item">
<a href="#" class="green-text new-attribute-field-link">
<i class="material-icons left">add</i>
Add custom category
</a>
</li>
<% if user_signed_in? && current_user.id == @content.user_id %>
<li class="collection-item">
<a href="#" class="green-text new-attribute-field-link">
<i class="material-icons left">add</i>
Add custom category
</a>
</li>
<% end %>
</ul>

31
app/views/content/edit.html.erb
View File

@ -1,9 +1,32 @@
<%= form_for @content, multipart: true do |form| %>
<%= render partial: 'content/form', locals: { f: form, content: @content } %>
<% end %>
<div class="row">
<%= form_for @content, multipart: true do |form| %>
<div class="col s9">
<%= render 'content/form/errors', content: content %>
<div class="card">
<div class="card-image">
<%= render partial: 'content/display/image_card_header' %>
<%= render partial: 'content/display/floating_action_buttons', locals: { editing: true } %>
</div>
<%= render partial: 'content/form', locals: { f: form, content: @content } %>
</div>
</div>
<%= render 'attribute_fields/modal', content: @content %>
<div class="col s3">
<%= render partial: 'content/display/sidelinks', locals: { editing: true } %>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slider({
height: 200,
indicators: false
});
});
</script>
<% if @content.persisted? %>
<%= render partial: 'content/share', locals: { shared_content: @content} %>
<% end %>
<%= render partial: 'attribute_fields/modal', locals: { content: @content, safe_mode: true } %>

23
app/views/content/form/_actions_dropdown.html.erb
View File

@ -1,23 +0,0 @@
<a class='dropdown-button black-text' href='#' data-activates='options-menu' data-constrainwidth='false'>
<i class="material-icons">more_vert</i>
</a>
<ul id='options-menu' class='dropdown-content'>
<li>
<%= link_to "Create new attribute", '#attribute-field-modal', class: 'black-text new-attribute-field-link' %>
</li>
<% if content.persisted? %>
<!-- Broken on content edit pages
<li><a href="#!" class="share">Share this <%= content.class.to_s.downcase %></a></li>
<li class="divider"></li>
-->
<li>
<%= link_to "Delete this #{content.class.content_name.humanize.downcase} forever", content,
:class => 'red-text',
:method => :delete,
:data => { :confirm => 'Are you sure? This action cannot be undone!' } %>
</li>
<% end %>
</ul>

37
app/views/content/new.html.erb
View File

@ -1,5 +1,34 @@
<%= form_for @content do |form| %>
<%= render partial: 'content/form', locals: { f: form, content: @content } %>
<% end %>
<%= render 'attribute_fields/modal', content: @content %>
<div class="row">
<%= form_for @content, multipart: true do |form| %>
<div class="col s9">
<%= render 'content/form/errors', content: content %>
<div class="card">
<div class="card-image">
<%= render partial: 'content/display/image_card_header' %>
<%= render partial: 'content/display/floating_action_buttons', locals: { creating: true } %>
</div>
<%= render partial: 'content/form', locals: { f: form, content: @content } %>
</div>
</div>
<div class="col s3">
<%= render partial: 'content/display/sidelinks', locals: { creating: true } %>
</div>
<% end %>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slider({
height: 200,
indicators: false
});
});
</script>
<% if @content.persisted? %>
<%= render partial: 'content/share', locals: { shared_content: @content} %>
<% end %>
<%= render partial: 'attribute_fields/modal', locals: { content: @content, safe_mode: true } %>

17
app/views/content/show.html.erb
View File

@ -14,7 +14,10 @@
<div class="row">
<div class="col s9">
<div class="card">
<%= render partial: 'content/display/image_card_header' %>
<div class="card-image">
<%= render partial: 'content/display/image_card_header' %>
<%= render partial: 'content/display/floating_action_buttons', locals: { editing: false } %>
</div>
<div class="card-content">
<% content.class.attribute_categories(current_user).each do |category| %>
@ -71,6 +74,16 @@
</div>
<% end %>
</div>
<% if current_user.nil? || current_user.id != @content.user_id %>
<div class="card-action center">
<p>
<%= @content.user.name %> created and maintains this universe on Notebook.ai.
</p>
<%= link_to "See more from #{@content.user.name}", @content.user %>
<%= link_to "Create your own universe", root_url %>
</div>
<% end %>
</div>
</div>
@ -90,7 +103,7 @@
</script>
<%= render partial: 'content/share', locals: { shared_content: @content} %>
<%= render partial: 'attribute_fields/modal', locals: { content: @content, safe_mode: true } %>
<%= render partial: 'attribute_fields/modal', locals: { content: @content, safe_mode: true } if user_signed_in? %>
<%# TODO: not this %>
<% if @content.is_a? Universe %>

3
app/views/layouts/_sidebar.html.erb
View File

@ -1,5 +1,4 @@
<%= render 'cards/ui/alert' %>
<%= render 'cards/ui/notice' %>
<% if user_signed_in? %>

7
app/views/layouts/application.html.erb
View File

@ -23,6 +23,13 @@
<main>
<div class="container">
<div class="row">
<div class="col s12">
<%# todo: move these to toasts and/or make dismissable %>
<%= render 'cards/ui/alert' %>
<%= render 'cards/ui/notice' %>
</div>
</div>
<div class="row">
<div class="col s12">
<%= yield %>