src/experiments/templates/experiments/switch.html

   1 {% if tests %}
   2   <div id="test-switcher" class="{% if explicit %}test-switcher-explicit{% endif %}">
   3     <div class="test-switcher-content">
   4       {% for test, currval in tests %}
   5         {% for cohort in test.cohorts %}
   6           {% if cohort.value != currval %}
   7             <a onclick="document.cookie='AB_{{test.slug}}={{cohort.value}}; path=/'; window.location.reload(true);">{{ cohort.name }}</a>
   8           {% endif %}
   9         {% endfor %}
  10       {% endfor %}
  11     </div>
  12   </div>
  13
  14
  15   <style>
  16    #test-switcher {
  17        background: white;
  18        color: black;
  19        position: absolute;
  20        top: 0;
  21        left: 0;
  22        padding-left: 1.5em;
  23        height: 2em;
  24    }
  25    #test-switcher:before {
  26        content: ">";
  27        display: inline-block;
  28        vertical-align: top;
  29        margin-left: -1em;
  30        transition: opacity .2s;
  31        line-height: 2em;
  32    }
  33    #test-switcher:hover .test-switcher-content {
  34        width: 200px;
  35    }
  36    #test-switcher:hover:before,
  37    .test-switcher-explicit:before {
  38        opacity: 0;
  39    }
  40    .test-switcher-content {
  41        width: 0;
  42        overflow: hidden;
  43        transition: width .2s;
  44        display: inline-block;
  45        line-height: 2em;
  46        white-space: nowrap;
  47    }
  48    .test-switcher-explicit .test-switcher-content {
  49        width: 200px;
  50    }
  51    .test-switcher-content a {
  52        cursor: pointer;
  53    }
  54   </style>
  55 {% endif %}