pages refactoring

This commit is contained in:
Čarodej
2021-11-23 08:24:56 +01:00
parent 78541c1c3c
commit 21d75678c0
17 changed files with 200 additions and 141 deletions
@@ -1,5 +1,5 @@
<template>
<div class="mb-7 flex justify-between w-full">
<div :class="{'mb-7': !isLast}" class="flex justify-between w-full">
<!--Label for input-->
<div class="leading-5">
@@ -28,6 +28,7 @@
name: 'AppInputSwitch',
props: [
'description',
'isLast',
'title',
'error',
]
@@ -1,5 +1,5 @@
<template>
<div class="mb-7">
<div :class="{'mb-7': !isLast}">
<!--Label for input-->
<label class="text-sm font-bold text-gray-700 mb-1.5 block">
@@ -24,6 +24,7 @@
name: 'AppInputText',
props: [
'description',
'isLast',
'title',
'error',
]
@@ -9,18 +9,16 @@
<!--Form to set sharing-->
<ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Locale" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('select_locale') }}:</label>
<SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Language Name" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('locale_name') }}:</label>
<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" :placeholder="$t('type_language_name')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Language Locale" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('select_locale')" :error="errors[0]">
<SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Language Name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('locale_name')" :error="errors[0]" :is-last="true">
<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('type_language_name')">
</AppInputText>
</ValidationProvider>
</ValidationObserver>
</PopupContent>
@@ -47,6 +45,7 @@
</template>
<script>
import AppInputText from "../Admin/AppInputText";
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
@@ -63,6 +62,7 @@ export default {
components: {
ValidationProvider,
ValidationObserver,
AppInputText,
PopupWrapper,
PopupActions,
PopupContent,
@@ -18,7 +18,7 @@
/>
<div class="dropzone-message" v-show="! isData">
<image-icon size="28" class="icon-upload text-theme"></image-icon>
<image-icon size="28" class="icon-upload text-theme mx-auto mb-1"/>
<span class="dropzone-title">
{{ $t('input_image.title') }}
</span>
@@ -2,7 +2,7 @@
<div class="select">
<!--Area-->
<div class="input-area" :class="{'is-active': isOpen, 'is-error': isError}" @click="openMenu">
<div class="input-area bg-light-background rounded-lg" :class="{'is-active': isOpen, 'is-error': isError}" @click="openMenu">
<!--If is selected-->
<div class="selected" v-if="selected">
@@ -23,9 +23,9 @@
<!--Options-->
<transition name="slide-in">
<div class="input-options" v-if="isOpen">
<div class="input-options rounded-lg" v-if="isOpen">
<div v-if="options.length > 5" class="select-search">
<input v-model="query" ref="search" type="text" :placeholder="$t('select_search_placeholder')" class="search-input focus-border-theme">
<input v-model="query" ref="search" type="text" :placeholder="$t('select_search_placeholder')" class="search-input focus-border-theme rounded-lg">
</div>
<ul class="option-list">
<li class="option-item" @click="selectOption(option)" v-for="(option, i) in optionList" :key="i">
@@ -131,7 +131,6 @@
background: $light_background;
@include transition(150ms);
@include font-size(14);
border-radius: 8px;
padding: 13px 20px;
appearance: none;
font-weight: 700;
@@ -143,7 +142,6 @@
.input-options {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
background: white;
border-radius: 8px;
position: absolute;
overflow: hidden;
top: 65px;
@@ -174,11 +172,8 @@
border-style: solid;
border-color: transparent;
justify-content: space-between;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
//background: $light_mode_input_background;
@include transition(150ms);
align-items: center;
border-radius: 8px;
padding: 13px 20px;
display: flex;
outline: 0;