Skip to content

Commit

Permalink
assets/*: update inputs and buttons to ensure styling fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@philli-m
philli-m committed Dec 12, 2022
1 parent 58f13e2 commit 1532bdc
Show file tree
Hide file tree
Showing 12 changed files with 100 additions and 151 deletions.
20 changes: 9 additions & 11 deletions meinberlin/apps/budgeting/assets/ControlBarSearch.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,15 @@ export const ControlBarSearch = (props) => {
onChange={handleChange}
value={value}
/>
<div className="input-group-append">
<button
className="btn btn--light btn--attached-right"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{translated.startSearch}
</span>
</button>
</div>
<button
className="btn btn--light input-group__after"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{translated.startSearch}
</span>
</button>
</form>
)
}
30 changes: 13 additions & 17 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/component_library.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -858,14 +858,12 @@ <h2 id="cl-control_bar">Control Bar and Input Group</h2>
</label>
<input class="form-control" type="search" id="search" name="search" placeholder="Suchen" value="">
<input type="hidden" name="ordering" value="-created">
<div class="input-group-append">
<button class="btn btn--light btn--attached-right" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
Suchen
</span>
</button>
</div>
<button class="btn btn--light input-group__after" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
Suchen
</span>
</button>
</form>
</div>
<div class="dropdown control-bar__item">
Expand Down Expand Up @@ -1090,14 +1088,12 @@ <h2 id="cl-filter-secondary_menu">Filter Menu - Secondary</h2>
Search title
</label>
<input class="form-control" type="search" id="id-filter-search" placeholder="Search title" value="" />
<div class="input-group-append">
<button class="btn btn--light btn--attached-right" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
Search title
</span>
</button>
</div>
<button class="btn btn--light input-group__after" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
Search title
</span>
</button>
</div>
<fieldset class="filter-bar__menu-radio-sta" role="group" aria-labelledby="sta">
<legend>
Expand Down Expand Up @@ -2277,7 +2273,7 @@ <h2 id="cl-upload">Upload</h2>
<div class="upload-wrapper__fields input-group">
<input name="logo" id="id_logo" class="form-control form-control-file" type="file">
<input name="__noname__" class="form-control form-control-file-dummy" placeholder="Select a picture from your local folder." tabindex="-1" id="text-id_logo" type="text">
<label for="id_logo" class="upload-wrapper__action input-group__after btn" title="Upload a picture">
<label for="id_logo" class="upload-wrapper__action input-group__after btn btn--primary" title="Upload a picture">
<i class="fas fa-cloud-upload-alt" aria-label="Upload a picture"></i>
</label>
</div>
Expand Down
20 changes: 9 additions & 11 deletions meinberlin/apps/plans/assets/FilterSecondary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,17 +99,15 @@ class FilterSecondary extends React.Component {
onChange={(e) => this.changeTitleSearch(e)}
value={this.state.titleSearchChoice}
/>
<div className="input-group-append">
<button
className="btn btn--light btn--attached-right"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{performSearchStr}
</span>
</button>
</div>
<button
className="btn btn--light input-group__after"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{performSearchStr}
</span>
</button>
</div>
<FilterRadio
filterId="par"
Expand Down
20 changes: 9 additions & 11 deletions meinberlin/apps/plans/assets/PlansMap.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -284,17 +284,15 @@ class PlansMap extends Component {
placeholder={addressSearchCapStr}
onChange={e => this.onAddressSearchChange(e)}
/>
<div className="input-group-append">
<button
className="btn btn--light btn--attached-right"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{addressSearchStr}
</span>
</button>
</div>
<button
className="btn btn--light input-group__after"
type="submit"
>
<i className="fa fa-search" aria-hidden="true" />
<span className="visually-hidden">
{addressSearchStr}
</span>
</button>
</div>
{this.state.displayResults &&
<ul aria-labelledby="id_filter_address">
Expand Down
14 changes: 7 additions & 7 deletions meinberlin/assets/scss/components/_button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
%button-base {
@extend %control-base; // needed for stretched dropdowns ect.
text-decoration: none;
font-weight: bold;
}

.btn {
@extend %button-base;

&.is-disabled {
&.is-disabled,
&:disabled {
opacity: 0.75;
cursor: not-allowed;
pointer-events: none;
Expand All @@ -32,6 +32,11 @@

background-color: $bg-secondary;
}

&.is-disabled,
&:disabled {
background-color: $bg-secondary;
}
}

.btn--primary {
Expand Down Expand Up @@ -133,11 +138,6 @@
border-top-right-radius: 0;
}

.btn--attached-right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.btn-group__container {
margin-bottom: $spacer;
}
Expand Down
26 changes: 15 additions & 11 deletions meinberlin/assets/scss/components/_commenting.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,28 @@
.editpoll__question-container,
.editpoll__actions-container,
.commenting {
display: block;
margin-bottom: $em-spacer;
// display: block;
margin-bottom: $spacer;

@extend .row;
}

.editpoll__question,
.commenting__content {
margin-bottom: $spacer;

@extend .col-lg-9;
}

.editpoll__question--border,
.commenting__content--border {
margin-bottom: $em-spacer * 0.5;
margin-bottom: $spacer * 0.5;
padding: $padding;
border: 1px solid $border-color;
border-radius: ($padding * 0.5);
}

.commenting--toc__button {
// FIXME: This class should either not add styling or not be combined with .btn
// see: https://github.com/liqd/a4-meinberlin/pull/555#discussion_r122957403
display: block;
width: 100%;
text-align: left;
Expand All @@ -25,12 +33,8 @@
}
}

.commenting__content {
margin-bottom: $spacer;

@extend .col-lg-9;
}

.editpoll__question-actions,
.editpoll__menu-container,
.commenting__actions {
margin-bottom: $spacer;
text-align: right;
Expand Down
4 changes: 0 additions & 4 deletions meinberlin/assets/scss/components/_input_group.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
// FIXME: this only works with buttons if it is included *afterwards*

// .input-group {
// display: flex;
// }

.input-group__input {
flex: 1 1 auto;
background-clip: unset;
Expand Down
4 changes: 2 additions & 2 deletions meinberlin/assets/scss/components/_participation_tile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@
}

.participation-tile__list-container {
flex: 0 1 44vh;
flex: 0 1 auto;

@media (min-width: $breakpoint-xs) {
flex-grow: 2;
flex: 2 0 44vh;
overflow-y: visible;
}
}
Expand Down
63 changes: 18 additions & 45 deletions meinberlin/assets/scss/components/_poll.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,60 +169,33 @@ $checkbox-size: 20px;
box-shadow: none;
}

.editpoll__actions-container {
display: flex;
flex-direction: column;
}
// .editpoll__actions-container {
// display: flex;
// flex-direction: column;
// }

.editpoll__menu-container {
margin: 0.5 * $spacer 0;
// .editpoll__menu-container {
// margin: 0.5 * $spacer 0;

& > * {
width: 100%;
}
}
// & > * {
// width: 100%;
// }
// }

.editpoll__btns--question {
display: flex;
flex-flow: column wrap;
}

.editpoll__questions {
font-size: 0.875rem;
}

.editpoll__question-container {
display: flex;
margin-bottom: $spacer;
}

.editpoll__question--border {
flex-grow: 2;
margin-right: $spacer * 0.5;
padding: $padding;
border: 1px solid $border-color;
border-radius: ($padding * 0.5);
}

.editpoll__question-actions {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
}

@media (min-width: $breakpoint) {
.editpoll__question-container {
@include clearfix;
}

.editpoll__actions-container {
flex-direction: row;
justify-content: space-between;
}

.editpoll__menu-container > * {
width: inherit;
}
// .editpoll__actions-container {
// flex-direction: row;
// justify-content: space-between;
// }

// .editpoll__menu-container > * {
// width: inherit;
// }

.editpoll__btns--question {
flex-direction: row;
Expand Down
16 changes: 1 addition & 15 deletions meinberlin/assets/scss/components/_upload.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
.upload-wrapper__fields,
.upload-wrapper__preview {
margin-bottom: $padding;
position: relative;
// position: relative;
}

// This is actually a label that looks like a button. It is used to trigger
Expand All @@ -39,17 +39,3 @@
opacity: 0.2;
filter: grayscale(100%);
}

.upload-wrapper__alert {
clear: left;
}

@media (min-width: $breakpoint) {
.upload-wrapper__fields {
// @include grid-span(5, 0, ("columns": 9));
}

.upload-wrapper__preview {
// @include grid-span(4, 5, ("columns": 9));
}
}
20 changes: 9 additions & 11 deletions meinberlin/templates/a4filters/widgets/free_text_filter.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@
<input type="hidden" name="{{ par_name }}" value="{{ value }}">
{% endif %}
{% endfor %}
<div class="input-group-append">
<button
class="btn btn--light btn--attached-right"
type="submit"
>
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
{% trans 'Search' %}
</span>
</button>
</div>
<button
class="btn btn--light input-group__after"
type="submit"
>
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">
{% trans 'Search' %}
</span>
</button>
</form>
</div>
Loading

0 comments on commit 1532bdc

Please sign in to comment.