diff --git a/app/views/page_collections/_form.html.erb b/app/views/page_collections/_form.html.erb index 77475661..4900f73e 100644 --- a/app/views/page_collections/_form.html.erb +++ b/app/views/page_collections/_form.html.erb @@ -1,231 +1,575 @@ -
- - - <%# todo: audit usage of form_with and local:true %> - <%= form_with(model: page_collection, local: true, class: 'sm:px-6 lg:px-0 lg:col-span-9') do |f| %> - <% if page_collection.errors.any? %> -
-

<%= pluralize(page_collection.errors.count, "error") %> prohibited this Collection from being saved:

- - -
- <% end %> - -
-
+<%= form_with(model: page_collection, local: true, class: 'space-y-8') do |f| %> + + + <% if page_collection.errors.any? %> +
+
+ error
-

Look & feel

-

Control the look and feel of your collection.

-
- -
- - -
- <%= f.label :title, class: 'block text-sm font-medium text-gray-700' %> - <%= f.text_field :title, placeholder: 'My Awesome Collection', class: 'mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm' %> -
- -
- <%= f.label :subtitle, class: 'block text-sm font-medium text-gray-700' %> - <%= f.text_field :subtitle, placeholder: 'My favorite pages', class: 'mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-brown-500 focus:border-brown-500 sm:text-sm' %> -
- -
- <%= f.label :description, class: 'block text-sm font-medium text-gray-700' %> -
- <%= f.text_area :description, placeholder: "Write as little or as much as you'd like!", rows: 5, class: 'shadow-sm focus:ring-brown-500 focus:border-brown-500 mt-1 block w-full sm:text-sm border border-gray-300 rounded-md' %> -
-

Brief description for your collection. <strong> and <em> tags are supported.

-
- -
- -
-
- <% if @page_collection.persisted? && @page_collection.header_image %> - <%= link_to @page_collection.header_image, target: '_blank' do %> - <%= image_tag @page_collection.first_public_image, class: 'rounded' %> - <% end %> +

+ <%= pluralize(page_collection.errors.count, "error") %> prevented this collection from being saved: +

+
    + <% page_collection.errors.full_messages.each do |message| %> +
  • + + <%= message %> +
    • <% end %> -
-
-
-
- -
- <%= f.label :header_image, class: 'relative cursor-pointer bg-white rounded-md font-medium text-brown-600 hover:text-brown-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-brown-500' do %> - Upload a file - <%= f.file_field :header_image, class: 'sr-only' %> - <% end %> -

to change your header

-
-

PNG, JPG, GIF up to 10MB

-
-
-
- - -
- -
- <%# todo: show user's ACTIVATED page types here and put the others behind an "all types" expander %> - <% Rails.application.config.content_types[:all].each do |content_type| %> -
- <%= f.label "page_types[#{content_type.name}]", class: 'font-medium text-gray-700 select-none' do %> - <%= f.check_box "page_types[#{content_type.name}]", checked: page_collection.page_types.include?(content_type.name), class: 'focus:ring-notebook-blue h-6 w-6 border-gray-300 rounded mr-3 -mt-3' %> - - - <%= content_type.icon %> - - - <%= content_type.name.pluralize %> - - <% end %> -
- <% end %> -
-
+
-
- <%= f.submit 'Save', class: "#{PageCollection.color} border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500" %> -
-
- -
-
-
-

Privacy & Submissions

-

- Collections are better with contributors! -

-
- -
-
- Visibility -

This setting controls who can see this collection.

-
- <%= f.label :privacy, class: 'block' do %> - <%= f.radio_button :privacy, 'public', class: 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300' %> - Public - Visible to anyone browsing collections - <% end %> - <%= f.label :privacy, class: 'block' do %> - <%= f.radio_button :privacy, 'private', class: 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300' %> - Private - Visible only to you - <% end %> -
-
- -
- Page submissions -
-
-
- <%= f.label :allow_submissions, class: 'font-medium text-gray-700' do %> - <%= f.check_box :allow_submissions, class: 'mr-2 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' %> - Allow submissions from other users -

Submissions are added to a review queue for you to approve or deny.

- <% end %> -
-
- -
- -
- -
-

- What kinds of pages are you looking for? Anything you write here will be shown to users who are about to submit a page. -

-
- -
-
-
- <%= f.label :auto_accept, class: 'font-medium text-gray-700' do %> - <%= f.check_box :auto_accept, class: 'mr-2 focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded' %> - Auto-accept all submissions -

Submissions will skip the review queue and automatically publish.

- <% end %> -
-
-
-
-
-
-
-
- <%= f.submit 'Save', class: "#{PageCollection.color} border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-brown-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brown-500" %> -
<% end %> -
+ + +
+
+
+
+ edit +
+
+

Basic Information

+

Set up the core details for your collection

+
+
+
+ +
+ +
+ <%= f.label :title, class: 'block text-sm font-medium text-gray-900 mb-2' do %> + + title + Collection Title * + + <% end %> + <%= f.text_field :title, + placeholder: 'My Awesome Collection', + class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm', + required: true %> +

Choose a descriptive name that captures what your collection is about

+
+ + +
+ <%= f.label :subtitle, class: 'block text-sm font-medium text-gray-900 mb-2' do %> + + subtitles + Subtitle + + <% end %> + <%= f.text_field :subtitle, + placeholder: 'A curated selection of my favorite pages', + class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm' %> +

Optional tagline to give more context about your collection

+
+ + +
+ <%= f.label :description, class: 'block text-sm font-medium text-gray-900 mb-2' do %> + + description + Description + + <% end %> + <%= f.text_area :description, + placeholder: "Write as little or as much as you'd like! Describe what makes this collection special...", + rows: 4, + class: 'block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-colors duration-200 text-sm resize-none' %> +

+ + Brief description for your collection. <strong> and <em> tags are supported. + 0 / 500 + +

+
+
+
+ + +
+
+
+
+ palette +
+
+

Visual Settings

+

Customize how your collection looks

+
+
+
+ +
+ +
+ + +
+ + <% if @page_collection.persisted? && @page_collection.header_image %> +
+
+ <%= link_to @page_collection.header_image, target: '_blank', class: "block w-full h-full" do %> + <%= image_tag @page_collection.first_public_image, class: 'w-full h-full object-cover hover:scale-105 transition-transform duration-200' %> + <% end %> +
+

Current image

+
+ <% end %> + + +
+
+
+
+ cloud_upload +
+ +
+ <%= f.label :header_image, class: 'cursor-pointer' do %> + + add_photo_alternate + Choose Image + + <%= f.file_field :header_image, class: 'sr-only', accept: 'image/*' %> + <% end %> +

or drag and drop

+
+ +
+

PNG, JPG, GIF up to 10MB

+

Recommended: 1200×400px for best results

+
+
+
+
+
+
+
+
+ + +
+
+
+
+ category +
+
+

Content Settings

+

Choose what types of content can be added to this collection

+
+
+
+ +
+
+ + + checklist + Allowed Page Types * + + + + +
+ + | + + | + +
+ + +
+ <% Rails.application.config.content_types[:all].each do |content_type| %> +
+ <%= f.label "page_types[#{content_type.name}]", class: 'flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200 group' do %> + <%= f.check_box "page_types[#{content_type.name}]", + checked: page_collection.page_types.include?(content_type.name), + class: 'sr-only content-type-checkbox', + data: { + type: content_type.name.downcase, + common: %w[character location item universe].include?(content_type.name.downcase) + } %> + + +
+ check +
+ + +
+
+ + <%= content_type.icon %> + +
+ + <%= content_type.name.pluralize %> + +
+ <% end %> +
+ <% end %> +
+ +

+ info + Select the types of content that can be submitted to this collection. You can change this later. +

+
+
+
+ + +
+
+
+
+ security +
+
+

Privacy & Submissions

+

Control who can see and contribute to your collection

+
+
+
+ +
+ +
+ + + visibility + Visibility * + + + +
+ <%= f.label :privacy, class: 'flex items-start p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200' do %> + <%= f.radio_button :privacy, 'public', class: 'mt-1 mr-3 text-green-600 focus:ring-green-500' %> +
+
+ public + Public +
+

Anyone can discover and view this collection

+
+ <% end %> + + <%= f.label :privacy, class: 'flex items-start p-4 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 hover:border-gray-300 transition-all duration-200' do %> + <%= f.radio_button :privacy, 'private', class: 'mt-1 mr-3 text-gray-600 focus:ring-gray-500' %> +
+
+ lock + Private +
+

Only you can see this collection

+
+ <% end %> +
+
+ + +
+ + + inbox + Community Contributions + + + + +
+ <%= f.label :allow_submissions, class: 'flex items-start cursor-pointer' do %> + <%= f.check_box :allow_submissions, class: 'sr-only submission-toggle' %> +
+
+
Allow submissions from other users
+

Let the community suggest content for your collection

+
+ <% end %> + + + +
+
+
+
+ + +
+
+ info + You can edit all of these settings later from your collection's settings page. +
+ +
+ <%= link_to page_collections_path, class: "px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all duration-200" do %> + Cancel + <% end %> + + <%= f.submit 'Create Collection', class: "px-6 py-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-all duration-200 inline-flex items-center" do %> + add + Create Collection + <% end %> +
+
+<% end %> + + + + + \ No newline at end of file diff --git a/app/views/page_collections/new.html.erb b/app/views/page_collections/new.html.erb index 81ec7e3a..4f1bcd21 100644 --- a/app/views/page_collections/new.html.erb +++ b/app/views/page_collections/new.html.erb @@ -1,3 +1,37 @@ -

Create a Collection

- -<%= render 'form', page_collection: @page_collection %> + +
+ + +
+
+ + + + + +
+
+
+ collections +
+
+ +

Create a Collection

+

+ Curate and organize your favorite content into beautiful, shareable collections that others can discover and contribute to. +

+
+
+
+ + +
+ <%= render 'form', page_collection: @page_collection %> +
+
\ No newline at end of file