From 230ea1e6500c5446b458d7f70a07684a8966c013 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Wed, 28 Mar 2012 14:56:32 -0400
Subject: [PATCH] Added fix for sequence nav bug

---
 static/css/application.css                   | 60 ++++++++++++--------
 templates/sass/courseware/_sequence-nav.scss | 39 ++++++++-----
 templates/sass/layout/_layout.scss           |  2 +-
 3 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/static/css/application.css b/static/css/application.css
index 5c9166eaa3..978483be7a 100644
--- a/static/css/application.css
+++ b/static/css/application.css
@@ -449,8 +449,7 @@ html body section.main-content, html body section.outside-app {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  margin-top: 3px;
-  overflow: hidden; }
+  margin-top: 3px; }
 @media print {
   html body section.main-content, html body section.outside-app {
     border-bottom: 0;
@@ -2934,14 +2933,25 @@ section.course-content div.video-subtitles.closed ol.subtitles {
   height: 0; }
 
 nav.sequence-nav {
-  margin-bottom: 22.652px; }
+  margin-bottom: 22.652px;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box; }
 nav.sequence-nav ol {
-  display: table-row;
-  float: left;
-  width: 90.611%;
-  position: relative; }
+  display: table;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding-right: 8.696%;
+  border-bottom: 1px solid #e4d080; }
 nav.sequence-nav ol li {
-  display: table-cell; }
+  min-width: 20px;
+  display: table-cell;
+  border-left: 1px solid #e4d080; }
+nav.sequence-nav ol li:first-child {
+  border-left: none; }
 nav.sequence-nav ol li .inactive, nav.sequence-nav ol li a.seq_video_inactive, nav.sequence-nav ol li a.seq_other_inactive, nav.sequence-nav ol li a.seq_vertical_inactive, nav.sequence-nav ol li a.seq_problem_inactive {
   background-repeat: no-repeat; }
 nav.sequence-nav ol li .inactive:hover, nav.sequence-nav ol li a.seq_video_inactive:hover, nav.sequence-nav ol li a.seq_other_inactive:hover, nav.sequence-nav ol li a.seq_vertical_inactive:hover, nav.sequence-nav ol li a.seq_problem_inactive:hover {
@@ -2965,16 +2975,12 @@ nav.sequence-nav ol li .active:hover, nav.sequence-nav ol div.header-wrapper hea
   background-color: #fff;
   background-position: center; }
 nav.sequence-nav ol li a {
-  -webkit-box-shadow: 1px 0 0 white;
-  -moz-box-shadow: 1px 0 0 white;
-  box-shadow: 1px 0 0 white;
   background-position: center center;
   border: none;
-  border-right: 1px solid #eddfaa;
   cursor: pointer;
-  padding: 15px 4px 14px;
-  width: 28px;
+  display: block;
   height: 17px;
+  padding: 15px 0 14px;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -2994,7 +3000,8 @@ nav.sequence-nav ol li a {
   -moz-transition-delay: 0;
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
-  transition-delay: 0; }
+  transition-delay: 0;
+  width: 100%; }
 nav.sequence-nav ol li a.seq_video_inactive {
   background-image: url("/static/images/sequence-nav/video-icon-normal.png");
   background-position: center; }
@@ -3075,25 +3082,28 @@ nav.sequence-nav ol li p::after {
   transform: rotate(45deg);
   width: 10px; }
 nav.sequence-nav ul {
-  float: right;
   margin-right: 1px;
   width: 8.696%;
-  display: table-row; }
+  position: absolute;
+  top: 0;
+  right: 0; }
 nav.sequence-nav ul li {
-  display: table-cell; }
+  width: 50%;
+  float: left; }
 nav.sequence-nav ul li.prev a, nav.sequence-nav ul li.next a {
-  -webkit-box-shadow: inset 1px 0 0 #faf7e9;
-  -moz-box-shadow: inset 1px 0 0 #faf7e9;
-  box-shadow: inset 1px 0 0 #faf7e9;
   background-color: #f2e7bf;
   background-position: center center;
   background-repeat: no-repeat;
   border-left: 1px solid #e4d080;
+  -webkit-box-shadow: inset 1px 0 0 #faf7e9;
+  -moz-box-shadow: inset 1px 0 0 #faf7e9;
+  box-shadow: inset 1px 0 0 #faf7e9;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   cursor: pointer;
-  padding: 0 4px;
-  text-indent: -9999px;
-  width: 38px;
-  display: block; }
+  display: block;
+  text-indent: -9999px; }
 nav.sequence-nav ul li.prev a:hover, nav.sequence-nav ul li.next a:hover {
   text-decoration: none;
   color: #7e691a;
diff --git a/templates/sass/courseware/_sequence-nav.scss b/templates/sass/courseware/_sequence-nav.scss
index 056311521e..0ddad37738 100644
--- a/templates/sass/courseware/_sequence-nav.scss
+++ b/templates/sass/courseware/_sequence-nav.scss
@@ -1,19 +1,28 @@
 nav.sequence-nav {
   @extend .topbar;
   margin-bottom: $body-line-height;
+  position: relative;
+  @include box-sizing(border-box);
 
   ol {
-    display: table-row;
-    float: left;
-    width: flex-grid(8,9) + flex-gutter();
-    position: relative;
+    display: table;
+    width: 100%;
+    @include box-sizing(border-box);
+    padding-right: flex-grid(1, 9);
+    border-bottom: 1px solid darken($cream, 20%);
 
     a {
       @extend .block-link;
     }
 
     li {
+      min-width: 20px;
       display: table-cell;
+      border-left: 1px solid darken($cream, 20%);
+      // @include box-shadow(1px 0 0 lighten($cream, 10%));
+      &:first-child {
+        border-left: none;
+      }
 
       .inactive {
         background-repeat: no-repeat;
@@ -46,15 +55,14 @@ nav.sequence-nav {
       }
 
       a {
-        @include box-shadow(1px 0 0 #fff);
         background-position: center center;
         border: none;
-        border-right: 1px solid darken($cream, 10%);
         cursor: pointer;
-        padding: 15px 4px 14px;
-        width: 28px;
+        display: block;
         height: 17px;
+        padding: 15px 0 14px;
         @include transition(all, .4s, $ease-in-out-quad);
+        width: 100%;
 
         // @media screen and (max-width: 800px) {
           //   padding: 12px 8px;
@@ -162,27 +170,28 @@ nav.sequence-nav {
   }
 
   ul {
-    float: right;
     margin-right: 1px;
     width: flex-grid(1, 9);
-    display: table-row;
+    position: absolute;
+    top: 0;
+    right: 0;
 
     li {
-      display: table-cell;
+      width: 50%;
+      float: left;
 
       &.prev, &.next {
 
         a {
-          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
           background-color: darken($cream, 5%);
           background-position: center center;
           background-repeat: no-repeat;
           border-left: 1px solid darken(#f6efd4, 20%);
+          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+          @include box-sizing(border-box);
           cursor: pointer;
-          padding: 0 4px;
-          text-indent: -9999px;
-          width: 38px;
           display: block;
+          text-indent: -9999px;
 
           &:hover {
             text-decoration: none;
diff --git a/templates/sass/layout/_layout.scss b/templates/sass/layout/_layout.scss
index a2e7a355c2..1cc9e2cdd1 100644
--- a/templates/sass/layout/_layout.scss
+++ b/templates/sass/layout/_layout.scss
@@ -17,7 +17,7 @@ html {
       @include box-shadow(0 0 4px #dfdfdf);
       @include box-sizing(border-box);
       margin-top: 3px;
-      overflow: hidden;
+      // overflow: hidden;
 
       @media print {
         border-bottom: 0;