Module: Emjay::MediaQueries

Defined in:
lib/emjay/helpers/media_queries.rb

Class Method Summary collapse

Class Method Details

.build_tags(breakpoint, media_queries = {}, force_owa_desktop: false, printer_support: false) ⇒ Object

Builds <style> tags for responsive media queries. Port of mediaQueries.js



7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
# File 'lib/emjay/helpers/media_queries.rb', line 7

def self.build_tags(breakpoint, media_queries = {}, force_owa_desktop: false, printer_support: false)
  return "" if media_queries.empty?

  base = media_queries.map { |class_name, mq| ".#{class_name} #{mq}" }
  thunderbird = media_queries.map { |class_name, mq| ".moz-text-html .#{class_name} #{mq}" }
  owa = base.map { |mq| "[owa] #{mq}" }

  result = +""
  result << <<~HTML
    <style type="text/css">
      @media only screen and (min-width:#{breakpoint}) {
        #{base.join("\n")}
      }
    </style>
    <style media="screen and (min-width:#{breakpoint})">
      #{thunderbird.join("\n")}
    </style>
  HTML

  if printer_support
    result << <<~HTML
      <style type="text/css">
        @media only print {
          #{base.join("\n")}
        }
      </style>
    HTML
  end

  if force_owa_desktop
    result << <<~HTML
      <style type="text/css">
        #{owa.join("\n")}
      </style>
    HTML
  end

  result
end