budgeting-list/controlbar/styles: removing grow logic (tbc with Desig…

…ner)
liqd · Sep 26, 2022 · dc51037 · dc51037
1 parent 6e5c311
commit dc51037
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 22 deletions.
diff --git a/meinberlin/apps/budgeting/assets/ControlBar.jsx b/meinberlin/apps/budgeting/assets/ControlBar.jsx
@@ -71,8 +71,8 @@ export const ControlBar = props => {
         <ControlBarListMapSwitch query={filterString} />
       </div>
       <div className="offset-lg-2 col-lg-8">
-        <div className="control-bar control-bar--flex">
-          <div className="control-bar__item control-bar__item--grow">
+        <div className="control-bar">
+          <div className="control-bar__item">
             <ControlBarSearch
               term={term}
               onSearch={value => handleSearch(value)}
@@ -86,7 +86,7 @@ export const ControlBar = props => {
               onSelectFilter={choice => applyFilter('ordering', choice)}
             />
           )}
-          <div className="control-bar__item">
+          <div className="control-bar__item control-bar__right">
             <button
               className={
                 expandFilters

diff --git a/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html b/meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
@@ -80,7 +80,7 @@
                         <a href="#cl-embed-layout" class="dashboard-nav__item dashboard-nav__item--interactive">Embed Layout</a>
                     </li>
                     <li class="dashboard-nav__page">
-                        <a href="#cl-control_bar" class="dashboard-nav__item dashboard-nav__item--interactive">Filter Bar</a>
+                        <a href="#cl-control_bar" class="dashboard-nav__item dashboard-nav__item--interactive">Control Bar</a>
                     </li>
                     <li class="dashboard-nav__page">
                         <a href="#cl-filter-primary_menu" class="dashboard-nav__item dashboard-nav__item--interactive">Filter Menu - Primary</a>
@@ -895,14 +895,14 @@ <h3 class="paragraph__title">
                 </section>
             </div>
 
-            <h2 id="cl-control_bar">Filter Bar and Input Group</h2>
+            <h2 id="cl-control_bar">Control Bar and Input Group</h2>
 
             <div class="cl-example">
-                <p>Inside the component Filter Bar are the control-bar block elements. Control Bars are intended to be used atop of lists of elements or maps.</p>
+                <p>Control Bars are intended to be used atop of lists of elements or maps.</p>
                 <p>Control Bars may only contain <a href="#">Buttons</a>, <a href="#">Dropdowns</a> and <code>input-groups</code>.</p>
                 <p>Note that they are somehow located within the <code>_filter_bar.scss</code> file.</p>
                 <div class="cl-example">
-                    <div class="control-bar" role="group" aria-label="Filter bar">
+                    <div class="control-bar" role="group" aria-label="Control bar">
                         <div class="control-bar">
                             <div class="btn-group__container">
                                 <div class="btn-group" role="group">
@@ -916,7 +916,7 @@ <h2 id="cl-control_bar">Filter Bar and Input Group</h2>
                                     </div>
                                 </div>
                             </div>
-                            <div class="searchinput">
+                            <div class="control-bar__item">
                                 <form
                                   class="input-group"
                                 >
@@ -946,7 +946,7 @@ <h2 id="cl-control_bar">Filter Bar and Input Group</h2>
                                   </div>
                                 </form>
                             </div>
-                            <div class="dropdown">
+                            <div class="dropdown control-bar__item">
                                 <button type="button" class="dropdown-toggle btn btn--light btn--select">
                                     Category: All
                                     <i class="fa fa-caret-down" aria-hidden="true"></i>

diff --git a/meinberlin/assets/scss/components/_control-bar.scss b/meinberlin/assets/scss/components/_control-bar.scss
@@ -1,14 +1,6 @@
 .control-bar {
     @include clearfix;
 
-    &--flex {
-        display: block;
-
-        & > .control-bar__item--grow {
-            flex: 1;
-        }
-    }
-
     select,
     .control-bar__item,
     .btn-group__container {
@@ -24,10 +16,6 @@
             margin-right: 0.5 * $spacer;
         }
 
-        &--flex {
-            display: flex;
-        }
-
         .control-bar__item:last-child {
             margin-right: 0;
         }

diff --git a/meinberlin/templates/a4filters/widgets/dropdown_link.html b/meinberlin/templates/a4filters/widgets/dropdown_link.html
@@ -1,4 +1,4 @@
-<div class="dropdown" {{ attrs }}>
+<div class="dropdown control-bar__item" {{ attrs }}>
     <button
         type="button"
         class="dropdown-toggle btn btn--light btn--select"