Added feature box

layouts/index.html

@@ -59,10 +59,9 @@ fn main() {
       </div>
     </div>
   </div>
-  <div class="row actix-showcase">
-    <div class="col-md-8">
-      <input type="radio" name="feature" id="responders" checked>
-      <div class="feature">
+  <div class="actix-showcase">
+    <div class="col-md-9">
+      <div class="actix-feature" id="responders">
         <h2>Flexible Responders</h2>
         <p>
           Handler functions in actix can return a wide range of objects that
@@ -82,8 +81,7 @@ fn current_temperature(_req: HttpRequest) -> impl Responder {
     Json(Measurement { temperature: 42.3 })
 }` "rust" "" }}
       </div>
-      <input type="radio" name="feature" id="extractors">
-      <div class="feature">
+      <div class="actix-feature" id="extractors">
         <h2>Powerful Extractors</h2>
         <p>
           Actix comes with a powerful extractor system that extracts data
@@ -104,8 +102,7 @@ fn capture_event(evt: Json<Event>) -> impl Responder {
     format!("got event {}", id)
 }` "rust" "" }}
       </div>
-      <input type="radio" name="feature" id="forms">
-      <div class="feature">
+      <div class="actix-feature" id="forms">
         <h2>Easy Form Handling</h2>
         <p>
           Handling multipart/urlencoded form data is easy.  Just define
@@ -123,10 +120,12 @@ fn register(data: Form<Register>) -> impl Responder {
 }` "rust" "" }}
       </div>
     </div>
-    <div class="col-md-4">
-      <label for="responders">flexible responders</label>
-      <label for="extractors">powerful extractors</label>
-      <label for="forms">easy form handling</label>
+    <div class="col-md-3 actix-feature-selectors">
+      <ul>
+        <li class="actix-feature-selector"><a href="#responders">flexible responders</label>
+        <li class="actix-feature-selector"><a href="#extractors">powerful extractors</label>
+        <li class="actix-feature-selector"><a href="#forms">easy form handling</label>
+      </ul>
     </div>
   </div>
 </div>

layouts/partials/footer.html

@@ -13,6 +13,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
     <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/actix.js"></script>
     {{ template "_internal/google_analytics.html" . }}
   </body>
 </html>

static/css/actix.css

@@ -283,8 +283,11 @@ img {
 }
 
 .actix-showcase {
+  overflow: hidden;
   margin-top: 2rem;
   margin-bottom: 2rem;
+  padding: 2rem 1rem 0 1rem;
+  background: #dceaea;
 }
 
 .actix-showcase ul {
@@ -332,6 +335,25 @@ img {
   font-size: 1rem;
 }
 
+.actix-feature-selectors {
+  padding-bottom: 2rem;
+}
+
+.actix-feature-selector {
+  text-align: center;
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+}
+
+.actix-feature-selector.active {
+  background: white;
+}
+
+.actix-feature-selector.active a {
+  color: #333!important;
+  text-decoration: none;
+}
+
 .final-pitch {
   text-align: center;
 }

static/js/actix.js

@@ -0,0 +1,32 @@
+(function() {
+  function activateFeature(sel) {
+    $('div.actix-feature').hide();
+    $(sel).show();
+    $('li.actix-feature-selector').removeClass('active');
+    $('li.actix-feature-selector > a').each(function() {
+      if (this.getAttribute('href') === sel) {
+        $(this).parent().addClass('active');
+      }
+    });
+  }
+
+  function initFeatureSelector() {
+    $('div.actix-feature').hide();
+    var active = $(window.location.hash);
+    if (active.is('div.actix-feature')) {
+      activateFeature(window.location.hash);
+    } else {
+      activateFeature('#' + $('div.actix-feature')[0].id);
+    }
+
+    $('ul li.actix-feature-selector a').on('click', function(evt) {
+      evt.preventDefault();
+      history.replaceState({}, '', evt.target.href);
+      activateFeature(this.getAttribute('href'));
+    });
+  }
+
+  $(function() {
+    initFeatureSelector();
+  });
+})();