Merge pull request #120 from w3c/filter-alignment

deniak · web-flow · commit 901347da63e5 · 2023-09-20T17:34:44.000+04:00
fix filter alignment based on first item
diff --git a/assets-src/styles/sass/50-core-components/_hero.scss b/assets-src/styles/sass/50-core-components/_hero.scss
@@ -113,7 +113,13 @@
 
 	> div {
 
-		align-items: flex-end;
+		align-items: flex-start;
+
+		> .input-group-wrap {
+
+			align-self: end;
+
+		}
 
 	}
 
@@ -176,4 +182,4 @@
 
 	}
 
-}
+}
diff --git a/design-system-templates/components/filters-events.html.twig b/design-system-templates/components/filters-events.html.twig
@@ -35,7 +35,7 @@
 						</select>
 					</div>
 				</div>
-				<div>
+				<div class="input-group-wrap">
 					<div class="input-group">
 						<button class="button" type="submit">Show results</button>
 						<button class="button button--ghost" type="reset">Clear all</button>
diff --git a/design-system-templates/components/filters-members.html.twig b/design-system-templates/components/filters-members.html.twig
@@ -328,7 +328,7 @@
 						</select>
 					</div>
 				</div>
-				<div>
+				<div class="input-group-wrap">
 					<div class="input-group">
 						<button class="button" type="submit">Show results</button>
 						<button class="button button--ghost" type="reset">Clear all</button>
diff --git a/design-system-templates/components/filters-people.html.twig b/design-system-templates/components/filters-people.html.twig
@@ -65,7 +65,7 @@
 						</select>
 					</div>
 				</div>
-				<div>
+				<div class="input-group-wrap">
 					<div class="input-group">
 						<button class="button" type="submit">Show results</button>
 						<button class="button button--ghost" type="reset">Clear all</button>
diff --git a/public/dist/assets/styles/core.css b/public/dist/assets/styles/core.css
@@ -2993,7 +2993,10 @@ main,
 }
 
 .hero--listing .filters > div {
-  align-items: flex-end;
+  align-items: flex-start;
+}
+.hero--listing .filters > div > .input-group-wrap {
+  align-self: end;
 }
 .hero--listing .filters .field {
   margin-top: 0;
diff --git a/public/dist/assets/styles/core.min.css b/public/dist/assets/styles/core.min.css
diff --git a/templates/components/listings/events/filters.html.twig b/templates/components/listings/events/filters.html.twig
@@ -28,7 +28,7 @@
                 </select>
             </div>
         </div>
-        <div>
+        <div class="input-group-wrap">
             <div class="input-group">
                 <button class="button" type="submit">{{ 'listing.events.filters.search_button'|trans({}, 'w3c_website_templates_bundle') }}</button>
                 <a class="button button--ghost" type="reset" href="{{ reset_url }}">{{ 'listing.events.filters.clear'|trans({}, 'w3c_website_templates_bundle') }}</a>

Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,13 @@`
`113`	`113`
`114`	`114`	`> div {`
`115`	`115`
`116`		`- align-items: flex-end;`
	`116`	`+ align-items: flex-start;`
	`117`	`+`
	`118`	`+ > .input-group-wrap {`
	`119`	`+`
	`120`	`+ align-self: end;`
	`121`	`+`
	`122`	`+ }`
`117`	`123`
`118`	`124`	`}`
`119`	`125`
`@@ -176,4 +182,4 @@`
`176`	`182`
`177`	`183`	`}`
`178`	`184`
`179`		`-}`
	`185`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -2993,7 +2993,10 @@ main,`
`2993`	`2993`	`}`
`2994`	`2994`
`2995`	`2995`	`.hero--listing .filters > div {`
`2996`		`- align-items: flex-end;`
	`2996`	`+ align-items: flex-start;`
	`2997`	`+}`
	`2998`	`+.hero--listing .filters > div > .input-group-wrap {`
	`2999`	`+ align-self: end;`
`2997`	`3000`	`}`
`2998`	`3001`	`.hero--listing .filters .field {`
`2999`	`3002`	`margin-top: 0;`