Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 21:07:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: change style of searchbar component

Browse source
This commit is contained in:
Lazar 2019-11-16 17:50:14 +01:00
parent a200da1a05
commit d992d7aa54
2 changed files with 54 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/assets/css/transition.css
View file

@ -27,8 +27,8 @@
transition-timing-function: cubic-bezier(.55, .085, .68, .53); transition-timing-function: cubic-bezier(.55, .085, .68, .53);
} }
.scale-70 { .scale-90 {
transform: scale(.7); transform: scale(.9);
} }
.scale-100 { .scale-100 {

99
client/src/components/SearchForm.vue
View file

@ -5,18 +5,18 @@
<input <input
v-model="summoner" v-model="summoner"
type="text" type="text"
:class="[elementClasses, inputClasses]" :class="[inputClasses]"
class="input w-full px-2 rounded-lg outline-none pl-8 pr-16 font-bold" class="input w-full rounded-lg outline-none pl-6 pr-32 font-bold"
/> />
<div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-2"> <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
<div <div
@click="dropdown = !dropdown" @click="dropdown = !dropdown"
:class="{'bg-teal-600' : dropdown}" :class="{'border-2 border-teal-200' : dropdown}"
class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white" class="border border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
> >
<span class="selected font-bold select-none">{{ selectedRegion }}</span> <span class="selected font-bold select-none">{{ selectedRegion }}</span>
<svg <svg
class="ml-1 w-4 h-4 fill-current" class="ml-1 -mr-1 w-4 h-4 fill-current"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512" viewBox="0 0 320 512"
> >
@ -29,21 +29,22 @@
<transition <transition
enter-active-class="transition-all transition-fastest ease-out-quad" enter-active-class="transition-all transition-fastest ease-out-quad"
leave-active-class="transition-all transition-faster ease-in-quad" leave-active-class="transition-all transition-faster ease-in-quad"
enter-class="opacity-0 scale-70" enter-class="opacity-0 scale-90"
enter-to-class="opacity-100 scale-100" enter-to-class="opacity-100 scale-100"
leave-class="opacity-100 scale-100" leave-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-70" leave-to-class="opacity-0 scale-90"
> >
<div <div
v-if="dropdown" v-if="dropdown"
class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer mr-2 offsetDropDown" :class="[dropdownClasses]"
class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
> >
<div <div
v-for="(region, index) in regions" v-for="(region, index) in regions"
:key="region" :key="region"
@click="selectedRegion = region" @click="selectedRegion = region"
:class="classRegions(index)" :class="classRegions(index)"
class="relative px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500" class="relative pr-2 pl-5 py-1 text-xs dropdown text-right"
> >
<svg <svg
v-if="region === selectedRegion" v-if="region === selectedRegion"
@ -59,23 +60,22 @@
</div> </div>
</div> </div>
</transition> </transition>
</div> <button
:class="[btnClasses]"
<button class="absolute right-0 z-30 btn rounded-lg h-full hover:text-teal-500"
:class="[elementClasses, btnClasses]" type="submit"
class="input btn rounded-lg ml-2 relative"
type="submit"
>
<svg
class="absolute vertical-center horizontal-center w-4 h-4 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
> >
<path <svg
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z" class="absolute vertical-center horizontal-center w-4 h-4 fill-current "
/> xmlns="http://www.w3.org/2000/svg"
</svg> viewBox="0 0 512 512"
</button> >
<path
d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
/>
</svg>
</button>
</div>
</form> </form>
</template> </template>
@ -110,32 +110,31 @@ export default {
computed: { computed: {
btnClasses() { btnClasses() {
return { return {
'w-12': this.size === 'small', 'w-8 mr-3': this.size === 'small',
'w-20': this.size === 'xl' 'w-12': this.size === 'xl'
}
},
elementClasses() {
return {
'border-2': this.size === 'small',
'border-4': this.size === 'xl'
} }
}, },
formClasses() { formClasses() {
return { return {
'max-w-lg': this.size === 'small', 'max-w-md': this.size === 'small',
} }
}, },
inputClasses() { inputClasses() {
return { return {
'py-2': this.size === 'small', 'py-2 px-1': this.size === 'small',
'py-4': this.size === 'xl' 'py-4 px-2': this.size === 'xl'
}
},
dropdownClasses() {
return {
'offsetDropDown': this.size === 'small',
'offsetDropDownXl': this.size === 'xl'
} }
} }
}, },
methods: { methods: {
classRegions(index) { classRegions(index) {
return { return {
'rounded-t': index === 0,
'rounded-b': index === this.regions.length - 1 'rounded-b': index === this.regions.length - 1
} }
}, },
@ -151,22 +150,28 @@ export default {
<style scoped> <style scoped>
.offsetDropDown { .offsetDropDown {
top: 57px; top: 43px;
right: 1px; right: 48px;
}
.offsetDropDownXl {
top: 58px;
right: 50px;
} }
.offsetIcon { .offsetIcon {
left: 4px; left: 4px;
} }
.input { .input, .dropdown {
border-color: rgba(129, 230, 217, 0.7); background: rgba(23,49,79,0.60);
background: rgba(40, 94, 97, 0.35);
} }
.input:focus, .dropdown:hover {
.btn:hover { background: rgba(23,49,79,0.90);
background: rgba(40, 94, 97, 0.75); }
border-color: rgba(129, 230, 217, 0.9);
.input:focus{
background: rgba(23,49,79,0.70);
} }
</style> </style>