ScreenFull page

Author: HenrikhAbajyan

package-lock.json

@@ -8,8 +8,8 @@
 **************************************************************/
 
 $color-primary: #85CE36 !default;
-$color-primary-light: lighten($color-primary, 10%) !default; 
-$color-primary-lighter: lighten($color-primary-light, 6%) !default; 
+$color-primary-light: lighten($color-primary, 10%) !default;
+$color-primary-lighter: lighten($color-primary-light, 6%) !default;
 $color-primary-dark: darken($color-primary, 10%) !default;
 $color-primary-darker: darken($color-primary-dark, 6%) !default;
 
@@ -53,7 +53,7 @@ $header-height: 70px !default;
 $header-height-xs: 50px !default;
 
 // Sidebar
-$sidebar-width: 230px !default;
+$sidebar-width: 240px !default;
 
 // Footer
 $footer-height: 50px !default;
@@ -106,4 +106,4 @@ $chart-color-secondary: lighten($chart-color-primary, 10%) !default;
 ****************************************************** */
 
 // Dashboard
-$dashboard-stat-icon-color: #BDBDBD !default;
+$dashboard-stat-icon-color: #BDBDBD !default;

src/_variables.scss

@@ -37,7 +37,7 @@
 
 				<li {{#is pagename "in" "charts-flot,charts-morris"}}class="active open"{{/is}} >
 					<a href="">
-						<i class="fa fa-bar-chart"></i> Charts
+						<i class="fa fa-area-chart"></i> Charts
 						<i class="fa arrow"></i>
 					</a>
 
@@ -264,6 +264,12 @@
 					</ul>
 				</li>
 
+				<li {{#is pagename "===" "docs"}}class="active"{{/is}} >
+					<a href="screenful.html">
+						<i class="fa fa-bar-chart"></i> Team Metrics <span class="label label-screenful">by Screenful</span>
+					</a>
+				</li>
+
 				<li {{#is pagename "===" "docs"}}class="active"{{/is}} >
 					<a href="https://github.com/modularcode/modular-admin-html">
 						<i class="fa fa-github-alt"></i> Theme Docs

src/app/_common/sidebar/sidebar.hbs

@@ -38,6 +38,21 @@
 		}
 	}
 
+	.label {
+		font-size: .75em;
+		display: inline-block;
+		border-radius: .2em;
+		padding: 2px 5px;
+		background-color: #ccc;
+		color: #000;
+		margin: 0 3px;
+	}
+
+	.label-screenful {
+		color: #fff;
+		background-color: #6769d4;
+	}
+
 	.sidebar-menu {
 
 		font-size: 14px;

src/app/_common/sidebar/sidebar.scss

@@ -0,0 +1,36 @@
+---
+layout: app/app-layout
+pagename: screenful
+---
+<div class="title-block">
+
+
+	<h1 class="title">
+		Team Metrics
+	</h1
+	<p class="title-description">Supercharge your teamwork with <a href="https://screenful.com" target="_blank">Screenful</a>! </p>
+
+</div>
+
+
+<section class="section">
+
+	{{!-- <div class="card"> --}}
+		{{!-- <div class="card-block"> --}}
+
+			<h3 class="subtitle">This project is proudly supported by</h3>
+
+			<a href="https://screenful.com" target="_blank">
+				<div class="screenful-logo"></div>
+			</a>
+
+			<p class="description">
+				Screenful is the easiest way to <strong>visualise and share your project progress</strong> using data from your <strong>existing tools</strong>.<br>
+				Get a quick overview of your team's status on your smartphone or tablet. <a href="https://screenful.com" target="_blank">Learn more</a>
+			</p>
+
+
+		{{!-- </div> --}}
+	{{!-- </div> --}}
+</section>
+

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

@@ -0,0 +1,27 @@
+.screenful-page {
+
+	.section {
+		text-align: center;
+	}
+
+	.card-block {
+		padding: 40px 100px;
+		text-align: center;
+	}
+
+	.subtitle {
+		margin-bottom: 30px;
+	}
+
+	.screenful-logo {
+		width: 300px;
+		height: 160px;
+		border-radius: 10px;
+		background-size: cover;
+		background-position: center;
+		background-image: url('https://static1.squarespace.com/static/5303cdc2e4b01fb736d82734/t/594145b02e69cf344247228a/1497449932063/?format=500w');
+		background-repeat: no-repeat;
+		display: inline-block;
+		margin-bottom: 20px;
+	}
+}