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/_mailer_preview.html.erb ADDED Viewed

@@ -0,0 +1,523 @@
+<%
+  # Refer to Tailwind's colors for max control
+  # https://tailwindcss.com/docs/customizing-colors#using-css-variables
+  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.rui-mailer {
+          background-color: <%= theme[:dark_mode_background_color] %> !important;
+          color: #ffffff !important;
+        }
+        .rui-mailer .content {
+          color: #ffffff !important;
+        }
+        .rui-mailer h1,
+        .rui-mailer h2,
+        .rui-mailer h3,
+        .rui-mailer h4 {
+          color: #ffffff !important;
+        }
+        .rui-mailer .main {
+          background: <%= theme[:dark_mode_background_color] %> !important;
+        }
+        .rui-mailer .footer td,
+        .rui-mailer .footer p,
+        .rui-mailer .footer span,
+        .rui-mailer .footer a {
+          color: <%= theme[:dark_mode_footer_text_color] %> !important;
+        }
+        .rui-mailer .small {
+          color: <%= theme[:dark_mode_footer_text_color] %> !important;
+        }
+        .rui-mailer table.callout td {
+          background-color: <%= theme[:callout_bg_color] %> !important;
+          color: <%= theme[:callout_text_color] %> !important;
+        }
+        .rui-mailer .view-in-browser {
+          color: #9ca3af !important;
+        }
+        .rui-mailer .action__link--primary {
+          background-color: <%= theme[:primary] %> !important;
+          border-color: <%= theme[:primary] %> !important;
+        }
+        .rui-mailer 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%;
+        }
+      }
+      .rui-mailer img {
+        border: none;
+        -ms-interpolation-mode: bicubic;
+        max-width: 100%;
+      }
+      .rui-mailer img.rounded-full {
+        border-radius: 99999px;
+        width: 20px;
+        height: 20px;
+        margin-bottom: -2px;
+        margin-bottom: -2px;
+      }
+      .rui-mailer table {
+        border-collapse: separate;
+        mso-table-lspace: 0pt;
+        mso-table-rspace: 0pt;
+        width: 100%;
+      }
+      .rui-mailer table td {
+        font-family: sans-serif;
+        font-size: 16px;
+        vertical-align: top;
+      }
+      /* -------------------------------------
+      BODY & CONTAINER
+      ------------------------------------- */
+      /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone */
+      .rui-mailer .container {
+        display: block;
+        margin: 0 auto !important;
+        /* makes it centered */
+        max-width: 600px;
+        padding: 10px;
+        width: 600px;
+      }
+      /* This should be a block element, so that it will fill 100% of the .container */
+      .rui-mailer .content {
+        box-sizing: border-box;
+        display: block;
+        margin: 0 auto;
+        max-width: 600px;
+        padding: 20px;
+        line-height: 1.6;
+        color: <%= theme[:body_text_color] %>;
+      }
+      /* Use for a text-based logo */
+      .rui-mailer .logo {
+        color: #222;
+        text-decoration: none;
+        font-size: 18px;
+        font-weight: 500;
+        line-height: 0;
+      }
+      .rui-mailer .logo:hover {
+        text-decoration: none;
+      }
+      /* -------------------------------------
+      HEADER, FOOTER, MAIN
+      ------------------------------------- */
+      .rui-mailer .main {
+        background: #ffffff;
+        width: 100%;
+      }
+      .rui-mailer .wrapper {
+        box-sizing: border-box;
+        padding: 20px;
+      }
+      .rui-mailer .footer {
+        clear: both;
+        padding-top: 16px;
+        margin-bottom: 16px;
+        text-align: center;
+      }
+      .rui-mailer .footer td,
+      .rui-mailer .footer p,
+      .rui-mailer .footer span,
+      .rui-mailer .footer a {
+        color: <%= theme[:footer_text_color] %>;
+        font-size: 13px;
+        line-height: 150%;
+        margin: 0;
+        text-align: center;
+      }
+      /* -------------------------------------
+      TYPOGRAPHY
+      ------------------------------------- */
+      .rui-mailer h1,
+      .rui-mailer h2,
+      .rui-mailer h3,
+      .rui-mailer 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;
+      }
+      .rui-mailer h1 {
+        font-size: 24px;
+        font-weight: 800;
+        line-height: 30px;
+      }
+      .rui-mailer h2 {
+        font-size: 22px;
+        font-weight: 800;
+      }
+      .rui-mailer p,
+      .rui-mailer ul,
+      .rui-mailer ol,
+      .rui-mailer table.callout {
+        font-family: sans-serif;
+        font-size: 16px;
+        font-weight: normal;
+        margin-bottom: 18px;
+      }
+      .rui-mailer ul {
+        padding-left: 16px;
+        margin: 10px 0;
+        Margin: 10px 0;
+        list-style-type: disc;
+      }
+      .rui-mailer ul li {
+        Margin-bottom: 10px;
+        margin-bottom: 10px;
+      }
+      .rui-mailer p li,
+      .rui-mailer ul li,
+      .rui-mailer ol li {
+        list-style-position: outside;
+      }
+      .rui-mailer p.no-bottom-margin {
+        margin-bottom: 0;
+      }
+      .rui-mailer a {
+        color: <%= theme[:primary] %>;
+        text-decoration: underline;
+      }
+      .rui-mailer a:hover {
+        text-decoration: underline;
+      }
+      .rui-mailer .intro blockquote {
+        font-style: italic;
+        color: #111827 !important;
+        border-left: 5px solid #e5e7eb;
+        margin: 0 0 18px 0;
+        padding-left: 24px;
+      }
+      .rui-mailer .intro blockquote p {
+        font-weight: 500 !important;
+        font-style: italic;
+        color: #111827 !important;
+        margin: 0;
+      }
+      /* -------------------------------------
+      OTHER STYLES THAT MIGHT BE USEFUL
+      ------------------------------------- */
+      .rui-mailer .last {
+        margin-bottom: 0;
+      }
+      .rui-mailer .first {
+        margin-top: 0;
+      }
+      .rui-mailer .align-center {
+        text-align: center;
+      }
+      .rui-mailer .align-right {
+        text-align: right;
+      }
+      .rui-mailer .align-left {
+        text-align: left;
+      }
+      .rui-mailer .mt-0 {
+        margin-top: 0;
+      }
+      .rui-mailer .mb-0 {
+        margin-bottom: 0;
+      }
+      .rui-mailer .mt-10 {
+        margin-top: 10px;
+        Margin-top: 10px;
+      }
+      .rui-mailer .mb-10 {
+        margin-bottom: 10px;
+        Margin-bottom: 10px;
+      }
+      .rui-mailer .small {
+        font-size: 14px;
+        color: <%= theme[:light_text_color] %>;
+        line-height: 130%;
+      }
+      .rui-mailer hr {
+        border: 0;
+        border-bottom: 1px solid <%= theme[:hr_color] %>;
+        margin: 20px 0;
+      }
+      .rui-mailer table.callout td {
+        background-color: <%= theme[:callout_bg_color] %>;
+        padding: 16px;
+        border-radius: 8px;
+        color: <%= theme[:callout_text_color] %>
+      }
+      .rui-mailer table.callout td p {
+        margin: 0;
+      }
+      .rui-mailer .view-in-browser {
+        font-size: 12px;
+        color: <%= theme[:light_text_color] %>;
+        margin-bottom: 10px;
+        text-align: center;
+        display: block;
+      }
+      .rui-mailer table.social-links {
+        width: auto;
+      }
+      .rui-mailer table.social-links td {
+        width: 44px;
+        overflow: hidden;
+        text-align: center;
+      }
+      .rui-mailer table.social-links td img {
+        display: inline;
+      }
+      /* -------------------------------------
+      RESPONSIVE AND MOBILE FRIENDLY STYLES
+      ------------------------------------- */
+      @media only screen and (max-width: 620px) {
+        .rui-mailer table[class="body"] a.view-in-browser {
+          font-size: 12px !important;
+          margin-top: 10px;
+        }
+        .rui-mailer table[class="body"] h1 {
+          font-size: 28px !important;
+          margin-bottom: 10px !important;
+        }
+        .rui-mailer table[class="body"] a,
+        .rui-mailer table[class="body"] ol,
+        .rui-mailer table[class="body"] p,
+        .rui-mailer table[class="body"] span,
+        .rui-mailer table[class="body"] td,
+        .rui-mailer table[class="body"] ul {
+          font-size: 16px !important;
+        }
+        .rui-mailer table[class="body"] p.small {
+          font-size: 14px !important;
+        }
+        .rui-mailer table[class="body"] .footer {
+          padding: 10px;
+        }
+        .rui-mailer table[class="body"] .footer p {
+          font-size: 16px !important;;
+          line-height: 150%;
+        }
+        .rui-mailer .wrapper {
+          padding: 20px 10px !important;
+        }
+        .rui-mailer .content {
+          padding: 0 !important;
+        }
+        .rui-mailer .container {
+          padding: 0 !important;
+          width: 100.85% !important;
+        }
+        .rui-mailer .main {
+          border-left-width: 0 !important;
+          border-radius: 0 !important;
+          border-right-width: 0 !important;
+          width: 100% !important;
+        }
+        .rui-mailer .img-responsive {
+          height: auto !important;
+          max-width: 100% !important;
+          width: auto !important;
+        }
+        .rui-mailer .action__link--primary {
+          border-width: 8px 0px !important;
+        }
+      }
+      /* Action buttons */
+      .rui-mailer .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: 16px;
+        font-weight: bold;
+      }
+      /* Update your brand colors here */
+      .rui-mailer .action__link--primary {
+        background-color: <%= theme[:primary] %>;
+        border-top: 8px solid  <%= theme[:primary] %>;
+        border-right: 24px solid <%= theme[:primary] %>;
+        border-bottom: 8px solid <%= theme[:primary] %>;
+        border-left: 24px solid <%= theme[:primary] %>;
+      }
+      .rui-mailer .action {
+        width: 100%;
+        padding: 0 0 5px 0 !important;
+        text-align: center;
+      }
+      .rui-mailer .action__link--expanded {
+        width: 100%;
+      }
+      .rui-mailer .action td {
+        padding: 0 !important;
+        border: none;
+      }
+      @media only screen and (max-width: 600px) {
+        .rui-mailer .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>

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

@@ -0,0 +1,63 @@
+<%= render layout: example, locals: { heading: "Minimal", section: "Mailers" } do %>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>The <%= Railsui.config.theme.humanize %> theme's minimal email template provides an excellent foundation for text-centric HTML emails. This streamlined design incorporates <%= link_to "email-compatible HTML elements", "https://www.caniemail.com/features/", target: :_blank %>, ensuring your message renders correctly across various email clients.</p>
+  </div>
+<%= email_viewer("A minimal template", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <h1>Your workspace is ready</h1>
+    <p>Hi Sarah,</p>
+    <p>Great news! Your team's workspace has been provisioned and is ready to go. Here's what we've set up for you:</p>
+    <ul>
+      <li><strong>Custom domain:</strong> team.yourcompany.io is live</li>
+      <li><strong>Team members:</strong> 5 seats activated with SSO enabled</li>
+      <li><strong>Storage:</strong> 100GB allocated with automatic backups</li>
+      <li><strong>Integrations:</strong> Slack, GitHub, and Jira connected</li>
+    </ul>
+    <p>Your trial includes all premium features for the next 30 days. No credit card required, and you can upgrade or downgrade anytime.</p>
+    <p>P.S. Our data shows teams that complete onboarding in the first week are 3x more likely to achieve their goals. Let's make it happen!</p>
+    <%= spacer(16) %>
+    <%= email_action "Read more", "https://railsui.com" %>
+  <% end %>
+<% end %>
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/some_mailer/minimal.html.erb -->
+<h1>Your workspace is ready</h1>
+<p>Hi Sarah,</p>
+<p>Great news! Your team's workspace has been provisioned and is ready to go. Here's what we've set up for you:</p>
+<ul>
+  <li><strong>Custom domain:</strong> team.yourcompany.io is live</li>
+  <li><strong>Team members:</strong> 5 seats activated with SSO enabled</li>
+  <li><strong>Storage:</strong> 100GB allocated with automatic backups</li>
+  <li><strong>Integrations:</strong> Slack, GitHub, and Jira connected</li>
+</ul>
+<p>Your trial includes all premium features for the next 30 days. No credit card required, and you can upgrade or downgrade anytime.</p>
+<p>P.S. Our data shows teams that complete onboarding in the first week are 3x more likely to achieve their goals. Let's make it happen!</p>
+<%%= spacer(16) %>
+<%%= email_action "Read more", "https://railsui.com" %>
+<% end %>
+<%= render_snippet active_tab: "erb", erb_filename: "minimal.html.erb" %>
+<% end %>
+<% end %>
+<%= system_pagination(prev_path: systems_mailers_layout_path, prev_text: "Layouts", next_path: systems_mailers_promotion_path, next_text: "Promotion") %>

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

@@ -0,0 +1,62 @@
+<%= render layout: example, locals: { heading: "Promotion", section: "Mailers" } do %>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>The Rails UI promotional template gives you a good starting point for a sales-based email template. Using a short and sweet heading, callouts, and larger buttons incentivizes users to take more action.</p>
+  </div>
+<%= email_viewer("A promotional template", variant: "neutral") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <%= image_tag "https://picsum.photos/1200/800", alt: "Promotional image example", class: "object-cover max-h-[400px]", height: 280, width: 600 %>
+    <%= spacer(16) %>
+    <h1>Summer Sale Extravaganza!</h1>
+    <p>Get ready for the hottest deals of the season! Our Summer Sale Extravaganza is here, bringing you incredible discounts on all your favorite items. From stylish beachwear to must-have accessories, we've got everything you need to make this summer unforgettable.</p>
+    <%= email_callout do %>
+      <p>For a limited time use the coupon code <strong>SUMMER25</strong> for 25% off your entire purchase!</p>
+    <% end %>
+    <p>Don't miss out on this opportunity to refresh your summer wardrobe and grab those items you've been eyeing. With prices this low, you can treat yourself and your loved ones to something special. But hurry, these amazing deals won't last forever!</p>
+    <%= email_action "Shop Now", "#", align: "center", fullwidth: true %>
+  <% end %>
+<% end %>
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+<!-- app/views/some_mailer/promotion.html.erb -->
+<!-- Add width and height attributes to all images for maximum cross email client support -->
+<%%= image_tag "promotion-image.jpg", alt: "Promotional image example", width: 600, height: 280 %>
+<%%= spacer(16) %>
+<h1>Summer Sale Extravaganza!</h1>
+<%%= spacer(16) %>
+ <p>Get ready for the hottest deals of the season! Our Summer Sale Extravaganza is here, bringing you incredible discounts on all your favorite items. From stylish beachwear to must-have accessories, we've got everything you need to make this summer unforgettable.</p>
+<%%= spacer(16) %>
+<%%= email_callout do %>
+  <p>For a limited time use the coupon code <strong>SUMMER25</strong> for 25% off your entire purchase!</p>
+<%% end %>
+<%%= spacer(16) %>
+<p>Don't miss out on this opportunity to refresh your summer wardrobe and grab those items you've been eyeing. With prices this low, you can treat yourself and your loved ones to something special. But hurry, these amazing deals won't last forever!</p>
+<%%= spacer(16) %>
+<%%= email_action "Start shopping", "#", align: "center", fullwidth: true %>
+<% end %>
+  <%= render_snippet active_tab: "erb", erb_filename: "promotion.html.erb" %>
+<% end %>
+<% end %>
+<%= system_pagination(prev_path: systems_mailers_minimal_path, prev_text: "Minimal", next_path: systems_mailers_transactional_path, next_text: "Transactional") %>