STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

fix missimg media icon and select styling

Browse Source
This commit is contained in:
James Collins
2023-04-23 20:34:52 +10:00
parent 6723c27d5e
commit 072ab038fe
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/components/SMInput.vue
View File

@@ -21,6 +21,24 @@
>{{ label }}</label >{{ label }}</label
> >
</template> </template>
<template v-else-if="props.type == 'select'">
<label
class="control-label control-label-select"
v-bind="{ for: id }"
>{{ label }}</label
>
<ion-icon
class="select-dropdown-icon"
name="caret-down-outline" />
<select class="select-input-control">
<option
v-for="option in Object.entries(props.options)"
:key="option[0]"
:value="option[0]">
{{ option[1] }}
</option>
</select>
</template>
<template v-else> <template v-else>
<label class="control-label" v-bind="{ for: id }">{{ <label class="control-label" v-bind="{ for: id }">{{
label label
@@ -64,19 +82,6 @@
@input="handleInput" @input="handleInput"
@keyup="handleKeyup"></textarea> @keyup="handleKeyup"></textarea>
</template> </template>
<template v-else-if="props.type == 'select'">
<ion-icon
class="select-dropdown-icon"
name="caret-down-outline" />
<select class="select-input-control">
<option
v-for="option in Object.entries(props.options)"
:key="option[0]"
:value="option[0]">
{{ option[1] }}
</option>
</select>
</template>
<template v-else-if="props.type == 'media'"> <template v-else-if="props.type == 'media'">
<div class="media-input-control"> <div class="media-input-control">
<img <img
@@ -538,6 +543,10 @@ const handleMediaSelect = async () => {
width: auto; width: auto;
} }
.control-label-select {
transform: translate(16px, 6px) scale(0.7);
}
.select-dropdown-icon { .select-dropdown-icon {
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -549,7 +558,7 @@ const handleMediaSelect = async () => {
.select-input-control { .select-input-control {
appearance: none; appearance: none;
width: 100%; width: 100%;
padding: 22px 16px 8px 16px; padding: 20px 16px 8px 14px;
border: 1px solid var(--base-color-darker); border: 1px solid var(--base-color-darker);
border-radius: 8px; border-radius: 8px;
background-color: var(--base-color-light); background-color: var(--base-color-light);
@@ -611,6 +620,7 @@ const handleMediaSelect = async () => {
display: block; display: block;
margin: 48px auto 8px auto; margin: 48px auto 8px auto;
border-radius: 8px; border-radius: 8px;
font-size: 800%;
max-height: 300px; max-height: 300px;
} }
} }