Skip to content

Commit 56d0dea

Browse files
HenrikhAbajyanHenrikhAbajyan
committed
ScreenFull page implementation
1 parent f4a8d77 commit 56d0dea

File tree

3 files changed

+280
-7
lines changed

3 files changed

+280
-7
lines changed

‎src/app/_common/sidebar/sidebar.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@
266266

267267
<li {{#is pagename "===" "docs"}}class="active"{{/is}} >
268268
<a href="screenful.html">
269-
<i class="fa fa-bar-chart"></i> Team Metrics <span class="label label-screenful">by Screenful</span>
269+
<i class="fa fa-bar-chart"></i> Agile Metrics <span class="label label-screenful">by Screenful</span>
270270
</a>
271271
</li>
272272

‎src/app/pages/screenful/screenful-page.hbs

Lines changed: 218 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ pagename: screenful
66

77

88
<h1 class="title">
9-
Team Metrics
9+
Agile Metrics
1010
</h1
1111
<p class="title-description">Supercharge your teamwork with <a href="https://screenful.com" target="_blank">Screenful</a>! </p>
1212

@@ -32,5 +32,222 @@ pagename: screenful
3232

3333
{{!-- </div> --}}
3434
{{!-- </div> --}}
35+
36+
{{!----------- Friendly Apps Start-----------}}
37+
38+
<div class="separator"></div>
39+
40+
<div class="container integration-block">
41+
<h3 class="integration-title">Visual dashboards and team status reports</h3>
42+
<div class="row">
43+
44+
<div class="col-md">
45+
<a href="https://screenful.com/dashboard-for-trello/">
46+
<img class="integration-logo" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/5a5df4399140b7de43b55dbe/5a5df43ac8302520d4800cfc/1516203559727/Logo+Trello.png?format=300w'>
47+
</a>
48+
</div>
49+
<div class="col-md">
50+
<a href="https://screenful.com/dashboard-for-jira/">
51+
<img class="integration-logo" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/5a5df4399140b7de43b55dbe/5a5df43a4192027395fe38e7/1516203559724/Logo+Jira.png?format=300w'>
52+
</a>
53+
</div>
54+
<div class="col-md">
55+
<a href="https://screenful.com/dashboard-for-github/">
56+
<img class="integration-logo" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/5a5df4399140b7de43b55dbe/5a5df439e2c483c808155451/1516203559722/Logo+Github.png?format=300w'>
57+
</a>
58+
</div>
59+
<div class="col-md">
60+
<a href="https://screenful.com/dashboard-for-pivotal-tracker/">
61+
<img class="integration-logo" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/5a5df4399140b7de43b55dbe/5a5df43a24a694d7b88631f9/1516203559726/Logo+Pivotal.png?format=300w'>
62+
</a>
63+
</div>
64+
<div class="col-md">
65+
<a href="https://screenful.com/dashboard-for-asana/">
66+
<img class="integration-logo" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/5a5df4399140b7de43b55dbe/5a5df439c8302520d4800cf9/1516203559719/Logo+Asana.png?format=300w'>
67+
</a>
68+
</div>
69+
70+
</div>
71+
<h6 class="subtitle">Click the logo to learn how it works with your tool of choice!</h6>
72+
</div>
73+
74+
{{!----------- Friendly Apps End-----------}}
75+
76+
{{!----------- Benefits Start -----------}}
77+
78+
<div class="separator"></div>
79+
80+
<h3 class="benefits-title">Make better decisions based on facts</h3>
81+
82+
<div class="row">
83+
84+
<div class="col-md-6 screen-colum">
85+
86+
<div class="screen-item">
87+
<a href="https://screenful.com/tour/timing-screen">
88+
<img class="ex-pic" alt="Timing Screen" title="Timing Screen" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/5a5648f5652dea4f3daffdf4/1515604231261/Screen+Shot+2018-01-10+at+19.08.24.png?format=750w'>
89+
</a>
90+
<div class="description">
91+
<a href="https://screenful.com/tour/timing-screen">
92+
<h3 class="title">Track your lead and cycle times</h3>
93+
</a>
94+
<ul>
95+
<li>What is your average lead time for resolving bug/ticket/story?</li>
96+
<li>How quickly tasks are resolved after work is started?</li>
97+
<li>Identify bottlenecks in your workflow.</li>
98+
</ul>
99+
</div>
100+
</div>
101+
102+
</div>
103+
104+
105+
106+
<div class="col-md-6 screen-colum">
107+
108+
<div class="screen-item">
109+
<a href="https://screenful.com/tour/sprint-burndown-chart">
110+
<img class="ex-pic" alt="Sprint Burndown" title="Sprint Burndown" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/5a60d6c90d9297648ea5088e/1516295888512/Sprint.png?format=750w'>
111+
</a>
112+
<div class="description">
113+
<a href="https://screenful.com/tour/sprint-burndown-chart">
114+
<h3 class="title">Track your sprint progress with a burndown chart</h3>
115+
</a>
116+
<ul>
117+
<li>Are you ahead or behind the target?</li>
118+
<li>How many tasks are still not started?</li>
119+
<li>Is your team's velocity stable?</li>
120+
<li>A better sprint burndown chart for your team.</li>
121+
</ul>
122+
</div>
123+
</div>
124+
125+
</div>
126+
127+
<div class="col-md-6 screen-colum">
128+
129+
<div class="screen-item">
130+
<a href="https://screenful.com/tour/milestone-burnup-chart">
131+
<img class="ex-pic" alt="Milestone Burnup Chart" title="Milestone Burnup Chart" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/59c8cf7ac534a585d422227f/1506332547137/Milestone+burnup.png?format=750w'>
132+
</a>
133+
<div class="description">
134+
<a href="https://screenful.com/tour/milestone-burnup-chart">
135+
<h3 class="title">Monitor the progress of your milestones</h3>
136+
</a>
137+
<ul>
138+
<li>How much of work is done vs still todo?</li>
139+
<li>How scope changes affect the projected delivery dates?</li>
140+
<li>What is the most likely delivery date based on recent velocity?</li>
141+
</ul>
142+
</div>
143+
</div>
144+
145+
</div>
146+
147+
<div class="col-md-6 screen-colum">
148+
149+
<div class="screen-item">
150+
<a href="https://screenful.com/tour/task-status-screen/">
151+
<img class="ex-pic" alt="Task Status" title="Task Status" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/59c8d01680bd5e5bb9d9e5d2/1506332699868/Task+status.png?format=750w'>
152+
</a>
153+
<div class="description">
154+
<a href="https://screenful.com/tour/task-status-screen/">
155+
<h3 class="title">Gain a bird's-eye view on your projects</h3>
156+
</a>
157+
<ul>
158+
<li>Are there any overdue tasks?</li>
159+
<li>Does everyone has enough work assigned?</li>
160+
<li>What has been recently completed?</li>
161+
<li>How many tasks were created or completed within last 7 days?</li>
162+
</ul>
163+
</div>
164+
</div>
165+
</div>
166+
167+
<div class="col-md-6 screen-colum">
168+
169+
<div class="screen-item">
170+
<a href="https://screenful.com/tour/open-tasks-chart">
171+
<img class="ex-pic" alt="Open Tasks chart" title="Open Tasks chart" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/59c8d039e45a7c0f49e400e8/1506332735484/Open+tasks.png?format=750w'>
172+
</a>
173+
<div class="description">
174+
<a href="https://screenful.com/tour/open-tasks-chart">
175+
<h3 class="title">Track your work in progress</h3>
176+
</a>
177+
<ul>
178+
<li>How many open tasks there are per label/workflow state/assignee?</li>
179+
<li>How much work is assigned to each individual?</li>
180+
<li>Is your work piling up?</li>
181+
</ul>
182+
</div>
183+
</div>
184+
185+
</div>
186+
187+
<div class="col-md-6 screen-colum">
188+
189+
<div class="screen-item">
190+
<a href="https://screenful.com/tour/completed-tasks-chart">
191+
<img class="ex-pic" alt="Completed Tasks chart" title="Completed Tasks chart" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/59c8d026f09ca4eb6e4e4543/1506332717164/Completed+tasks.png?format=750w'>
192+
</a>
193+
<div class="description">
194+
<a href="https://screenful.com/tour/completed-tasks-chart">
195+
<h3 class="title">Track your completed work</h3>
196+
</a>
197+
<ul>
198+
<li>How much work did you get done?</li>
199+
<li>How is your time distributed between different activities?</li>
200+
<li>What is the trend - are you working more on activities that create value?</li>
201+
</ul>
202+
</div>
203+
</div>
204+
205+
</div>
206+
207+
<div class="col-md-6 screen-colum">
208+
209+
<div class="screen-item">
210+
<a href="https://screenful.com/tour/team-status-screen">
211+
<img class="ex-pic" alt="Team Status screen" title="Team Status screen" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/59c8ce8cf43b55ff86c995d9/1506332307686/Team+Status.png?format=750w'>
212+
</a>
213+
<div class="description">
214+
<a href="https://screenful.com/tour/team-status-screen">
215+
<h3 class="title">See what each team member is currently working on</h3>
216+
</a>
217+
<ul>
218+
<li>Which tasks are currently in progress?</li>
219+
<li>Who's working on what?</li>
220+
<li>What has been recently completed?</li>
221+
<li>Pick your own lists. </li>
222+
</ul>
223+
</div>
224+
</div>
225+
226+
</div>
227+
228+
<div class="col-md-6 screen-colum">
229+
230+
<div class="screen-item">
231+
<a href="https://screenful.com/blog/introducing-custom-chart-create-any-chart-from-your-task-data">
232+
<img class="ex-pic" alt="Custom Chart" title="Custom Chart" src='https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/5a04e16bc83025b2026d7cea/1510269306653/Screen+Shot+2017-11-09+at+23.07.49.png?format=750w'>
233+
</a>
234+
<div class="description">
235+
<a href="https://screenful.com/blog/introducing-custom-chart-create-any-chart-from-your-task-data">
236+
<h3 class="title">Create custom charts</h3>
237+
</a>
238+
<ul>
239+
<li>Create charts from your task data</li>
240+
<li>Tasks or story points done, lead & cycle times, pick the metric you want to see</li>
241+
<li>Group by label, assignee, source board, or by any other property.</li>
242+
</ul>
243+
</div>
244+
</div>
245+
246+
</div>
247+
248+
</div>
249+
250+
{{!----------- Benefits End -----------}}
251+
35252
</section>
36253

‎src/app/pages/screenful/screenful.scss

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@
44
text-align: center;
55
}
66

7-
.card-block {
8-
padding: 40px 100px;
9-
text-align: center;
10-
}
11-
127
.subtitle {
138
margin-bottom: 30px;
149
}
1510

11+
.description {
12+
margin-bottom: 50px;
13+
}
14+
1615
.screenful-logo {
1716
width: 300px;
1817
height: 160px;
@@ -24,4 +23,61 @@
2423
display: inline-block;
2524
margin-bottom: 20px;
2625
}
26+
27+
.integration-logo {
28+
width: 190px;
29+
height: 90px;
30+
border: 1px solid #fff;
31+
border-radius: 10px;
32+
transition: all .25s ease;
33+
margin-bottom: 30px;
34+
}
35+
36+
.integration-logo:hover {
37+
border: 1px solid #6769d4;
38+
}
39+
40+
.integration-title {
41+
margin-bottom: 40px;
42+
}
43+
44+
.benefits-title {
45+
margin-bottom: 70px;
46+
}
47+
48+
.screen-colum {
49+
display: flex;
50+
justify-content: center;
51+
}
52+
53+
.screen-item {
54+
max-width: 500px;
55+
}
56+
57+
.ex-pic {
58+
width: 100%;
59+
border-radius: 10px;
60+
background-size: cover;
61+
}
62+
63+
.title {
64+
margin-bottom: 20px;
65+
}
66+
67+
a {
68+
text-decoration: none;
69+
}
70+
71+
ul {
72+
display: inline-block;
73+
text-align: left;
74+
width: 100%;
75+
}
76+
77+
.separator {
78+
background-color: #fff;
79+
padding-bottom: 1px;
80+
margin-bottom: 50px;
81+
}
82+
2783
}

0 commit comments

Comments
 (0)