Site: (liferay#481) Add examples of Card, List, Table views with Mana…

…gement Bar Primary and Info Panel
pat270 · Feb 20, 2018 · 6c0f10c · 6c0f10c
1 parent bf6037e
commit 6c0f10c
Show file tree

Hide file tree

Showing 6 changed files with 2,346 additions and 72 deletions.
diff --git a/packages/clay/src/content/test_card_view_template.html b/packages/clay/src/content/test_card_view_template.html
@@ -124,16 +124,16 @@
 						<div class="input-group-item">
 							<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text">
 							<span class="input-group-inset-item input-group-inset-item-after">
-								<button class="btn btn-unstyled clay-site-close-overlay-sm-down navbar-breakpoint-d-none" type="button">
-									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
-										<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
-									</svg>
-								</button>
-								<button class="btn btn-unstyled navbar-breakpoint-d-block" type="button">
+								<button class="btn btn-unstyled" type="submit">
 									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
 										<use xlink:href="{{rootPath}}/images/icons/icons.svg#search" />
 									</svg>
 								</button>
+								<button class="btn btn-unstyled d-none" type="button">
+									<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
+										<use xlink:href="{{rootPath}}/images/icons/icons.svg#times" />
+									</svg>
+								</button>
 							</span>
 						</div>
 					</div>
@@ -148,13 +148,6 @@
 					</svg>
 				</a>
 			</li>
-			<li class="dropdown nav-item">
-				<a class="nav-link nav-link-monospaced" href="#uniqueSidenavCollapseId1" id="uniqueSidenavToggler1" role="button">
-					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-info-circle-open">
-						<use xlink:href="{{rootPath}}/images/icons/icons.svg#info-circle-open" />
-					</svg>
-				</a>
-			</li>
 			<li class="dropdown nav-item">
 				<a aria-expanded="false" class="dropdown-toggle nav-link nav-link-monospaced" data-toggle="dropdown" href="#1" role="button">
 					<svg aria-hidden="true" class="lexicon-icon lexicon-icon-cards2">
@@ -209,13 +202,22 @@
 	<div class="container-fluid container-fluid-max-xl">
 		<ul class="subnav-nav">
 			<li>
-				<span class="subnav-item subnav-title">Results 19 Items</span>
+				<span class="subnav-item">
+					<span class="text-truncate-inline">
+						<span class="text-truncate">8 results for Everything</span>
+					</span>
+				</span>
+			</li>
+		</ul>
+		<ul class="subnav-nav">
+			<li>
+				<button class="btn btn-unstyled subnav-link" href="#1" type="button">Clear</button>
 			</li>
 		</ul>
 	</div>
 </nav>
 
-<div class="closed sidenav-container" id="uniqueSidenavCollapseId1">
+<div class="closed sidenav-container">
 	<div class="sidenav-menu-slider">
 		<div class="sidebar sidebar-light sidenav-menu">
 			<nav class="component-tbar tbar">
@@ -953,16 +955,23 @@ <h3 class="card-title" title="thumbnail_coffee.jpg">
 		$(this).closest('.navbar').find('.navbar-overlay-sm-down').addClass('show');
 	});
 
-	$('.clay-site-close-overlay-sm-down').on('click', function(event) {
-		$(this).closest('.navbar-overlay-sm-down').removeClass('show');
-	});
+	$('.form-control').on('input', function(event) {
+		var value = $(this).val() === '';
+		var closeButton = $(this).closest('.input-group').find('[type="button"]');
 
-	$('.clay-site-open-overlay-up').on('click', function(event) {
-		$(this).closest('.navbar').find('.navbar-overlay-up').addClass('show');
+		if (value) {
+			closeButton.addClass('d-none');
+		}
+		else {
+			closeButton.removeClass('d-none');
+		}
 	});
 
-	$('.clay-site-close-overlay-up').on('click', function(event) {
-		$(this).closest('.navbar-overlay-up').removeClass('show');
+	$('.input-group').delegate('[type="submit"] + [type="button"]', 'click', function(event) {
+		var formControl = $(this).closest('.input-group').find('.form-control');
+		formControl.val('');
+		$(this).addClass('d-none');
+		formControl.focus();
 	});
 
 	$('#uniqueSidenavToggler1').sideNavigation({