Commits

Tatham Oddie committed 084527a

Prevent the timeline from wrapping when the content is wider than the viewport

Comments (0)

Files changed (2)

Web/Content/timeline.css

     color: #aaa;
 }
 
+div.timeline-viewport {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 4000px;
+}
+
 ol.timeline {
     position: absolute;
     top: 30px;
+    bottom: 0;
     right: 0;
-    bottom: 0;
     list-style-type: none;
     min-height: 200px;
 

Web/Views/Timeline/Index.cshtml

     ViewBag.IsAppPage = true;
 }
 
-<ol class="timeline">
-    <li>
-        <span class="location-name">Sydney</span>
-        <ol>
-            <li class="flight-departure">
-                <span class="tile">
-                    <span class="activity">Took off from </span> SYD
-                </span>
-                <data value="-33">33° S</data>
-            </li>
-        </ol>
-    </li>
-    <li>
-        <span class="location-name">Cairns</span>
-        <ol>
-            <li class="flight-arrival">
-                <span class="tile">
-                    <span class="activity">Landed in </span> CNS
-                </span>
-                <data value="-17">17° S</data>
-            </li>
-            <li class="fitness-run">
-                <span class="tile">
-                    <span class="activity">Ran </span> 4.22km
-                </span>
-                <data value="310">310 Cal, 86m climb</data>
-            </li>
-            <li class="flight-departure">
-                <span class="tile">
-                    <span class="activity">Took off from </span> CNS
-                </span>
-                <data value="-17">17° S</data>
-            </li>
-        </ol>
-    </li>
-    <li>
-        <span class="location-name">Sydney</span>
-        <ol>
-            <li class="flight-arrival">
-                <span class="tile">
-                    <span class="activity">Landed in </span> SYD
-                </span>
-                <data value="-33">33° S</data>
-            </li>
-            <li class="fitness-run">
-                <span class="tile">
-                    <span class="activity">Ran </span> 4.01km
-                </span>
-                <data value="297">297 calories, 84m climb</data>
-            </li>
-            <li class="weigh-in">
-                <span class="tile">
-                    <span class="activity">Weighed in at </span> 66.1kg
-                </span>
-                <data value="11.6">11.6% fat, 21.6 BMI</data>
-            </li>
-            <li class="flight-departure">
-                <span class="tile">
-                    <span class="activity">Took off from </span> SYD
-                </span>
-                <data value="-33">33° S</data>
-            </li>
-        </ol>
-    </li>
-    <li>
-        <span class="location-name">Los Angeles</span>
-        <ol>
-            <li class="flight-arrival">
-                <span class="tile">
-                    <span class="activity">Landed in </span> LAX
-                </span>
-                <data value="34">34° N</data>
-            </li>
-            <li class="now">
-                <time class="time-night">21:20</time>
-                <span class="weather">
-                    <span class="atmospheric-condition atmospheric-condition-sunny">Sunny</span>
-                    <span class="temperature">24°</span>
-                </span>
-            </li>
-        </ol>
-    </li>
-</ol>
+<div class="timeline-viewport">
+    <ol class="timeline">
+        <li>
+            <span class="location-name">Sydney</span>
+            <ol>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.01km
+                    </span>
+                    <data value="297">297 calories, 84m climb</data>
+                </li>
+                <li class="weigh-in">
+                    <span class="tile">
+                        <span class="activity">Weighed in at </span> 66.1kg
+                    </span>
+                    <data value="11.6">11.6% fat, 21.6 BMI</data>
+                </li>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.22km
+                    </span>
+                    <data value="310">310 Cal, 86m climb</data>
+                </li>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.01km
+                    </span>
+                    <data value="297">297 calories, 84m climb</data>
+                </li>
+                <li class="weigh-in">
+                    <span class="tile">
+                        <span class="activity">Weighed in at </span> 66.1kg
+                    </span>
+                    <data value="11.6">11.6% fat, 21.6 BMI</data>
+                </li>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.22km
+                    </span>
+                    <data value="310">310 Cal, 86m climb</data>
+                </li>
+                <li class="flight-departure">
+                    <span class="tile">
+                        <span class="activity">Took off from </span> SYD
+                    </span>
+                    <data value="-33">33° S</data>
+                </li>
+            </ol>
+        </li>
+        <li>
+            <span class="location-name">Cairns</span>
+            <ol>
+                <li class="flight-arrival">
+                    <span class="tile">
+                        <span class="activity">Landed in </span> CNS
+                    </span>
+                    <data value="-17">17° S</data>
+                </li>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.22km
+                    </span>
+                    <data value="310">310 Cal, 86m climb</data>
+                </li>
+                <li class="flight-departure">
+                    <span class="tile">
+                        <span class="activity">Took off from </span> CNS
+                    </span>
+                    <data value="-17">17° S</data>
+                </li>
+            </ol>
+        </li>
+        <li>
+            <span class="location-name">Sydney</span>
+            <ol>
+                <li class="flight-arrival">
+                    <span class="tile">
+                        <span class="activity">Landed in </span> SYD
+                    </span>
+                    <data value="-33">33° S</data>
+                </li>
+                <li class="fitness-run">
+                    <span class="tile">
+                        <span class="activity">Ran </span> 4.01km
+                    </span>
+                    <data value="297">297 calories, 84m climb</data>
+                </li>
+                <li class="weigh-in">
+                    <span class="tile">
+                        <span class="activity">Weighed in at </span> 66.1kg
+                    </span>
+                    <data value="11.6">11.6% fat, 21.6 BMI</data>
+                </li>
+                <li class="flight-departure">
+                    <span class="tile">
+                        <span class="activity">Took off from </span> SYD
+                    </span>
+                    <data value="-33">33° S</data>
+                </li>
+            </ol>
+        </li>
+        <li>
+            <span class="location-name">Los Angeles</span>
+            <ol>
+                <li class="flight-arrival">
+                    <span class="tile">
+                        <span class="activity">Landed in </span> LAX
+                    </span>
+                    <data value="34">34° N</data>
+                </li>
+                <li class="now">
+                    <time class="time-night">21:20</time>
+                    <span class="weather">
+                        <span class="atmospheric-condition atmospheric-condition-sunny">Sunny</span>
+                        <span class="temperature">24°</span>
+                    </span>
+                </li>
+            </ol>
+        </li>
+    </ol>
+</div>
 
 <script type="text/javascript">
     var timeline = $('ol.timeline');