Browse Source

fix layout of geodata column

pull/4723/head
flisowna 2 years ago
parent
commit
467b992ea8
  1. 30
      packages/nc-gui/components/cell/GeoData.vue

30
packages/nc-gui/components/cell/GeoData.vue

@ -102,23 +102,23 @@ const onGetCurrentLocation = () => {
/> />
<span v-else class="text-sm">{{ vModel }}</span> --> <span v-else class="text-sm">{{ vModel }}</span> -->
<a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click"> <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click" overlay-class-name="dropdown-new">
<a-button>{{ latLongStr }}</a-button> <a-button>{{ latLongStr }}</a-button>
<template #overlay> <template #overlay>
<a-form :model="formState" class="flex flex-col dropdown" @finish="handleFinish"> <a-form :model="formState" class="flex flex-col" @finish="handleFinish">
<a-form-item class="inputLat" label="Lat"> <a-form-item class="inputLat" label="Lat">
<a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" /> <a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" />
</a-form-item> </a-form-item>
<a-form-item class="inputLng" label="Lng"> <a-form-item class="inputLng" label="Lng">
<a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" /> <a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" />
</a-form-item> </a-form-item>
<a-form-item> <a-form-item class="button-location">
<a-button @click="onGetCurrentLocation">Your Location</a-button>
<MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" /> <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
<a-button @click="onGetCurrentLocation">Your Location</a-button>
</a-form-item> </a-form-item>
<a-form-item class="buttons"> <a-form-item class="buttons">
<a-button class="buttons" type="text" @click="clear">Cancel</a-button> <a-button type="text" @click="clear">Cancel</a-button>
<a-button class="buttons" type="primary" html-type="submit">Submit</a-button> <a-button type="primary" html-type="submit">Submit</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</template> </template>
@ -129,29 +129,27 @@ const onGetCurrentLocation = () => {
input[type='number']:focus { input[type='number']:focus {
@apply ring-transparent; @apply ring-transparent;
} }
.dropdown {
background-color: beige;
// padding-top: 2rem;
align-items: start;
height: 230px !important;
width: 200px !important;
}
.inputLat { .inputLat {
width: 180px; width: 180px;
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0.5rem;
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
.inputLng { .inputLng {
width: 180px; width: 180px;
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem;
} }
.button-location { .button-location {
margin-left: auto; margin-right: 0.5rem;
margin-right: auto;
} }
.buttons { .buttons {
margin-left: auto;
margin-bottom: 0; margin-bottom: 0;
} }
.ant-dropdown-menu {
height: fit-content;
align-items: flex-end;
}
</style> </style>

Loading…
Cancel
Save