Skip to content

Commit

Permalink
Merge pull request #11534 from nanaya/form-dropdown
Browse files Browse the repository at this point in the history 
Update dropdown on store page
  • Loading branch information
@notbakaneko
notbakaneko authored Oct 8, 2024
2 parents a732cdb + 4d2fa5a commit 5938c25
Show file tree
Hide file tree
Showing 5 changed files with 78 additions and 45 deletions.
53 changes: 40 additions & 13 deletions resources/css/bem/input-container.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,30 @@
// See the LICENCE file in the repository root for full licence text.

.input-container {
--label-font-size: @font-size--normal;
--label-line-height: 1.25;
--label-height: calc(
var(--label-font-size) * var(--label-line-height) + var(--label-padding) * 2
);
--label-colour: hsl(var(--hsl-c2));
--label-padding-base: 5px;
--label-padding: 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 +57,6 @@
&--fill {
flex: 1;
min-height: 150px;
display: grid;
grid-template-rows: auto 1fr;
}

&--genre {
Expand All @@ -74,12 +76,37 @@
--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);
line-height: var(--label-line-height);
margin: 0;
padding: var(--label-padding) var(--input-padding-base) 0;
position: absolute;
width: 100%;
pointer-events: var(--label-pointer-events);
}
}
4 changes: 3 additions & 1 deletion resources/css/bem/input-text.less
View file
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
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
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
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

0 comments on commit 5938c25

Please sign in to comment.