Commit f874b08d authored by cst's avatar cst
Browse files

removed shadow, added border

parent 705adb6b
<template>
<v-popover :placement="placement" offset="10">
<font-awesome-icon
:icon="icon"
class="text-gray-600 hover:cursor-pointer hover:text-pastel-blue"
/>
<template slot="popover">
<slot/>
</template>
</v-popover>
<v-popover :placement="placement" offset="10">
<font-awesome-icon :icon="icon" class="text-gray-600 hover:cursor-pointer hover:text-pastel-blue" />
<template slot="popover">
<slot />
</template>
</v-popover>
</template>
<script>
import { VPopover } from "v-tooltip";
export default {
name: "LPopup",
props: ["icon", "placement"],
components: {
VPopover
}
name: "LPopup",
props: ["icon", "placement"],
components: {
VPopover,
},
};
</script>
<style lang="postcss">
.tooltip {
display: block !important;
/* z-index: 10000; */
display: block !important;
/* z-index: 10000; */
}
.tooltip .tooltip-inner {
color: white;
border-radius: 16px;
/* padding: 5px 10px 4px; */
color: white;
border-radius: 16px;
/* padding: 5px 10px 4px; */
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
.tooltip.popover .popover-inner {
/* padding: 24px; */
@apply rounded-lg shadow bg-gray-100 text-pastel-black;
/* padding: 24px; */
@apply rounded border bg-white text-pastel-black;
}
.tooltip.popover .popover-arrow {
@apply border-gray-100;
@apply border-gray-100;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden="true"] {
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
visibility: hidden;
opacity: 0;
transition: opacity 0.15s, visibility 0.15s;
}
.tooltip[aria-hidden="false"] {
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
visibility: visible;
opacity: 1;
transition: opacity 0.15s;
}
</style>
<template>
<div
id="app"
class="flex antialiased text-xs text-pastel-black justify-center h-full bg-gray-200"
>
<div class="mt-20 w-10/12 md:w-auto">
<div class="md:flex bg-white rounded-lg p-10 shadow-sm">
<div
class="rounded-full h-20 w-20 md:h-24 md:w-24 flex items-center justify-center bg-pastel-green-500 mx-auto md:mx-0 md:mr-6"
>
<font-awesome-icon icon="crow" class="text-4xl md:text-5xl text-white" :spin="false"/>
</div>
<div id="app" class="flex antialiased text-xs text-pastel-black justify-center h-full bg-gray-200">
<div class="mt-20 w-10/12 md:w-auto">
<div class="md:flex bg-white rounded p-10 border">
<div class="rounded-full h-20 w-20 md:h-24 md:w-24 flex items-center justify-center bg-pastel-green-500 mx-auto md:mx-0 md:mr-6">
<font-awesome-icon icon="crow" class="text-4xl md:text-5xl text-white" :spin="false" />
</div>
<div class="text-center md:text-left">
<!-- Username -->
<div class="mt-2 md:mt-0 flex justify-center">
<l-input
v-model="username"
type="text"
placeholder="User name"
@keyup.enter.native="handleSubmit"
>
<template slot="prefix">
<font-awesome-icon icon="user" class="text-xl text-gray-500"/>
</template>
</l-input>
</div>
<!-- Password -->
<div class="mt-2 md:mt-1 flex justify-center">
<l-input
v-model="password"
type="password"
placeholder="Password"
@keyup.enter.native="handleSubmit"
>
<template slot="prefix">
<font-awesome-icon icon="key" class="text-xl text-gray-500"/>
</template>
</l-input>
</div>
<!-- Submit -->
<div class="mt-2 md:mt-1 flex justify-center">
<l-button
type="success"
class="w-full flex justify-center"
:disabled="disableLogin"
@click="handleSubmit"
>
<div class="self-center">
<font-awesome-icon
v-show="authenticating"
icon="spinner"
class="text-base text-white"
:spin="true"
/>
</div>
<div class="ml-2 self-center">Log in</div>
</l-button>
</div>
<!-- Error message -->
<div
class="p-2 flex text-xs justify-center font-bold text-pastel-red"
v-show="authenticationError"
>{{authenticationError}}</div>
<div class="text-center md:text-left">
<!-- Username -->
<div class="mt-2 md:mt-0 flex justify-center">
<l-input v-model="username" type="text" placeholder="User name" @keyup.enter.native="handleSubmit">
<template slot="prefix">
<font-awesome-icon icon="user" class="text-xl text-gray-500" />
</template>
</l-input>
</div>
<!-- Password -->
<div class="mt-2 md:mt-1 flex justify-center">
<l-input v-model="password" type="password" placeholder="Password" @keyup.enter.native="handleSubmit">
<template slot="prefix">
<font-awesome-icon icon="key" class="text-xl text-gray-500" />
</template>
</l-input>
</div>
<!-- Submit -->
<div class="mt-2 md:mt-1 flex justify-center">
<l-button type="success" class="w-full flex justify-center" :disabled="disableLogin" @click="handleSubmit">
<div class="self-center">
<font-awesome-icon v-show="authenticating" icon="spinner" class="text-base text-white" :spin="true" />
</div>
<div class="ml-2 self-center">Log in</div>
</l-button>
</div>
<!-- Error message -->
<div class="p-2 flex text-xs justify-center font-bold text-pastel-red" v-show="authenticationError">{{ authenticationError }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import UsersService from "@/helpers/services/users.service.js";
import LError from "@/components/LError";
import { LButton, LInput } from "@/components/forms";
import {
LContainer,
LContainerTitle,
LContainerToolbar
} from "@/components/container";
import { LContainer, LContainerTitle, LContainerToolbar } from "@/components/container";
export default {
name: "Login",
components: {
LButton,
LInput,
LContainer,
LContainerTitle,
LContainerToolbar,
LError
},
data() {
return {
username: "admin",
password: "admin",
authenticating: false,
authenticationError: ""
};
},
methods: {
async handleSubmit() {
if (this.username != "" && this.password != "") {
try {
this.authenticationError = "";
this.authenticating = true;
await UsersService.authenticate(this.username, this.password);
this.authenticating = false;
window.location.href = "/";
} catch (error) {
this.authenticationError = error.message;
this.authenticating = false;
}
}
}
},
computed: {
disableLogin() {
return this.authenticating || this.username == "" || this.password == "";
}
}
name: "Login",
components: {
LButton,
LInput,
LContainer,
LContainerTitle,
LContainerToolbar,
LError,
},
data() {
return {
username: "admin",
password: "admin",
authenticating: false,
authenticationError: "",
};
},
methods: {
async handleSubmit() {
if (this.username != "" && this.password != "") {
try {
this.authenticationError = "";
this.authenticating = true;
await UsersService.authenticate(this.username, this.password);
this.authenticating = false;
window.location.href = "/";
} catch (error) {
this.authenticationError = error.message;
this.authenticating = false;
}
}
},
},
computed: {
disableLogin() {
return this.authenticating || this.username == "" || this.password == "";
},
},
};
</script>
......@@ -126,23 +94,23 @@ export default {
html,
body {
height: 100%;
height: 100%;
}
body {
@apply h-full bg-gray-200;
font-family: "Rubik", arial;
@apply h-full bg-gray-200;
font-family: "Rubik", arial;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none;
outline: none;
}
.btn-disabled {
@apply bg-bluegray-300;
pointer-events: none;
@apply bg-bluegray-300;
pointer-events: none;
}
</style>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment