mirror of
https://github.com/grey-cat-1908/formaptix-web.git
synced 2024-09-22 19:21:59 +03:00
Update Profile.vue
This commit is contained in:
Vyacheslav
parent
915307b232
commit
ab5766d776
1 changed files with 133 additions and 58 deletions
|
|
@ -53,28 +53,23 @@ async function createForm() {
|
|||
<h1 class="profile-title">Управление формами</h1>
|
||||
<button @click="createForm">Создать</button>
|
||||
<div class="profile-cards">
|
||||
<div v-for="(form, index) in userForms" v-if="userForms.length > 0">
|
||||
<div class="profile-card">
|
||||
<div class="profile-card-title">{{ form.data.name }}</div>
|
||||
<div class="profile-card" v-for="(form, index) in userForms" v-if="userForms.length > 0">
|
||||
<div class="profile-card-title">
|
||||
<code class="profile-card-num">001</code>
|
||||
{{ form.data.name }}
|
||||
</div>
|
||||
<div class="profile-card-buttons">
|
||||
<button
|
||||
class="profile-card-btn profile-card-btn--view"
|
||||
@click="$router.push('/form/view/' + form.id)"
|
||||
>
|
||||
<div class="profile-card-btn-inner"><PhEye :size="24" /></div>
|
||||
</button>
|
||||
<button
|
||||
class="profile-card-btn profile-card-btn--update"
|
||||
@click="$router.push('/form/edit/' + form.id)"
|
||||
>
|
||||
<div class="profile-card-btn-inner"><PhPencil :size="24" /></div>
|
||||
<div class="profile-card-btn-inner"><PhEye :size="26" /></div>
|
||||
</button>
|
||||
<button class="profile-card-btn profile-card-btn--delete" @click="deleteForm(index)">
|
||||
<div class="profile-card-btn-inner"><PhTrash :size="24" /></div>
|
||||
<div class="profile-card-btn-inner"><PhTrash :size="26" /></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1>Формы не найдены.</h1>
|
||||
</div>
|
||||
|
|
@ -89,64 +84,144 @@ async function createForm() {
|
|||
|
||||
&-cards {
|
||||
margin-top: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
gap: 25px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-card {
|
||||
border: 1px solid var(--color-main-border);
|
||||
background: var(--color-secondary-background);
|
||||
transition: 0.25s ease;
|
||||
padding: 15px;
|
||||
border-radius: 0.5rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 2px solid var(--color-secondary-border);
|
||||
border-top: 2px solid transparent;
|
||||
transition: 0.4s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&-title {
|
||||
font-weight: 400;
|
||||
&:hover {
|
||||
////border: 1px solid var(--color-main-border);
|
||||
background: var(--color-main-border);
|
||||
////border-radius: 0.5rem;
|
||||
//transform: scale(1.03);
|
||||
//border-bottom: 2px solid var(--color-third-border) !important;
|
||||
//border-top: 2px solid var(--color-third-border);
|
||||
}
|
||||
|
||||
&:hover &-num {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
margin-top: 25px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 10px;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-radius: 0.5rem;
|
||||
transition: 0.25s ease;
|
||||
|
||||
&--view {
|
||||
background: #d6e1ff;
|
||||
border: 1px solid #a7beff;
|
||||
|
||||
&:hover {
|
||||
background: #ccd9ff;
|
||||
}
|
||||
}
|
||||
|
||||
&--update {
|
||||
background: #fff7cc;
|
||||
border: 1px solid #f6e17a;
|
||||
|
||||
&:hover {
|
||||
background: #fff4b2;
|
||||
}
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&--delete {
|
||||
background: #ffd8d8;
|
||||
border: 1px solid #ffb1b1;
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #ffcece;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
font-weight: 400;
|
||||
align-items: center;
|
||||
gap: 0 15px;
|
||||
}
|
||||
|
||||
&-num {
|
||||
font-size: 0.88em;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
transition: 0.4s ease;
|
||||
border-right: 1px solid var(--color-subtext);
|
||||
color: var(--color-subtext);
|
||||
}
|
||||
}
|
||||
}
|
||||
//.profile {
|
||||
// margin: 40px 0;
|
||||
//
|
||||
// &-cards {
|
||||
// margin-top: 30px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
// gap: 25px;
|
||||
// }
|
||||
//
|
||||
// &-card {
|
||||
// border: 1px solid var(--color-main-border);
|
||||
// background: var(--color-secondary-background);
|
||||
// transition: 0.25s ease;
|
||||
// padding: 15px;
|
||||
// border-radius: 0.5rem;
|
||||
//
|
||||
// &-title {
|
||||
// font-weight: 400;
|
||||
// }
|
||||
//
|
||||
// &-buttons {
|
||||
// margin-top: 25px;
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr 1fr;
|
||||
// gap: 15px;
|
||||
// }
|
||||
//
|
||||
// &-btn {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// height: 45px;
|
||||
// border-radius: 0.5rem;
|
||||
// transition: 0.25s ease;
|
||||
//
|
||||
// &--view {
|
||||
// background: #d6e1ff;
|
||||
// border: 1px solid #a7beff;
|
||||
//
|
||||
// &:hover {
|
||||
// background: #ccd9ff;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--update {
|
||||
// background: #fff7cc;
|
||||
// border: 1px solid #f6e17a;
|
||||
//
|
||||
// &:hover {
|
||||
// background: #fff4b2;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// &--delete {
|
||||
// background: #ffd8d8;
|
||||
// border: 1px solid #ffb1b1;
|
||||
//
|
||||
// &:hover {
|
||||
// background: #ffcece;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue