sapui5: added learnbar, fixed style loading

If the script loader is triggered after loading the stylesheet, some of our overrides don't apply.
passy · Jul 3, 2013 · c77cbff · c77cbff
1 parent c2f442d
commit c77cbff
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 6 deletions.
diff --git 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;
+	}
+}
diff --git 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 @@ <h1>todos</h1>
 			<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>

diff --git 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.",