assemblymade/coderwall

View on GitHub
app/views/protip_mailer/popular_protips.html.haml

Summary

Maintainability
Test Coverage
- nopad = 'margin: 0; padding: 0; '
- sans_serif = 'font-family: Helvetica Neue, Helvetica, Arial, sans-serif;'
- serif = 'font-family: Georgia, Times, Times New Roman, serif;'
!!!
%html{style: nopad}
  %head{style: nopad}
  %body{style: "margin: 0; padding: 60px 0; background-color: #48494e; -webkit-font-smoothing: antialiased; width: 100% !important; -webkit-text-size-adjust: none;"}
    %table{style: "width: 100%; margin: 0 auto; background: #48494e;"}
      %tr
        %td{style: "background: #48494e;"}
        %table{style: "margin: 0 auto 40px auto; padding: 0; width: 100%;"}
          %tr
            %td{style: "margin: 0 auto; padding: 0; width: 600px;"}
              %table.logo{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto 40px auto; padding: 0; width: 211px;", width: 211}
                %tr{style: nopad}
                  %td{style: nopad}
                    %img{alt: "Coderwall Logo", height: 35, src: image_url('email/coderwall-logo.jpg'), style: nopad, width: 211}
              %table.header{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0; width: 600px; background: #fff; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px;", width: 600}
                %tr{style: nopad}
                  %td{style: nopad}
                    %img{alt: "Email Header", height: 159, src: image_url('email/email-popular_protip-header.png'), style: nopad, width: 600}


                    %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #fff;", width: 600}
                      %tr{style: nopad}
                        %td{style: nopad}
                          %table.top-tip{border: 0, cellpadding: 0, cellspacing: 0, style: nopad}
                            %tr{style: nopad}
                              %td.glasses{style: "margin: 0; padding: 0 10px 30px 0; vertical-align: middle;"}
                                %img{alt: "Assembly", height: 114, src: image_url("email/logo-wordmark-muted@2x.png"), style: nopad}
                              %td.tip{style: "margin: 0; padding: 0 0 30px 0; text-align: right;"}
                                %h2{style: "#{nopad} font-weight: normal; #{serif} color: #99958b; margin-bottom: 10px;"}
                                  Coderwall is Open Source!
                                %h3{style: "#{nopad} #{sans_serif} font-size: 16px; line-height: 22px; color: #48494E; font-weight: normal;"}
                                  Coderwall is an open product on Assembly. Every software product on Assembly is a collaborative effort including the vision, development, design, and marketing. Each month a product's revenue is collected & split amongst all involved. Want to help make Coderwall better?
                                  %a{href: 'http://hackernoons.com/all-our-coderwall-are-belong-to-you', style: "#{nopad} color: #3d8dcc;"} Read the announcement
                                  or
                                  %a{href: 'https://assembly.com/coderwall', style: "#{nopad} color: #3d8dcc;"} jump in and get started!


              %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #fff;", width: 600}
                %tr{style: nopad}
                  %td{style: nopad}
                    %table.tips{border: 0, cellpadding: 0, cellspacing: 0, style: "#{nopad} width: 520px; border: #cbc9c4 solid 2px; -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden;"}
                      %tr.title{style: "#{nopad} height: 50px; line-height: 50px;"}
                        %td{colspan: 6, style: nopad}
                          %h2{style: "#{nopad} font-weight: normal; #{serif} text-align: center; background: #ECE9E2; font-size: 19px; color: #48494e; margin-bottom: 20px;"}
                            Popular protips

                      - @protips.each do |protip|
                        - best_stat = OpenStruct.new(name: protip.best_stat.first.to_s, value: protip.best_stat.last)

                        %tr.tip{style: nopad}
                          %td.avatar{style: "#{nopad} padding-left: 30px; width: 36px; padding-bottom: 20px;"}
                            %img{alt: "Avatar", height: 36, src: image_url(protip.user.avatar.url), style: "#{nopad} border: solid 2px #fff; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);", width: 36}
                          %td.link{style: "#{nopad} padding-right: 20px; padding-left: 10px; width: 270px; padding-bottom: 20px;"}
                            %a{href: protip_url(protip.public_id, @issue), style: "#{nopad} #{sans_serif} font-size: 14px; line-height: 22px; color: #48494E; text-decoration: none; display: block;"}
                              = protip.title
                          - if best_stat.value.try(:to_i) == 0
                            %td.thumb{style: "margin: 0; padding: 0 5px; width: 15px; padding-bottom: 20px; content: 'u'; font-size: 19px;"}
                          - elsif best_stat.name == "upvotes"
                            %td.thumb{style: "margin: 0; padding: 0 5px; width: 15px; padding-bottom: 20px; content: 'u'; font-size: 19px;"}
                              = image_tag("email/upvote.png")
                          - elsif best_stat.name == "comments"
                            %td.thumb{style: "margin: 0; padding: 0 5px; width: 15px; padding-bottom: 20px; font-family: 'oli'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: '7'; font-size: 19px;"}
                              = image_tag("email/comment.png")
                          - elsif best_stat.name == "views"
                            %td.thumb{style: "margin: 0; padding: 0 5px; width: 15px; padding-bottom: 20px; content: '6'; font-size: 19px;"}
                              = image_tag("email/eye.png")
                          - elsif best_stat.name == "hawt"
                            %td.thumb{style: "margin: 0; padding: 0 5px; width: 15px; padding-bottom: 20px; content: '2'; font-size: 19px; color: #f35e39;"}
                              = image_tag("email/flame.png")
                          %td.upvotes{style: "margin: 0; padding: 0 5px; #{sans_serif} font-size: 14px; line-height: 22px; width: 15px; height: 36px; padding-bottom: 20px;"}
                            %h4{style: "#{nopad} font-weight: normal;"}
                              = formatted_best_stat_value(protip) unless best_stat.name =~ /hawt/ || best_stat.value.try(:to_i) == 0
                      %tr.btns{style: nopad}
                        %td.btns-box{colspan: 6, style: "margin: 0; padding: 20px 90px; border-top: solid 1px #cbc9c4;"}
                          %a.share-tip{href: new_protip_url(@issue), style: "margin: 0; padding: 6px 16px; background: #d75959; margin-right: 20px; #{sans_serif} font-size: 14px; line-height: 22px; display: inline-block; width: 120px; color: #fff; text-decoration: none; -webkit-border-radius: 4px; border-radius: 4px; text-align: center;"}
                            Share a protip
                          %a.browse-networks{href: root_url(@issue), style: "margin: 0; padding: 6px 16px; background: #3d8dcc; #{sans_serif} font-size: 14px; line-height: 22px; display: inline-block; width: 120px; color: #fff; text-decoration: none; -webkit-border-radius: 4px; border-radius: 4px; text-align: center;"}
                            Trending protips
            
              - unless @most.nil?
                %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #fff;", width: 600}
                  %tr{style: nopad}
                    %td{style: nopad}
                      %table.activity{border: 0, cellpadding: 0, cellspacing: 0, style: "#{nopad} width: 520px; border: #cbc9c4 solid 2px; -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden;"}
                        %tr.title{style: "#{nopad} height: 50px; line-height: 50px;"}
                          %td{colspan: 2, style: nopad}
                            %h2{style: "#{nopad} font-weight: normal; #{serif} text-align: center; background: #ECE9E2; font-size: 19px; color: #48494e; margin-bottom: 20px;"}
                              Activity from your connections
                        %tr{style: nopad}
                          %td.activity-title{style: "margin: 0; padding: 0 0 0 30px;"}
                            %h2{style: "#{nopad} font-weight: normal; #{serif} font-size: 20px; background: url(#{image_url('email/big-gold-star.png')}) no-repeat left top; padding-left: 30px;"}
                              == Most #{@star_stat_string}
                          %td.activity-avatar{style: "#{nopad} padding-right: 30px;"}
                            %img{alt: "User Avatar", src: image_url(users_image_path(@most[:user])), style: "#{nopad} border: solid 2px #fff; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);"}

                        %tr{style: nopad}
                          %td.activity-message{style: "margin: 0; padding: 10px 20px 20px 30px;"}
                            %p{style: "#{nopad} #{sans_serif} font-size: 14px; line-height: 22px;"}
                              %a{href: badge_url(@most[:user].username, @issue), style: "#{nopad} color: #3d8dcc;"}
                                = @most[:user].short_name
                              had
                              = @most[@star_stat] > 1 ? "#{@most[@star_stat]}" : "most"
                              ==#{@star_stat_string} this week.
                              = succeed "." do
                                %a{href: badge_url(@most[:user].username, @issue), style: "#{nopad} color: #3d8dcc;"}
                                  == View #{@most[:user].username}'s profile
              - unless @team.nil?
                %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #fff;", width: 600}
                  %tr{style: nopad}
                    %td{style: nopad}
                      %table.team{border: 0, cellpadding: 0, cellspacing: 0, style: "#{nopad} width: 520px; border: #cbc9c4 solid 2px; -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden;"}
                        %tr.title{style: "#{nopad} height: 50px; line-height: 50px;"}
                          %td{colspan: 2, style: nopad}
                            %h2{style: "#{nopad} font-weight: normal; #{serif} text-align: center; background: #ECE9E2; font-size: 19px; color: #48494e; margin-bottom: 20px;"}
                              Featured engineering team
                        %tr{style: nopad}
                          %td.team-avatar{style: "margin: 0; padding: 10px 0 30px 20px; width: 120px;"}
                            %img{alt: 'Team Avatar', height: 89, src: image_url(@team.avatar_url), style: "#{nopad} border: solid 3px #eaeaea;", width: 89}
                          %td.job-info{style: 'margin: 0; padding: 25px;'}
                            %h2{style: "#{nopad} font-weight: normal; #{serif} font-size: 24px; line-height: 22px; margin-bottom: 6px;"}
                              = @team.name
                            %h3{style: "#{nopad} font-weight: normal; #{serif} font-size: 16px; line-height: 22px; margin-bottom: 6px;"}
                              = truncate(@team.hiring_message, length: 80)
                            %a{href: teamname_url(@team.slug, @issue) + "#open-positions", style: "#{nopad} color: #3d8dcc;"}
                              = @team.name
                              is looking for
                              = @job.title
                        %tr
                          %td{colspan: 2, style: "width: 100%;"}
                            %table{style: "width: 100%;"}
                              %tr.team-btm{style: nopad}
                                %td.team-members{style: "margin: 0; padding: 25px 15px 25px 25px; width: 158px; border-top: solid 1px #eaeaea; border-right: solid 1px #eaeaea;"}
                                  -@team.most_influential_members_for(@user).first(3).each do |member|
                                    %img{alt: "Avatar", height: 36, src: image_url(users_image_path(member)), style: "#{nopad} border: solid 2px #fff; -webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1); margin-right: 10px;", width: 36}
                                %td.stack{style: "margin: 0; padding: 0 0 0 25px; border-top: solid 1px #eaeaea;"}
                                  %p{style: "#{nopad} #{serif} font-size: 16px; line-height: 22px;"}
                                    = truncate(@team.tags_for_jobs.join(", "), length: 35)
              %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #fff;", width: 600}
                %tr{style: nopad}
                  %td{style: nopad}
                    %table.top-tip{border: 0, cellpadding: 0, cellspacing: 0, style: nopad}
                      %tr{style: nopad}
                        %td.glasses{style: "margin: 0; padding: 0 40px 30px 0;"}
                          %img{alt: "Glasses", height: 114, src: image_url("email/glasses.png"), style: nopad, width: 155}
                        %td.tip{style: "margin: 0; padding: 0 0 30px 0; text-align: right;"}
                          %h2{style: "#{nopad} font-weight: normal; #{serif} color: #99958b; margin-bottom: 10px;"}
                            This weeks top tip:
                          %h3{style: "#{nopad} font-weight: bold; #{sans_serif} font-size: 16px; line-height: 22px; color: #48494E;"}
                            - unless @user.team.nil?
                              -if @user.team.premium?
                                - if @user.team.hiring?
                                  The more popular protips
                                  = @user.team.name
                                  team members author, the more exposure your jobs receive
                                - else
                                  add open positions to your team page and they will get featured here
                              -else
                                Want
                                =@user.team.name
                                featured here?
                                %a{href: employers_url(@issue), style: "#{nopad} color: #3d8dcc;"} add open positions
                            - else
                              Want your team featured here?
                              %a{href: employers_url(@issue), style: "#{nopad} color: #3d8dcc;"} create team

    %table.outside{border: 0, cellpadding: 0, cellspacing: 0, style: "margin: 0 auto; padding: 0 40px 20px 40px; width: 600px; background: #48494e;", width: 600}
      %tr{style: nopad}
        %td{style: "#{nopad} text-align: center"}
          %p.reminder{style: "color: #fff; font-size: 12px; #{sans_serif}  margin-top: 0; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; line-height: 18px;"}
            You're receiving this email because you signed up for Coderwall. We hate spam and make an effort to keep notifications to a minimum.
          %p{style: "color: #c9c9c9; font-size: 12px; #{sans_serif}"}
            %preferences{style: "color: #3ca7dd; text-decoration: none;"}>
              %strong
                %a{ href: 'https://coderwall.com/settings#email', style: 'color: #3ca7dd; text-decoration: none;' }
                  Edit your subscription
            \  |  
            %unsubscribe{style: "color: #3ca7dd; text-decoration: none;"}
              %strong
                %a{href: '%unsubscribe_url%', style: "color: #3ca7dd; text-decoration: none;"}
                  Unsubscribe instantly