Merge pull request #89 from joomla/development-search

Extract the search position from the menu position
bembelimen · Sep 17, 2020 · bed520c · bed520c
2 parents 4a6349f + 1d3c7f6
commit bed520c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/templates/cassiopeia/index.php b/templates/cassiopeia/index.php
@@ -121,21 +121,25 @@
 			</div>
 		</div>
 		<?php if ($this->countModules('menu') || $this->countModules('search')) : ?>
-			<nav class="grid-child navbar navbar-expand-lg">
-				<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo Text::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
-					<span class="fas fa-bars" aria-hidden="true"></span>
-				</button>
-				<div class="collapse navbar-collapse" id="navbar">
-					<?php if ($this->countModules('menu')) : ?>
-						<jdoc:include type="modules" name="menu" style="none" />
+			<div class="grid-child container-nav">
+				<?php if ($this->countModules('menu')) : ?>
+					<nav class="navbar navbar-expand-lg">
+						<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="<?php echo Text::_('TPL_CASSIOPEIA_TOGGLE'); ?>">
+							<span class="fas fa-bars" aria-hidden="true"></span>
+						</button>
+						<div class="collapse navbar-collapse" id="navbar">
+							<jdoc:include type="modules" name="menu" style="none" />
+						</div>
+					</nav>
 					<?php endif; ?>
-					<?php if ($this->countModules('search')) : ?>
+				<?php if ($this->countModules('search')) : ?>
+					<div class="container-search">
 						<div class="form-inline">
 							<jdoc:include type="modules" name="search" style="none" />
 						</div>
-					<?php endif; ?>
-				</div>
-			</nav>
+					</div>
+				<?php endif; ?>
+			</div>
 		<?php endif; ?>
 	</header>
 

diff --git a/templates/cassiopeia/scss/blocks/_header.scss b/templates/cassiopeia/scss/blocks/_header.scss
@@ -16,7 +16,7 @@
   }
 
   nav {
-    padding: ($cassiopeia-grid-gutter / 2) $cassiopeia-grid-gutter $cassiopeia-grid-gutter ($cassiopeia-grid-gutter / 2);
+    padding: 0;
   }
 
   .site-description {
@@ -51,6 +51,23 @@
     }
   }
 
+  .container-nav {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding-bottom: $cassiopeia-grid-gutter;
+
+    @include media-breakpoint-down(xs) {
+      .container-search,
+      nav {
+        margin-top: $cassiopeia-grid-gutter;
+      }
+    }
+
+    .container-search:only-child {
+      margin-left: auto;
+    }
+  }
+
   .navbar-collapse {
     &.show {
       display: flex;
@@ -70,7 +87,6 @@
       display: flex;
       flex: 1 1 0%;
       flex-direction: row;
-      margin-right: $cassiopeia-grid-gutter;
     }
 
     > li {
@@ -133,15 +149,6 @@
     }
   }
 
-  .form-inline {
-    margin-top: .75rem;
-
-    @include media-breakpoint-up(md) {
-      margin-top: 0;
-      margin-left: auto;
-    }
-  }
-
   .mod-finder {
     display: flex;
     flex: 1 0 20rem;

diff --git a/templates/cassiopeia/scss/template-rtl.scss b/templates/cassiopeia/scss/template-rtl.scss
@@ -45,15 +45,16 @@ dd {
   margin-left: 0;
 }
 
-.container-header .mod-menu {
-
-  @include media-breakpoint-up(md) {
-    margin-right: 0;
-    margin-left: $cassiopeia-grid-gutter;
+.container-header {
+  .container-nav .container-search:only-child {
+    margin-right: auto;
+    margin-left: 0;
   }
 
-  > li {
-    margin-left: 1.55em;
+  .mod-menu {
+    > li {
+      margin-left: 1.55em;
+    }
   }
 }