Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update dropdown on store page #11534

Merged
merged 5 commits into from
Oct 8, 2024
Merged

Update dropdown on store page #11534

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d939057
Update dropdown on store page
nanaya Oct 7, 2024
4717fcf
Adjust label height and add note
nanaya Oct 8, 2024
1f5db15
Code style fix
nanaya Oct 8, 2024
bdf46f3
Merge branch 'master' into form-dropdown
notbakaneko Oct 8, 2024
4d2fa5a
Use correct label padding
nanaya Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 36 additions & 12 deletions resources/css/bem/input-container.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,28 @@
// See the LICENCE file in the repository root for full licence text.

.input-container {
--label-font-size: @font-size--normal;
--label-height: calc(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be font-size * 1.25 (the line-height) + padding base tbh 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eh close enough 🤷

var(--label-font-size) + var(--input-padding-base) + 5px
);
--label-colour: hsl(var(--hsl-c2));
--label-padding-base: 5px;
--label-pointer-events: auto;
--input-bg: hsl(var(--hsl-b6));
--input-border-colour: var(--input-border-base-colour);
--input-border-base-colour: transparent;
--input-border-hover-colour: hsl(var(--hsl-l3));
--input-border-focus-colour: hsl(var(--hsl-l1));
--input-border-error-colour: hsl(var(--hsl-red-2));
--input-padding: var(--label-padding-base) var(--input-padding-base)
var(--input-padding-base);
--input-padding: var(--label-height) var(--input-padding-right)
var(--input-padding-base) var(--input-padding-base);
--input-padding-base: 10px;
--input-padding-right: var(--input-padding-base);

display: flex;
flex-direction: column;
background-color: var(--input-bg);
border-radius: @border-radius-large;
display: grid;
text-transform: initial;
font-weight: initial;
font-size: inherit;
box-shadow: inset 0 0 0 2px var(--input-border-colour);
position: relative;

margin: 0;
width: 100%;
Expand Down Expand Up @@ -53,8 +55,6 @@
&--fill {
flex: 1;
min-height: 150px;
display: grid;
grid-template-rows: auto 1fr;
}

&--genre {
Expand All @@ -74,12 +74,36 @@
--input-padding: 15px var(--input-padding-base);
}

&--select {
--arrow-width: calc(var(--input-padding-base) * 2 + 1em);
--input-padding-right: var(--arrow-width);
--label-pointer-events: none;

&::after {
.fas();
.center-content();
content: @fa-var-chevron-down;
width: var(--arrow-width);
position: absolute;
right: 0;
bottom: 0;
height: 100%;
pointer-events: none;
}
}

// Floats the label so the input can receive click event on the entire area.
// Mainly useful for select input to allow showing the dropdown when the
// label is clicked.
&__label {
display: flex;
justify-content: space-between;
margin: 0;
color: var(--label-colour);
font-size: @font-size--normal;
padding: var(--label-padding-base) var(--input-padding-base) 0;
font-size: var(--label-font-size);
padding: 5px var(--input-padding-base) 0;
position: absolute;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can do with a comment on why it's position: absolute, also a note for the sizing of --label-height (or calculate it instead?)

width: 100%;
pointer-events: var(--label-pointer-events);
}
}
4 changes: 3 additions & 1 deletion resources/css/bem/input-text.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
.input-text {
.reset-input();
color: hsl(var(--hsl-c1));
background: transparent;
background: var(--input-bg);
resize: none;
width: 100%;
padding: var(--input-padding);
box-shadow: inset 0 0 0 2px var(--input-border-colour);
border-radius: @border-radius-large;
}
5 changes: 5 additions & 0 deletions resources/css/bem/store-text.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
color: @osu-colour-h1;
}

&--options {
display: grid;
gap: 10px;
}

&--price {
color: @osu-colour-h1;
font-weight: 600;
Expand Down
2 changes: 1 addition & 1 deletion resources/lang/en/store.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
],

'item' => [
'quantity' => 'Quantity',
'quantity' => 'quantity',

'display_name' => [
'supporter_tag' => ':name for :username (:duration)',
Expand Down
59 changes: 29 additions & 30 deletions resources/views/store/products/show.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,18 @@ class="
<p class="store-text store-text--price-note">excluding shipping fees</p>
@endif

@if($product->types())
@foreach($product->types() as $type => $values)
@if (count($values) === 1)
{{-- magic property --}}
<input type="hidden" name="item[extra_data][{{ $type }}]" value="{{ array_keys($values)[0] }}" />
@else
<div class="form-group">
<label class="u-uppercase" for="select-product-{{ $type }}">{{ $type }}</label>
<div class="store-text store-text--options">
@if ($product->types())
@foreach ($product->types() as $type => $values)
@if (count($values) === 1)
{{-- magic property --}}
<input type="hidden" name="item[extra_data][{{ $type }}]" value="{{ array_keys($values)[0] }}" />
@else
<label class="input-container input-container--select input-container--store">
<div class="input-container__label">{{ $type }}</div>

<div class="form-select">
<select id="select-product-{{ $type }}" class="form-select__input js-url-selector" data-keep-scroll="1">
@foreach($values as $value => $product_id)
<select id="select-product-{{ $type }}" class="input-text js-url-selector" data-keep-scroll="1">
@foreach ($values as $value => $product_id)
<option
{{ $product_id === $product->product_id ? 'selected' : '' }}
value="{{ route('store.products.show', $product_id) }}"
Expand All @@ -87,22 +87,21 @@ class="
</option>
@endforeach
</select>
</div>
</div>
@endif
@endforeach
@endif
</label>
@endif
@endforeach
@endif

@if($product->inStock())
<div class='form-group'>
@if ($product->inStock())
<input type="hidden" name="item[product_id]" value="{{ $product->product_id }}" />
<label for="item[quantity]" class="u-uppercase">
{{ osu_trans('store.order.item.quantity') }}
</label>

<div class="form-select">
<label class="input-container input-container--select input-container--store">
<div class="input-container__label">
{{ osu_trans('store.order.item.quantity') }}
</div>

<select
class="js-store-item-quantity form-select__input"
class="js-store-item-quantity input-text"
name="item[quantity]"
>
@foreach (product_quantity_options($product) as $option)
Expand All @@ -111,13 +110,13 @@ class="js-store-item-quantity form-select__input"
</option>
@endforeach
</select>
</div>
</div>
@elseif ($product->inStock(1, true))
{{ osu_trans('store.product.stock.out_with_alternative') }}
@else
{{ osu_trans('store.product.stock.out') }}
@endif
</label>
@elseif ($product->inStock(1, true))
{{ osu_trans('store.product.stock.out_with_alternative') }}
@else
{{ osu_trans('store.product.stock.out') }}
@endif
</div>
</div>
</div>
@endif
Expand Down