hoist option values out of helper to merged module as config

This commit is contained in:
Torsten 2023-01-29 13:48:37 +02:00
parent 3a15e58ee3
commit ad578d9c3d
8 changed files with 605 additions and 112 deletions

View File

@ -1744,6 +1744,10 @@ select {
min-width: 100%;
}
.max-w-none {
max-width: none;
}
.max-w-\[1920px\] {
max-width: 1920px;
}
@ -1849,6 +1853,10 @@ select {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
resize: both;
}
.appearance-none {
-webkit-appearance: none;
-moz-appearance: none;
@ -2262,21 +2270,6 @@ select {
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-slate-50 {
--tw-bg-opacity: 1;
background-color: rgb(248 250 252 / var(--tw-bg-opacity));
}
.bg-zinc-50 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
.bg-yellow-50 {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
.bg-cover {
background-size: cover;
}
@ -2668,14 +2661,6 @@ select {
text-decoration-line: underline;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-90 {
opacity: 0.9;
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@ -2854,6 +2839,10 @@ select {
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.prose-headings\:text-inherit :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *))) {
color: inherit;
}
@media (prefers-color-scheme: dark) {
.peer:focus ~ .peer-focus\:dark\:text-blue-500 {
--tw-text-opacity: 1;
@ -2912,6 +2901,10 @@ select {
margin: 2rem;
}
.md\:m-4 {
margin: 1rem;
}
.md\:my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
@ -2959,6 +2952,220 @@ select {
gap: 2rem;
}
.md\:prose-lg {
font-size: 1.125rem;
line-height: 1.7777778;
}
.md\:prose-lg :where(p):not(:where([class~="not-prose"] *)) {
margin-top: 1.3333333em;
margin-bottom: 1.3333333em;
}
.md\:prose-lg :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
font-size: 1.2222222em;
line-height: 1.4545455;
margin-top: 1.0909091em;
margin-bottom: 1.0909091em;
}
.md\:prose-lg :where(blockquote):not(:where([class~="not-prose"] *)) {
margin-top: 1.6666667em;
margin-bottom: 1.6666667em;
padding-left: 1em;
}
.md\:prose-lg :where(h1):not(:where([class~="not-prose"] *)) {
font-size: 2.6666667em;
margin-top: 0;
margin-bottom: 0.8333333em;
line-height: 1;
}
.md\:prose-lg :where(h2):not(:where([class~="not-prose"] *)) {
font-size: 1.6666667em;
margin-top: 1.8666667em;
margin-bottom: 1.0666667em;
line-height: 1.3333333;
}
.md\:prose-lg :where(h3):not(:where([class~="not-prose"] *)) {
font-size: 1.3333333em;
margin-top: 1.6666667em;
margin-bottom: 0.6666667em;
line-height: 1.5;
}
.md\:prose-lg :where(h4):not(:where([class~="not-prose"] *)) {
margin-top: 1.7777778em;
margin-bottom: 0.4444444em;
line-height: 1.5555556;
}
.md\:prose-lg :where(img):not(:where([class~="not-prose"] *)) {
margin-top: 1.7777778em;
margin-bottom: 1.7777778em;
}
.md\:prose-lg :where(video):not(:where([class~="not-prose"] *)) {
margin-top: 1.7777778em;
margin-bottom: 1.7777778em;
}
.md\:prose-lg :where(figure):not(:where([class~="not-prose"] *)) {
margin-top: 1.7777778em;
margin-bottom: 1.7777778em;
}
.md\:prose-lg :where(figure > *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.md\:prose-lg :where(figcaption):not(:where([class~="not-prose"] *)) {
font-size: 0.8888889em;
line-height: 1.5;
margin-top: 1em;
}
.md\:prose-lg :where(code):not(:where([class~="not-prose"] *)) {
font-size: 0.8888889em;
}
.md\:prose-lg :where(h2 code):not(:where([class~="not-prose"] *)) {
font-size: 0.8666667em;
}
.md\:prose-lg :where(h3 code):not(:where([class~="not-prose"] *)) {
font-size: 0.875em;
}
.md\:prose-lg :where(pre):not(:where([class~="not-prose"] *)) {
font-size: 0.8888889em;
line-height: 1.75;
margin-top: 2em;
margin-bottom: 2em;
border-radius: 0.375rem;
padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 1em;
padding-left: 1.5em;
}
.md\:prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
margin-top: 1.3333333em;
margin-bottom: 1.3333333em;
padding-left: 1.5555556em;
}
.md\:prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
margin-top: 1.3333333em;
margin-bottom: 1.3333333em;
padding-left: 1.5555556em;
}
.md\:prose-lg :where(li):not(:where([class~="not-prose"] *)) {
margin-top: 0.6666667em;
margin-bottom: 0.6666667em;
}
.md\:prose-lg :where(ol > li):not(:where([class~="not-prose"] *)) {
padding-left: 0.4444444em;
}
.md\:prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) {
padding-left: 0.4444444em;
}
.md\:prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: 0.8888889em;
margin-bottom: 0.8888889em;
}
.md\:prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.3333333em;
}
.md\:prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.3333333em;
}
.md\:prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.3333333em;
}
.md\:prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.3333333em;
}
.md\:prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
margin-top: 0.8888889em;
margin-bottom: 0.8888889em;
}
.md\:prose-lg :where(hr):not(:where([class~="not-prose"] *)) {
margin-top: 3.1111111em;
margin-bottom: 3.1111111em;
}
.md\:prose-lg :where(hr + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.md\:prose-lg :where(h2 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.md\:prose-lg :where(h3 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.md\:prose-lg :where(h4 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.md\:prose-lg :where(table):not(:where([class~="not-prose"] *)) {
font-size: 0.8888889em;
line-height: 1.5;
}
.md\:prose-lg :where(thead th):not(:where([class~="not-prose"] *)) {
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.75em;
}
.md\:prose-lg :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
.md\:prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
.md\:prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
padding-top: 0.75em;
padding-right: 0.75em;
padding-bottom: 0.75em;
padding-left: 0.75em;
}
.md\:prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
.md\:prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
.md\:prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.md\:prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
.md\:p-12 {
padding: 3rem;
}
@ -3075,6 +3282,197 @@ select {
gap: 3rem;
}
.lg\:prose-xl {
font-size: 1.25rem;
line-height: 1.8;
}
.lg\:prose-xl :where(p):not(:where([class~="not-prose"] *)) {
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.lg\:prose-xl :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
font-size: 1.2em;
line-height: 1.5;
margin-top: 1em;
margin-bottom: 1em;
}
.lg\:prose-xl :where(blockquote):not(:where([class~="not-prose"] *)) {
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1.0666667em;
}
.lg\:prose-xl :where(h1):not(:where([class~="not-prose"] *)) {
font-size: 2.8em;
margin-top: 0;
margin-bottom: 0.8571429em;
line-height: 1;
}
.lg\:prose-xl :where(h2):not(:where([class~="not-prose"] *)) {
font-size: 1.8em;
margin-top: 1.5555556em;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.lg\:prose-xl :where(h3):not(:where([class~="not-prose"] *)) {
font-size: 1.5em;
margin-top: 1.6em;
margin-bottom: 0.6666667em;
line-height: 1.3333333;
}
.lg\:prose-xl :where(h4):not(:where([class~="not-prose"] *)) {
margin-top: 1.8em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.lg\:prose-xl :where(img):not(:where([class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.lg\:prose-xl :where(video):not(:where([class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.lg\:prose-xl :where(figure):not(:where([class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.lg\:prose-xl :where(figure > *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.lg\:prose-xl :where(figcaption):not(:where([class~="not-prose"] *)) {
font-size: 0.9em;
line-height: 1.5555556;
margin-top: 1em;
}
.lg\:prose-xl :where(code):not(:where([class~="not-prose"] *)) {
font-size: 0.9em;
}
.lg\:prose-xl :where(h2 code):not(:where([class~="not-prose"] *)) {
font-size: 0.8611111em;
}
.lg\:prose-xl :where(h3 code):not(:where([class~="not-prose"] *)) {
font-size: 0.9em;
}
.lg\:prose-xl :where(pre):not(:where([class~="not-prose"] *)) {
font-size: 0.9em;
line-height: 1.7777778;
margin-top: 2em;
margin-bottom: 2em;
border-radius: 0.5rem;
padding-top: 1.1111111em;
padding-right: 1.3333333em;
padding-bottom: 1.1111111em;
padding-left: 1.3333333em;
}
.lg\:prose-xl :where(ol):not(:where([class~="not-prose"] *)) {
margin-top: 1.2em;
margin-bottom: 1.2em;
padding-left: 1.6em;
}
.lg\:prose-xl :where(ul):not(:where([class~="not-prose"] *)) {
margin-top: 1.2em;
margin-bottom: 1.2em;
padding-left: 1.6em;
}
.lg\:prose-xl :where(li):not(:where([class~="not-prose"] *)) {
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.lg\:prose-xl :where(ol > li):not(:where([class~="not-prose"] *)) {
padding-left: 0.4em;
}
.lg\:prose-xl :where(ul > li):not(:where([class~="not-prose"] *)) {
padding-left: 0.4em;
}
.lg\:prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.lg\:prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.2em;
}
.lg\:prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.2em;
}
.lg\:prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.2em;
}
.lg\:prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.2em;
}
.lg\:prose-xl :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
margin-top: 0.8em;
margin-bottom: 0.8em;
}
.lg\:prose-xl :where(hr):not(:where([class~="not-prose"] *)) {
margin-top: 2.8em;
margin-bottom: 2.8em;
}
.lg\:prose-xl :where(hr + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.lg\:prose-xl :where(h2 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.lg\:prose-xl :where(h3 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.lg\:prose-xl :where(h4 + *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.lg\:prose-xl :where(table):not(:where([class~="not-prose"] *)) {
font-size: 0.9em;
line-height: 1.5555556;
}
.lg\:prose-xl :where(thead th):not(:where([class~="not-prose"] *)) {
padding-right: 0.6666667em;
padding-bottom: 0.8888889em;
padding-left: 0.6666667em;
}
.lg\:prose-xl :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
.lg\:prose-xl :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
@ -3094,13 +3492,32 @@ select {
padding-top: 4rem;
padding-bottom: 4rem;
}
.lg\:prose-xl :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
padding-top: 0.8888889em;
padding-right: 0.6666667em;
padding-bottom: 0.8888889em;
padding-left: 0.6666667em;
}
.lg\:prose-xl :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
.lg\:prose-xl :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
.lg\:prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
.lg\:prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
}
@media (min-width: 1280px) {
.xl\:m-20 {
margin: 5rem;
}
.xl\:m-8 {
margin: 2rem;
}
@ -3109,6 +3526,10 @@ select {
margin: 3.5rem;
}
.xl\:m-20 {
margin: 5rem;
}
.xl\:mx-auto {
margin-left: auto;
margin-right: auto;

View File

@ -38,7 +38,7 @@ module Merged
def order_option(section , clazz = "")
if section.has_option?("order")
clazz += " order-last" if section.option('order') == "right"
clazz += " " + " order-last" if section.option('order') == "right"
end
{class: clazz}
end
@ -46,7 +46,7 @@ module Merged
def text_align_option(section , clazz = "")
if section.has_option?("text_align")
# text-center , text-left , text-right , leave comment for tailwind
clazz += " text-#{section.option('text_align')}"
clazz += " " + " text-#{section.option('text_align')}"
end
{class: clazz}
end
@ -55,11 +55,11 @@ module Merged
if section.has_option?("item_align")
case section.option("item_align")
when "left"
clazz += " justify-start"
clazz += " " + " justify-start"
when "right"
clazz += " justify-end"
clazz += " " + " justify-end"
else
clazz += " justify-center"
clazz += " " + " justify-center"
end
end
{class: clazz }
@ -68,112 +68,45 @@ module Merged
def background_option(section , clazz = "")
if section.has_option?("background")
option = section.option('background')
clazz += bg_for(section)
clazz += " text-white" if option.include?("solid")
clazz += " " + Merged.background[section.option('background')] || ""
end
{class: clazz}
end
def margin_option(section , clazz = "")
return {class: clazz} unless section.has_option?("margin")
margin = { "none" => " m-0" ,
"small" => " 2 md:4 lg:6 xl:m-8" ,
"medium" => " 5 md:8 lg:10 xl:m-14" ,
"large" => " 8 md:12 lg:16 xl:m-20" ,
}[section.option("margin")] || ""
margin = Merged.margin[section.option("margin")] || ""
{class: clazz + margin}
end
def text_color_option(section , clazz = "")
if section.has_option?("text_color")
clazz += color_for(section)
clazz += " " + Merged.text_color[section.option("text_color")] || ""
end
{class: clazz }
end
def shade_option(section , clazz = "")
if section.has_option?("shade_color")
clazz += shade_for(section)
clazz += " " + Merged.shade_color[section.option("shade_color")] || ""
end
{class: clazz }
end
def text_column_option( section)
option = section.option('columns')
option = 2 if option.blank?
case option
when "3"
columns = "columns-1 md:columns-2 lg:columns-3"
when "4"
columns = "columns-1 md:columns-2 lg:columns-3 xl:columns-4"
else # two
columns = "columns-1 md:columns-2"
def text_column_option( section )
if section.has_option?("text_columns")
clazz += " " + Merged.text_columns[section.option("text_columns")] || ""
end
{class: columns }
{class: clazz }
end
def column_option(section)
option = section.option('columns')
case option
when "1"
columns = "grid-cols-1"
when "3"
columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
when "4"
columns = "grid-cols-1 md:grid-cols-2 lg:grid-cols-4"
when "5"
columns = "grid-cols-1 md:grid-cols-3 lg:grid-cols-5"
when "6"
columns = "grid-cols-2 md:grid-cols-4 lg:grid-cols-6"
else # two
columns = "grid-cols-1 md:grid-cols-2"
if section.has_option?("columns")
clazz += " " + Merged.text_columns[section.option("columns")] || ""
end
columns += " gap-8 md:gap-12 lg:gap-16"
{class: columns }
{class: clazz }
end
private
# need full color names for tailwind to pick it up
def bg_for( section )
{ "white" => " bg-white" ,
"none" => "" ,
"light_blue" => " bg-cyan-100" ,
"light_gray" => " bg-gray-100" ,
"light_orange" => " bg-orange-50" ,
"solid_blue" => " bg-cyan-700" ,
"solid_red" => " bg-amber-600" ,
"solid_green" => " bg-green-700" ,
"solid_petrol" => " bg-teal-700" ,
"solid_indigo" => " bg-cyan-900" ,
"solid_black" => " bg-slate-900" ,
}[section.option('background')] || ""
end
# need full color names for tailwind to pick it up
def color_for( section )
{ "white" => " text-white",
"none" => "",
"light_blue" => " text-cyan-100" ,
"light_gray" => " text-gray-100" ,
"solid_blue" => " text-cyan-700" ,
"solid_red" => " text-orange-800" ,
"solid_green" => " text-green-700" ,
"solid_petrol" => " text-teal-700" ,
"solid_indigo" => " text-indigo-800" ,
"solid_black" => " text-slate-800" ,
}[section.option("text_color")] || ""
end
# need full color names for tailwind to pick it up
def shade_for( section )
{ "white_25" => " bg-white/25",
"none" => "",
"black_25" => " bg-black/25" ,
"light_blue_25" => " bg-cyan-100/25" ,
"light_red_25" => " bg-orange-300/25" ,
"solid_blue_25" => " bg-cyan-700/25" ,
"solid_red_25" => " bg-orange-800/25" ,
}[section.option("shade_color")] || ""
end
end
end

View File

@ -1,4 +1,17 @@
module Merged
# Quite simple mapping from name to usually a selection of values.
# Options have type that can be set but usually is inferred from
# wether there is one values (select) other wise text.
# date is also supported.
#
# a corresponding ./app/views/merged/sections/_option_form_TYPE.haml
# nust exist to render the type.
#
# Also values may be provided by a module function/attribute on Merged.
# eg option text_color (also shade_color) have a Merged.text_color that return a
# hash. In this case so it is easy to customize the colors of the app.
#
class OptionDefinition < SharedBase
fields :name , :default , :description , :values , :type
@ -13,11 +26,13 @@ module Merged
end
def has_values?
return true if Merged.respond_to?( name.to_sym )
return false if attributes[:values].nil?
! attributes[:values].empty?
end
def values
return Merged.send(name.to_sym).keys if Merged.respond_to?( name.to_sym )
return [] unless has_values?
attributes[:values].split(" ")
end

View File

@ -117,3 +117,8 @@
:values: left-top left left-bottom top center bottom right-top right right-bottom
:default: center
:id: 21
- :name: text_columns
:description: Number of text columns in a newspaper style layout
:values: 2 3 4 5
:default: 3
:id: 22

View File

@ -175,6 +175,6 @@
- text
options:
- order
- columns
- text_columns
- background
- text_color

View File

@ -3,7 +3,8 @@ const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/**/*.rb',
'./lib/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],

View File

@ -9,3 +9,58 @@ Merged.images_dir = "merged"
# Notice that the data is ALWAYS inside a merged directory,
# so in the default case Rails.root/merged/*.yml
Merged.data_dir = "."
# text colors, keys are options shown to user, values what gets replaced
Merged.text_color = { "white" => "text-white",
"none" => "",
"light_blue" => "text-cyan-100",
"light_gray" => "text-gray-100",
"solid_blue" => "text-cyan-700",
"solid_red" => "text-orange-800",
"solid_green" => "text-green-700",
"solid_petrol" => "text-teal-700",
"solid_indigo" => "text-indigo-800",
"solid_black" => "text-slate-800",
}
# margin option, keys are options shown to user, values what gets replaced
Merged.margin = { "none" => "m-0",
"small" => " m-2 md:m-4 lg:6 xl:m-8",
"medium" => "m-5 md:m-8 lg:10 xl:m-14",
"large" => " m-8 md:m-12 lg:16 xl:m-20",}
# background colors
Merged.background = {"white" => "bg-white",
"none" => "",
"light_blue" => "bg-cyan-100",
"light_gray" => "bg-gray-100",
"light_orange" => "bg-orange-50",
"solid_blue" => "bg-cyan-700 text-white",
"solid_red" => "bg-amber-600 text-white",
"solid_green" => "bg-green-700 text-white",
"solid_petrol" => "bg-teal-700 text-white",
"solid_indigo" => "bg-cyan-900 text-white",
"solid_black" => "bg-slate-900 text-white", }
# shade options
Merged.shade_color = {"white_25" => "bg-white/25",
"none" => "",
"black_25" => "bg-black/25",
"light_blue_25" => "bg-cyan-100/25",
"light_red_25" => "bg-orange-300/25",
"solid_blue_25" => "bg-cyan-700/25",
"solid_red_25" => "bg-orange-800/25", }
# amount of text columns
Merged.text_columns = {
"3" => "columns-1 md:columns-2 lg:columns-3",
"4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4",
"2" => "columns-1 md:columns-2" }
Merged.columns = { "1" => "grid-cols-1",
"2" => "grid-cols-1 md:grid-cols-2"
"3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
"4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
"5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
"6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", }

View File

@ -8,7 +8,70 @@ module Merged
# Directory inside the app/assets/images
mattr_accessor :images_dir
@@images_dir = "merged"
# directory in root to store data
mattr_accessor :data_dir
@@data_dir = "."
# text colors, keys are options shown to user, values what gets replaced
mattr_accessor :text_color
@@text_color = { "white" => "text-white",
"none" => "",
"light_blue" => "text-cyan-100",
"light_gray" => "text-gray-100",
"solid_blue" => "text-cyan-700",
"solid_red" => "text-orange-800",
"solid_green" => "text-green-700",
"solid_petrol" => "text-teal-700",
"solid_indigo" => "text-indigo-800",
"solid_black" => "text-slate-800",
}
# margin option, keys are options shown to user, values what gets replaced
mattr_accessor :margin
@@margin = { "none" => "m-0",
"small" => " m-2 md:m-4 lg:6 xl:m-8",
"medium" => "m-5 md:m-8 lg:10 xl:m-14",
"large" => " m-8 md:m-12 lg:16 xl:m-20",}
# background colors
mattr_accessor :background
@@background = {"white" => "bg-white",
"none" => "",
"light_blue" => "bg-cyan-100",
"light_gray" => "bg-gray-100",
"light_orange" => "bg-orange-50",
"solid_blue" => "bg-cyan-700 text-white",
"solid_red" => "bg-amber-600 text-white",
"solid_green" => "bg-green-700 text-white",
"solid_petrol" => "bg-teal-700 text-white",
"solid_indigo" => "bg-cyan-900 text-white",
"solid_black" => "bg-slate-900 text-white", }
# shade options
mattr_accessor :shade_color
@@shade_color = {"white_25" => "bg-white/25",
"none" => "",
"black_25" => "bg-black/25",
"light_blue_25" => "bg-cyan-100/25",
"light_red_25" => "bg-orange-300/25",
"solid_blue_25" => "bg-cyan-700/25",
"solid_red_25" => "bg-orange-800/25", }
# amount of text columns
mattr_accessor :text_columns
@@text_columns = {
"3" => "columns-1 md:columns-2 lg:columns-3",
"4" => "columns-1 md:columns-2 lg:columns-3 xl:columns-4",
"2" => "columns-1 md:columns-2" }
# amount of text columns
mattr_accessor :columns
@@columns = { "1" => "grid-cols-1",
"2" => "grid-cols-1 md:grid-cols-2"
"3" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
"4" => "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
"5" => "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
"6" => "grid-cols-2 md:grid-cols-4 lg:grid-cols-6", }
end