Change the typography of the site (#283)

* Change the typography of the site

- creates Website::Font model with has_many association to website
- adds ability to upload multiple fonts using nested-form stimulus
  controller
- adds css styles in heads for including font-face for website fonts and
  setting root font variables
- adds ability to group checkboxes in nested form so that only one is
  selected
- fixes strftime format for schedule dates to skip padding appease
  Capybara

[Change the typography of the site](https://miro.com/app/board/uXjVO6C1LxA=/?moveToWidget=3458764523893333023&cot=14)

* Adpply secondary body font to website elements

Co-authored-by: Cody Brooks <[email protected]>

Author: jonsgreen

app/assets/stylesheets/modules/_forms.scss

@@ -58,3 +58,9 @@ span[title="required"] {
 input.boolean {
   margin: 4px;
 }
+
+.inline-form {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}

app/assets/stylesheets/themes/default/application.scss

@@ -13,6 +13,7 @@
   --nav_link_hover: white;
   --main_content_background: white;
   --sans-serif-font: 'Rubik';
+  --secondary-body-font: 'Rubik'
 }
 
 html {
@@ -43,6 +44,7 @@ header + #content {
 }
 
 p {
+  font-family: var(--secondary-body-font);
   font-size: 14px;
   line-height: 21px;
   margin-bottom: 20px;

app/assets/stylesheets/themes/default/program.scss

@@ -115,6 +115,7 @@
   }
 
   .session-abstract {
+    font-family: var(--secondary-body-font);
     height: 6.25rem;
     font-size: 16px;
     font-weight: 400;
@@ -130,6 +131,7 @@
   }
 
   .session-format-tag {
+    font-family: var(--secondary-body-font);
     padding: 8px 10px 8px 50px;
     border: 1px solid $divider-light;
     border-radius: 100px;
@@ -155,6 +157,7 @@
   }
 
   .track-tag {
+    font-family: var(--secondary-body-font);
     font-size: 12px;
     padding: 7px 10px;
     border-radius: 20px;

app/controllers/staff/websites_controller.rb

@@ -51,6 +51,10 @@ def website_params
         navigation_links: [],
         session_format_configs_attributes: [
           :id, :name, :display, :position, :session_format_id
-        ])
+        ],
+        fonts_attributes: [
+          :id, :name, :file, :_destroy, :primary, :secondary
+        ],
+    )
   end
 end

app/decorators/website_decorator.rb

@@ -107,4 +107,28 @@ def session_format_tag_class(session_format)
   def session_format_name(session_format)
     object.session_format_configs.find_by(session_format: session_format).name
   end
+
+  def font_faces_css
+    fonts.map do |font|
+      <<~CSS
+        @font-face {
+          font-family: "#{font.name}";
+          src: url('#{h.url_for(font.file)}');
+        }
+      CSS
+    end.join("\n").html_safe
+  end
+
+  def font_root_css
+    font_primary = fonts.primary.first
+    font_secondary = fonts.secondary.first
+
+    return "" unless font_primary || font_secondary
+    <<~CSS.html_safe
+      :root {
+        #{"--sans-serif-font: '#{font_primary.name}' !important;" if font_primary}
+        #{"--secondary-body-font: '#{font_secondary.name}' !important;" if font_secondary}
+      }
+    CSS
+  end
 end

app/helpers/website_helper.rb

@@ -2,4 +2,10 @@ module WebsiteHelper
   def website_event_slug
     params[:slug] || (@older_domain_website && @older_domain_website.event.slug)
   end
+
+  def font_file_label(font)
+    "File".tap do |label|
+      label.concat(" (Current File: #{font.file.filename.to_s})") if font.file.attached?
+    end
+  end
 end

app/javascript/controllers/editor_controller.js

@@ -115,7 +115,6 @@ export default class extends Controller {
   }
 
   leavingPage(event) {
-    console.log(this.changedValue);
     if (this.changedValue) {
       event.returnValue = "Are you sure you want to leave with unsaved changes?";
       return event.returnValue;

app/javascript/controllers/nested_form_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "stimulus"
+
+export default class extends Controller {
+  static targets = [ "links", "template", "grouped" ]
+
+  connect() {
+    this.wrapperClass = this.data.get("wrapperClass") || "nested-fields"
+  }
+
+  add_association(event) {
+    event.preventDefault()
+
+    var content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime())
+    this.linksTarget.insertAdjacentHTML('beforebegin', content)
+  }
+
+  remove_association(event) {
+    event.preventDefault()
+
+    let wrapper = event.target.closest("." + this.wrapperClass)
+
+    // New records are simply removed from the page
+    if (wrapper.dataset.newRecord == "true") {
+      wrapper.remove()
+
+    // Existing records are hidden and flagged for deletion
+    } else {
+      wrapper.querySelector("input[name*='_destroy']").value = 1
+      wrapper.style.display = 'none'
+    }
+  }
+
+  radio_chosen(event) {
+    var els = this.element.getElementsByClassName(event.target.classList[0])
+    Array.from(els).forEach( (e) => {
+      e.checked = false;
+    });
+    event.target.checked = true;
+  }
+}

app/models/session_format_config.rb

@@ -9,3 +9,27 @@ def slug
     session_format.name.parameterize.pluralize
   end
 end
+
+# == Schema Information
+#
+# Table name: session_format_configs
+#
+#  id                :bigint(8)        not null, primary key
+#  website_id        :bigint(8)
+#  session_format_id :bigint(8)
+#  position          :integer
+#  name              :string
+#  display           :boolean
+#  created_at        :datetime         not null
+#  updated_at        :datetime         not null
+#
+# Indexes
+#
+#  index_session_format_configs_on_session_format_id  (session_format_id)
+#  index_session_format_configs_on_website_id         (website_id)
+#
+# Foreign Keys
+#
+#  fk_rails_...  (session_format_id => session_formats.id)
+#  fk_rails_...  (website_id => websites.id)
+#

app/models/website.rb

@@ -1,9 +1,12 @@
 class Website < ApplicationRecord
   belongs_to :event
   has_many :pages, dependent: :destroy
+  has_many :fonts, class_name: 'Website::Font', dependent: :destroy
 
   has_many :session_formats, through: :event
   has_many :session_format_configs
+
+  accepts_nested_attributes_for :fonts, reject_if: :all_blank, allow_destroy: true
   accepts_nested_attributes_for :session_format_configs
 
   has_one_attached :logo