structure changes to the error view

app/assets/stylesheets/pages/_home.scss

@@ -254,6 +254,7 @@
       width: 821px;
       margin: auto;
       .item {
+        height: 640px;
         margin: 5px auto 0 auto;
         .carousel-caption {
           position: relative;
@@ -391,6 +392,30 @@
   }
 }
 
+@media (max-width: 1200px) {
+  #slider .carousel .carousel-inner .item {
+    height: 486px;
+  }
+}
+
+@media (max-width: 992px) {
+  #slider .carousel .carousel-inner .item {
+    height: 426px;
+  }
+}
+
+@media (max-width: 768px) {
+  #slider .carousel .carousel-inner .item {
+    height: 426px;
+  }
+}
+
+@media (max-width: 480px) {
+  #slider .carousel .carousel-inner .item {
+    height: 325px;
+  }
+}
+
 @media (max-width: 768px) {
   #slider .carousel .carousel-inner .item img {
     border-radius: 4px;
@@ -709,61 +734,116 @@
 }
 
 #social {
-  padding: 60px 0;
+  padding: 15px 0 15px 0;
   text-align: center;
-  h3 {
-    padding-bottom: 20px;
-  }
-  p {
-    margin-bottom: 50px;
-  }
-  a {
-    display: inline-block;
-    width: 85px;
-    height: 85px;
-    border-radius: 45px;
-    border: 2px solid white;
-    &.twitter {
-      border-color: #40a7ff;
-      background: asset-url("twitter.png") no-repeat top;
-      &:hover {
-        background-color: #40a7ff;
-        background-position: bottom;
+  ul{
+    li {
+      float: left;
+      list-style-type: none;
+      padding: 5px;
+      position:relative;
+      left:20%;
+      margin-right: 5%;
+      img{
+        width: 48px;
+        height: 48px;
       }
     }
-    &.facebook {
-      border-color: #3b5998;
-      background: asset-url("facebook.png") no-repeat top;
-      margin-right: 100px;
-      &:hover {
-        background-color: #3b5998;
-        background-position: bottom;
+  }
+  #links{
+    h3 {
+      padding-bottom: 20px;
+    }
+    p {
+      margin-bottom: 30px;
+    }
+    a {
+      display: inline-block;
+      width: 85px;
+      height: 85px;
+      border-radius: 45px;
+      border: 2px solid white;
+      &.github {
+        border-color: #000000;
+        background: asset-url("github-black.png") no-repeat center;
+        margin-right: 15px;
+        &:hover {
+          background: asset-url("github-white.png") no-repeat center;
+          background-color: #000000;
+        }
+      }
+      &.dribble {
+        border-color: #F26798;
+        background: asset-url("dribble-pink.png") no-repeat center;
+        margin-right: 15px;
+        &:hover {
+          background: asset-url("dribble-white.png") no-repeat center;
+          background-color: #F26798;
+        }
+      }
+      &.twitter {
+        border-color: #40a7ff;
+        background: asset-url("twitter.png") no-repeat top;
+        &:hover {
+          background-color: #40a7ff;
+          background-position: bottom;
+        }
+      }
+      &.facebook {
+        border-color: #3b5998;
+        background: asset-url("facebook.png") no-repeat top;
+        margin-right: 15px;
+        &:hover {
+          background-color: #3b5998;
+          background-position: bottom;
+        }
       }
     }
   }
-}
-
-@media (max-width: 992px) {
-  #social {
-    padding: 20px 0 40px 0;
+  #integrations{
+    text-align: center;
+    ul{
+      padding-bottom: 110px;
+      margin-left: 26%;
+    }
+    h3{
+      padding-bottom: 10px;
+    }
+  }
+  #support{
+    padding-bottom: 170px;
+    h3{
+      padding-bottom: 10px;
+    }
   }
 }
 
 @media (max-width: 992px) {
-  #social h3 {
-    padding: 0;
+  #social #integrations {
+    padding-bottom: 30px;
   }
 }
 
 @media (max-width: 992px) {
-  #social p {
-    margin-bottom: 40px;
+  #social #support {
+    padding-bottom: 120px;
+    h3{
+      pading-bottom: 10px;
+    }
+    ul{
+      float: left;
+    }
   }
 }
 
-@media (max-width: 768px) {
-  #social a.facebook {
-    margin-right: 40px;
+@media (max-width: 992px) {
+  #social #links{
+    h3{
+      padding: 0;
+    }
+    p{
+      margin-bottom: 40px;
+    }
   }
 }
 

app/views/errors/_overview.html.haml

@@ -2,31 +2,7 @@
   - max_value = @chart_data.values.max
   = line_chart @chart_data , id: "chart", height: "200px", label: "Occurences", colors: ["black", "#000"], min: 0, max: max_value > 0 ? max_value : 10
 .row
-  .col-sm-7.col-md-8
-    .panel.panel-default.exception
-      .panel-heading Exception
-      - valid_stacktrace = @issue.get_platform_frames && @issue.get_platform_frames.present?
-      .panel-body{ class: "#{valid_stacktrace ? 'expand-box' : ''}" }
-        - if valid_stacktrace
-          #frame.accordion
-            - @issue.get_platform_frames.each_with_index do |frame, index|
-              .accordion-group
-                .accordion-heading.heading
-                  %a.accordion-toggle.collapsed{ href: '#' }
-                    %i.icon-fixed-width.fa.fa-plus{"data-parent" => "#frame", "data-toggle" => "collapse", :href => "#collapse#{index}"}
-                    = frame.get_culprit_string(with_lineno: true)
-                .accordion-body.collapse{:style => "height: 0px;", :id => "collapse#{index}"}
-                  .accordion-inner.content
-                    %pre
-                      %code{ class: @error.platform }
-                        = frame._data[:pre_context] ? simple_format(frame._data[:pre_context].join('')).html_safe : ''
-                        = frame._data[:context_line] ? simple_format(frame._data[:context_line], class: 'error-line').html_safe : ''
-                        = frame._data[:post_context] ? simple_format(frame._data[:post_context].join('')).html_safe : ''
-
-        %h5.text-center{style: "display:#{valid_stacktrace ? 'none' : 'block'}"} Missing stacktrace
-        %p.read-more.text-center{style: "display:#{valid_stacktrace ? 'block' : 'none'}"}
-          %a.btn.btn-default{:href => "#"} View full backtrace
-  .col-sm-5.col-md-4.pull-right
+  .col-sm-10.col-md-12
     .panel.panel-default
       .panel-heading Details
       .panel-body
@@ -47,9 +23,32 @@
           %dd= @error.level
           %dt Logger
           %dd= @error.platform
+  - valid_stacktrace = @issue.get_platform_frames && @issue.get_platform_frames.present?
+  - if valid_stacktrace
+    .col-sm-10.col-md-12
+      .panel.panel-default.exception
+        .panel-heading Exception
+        .panel-body.expand-box
+          #frame.accordion
+            - @issue.get_platform_frames.each_with_index do |frame, index|
+              .accordion-group
+                .accordion-heading.heading
+                  %a.accordion-toggle.collapsed{ href: '#' }
+                    %i.icon-fixed-width.fa.fa-plus{"data-parent" => "#frame", "data-toggle" => "collapse", :href => "#collapse#{index}"}
+                    = frame.get_culprit_string(with_lineno: true)
+                .accordion-body.collapse{:style => "height: 0px;", :id => "collapse#{index}"}
+                  .accordion-inner.content
+                    %pre
+                      %code{ class: @error.platform }
+                        = frame._data[:pre_context] ? simple_format(frame._data[:pre_context].join('')).html_safe : ''
+                        = frame._data[:context_line] ? simple_format(frame._data[:context_line], class: 'error-line').html_safe : ''
+                        = frame._data[:post_context] ? simple_format(frame._data[:post_context].join('')).html_safe : ''
+
+          %p.read-more.text-center{style: "display:block"}
+            %a.btn.btn-default{:href => "#"} View full backtrace
   - valid_stacktrace = @issue.breadcrumbs_stacktrace && @issue.breadcrumbs_stacktrace.present?
   - if valid_stacktrace
-    .col-sm-7.col-md-8
+    .col-sm-10.col-md-12
       .panel.panel-default
         .panel-heading Breadcrumbs
         .panel-body{ class: "#{valid_stacktrace ? 'expand-box' : ''}" }
@@ -66,11 +65,10 @@
                       - else
                         %td #{data[:method]} #{data[:url]} [#{data[:status_code]}]
                       %td= Time.at(crumb[:timestamp]).strftime("%H:%M:%S")
-          %h5.text-center{style: "display:#{valid_stacktrace ? 'none' : 'block'}"} Missing breadcrumbs
           %p.read-more.text-center{style: "display:#{valid_stacktrace ? 'block' : 'none'}"}
             %a.btn.btn-default{:href => "#"} View full backtrace
 
-  .col-sm-7.col-md-8
+  .col-sm-10.col-md-12
     .panel.panel-default.broadcast{ :style => "display:#{ @error.website.users.empty? ? 'none' : 'block' }" }
       .panel-heading
         Broadcast

app/views/home/index.html.haml

@@ -34,36 +34,42 @@
         %li.active{"data-slide-to" => "0", "data-target" => "#carousel"}
         %li{"data-slide-to" => "1", "data-target" => "#carousel"}
         %li{"data-slide-to" => "2", "data-target" => "#carousel"}
+        %li{"data-slide-to" => "3", "data-target" => "#carousel"}
       / Wrapper for slides
       .carousel-inner{:role => "listbox"}
         .item.active
           .carousel-caption
-            %h4 Keep your users informed
-            %p Email your users or post a message on your website for them to see
-          %img{:src => asset_path("slides/1.jpg")}/
+            %h4 Keep track of your errors
+            %p Install the client code and we'll store all your application errors
+          %img{:src => asset_path("slides/exceptions_screenshot.png")}/
         .item
           .carousel-caption
-            %h4 Keep your users informed
-            %p Email your users or post a message on your website for them to see
-          %img{:src => asset_path("slides/1.jpg")}/
+            %h4 Stay informed
+            %p Go to an individual error to see more about what happened
+          %img{:src => asset_path("slides/individual_error.png")}/
         .item
           .carousel-caption
-            %h4 Keep your users informed
-            %p Email your users or post a message on your website for them to see
-          %img{:src => asset_path("slides/1.jpg")}/
+            %h4 Check the exception stacktrace
+            %p Click the expand button in the exception panel to see more details about the error
+          %img{:src => asset_path("slides/exception_details.png")}/
+        .item
+          .carousel-caption
+            %h4 Follow the breadcrumbs
+            %p See the action that lead to the error with the breadcrumb feature.
+          %img{:src => asset_path("slides/breadcrumb_screenshot.png")}/
       / Controls
       %span.left.carousel-control{"data-slide" => "prev", :href => "#carousel", :role => "button"}
       %span.right.carousel-control{"data-slide" => "next", :href => "#carousel", :role => "button"}
 #testimonial
   .container
     %h3 Hear what others have to say
-    %img{:src => asset_path("starkface.png")}/
+    %img{:src => asset_path("sharif-bouktila.jpg")}/
     %p
-      %span.name> TONY STARK
+      %span.name> SHARIF BOUKTILA
       ,
-      %span.title CEO @ Stark Industries
+      %span.title Founder at TableBookings
     .div
-    %p Epic Logger is amazing! Helped me fix a stupid error on my website very fast! Not to mention I was notified automatically when the solution was found. Awesome professionalism from these guys. And coming from Tony Stark that says a lot, cause I'm awesome myself so I set the bar for awesomeness pretty high.
+    %p Epic Logger is amazing! Helped me fix a stupid error on my website very fast! Not to mention I was notified automatically when the solution was found. Awesome professionalism from these guys. And coming from Sharif Bouktila that says a lot, cause I'm awesome myself so I set the bar for awesomeness pretty high.
 #steps
   .top
   .container
@@ -87,10 +93,46 @@
           as soon as we find a solution
     %h4 It's that simple!
 #social.container
-  %h3 Keep in touch
-  %p We’d love to keep in touch with you! You can keep up to date with our latest news or just say hello
-  %a.facebook{:href => "http://www.facebook.com/"}
-  %a.twitter{:href => "http://www.twitter.com/"}
+  #integrations
+    %h3 Initial integrations for our 1.1 version
+    %ul
+      %li
+        %img{:src => image_path("intercom.png")}/
+      %li
+        %img{:src => image_path("github-black.png")}/
+  #support
+    %h3 We support all major languages & frameworks
+    .col-md-6.col-sm-6.col-xs-6#direct-support
+      %h4 Direct support
+      %ul
+        %li
+          %img{:src => image_path("icon_javascript.png")}/
+        %li
+          %img{:src => image_path("icon_php.png")}/
+        %li
+          %img{:src => image_path("icon_ruby.png")}/
+        %li
+          %img{:src => image_path("icon_rails.png")}/
+    .col-md-6.col-sm-6.col-xs-6#indirect-support
+      %h4 Indirect support
+      %ul
+        %li
+          %img{:src => image_path("icon_java.png")}/
+        %li
+          %img{:src => image_path("icon_python.png")}/
+        %li
+          %img{:src => image_path("icon_nodejs.png")}/
+        %li
+          %img{:src => image_path("icon_ios.png")}/
+        %li
+          %img{:src => image_path("icon_django.png")}/
+  #links
+    %h3 Keep in touch
+    %p We’d love to keep in touch with you! You can keep up to date with our latest news or just say hello
+    %a.dribble{:href => "https://dribbble.com/epiccoders", :target => '_blank'}
+    %a.github{:href => "https://github.com/EpicCoders", :target => '_blank'}
+    %a.facebook{:href => "https://www.facebook.com/epiccoders.co/", :target => '_blank'}
+    %a.twitter{:href => "https://twitter.com/CoEpic", :target => '_blank'}
 #footer
   .container
     .row
@@ -100,8 +142,9 @@
         %a{:href => "#"} Blog
         %a{:href => "#"} Privacy Policy
       .col-md-7.right
-        %form{:action => "MAILCHIMP_FORM_URL", :method => "post", :target => "_blank"}
+        %form{:action => "//epiclogger.us10.list-manage.com/subscribe/post?u=363b0e3a536f5a9dad6532d40&id=d269d60ed8", :method => "post", :target => "_blank"}
           %label{:for => "email"} Subscribe to our newsletter
-          %input#mce-EMAIL.email{:autocomplete => "off", :name => "EMAIL", :placeholder => "Your e-mail address", :required => "", :type => "email", :value => ""}/
+          %input#mce-EMAIL.required.email{:autocomplete => "off", :name => "EMAIL", :placeholder => "Your e-mail address", :type => "email", :value => ""}/
           %input.btn.btn-primary{:name => "subscribe", :type => "submit", :value => "SUBSCRIBE"}/
+    %p Epiclogger is 100% open source. All features are built in the open and can be followed and contributed to on #{link_to 'GitHub', 'https://github.com/EpicCoders/epiclogger', :target => '_blank', :class => 'btn btn-link btn-xs'}.
     %p Copyright © Epic Logger #{Time.now.strftime("%Y")}. All rights reserved.