RubyGems - railsui - Versions diffs - 3.1.5 → 3.2.1 - Mend

railsui 3.1.5 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (533) hide show

data/app/views/railsui/themes/corgie/mailers/_layout.html.erb ADDED Viewed

@@ -0,0 +1,536 @@
+<div class="mb-16 mt-6">
+  <%= render "railsui/shared/code_example_heading", title: "Mailers", subtitle: "Overview" %>
+  <div class="prose prose-neutral dark:prose-invert pt-6">
+    <p>Rails UI includes a new <code>railsui_mailer.html.erb</code> layout in <code>app/views/layouts/rui</code>.</p>
+    <p>This layout includes basic CSS for HTML email templates, but be aware it's a complex file. This is because Tailwind CSS isn't compatible with emails, so Rails UI uses custom styling embedded within.</p>
+    <p>Be sure to replace the dummy branding with your own.</p>
+    <h3>Usage</h3>
+    <p>To use this layout, update your <code>application_mailer.rb</code> to something like the following.</p>
+  </div>
+<% content_for :ruby, flush: true do %>
+class ApplicationMailer < ActionMailer::Base
+  default from: email_address_with_name(Railsui.config.support_email, Railsui.config.application_name)
+  layout "rui/railsui_mailer"
+  helper :application
+end
+<% end %>
+<%= render_snippet active_tab: :ruby, ruby_filename: "application_mailer.rb" %>
+  <% content_for :erb, flush: true do %>
+<%%
+  theme = {
+    align_logo: "center",
+    primary: "#171717",
+    heading_text_color: "#171717",
+    footer_text_color: "#37373",
+    body_text_color: "#737373",
+    light_text_color: "#37373",
+    callout_bg_color: "#f5f5f5",
+    callout_border_color: "#d4d4d4",
+    callout_text_color: "#171717",
+    button_border_radius: "6px",
+    hr_color: "#e5e5e5",
+    dark_mode_background_color: "#171717",
+    dark_mode_hr_color: "#44403c",
+    dark_mode_footer_text_color: "#ffffff",
+  }
+%>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <style>
+    :root {
+        color-scheme: light dark;
+        supported-color-schemes: light dark;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background-color: <%%= theme[:dark_mode_background_color] %> !important;
+          color: #ffffff !important;
+        }
+        .content {
+          color: #ffffff !important;
+        }
+        h1,
+        h2,
+        h3,
+        h4 {
+          color: #ffffff !important;
+        }
+        .main {
+          background: <%%= theme[:dark_mode_background_color] %> !important;
+        }
+        .footer td,
+        .footer p,
+        .footer span,
+        .footer a {
+          color: <%%= theme[:dark_mode_footer_text_color] %> !important;
+        }
+        .small {
+          color: <%%= theme[:dark_mode_footer_text_color] %> !important;
+        }
+        table.callout td {
+          background-color: <%%= theme[:callout_bg_color] %> !important;
+          color: <%%= theme[:callout_text_color] %> !important;
+        }
+        .view-in-browser {
+          color: #9ca3af !important;
+        }
+        .action__link--primary {
+          background-color: <%%= theme[:primary] %> !important;
+          border-color: <%%= theme[:primary] %> !important;
+        }
+        table hr {
+          border-color: <%%= theme[:dark_mode_hr_color] %>;
+        }
+      }
+      @media all {
+        .ExternalClass {
+          width: 100%;
+        }
+        .ExternalClass,
+        .ExternalClass p,
+        .ExternalClass span,
+        .ExternalClass font,
+        .ExternalClass td,
+        .ExternalClass div {
+          line-height: 100%;
+        }
+      }
+      img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+      img.rounded-full {
+        border-radius: 99999px;
+        width: 20px;
+        height: 20px;
+        margin-bottom: -2px;
+        margin-bottom: -2px;
+      }
+      table {
+        border-collapse: separate;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        width: 100%;
+      }
+      table td {
+        font-family: sans-serif;
+        font-size: 16px;
+        vertical-align: top;
+      }
+      .container {
+        display: block;
+        margin: 0 auto !important;
+        /* makes it centered */
+        max-width: 600px;
+        padding: 10px;
+        width: 600px;
+      }
+      .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        max-width: 600px;
+        padding: 20px;
+        line-height: 1.6;
+        color: <%%= theme[:body_text_color] %>;
+      }
+      .logo {
+        color: #222;
+        text-decoration: none;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 0;
+      }
+      .logo:hover {
+        text-decoration: none;
+      }
+      .main {
+        background: #ffffff;
+        width: 100%;
+      }
+      .wrapper {
+        box-sizing: border-box;
+        padding: 20px;
+      }
+      .footer {
+        clear: both;
+        padding-top: 16px;
+        margin-bottom: 16px;
+        text-align: center;
+      }
+      .footer td,
+      .footer p,
+      .footer span,
+      .footer a {
+        color: <%%= theme[:footer_text_color] %>;
+        font-size: 13px;
+        line-height: 150%;
+        margin: 0;
+        text-align: center;
+      }
+      h1,
+      h2,
+      h3,
+      h4 {
+        color: <%%= theme[:heading_text_color] %>;
+        font-family: 'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        '"Noto Sans"',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+        '"Noto Color Emoji"';
+        line-height: 1.4;
+        margin-bottom: 20px;
+      }
+      h1 {
+        font-size: 24px;
+        font-weight: 800;
+        line-height: 30px;
+      }
+      h2 {
+        font-size: 22px;
+        font-weight: 800;
+      }
+      p,
+      ul,
+      ol,
+      table.callout {
+        font-family: sans-serif;
+        font-size: 16px;
+        font-weight: normal;
+        margin-bottom: 18px;
+      }
+      ul {
+        padding-left: 16px;
+        margin: 10px 0;
+        Margin: 10px 0;
+        list-style-type: disc;
+      }
+      ul li {
+        Margin-bottom: 10px;
+        margin-bottom: 10px;
+      }
+      p li,
+      ul li,
+      ol li {
+        list-style-position: outside;
+      }
+      p.no-bottom-margin {
+        margin-bottom: 0;
+      }
+      a {
+        color: <%%= theme[:primary] %>;
+        text-decoration: underline;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+      .intro blockquote {
+        font-style: italic;
+        color: #111827 !important;
+        border-left: 5px solid #e5e7eb;
+        margin: 0 0 18px 0;
+        padding-left: 24px;
+      }
+      .intro blockquote p {
+        font-weight: 500 !important;
+        font-style: italic;
+        color: #111827 !important;
+        margin: 0;
+      }
+      .last {
+        margin-bottom: 0;
+      }
+      .first {
+        margin-top: 0;
+      }
+      .align-center {
+        text-align: center;
+      }
+      .align-right {
+        text-align: right;
+      }
+      .align-left {
+        text-align: left;
+      }
+      .mt-0 {
+        margin-top: 0;
+      }
+      .mb-0 {
+        margin-bottom: 0;
+      }
+      .mt-10 {
+        margin-top: 10px;
+        Margin-top: 10px;
+      }
+      .mb-10 {
+        margin-bottom: 10px;
+        Margin-bottom: 10px;
+      }
+      .small {
+        font-size: 14px;
+        color: <%%= theme[:light_text_color] %>;
+        line-height: 130%;
+      }
+      hr {
+        border: 0;
+        border-bottom: 1px solid <%% theme[:hr_color] %>;
+        margin: 20px 0;
+      }
+      table.callout td {
+        background-color: <%%= theme[:callout_bg_color] %>;
+        padding: 16px;
+        border-radius: 6px;
+        color: <%%= theme[:callout_text_color] %>
+      }
+      table.callout td p {
+        margin: 0;
+      }
+      .view-in-browser {
+        font-size: 12px;
+        color: <%%= theme[:light_text_color] %>;
+        margin-bottom: 10px;
+        text-align: center;
+        display: block;
+      }
+      table.social-links {
+        width: auto;
+      }
+      table.social-links td {
+        width: 44px;
+        overflow: hidden;
+        text-align: center;
+      }
+      table.social-links td img {
+        display: inline;
+      }
+      @media only screen and (max-width: 620px) {
+        table[class="body"] a.view-in-browser {
+          font-size: 12px !important;
+          margin-top: 10px;
+        }
+        table[class="body"] h1 {
+          font-size: 28px !important;
+          margin-bottom: 10px !important;
+        }
+        table[class="body"] a,
+        table[class="body"] ol,
+        table[class="body"] p,
+        table[class="body"] span,
+        table[class="body"] td,
+        table[class="body"] ul {
+          font-size: 16px !important;
+        }
+        table[class="body"] p.small {
+          font-size: 14px !important;
+        }
+        table[class="body"] .footer {
+          padding: 10px;
+        }
+        table[class="body"] .footer p {
+          font-size: 16px !important;;
+          line-height: 150%;
+        }
+        .wrapper {
+          padding: 20px 10px !important;
+        }
+        .content {
+          padding: 0 !important;
+        }
+        .container {
+          padding: 0 !important;
+          width: 100.85% !important;
+        }
+        .main {
+          border-left-width: 0 !important;
+          border-radius: 0 !important;
+          border-right-width: 0 !important;
+          width: 100% !important;
+        }
+        .img-responsive {
+          height: auto !important;
+          max-width: 100% !important;
+          width: auto !important;
+        }
+        .action__link--primary {
+          border-width: 10px 0px !important;
+        }
+      }
+      /* Action buttons */
+      .action__link {
+        display: inline-block;
+        text-decoration: none !important;
+        text-align: center;
+        border-radius: <%%= theme[:button_border_radius] %> !important;
+        -webkit-text-size-adjust: none;
+        color: white !important;
+        font-size: 15px;
+      }
+      /* Update your brand colors here */
+      .action__link--primary {
+        background-color: <%%= theme[:primary] %>;
+        border-top: 10px solid  <%%= theme[:primary] %>;
+        border-right: 24px solid <%%= theme[:primary] %>;
+        border-bottom: 10px solid <%%= theme[:primary] %>;
+        border-left: 24px solid <%%= theme[:primary] %>;
+      }
+      .action {
+        width: 100%;
+        padding: 0 0 5px 0 !important;
+        text-align: center;
+      }
+      .action__link--expanded {
+        width: 100%;
+      }
+      .action td {
+        padding: 0 !important;
+        border: none;
+      }
+      @media only screen and (max-width: 600px) {
+        .action a {
+          width: 100%;
+        }
+      }
+    </style>
+  </head>
+  <table border="0" cellpadding="0" cellspacing="0" class="body">
+    <tr>
+      <td class="container">
+        <div class="content">
+          <table class="main" cellpadding="0" cellspacing="0" border="0">
+            <tr>
+              <td>
+                <table border="0" cellpadding="0" cellspacing="0">
+                  <tr>
+                    <td class="wrapper">
+                      <table align="<%%= theme[:align_logo] ||= "left" %>">
+                        <tr>
+                          <td align="<%%= theme[:align_logo] ||= "left" %>">
+                            <%%= spacer(12) %>
+                            <%%= link_to root_url, class: "logo", target: :_blank do %>
+                              <%%= image_tag Railsui.theme_logo_url, style: "width: 40px; max-width: 40px; height: auto; display: inline; text-align: center;", alt: "#{Railsui.config.application_name} logo" %>
+                            <%% end %>
+                            <%%= spacer(24) %>
+                          </td>
+                        </tr>
+                      </table>
+                      <%%= yield %>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+          <%%= spacer(8) %>
+          <table class="footer" border="0" cellpadding="0" cellspacing="0">
+            <tr>
+              <td>
+                Please contact <%%= mail_to Railsui.config.support_email, Railsui.config.support_email, subject: "Help", body: "I need help...", style: "text-decoration: underline;" %> if you have any questions.
+              </td>
+            </tr>
+          </table>
+        </div>
+      </td>
+      <td>&nbsp;</td>
+    </tr>
+  </table>
+</body>
+</html>
+<% end %>
+<% content_for :ruby, flush: true do %>
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "mailer.html.erb" %>
+</div>
+<%= system_pagination(prev_path: systems_mailers_overview_path, prev_text: "Mailers", next_path: systems_mailers_minimal_path, next_text: "Minimal") %>