Expandable button: added implementation and examples

[Issue] Samsung#1336 [Problem] Expandable button: Card type - not implemented, no example [Solution] - new example - extend styles for ui-content-area Signed-off-by: Tomasz Lukawski <t.lukawski@samsung.com>
TomaszLukawskiSam · Jul 22, 2020 · 7558be8 · 7558be8
1 parent 95711ef
commit 7558be8
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 6 deletions.
diff --git a/examples/mobile/UIComponents/components/controllers/expand-button.html b/examples/mobile/UIComponents/components/controllers/expand-button.html
@@ -27,6 +27,11 @@ <h1>
 						Expand button on list
 					</a>
 				</li>
+				<li class="ui-li-anchor">
+					<a href="expandable-card.html">
+						Expand button on card
+					</a>
+				</li>
 			</ul>
 		</div>
 		<!-- /content -->

diff --git a/examples/mobile/UIComponents/components/controllers/expandable-card.html b/examples/mobile/UIComponents/components/controllers/expandable-card.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<title>Expandable Card</title>
+	<meta content="width=device-width, user-scalable=no" name="viewport" />
+	<link href="../../lib/tau/mobile/theme/default/tau.css" rel="stylesheet" />
+	<link href="../../css/style.css" rel="stylesheet" />
+	<script data-build-remove="false" src="../../lib/tau/mobile/js/tau.js">
+	</script>
+</head>
+
+<body>
+	<div class="ui-page">
+		<div class="ui-header" data-position="fixed">
+			<div class="ui-appbar-left-icons-container">
+				<a href="#" class="ui-btn ui-btn-icon ui-btn-icon-back" data-style="flat" data-rel="back"></a>
+			</div>
+			<div class="ui-appbar-title-container">
+				<span class="ui-appbar-title">Expand button on card</span>
+			</div>
+			<div class="ui-appbar-action-buttons-container">
+				<button class="ui-btn ui-btn-icon ui-btn-icon-more" data-style="flat"></button>
+			</div>
+		</div>
+		<div class="ui-content">
+			<div class="ui-content-area">
+				<div class="ui-expandable">
+					<h2>
+						Subtitle 1
+					</h2>
+					<div class="app-content-example">
+						Contents area
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</body>
+
+</html>
diff --git a/examples/mobile/UIComponents/css/style.css b/examples/mobile/UIComponents/css/style.css
@@ -1,6 +1,6 @@
 /* Header */
 .btn-icon-back::after {
-	 -webkit-mask-image: url(./images/core_icon_back.png);
+	-webkit-mask-image: url(./images/core_icon_back.png);
 	mask-image: url(./images/core_icon_back.png);
 }
 
@@ -468,7 +468,7 @@
 }
 
 /**************************************
-            Slider
+			Slider
 ***************************************/
 #slider-demo .ui-slider-vertical {
 	left: 50%;
@@ -624,14 +624,14 @@
 }
 
 /**************************************
-            text input with buttons
+			text input with buttons
 ***************************************/
 #textinputwithbuttons-demo .ui-content {
 	top: 80px;
 	background: white;
 }
 /******************************************************
-            List Styles - sliders
+			List Styles - sliders
 ******************************************************/
 
 #slider-description{
@@ -671,7 +671,7 @@
 }
 
 /******************************************************
-        Indexscrollbar with search floating button
+		Indexscrollbar with search floating button
 ******************************************************/
 
 #indexscrollbarPage .ui-header.search-active h1 {
@@ -704,4 +704,14 @@
 }
 .sample-unit-lines p {
 	margin-bottom: 2px;
+}
+
+.app-content-example {
+	height: 150px;
+	width: 100%;
+	background-color: #ddd;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
 }
diff --git a/src/css/profile/mobile/common/expandable.less b/src/css/profile/mobile/common/expandable.less
@@ -1,4 +1,5 @@
-.ui-listview .ui-expandable {
+.ui-listview .ui-expandable,
+.ui-content-area .ui-expandable {
 	padding: 0 24 * @px_base;
 	user-select: none;
 	flex-direction: column;