Header: remove CSS that was only used for legacy header (second attempt)

apps/style/craft/style.scss

@@ -196,10 +196,6 @@ body {
   -ms-touch-action: none;
 }
 
-.header-wrapper {
-  background-color: $original-background-color;
-}
-
 .workspace-header {
   background-color: $blockly-header;
 }

dashboard/app/assets/stylesheets/application.scss

@@ -173,79 +173,6 @@ img.video_thumbnail {
 }
 
 .header-wrapper {
-  &.hide_on_mobile,
-  header.hide_on_mobile {
-    @media screen and (max-device-width: 500px) {
-      display: none;
-    }
-  }
-
-  padding-top: 15px;
-  min-height: 70px;
-  position: relative;
-
-  .header {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: 44px;
-    background-color: $bkgnd_color;
-    color: $header_text;
-    a:link {
-      color: $header_text;
-    }
-    a:visited {
-      color: $header_text;
-    }
-
-    .small_font_on_tablet {
-      @media screen and (max-width: 1024px) {
-        font-size: 13px;
-      }
-    }
-  }
-
-  .header_status_bar {
-    background-color: $dark_color;
-    border-radius: 5px;
-    min-width: 20px;
-    padding: 3px;
-    font-size: 16px;
-    display: inline-block;
-  }
-
-  a.header_status_bar:hover {
-    background-color: $orange;
-  }
-
-  .header_text {
-    font-size: 16px;
-    display: inline-block;
-  }
-
-  .header_button {
-    &.header_button_light {
-      background-color: $lightish_teal;
-    }
-    display: inline-block;
-    background-color: $orange;
-    border-radius: 5px;
-    padding: 7px 14px;
-    font-size: 14px;
-    line-height: 20px;
-    box-sizing: border-box;
-    cursor: pointer;
-    a:hover {
-      text-decoration: none;
-      background-color: $orange;
-    }
-  }
-
-  .project_updated_at {
-    font-size: 10px;
-  }
-}
-
-.header2-wrapper {
   &.hide_on_mobile,
   .hide_on_mobile {
     @media screen and (max-device-width: 500px) {

dashboard/app/views/layouts/_header.html.haml

@@ -9,7 +9,7 @@
 
   user_type = nil
 
-  header_class = 'header2-wrapper'
+  header_class = 'header-wrapper'
   header_class = header_class + (show_bug_links ? ' feedback-bug-links' : '')
   header_class = header_class + (script_level || level ? ' hide_on_mobile' : '')
 

pegasus/sites.v3/code.org/layouts/default.haml

@@ -3,7 +3,7 @@
 .wrapper
   = view :unsupported_browser
   -if request.site == 'code.org'
-    = view :header2
+    = view :header
   -elsif header['theme'] == 'responsive'
     #desktop-header.desktop-feature
       = view :header

pegasus/sites.v3/code.org/layouts/wide.haml

@@ -3,10 +3,7 @@
 .wrapper
   = view :unsupported_browser
   -unless header['theme'] == 'responsive_wide'
-    - if request.site == 'code.org'
-      = view :header2
-    - else
-      = view :header
+    = view :header
 
   -containerClass = "container_fullwidth"
 

pegasus/sites.v3/code.org/public/learn/index.haml

@@ -70,7 +70,7 @@ style_min: false
 
 #fullwidth
   - if request.site == 'code.org'
-    = view :header2
+    = view :header
   - else
     #desktop-header.desktop-feature
       = view :header, variant: "desktop"

pegasus/sites.v3/code.org/public/learn/robotics.haml

@@ -49,7 +49,7 @@ social:
 
 #fullwidth{style: "background-color: #2799a4"}
   - if request.site == 'code.org'
-    = view :header2
+    = view :header
   - else
     #desktop-header.desktop-feature
       = view :header, variant: "desktop"

pegasus/sites.v3/code.org/views/header.haml

@@ -1,23 +1,61 @@
-#pageheader-wrapper
-  - pageheader_class = request.path_info == "/" ? "pageheader-translucent" : ""
-  #pageheader{class: pageheader_class}
-    .content
-      #left
-        %a{:href=>"/"}
-          %img#logo{:src=>'/images/logo.png'}
-      #right
-        #sign_in_or_user{:style=>'display:block; float: right; width: 80px; margin: .6875em 0 0 30px;'}
-          =view :sign_in_or_user
-        - if page_translated? && !partner_site?
-        - else
-          .desktop-feature
-            #headerlinks
-              %a.headerlink{:href=>"/student"}LEARN
-              %a.headerlink{:href=>"/educate"}TEACH
-              %a.headerlink{:href=>"/promote"}STATS
-              %a.headerlink{:href=>"/help"}HELP US
-              %a.headerlink{:href=>"/about"}ABOUT
-    #clear{:style=>'clear:both'}
-    #loc.desktop-feature
-      -if banner = @header['banner']
-        =view banner
+:ruby
+  cookie_key = '_user_type' + (rack_env == :production ? '' : "_#{rack_env.to_s}")
+  user_type = request.cookies[cookie_key]
+
+  hamburger_options = {}
+  hamburger_options[:level] = nil
+  hamburger_options[:script_level] = nil
+  hamburger_options[:user_type] = user_type
+  hamburger_options[:language] = request.language
+  hamburger_options[:show_gallery] = true
+  hamburger_options[:loc_prefix] = "header_"
+  hamburger_options[:page_mode] = request.cookies['pm']
+
+  header_contents_options = {}
+  header_contents_options[:user_type] = user_type
+  header_contents_options[:language] = request.language
+  header_contents_options[:loc_prefix] = "header_"
+  header_contents_options[:page_mode] = request.cookies['pm']
+
+  require 'cdo/hamburger'
+
+  # A note on the use of language_dir_class below:
+  #
+  # Ideally, Pegasus would have <head dir="rtl"> on all pages as the dashboard
+  # does.  It would even be helpful if it had it on pages that are localized.
+  # As it is, dir="rtl" is not featured anywhere.  To make the header look the
+  # same as on dashboard, when in an RTL language, we wrap the header in this
+  # locale_dir_class and use CSS to make the header's options display RTL when
+  # at desktop width.
+
+=inline_css 'header.css'
+=inline_css 'hamburger.css'
+
+#language_dir{class: language_dir_class}
+  #pageheader-wrapper
+    #pageheader
+      .content
+        #left
+          #logo-wrapper
+            - if current_user
+              %a{:href=>CDO.studio_url("/home")}
+                %img#logo{:src=>'/images/logo.png'}
+            - else
+              %a{:href=>CDO.code_org_url}
+                %img#logo{:src=>'/images/logo.png'}
+          #headerlinks.desktop-feature
+            - Hamburger.get_header_contents(header_contents_options).each do |entry|
+              %a.headerlink{id: entry[:id], href: entry[:url]}= entry[:title]
+
+        #right
+          #sign_in_or_user{:style=>'display:block; float: left; margin: .6875em 0 0 30px;'}
+            =view :sign_in_or_user
+          = view :hamburger, hamburger_options
+
+      #clear{:style=>'clear:both'}
+
+      #loc.desktop-feature
+        -if banner = @header['banner']
+          =view banner
+
+#clear{:style=>'clear:both'}