RubyGems - railsui - Versions diffs - 3.1.0 - Mend

railsui 3.1.0

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 (1423) hide show

data/app/views/railsui/themes/shepherd/mailers/_mailer_preview.html.erb ADDED Viewed

@@ -0,0 +1,541 @@
+<%
+  # Refer to Tailwind's colors for max control
+  # https://tailwindcss.com/docs/customizing-colors#using-css-variables
+  theme = {
+    align_logo: "center",
+    primary: "#f43f5e",
+    secondary: "#1D9AE2",
+    heading_text_color: "#0f172a",
+    footer_text_color: "#71717a",
+    body_text_color: "#27272a",
+    light_text_color: "#71717a",
+    callout_bg_color: "#fef9c3",
+    callout_border_color: "#fef08a",
+    callout_text_color: "#a16207",
+    button_border_radius: "25px",
+    hr_color: "#e4e4e7",
+    dark_mode_background_color: "#18181b",
+    dark_mode_hr_color: "#3f3f46"
+  }
+%>
+<!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" />
+    <!-- <meta name="color-scheme" content="light dark">
+    <meta name="supported-color-schemes" content="light dark">
+    https://www.mailgun.com/blog/email/email-dark-mode/
+    -->
+    <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[:footer_text_color] %> !important;
+        }
+        .rui-mailer .small {
+          color: <%= theme[: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 .action__link--secondary {
+          background-color: <%= theme[:secondary] %> !important;
+          border-color: <%= theme[:secondary] %> !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,
+        .rui-mailer .action__link--secondary {
+          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__link--secondary {
+        color: white;
+        background-color: <%= theme[:secondary] %>;
+        border-top: 8px solid <%= theme[:secondary] %>;
+        border-right: 18px solid <%= theme[:secondary] %>;
+        border-bottom: 8px solid <%= theme[:secondary] %>;
+        border-left: 18px solid <%= theme[:secondary] %>;
+      }
+      .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/shepherd/mailers/_minimal.html.erb ADDED Viewed

@@ -0,0 +1,68 @@
+<%= render layout: example, locals: { heading: "Minimal", section: "Mailers" } do %>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>The <%= Railsui.config.theme.humanize %> theme minimal template gives you a good starting point for an HTML email that is primarily text. The template features basic <%= link_to "email-supported HTML markup", "https://www.caniemail.com/features/", target: :_blank %>.</p>
+  </div>
+<%= email_viewer("A minimal template") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <h1>This is a heading</h1>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+    <ul>
+      <li>List item 1</li>
+      <li>List item 2</li>
+      <li>List item 3</li>
+    </ul>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+    <%= spacer(16) %>
+    <%= link_to "Learn 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>This is a heading</h1>
+<%%= spacer(16) %>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+<%%= spacer(16) %>
+<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ul>
+<%%= spacer(16) %>
+<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+<%%= spacer(16) %>
+<%%= link_to "Learn more", "https://railsui.com" %>
+<% end %>
+<% content_for :haml, flush: true do %>
+/ app/views/some_mailer/minimal.haml.erb
+%h1 This is a heading
+= spacer(16)
+%p Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.
+= spacer(16)
+%ul
+  %li List item 1
+  %li List item 2
+  %li List item 3
+= spacer(16)
+%p Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.
+= spacer(16)
+= link_to "Learn more", "https://railsui.com"
+<% end %>
+  <%= render_snippet active_tab: "erb", erb_filename: "minimal.html.erb", haml_filename: "minimal.haml.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/shepherd/mailers/_promotion.html.erb ADDED Viewed

@@ -0,0 +1,82 @@
+<%= 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") do %>
+  <%= render layout: "railsui/themes/#{Railsui.config.theme.downcase}/mailers/mailer_preview" do %>
+    <%= image_tag "https://picsum.photos/1200/600", alt: "Promotional image example", class: "w-[600px] h-[240px] object-cover" %>
+    <%= spacer(16) %>
+    <h1>Limited time offer!</h1>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+    <%= email_callout do %>
+      <p>For a limited time use the coupon code <strong>50OFF</strong> for 50% off your first purchase.</p>
+    <% end %>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi nulla rem ipsam, praesentium quisquam quidem laboriosam nihil cumque, molestias vero enim corrupti corporis quibusdam mollitia! Dolores ipsum eos animi facere.</p>
+    <%= email_action "Start shopping", "#", align: "center", fullwidth: true, theme: "secondary" %>
+  <% 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: "1200px", height: "600px" %>
+<%%= spacer(16) %>
+<h1>Limited time offer!</h1>
+<%%= spacer(16) %>
+<p>Lorem ipsum dolor...</p>
+<%%= spacer(16) %>
+<%%= email_callout do %>
+  <p>For a limited time use the coupon code <strong>50OFF</strong> for 50% off your first purchase.</p>
+<%% end %>
+<%%= spacer(16) %>
+<p>Lorem ipsum dolor...</p>
+<%%= spacer(16) %>
+<%%= email_action "Start shopping", "#", align: "center", fullwidth: true, theme: "secondary" %>
+<% end %>
+<% content_for :haml, flush: true do %>
+/ app/views/some_mailer/promotion.haml.erb
+/ Add width and height attributes to all images for maximum cross-email client support
+= image_tag "your/promotion/image.jpg", alt: "Promotional image example", width: "1200px", height: "600px"
+= spacer(16)
+%h1 Limited time offer!
+= spacer(16)
+%p Lorem ipsum dolor...
+= spacer(16)
+= email_callout do
+  %p
+    For a limited time use the coupon code
+    %strong 50OFF
+    for 50% off your first purchase.
+= spacer(16)
+%p Lorem ipsum dolor...
+= spacer(16)
+= email_action "Start shopping", "#", align: "center", fullwidth: true, theme: "secondary"
+<% end %>
+  <%= render_snippet active_tab: "erb", erb_filename: "promotion.html.erb", haml_filename: "promotion.haml.erb" %>
+<% end %>
+<% end %>
+<%= system_pagination(prev_path: systems_mailers_minimal_path, prev_text: "Minimal", next_path: systems_mailers_transactional_path, next_text: "Transactional") %>