sapui5: added learnbar, fixed style loading

If the script loader is triggered after loading the stylesheet, some of our overrides don't apply.

sapui5: added learnbar, fixed style loading
If the script loader is triggered after loading the stylesheet, some of our overrides don't apply.
c77cbffa · Pascal Hartig · c2f442d9 · c77cbffa · c77cbffa · c77cbffa
Commit c77cbffa authored Jul 03, 2013 by Pascal Hartig
3 changed files
--- a/labs/architecture-examples/sapui5/css/base.css
+++ b/labs/architecture-examples/sapui5/css/base.css
@@ -406,3 +406,148 @@ body {
 #info a {
 	color: inherit;
 }
+
+.hidden{
+	display:none;
+}
+
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #C5C5C5;
+	border-bottom: 1px dashed #F7F7F7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+/**body*/.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	/**body*/.learn-bar {
+		width: auto;
+		margin: 0 0 0 300px;
+	}
+	/**body*/.learn-bar > .learn {
+		left: 8px;
+	}
+	/**body*/.learn-bar #todoapp {
+		width: 550px;
+		margin: 130px auto 40px auto;
+	}
+}
--- a/labs/architecture-examples/sapui5/index.html
+++ b/labs/architecture-examples/sapui5/index.html
@@ -4,6 +4,12 @@
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 		<title>SAPUI5 • TodoMVC</title>
+		<script
+			src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
+			id="sap-ui-bootstrap"
+			data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table"
+			data-sap-ui-theme="base">
+		</script>
 		<link href="css/base.css" rel="stylesheet">
 	</head>
 	<body role="application">
@@ -18,12 +24,6 @@
 			<p>Written by Harald Schubert</p>
 			<p>Part of <a href="http://todomvc.com/">TodoMVC</a></p>
 		</footer>
-		<script
-			src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
-			id="sap-ui-bootstrap"
-			data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table"
-			data-sap-ui-theme="base">
-		</script>
 		<script src="bower_components/todomvc-common/base.js"></script>
 		<script src="js/app.js"></script>
 	</body>

--- a/learn.json
+++ b/learn.json
@@ -1560,6 +1560,22 @@
 			}]
 		}]
 	},
+	"sapui5": {
+		"name": "SAPUI5",
+		"description": "SAP's HTML5-based UI technology that allows you to build rich, interactive Web applications.",
+		"homepage": "scn.sap.com/community/developer-center/front-end",
+		"examples": [{
+			"name": "Architecture Example",
+			"url": "labs/architecture-examples/sapui5"
+		}],
+		"link_groups": [{
+			"heading": "Official Resources",
+			"links": [{
+				"name": "Introduction",
+				"url": "http://scn.sap.com/community/developer-center/front-end/blog/2013/03/19/how-to-build-testable-sapui5-applications"
+			}]
+		}]
+	},
 	"serenadejs": {
 		"name": "Serenade.js",
 		"description": "Serenade.js is a client side framework built on the MVC pattern. It makes it simple to create rich client side applications by freeing you from having to keep the DOM up to date with your data through powerful data bindings.",