Last active
January 16, 2018 17:44
-
-
Save davebeach/76f7f138be82fa3b4dde777b02592204 to your computer and use it in GitHub Desktop.
Sprint Schedule Timeline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Sprint Schedule</title> | |
<meta name="description" content="Sprint Schedule Timeline"> | |
<meta name="author" content="David Beach"> | |
<link rel="stylesheet" href="css/styles.css?v=1.0"> | |
<!--[if lt IE 9]> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> | |
<![endif]--> | |
<style> | |
// Style and method for timeline comes from W3C https://www.w3schools.com/howto/howto_css_timeline.asp | |
* { | |
box-sizing: border-box; | |
} | |
/* Set a background color */ | |
body { | |
background-color: #474e5d; | |
font-family: Helvetica, sans-serif; | |
} | |
/* The actual timeline (the vertical ruler) */ | |
.timeline { | |
position: relative; | |
max-width: 1200px; | |
margin: 0 auto; | |
} | |
/* The actual timeline (the vertical ruler) */ | |
.timeline::after { | |
content: ''; | |
position: absolute; | |
width: 6px; | |
background-color: white; | |
top: 0; | |
bottom: 0; | |
left: 50%; | |
margin-left: -3px; | |
} | |
/* Container around content */ | |
.container { | |
padding: 10px 40px; | |
position: relative; | |
background-color: inherit; | |
width: 50%; | |
} | |
/* The circles on the timeline */ | |
.container::after { | |
content: ''; | |
position: absolute; | |
width: 25px; | |
height: 25px; | |
right: -17px; | |
background-color: white; | |
border: 4px solid #FF9F55; | |
top: 15px; | |
border-radius: 50%; | |
z-index: 1; | |
} | |
/* Place the container to the left */ | |
.left { | |
left: 0; | |
} | |
/* Place the container to the right */ | |
.right { | |
left: 50%; | |
} | |
/* Add arrows to the left container (pointing right) */ | |
.left::before { | |
content: " "; | |
height: 0; | |
position: absolute; | |
top: 22px; | |
width: 0; | |
z-index: 1; | |
right: 30px; | |
border: medium solid white; | |
border-width: 10px 0 10px 10px; | |
border-color: transparent transparent transparent white; | |
} | |
/* Add arrows to the right container (pointing left) */ | |
.right::before { | |
content: " "; | |
height: 0; | |
position: absolute; | |
top: 22px; | |
width: 0; | |
z-index: 1; | |
left: 30px; | |
border: medium solid white; | |
border-width: 10px 10px 10px 0; | |
border-color: transparent white transparent transparent; | |
} | |
/* Fix the circle for containers on the right side */ | |
.right::after { | |
left: -16px; | |
} | |
/* The actual content */ | |
.content { | |
padding: 20px 30px; | |
background-color: white; | |
position: relative; | |
border-radius: 6px; | |
} | |
/* Media queries - Responsive timeline on screens less than 600px wide */ | |
@media all and (max-width: 600px) { | |
/* Place the timelime to the left */ | |
.timeline::after { | |
left: 31px; | |
} | |
/* Full-width containers */ | |
.container { | |
width: 100%; | |
padding-left: 70px; | |
padding-right: 25px; | |
} | |
/* Make sure that all arrows are pointing leftwards */ | |
.container::before { | |
left: 60px; | |
border: medium solid white; | |
border-width: 10px 10px 10px 0; | |
border-color: transparent white transparent transparent; | |
} | |
/* Make sure all circles are at the same spot */ | |
.left::after, .right::after { | |
left: 15px; | |
} | |
/* Make all right containers behave like the left ones */ | |
.right { | |
left: 0%; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<h1>Sprint Timeline for Commercial Project Track</h1> | |
<div class="timeline"> | |
<div class="container left"> | |
<div class="content"> | |
<h2>Sprint #1</h2> | |
<h5>Jan 22 to Feb 2</h5> | |
<ul> | |
<li>Install CPM</li> | |
<li>Fiori Decoupled NW</li> | |
<li>HANA XSA</li> | |
<li>CI Components</li> | |
<ul> | |
</div> | |
</div> | |
<div class="container right"> | |
<div class="content"> | |
<h2>Sprint #2</h2> | |
<h5>Feb 5 to 23</h5> | |
<ul> | |
<li>Process: Opportunity to Project Estimate</li> | |
<li>CRM Integration/li> | |
<li>Analysis Office Workbook Models</li> | |
<li>Project Team Roles</li> | |
<li>Workflow Approvals for Project Estimate</li> | |
<li>Workflow Handoff from CRM to CPM and CPM to CPQ</li> | |
<li>Alerts, Actions to Support Process</li> | |
<ul> | |
</div> | |
</div> | |
<div class="container left"> | |
<div class="content"> | |
<h2>Sprint #3</h2> | |
<h5>Feb 26 to March 9</h5> | |
<ul> | |
<li>Process: Project Templates, Customer Acceptance and Project Setup</li> | |
<li>Project Structures</li> | |
<li>Sale Products</li> | |
<li>Project Types</li> | |
<li>Templates of Tasks Per Product</li> | |
<li>Sales Order</li> | |
<li>Customer Acceptance</li> | |
<li>Auto Create of Project Structures</li> | |
<ul> | |
</div> | |
</div> | |
<div class="container right"> | |
<div class="content"> | |
<h2>Sprint #4</h2> | |
<h5>March 12 to 23</h5> | |
<ul> | |
<li>Process: Issue Management, Risk Management and Change Orders</li> | |
<li>Issues Management Apps</li> | |
<li>Risk Management Apps</li> | |
<li>Change Orders</li> | |
<li>Workflow to Process Issues, Risks Change Orders</li> | |
<li>Alerts, Actions to Support Process</li> | |
<ul> | |
</div> | |
</div> | |
<div class="container left"> | |
<div class="content"> | |
<h2>Sprint #5</h2> | |
<h5>March 26 to April 6</h5> | |
<ul> | |
<li>Process: Project Billing, Revenue, Revenue Recognition</li> | |
<li>Time and Materials</li> | |
<li>Fixed Price with Milestone Billing</li> | |
<li>Periodic Billing</li> | |
<li>Delivery Related Billing</li> | |
<li>Booking of Revenue</li> | |
<li>Revenue Recognition</li> | |
<ul> | |
</div> | |
</div> | |
<div class="container right"> | |
<div class="content"> | |
<h2>Sprint #6</h2> | |
<h5>April 9 to 27</h5> | |
<ul> | |
<li>Process: Misc Supporting Processes</li> | |
<li>Scheduling</li> | |
<li>Forecasting, ETC, Earned Value, POC</li> | |
<li>Project Procurement</li> | |
<li>Material Components</li> | |
<li>Reporting and Dashboards</li> | |
<ul> | |
</div> | |
</div> | |
</div> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment