mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-24 16:56:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(responsive): row layout for multicards on big screens

Browse source
This commit is contained in:
Corentin Thomasset 2022-04-24 23:09:12 +02:00
parent 84cf1bb964
commit e21230bbd9
No known key found for this signature in database
GPG key ID: DBD997E935996158
8 changed files with 136 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/tools/url-encoder/url-encoder.vue
View file

@ -1,63 +1,60 @@
<template>
<div>
<n-card title="Encode">
<n-form-item
label="Your string :"
:feedback="encodedValidation.message"
:validation-status="encodedValidation.status"
>
<n-input
v-model:value="encodeInput"
type="textarea"
placeholder="The string to encode"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-card title="Encode">
<n-form-item
label="Your string :"
:feedback="encodedValidation.message"
:validation-status="encodedValidation.status"
>
<n-input
v-model:value="encodeInput"
type="textarea"
placeholder="The string to encode"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-form-item label="Your string encoded :">
<n-input
:value="encodeOutput"
type="textarea"
readonly
placeholder="Your string encoded"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-form-item label="Your string encoded :">
<n-input
:value="encodeOutput"
type="textarea"
readonly
placeholder="Your string encoded"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyEncoded"> Copy </n-button>
</n-space>
</n-card>
<br />
<n-card title="Decode">
<n-form-item
label="Your encoded string :"
:feedback="decodeValidation.message"
:validation-status="decodeValidation.status"
>
<n-input
v-model:value="decodeInput"
type="textarea"
placeholder="The string to decode"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyEncoded"> Copy </n-button>
</n-space>
</n-card>
<n-card title="Decode">
<n-form-item
label="Your encoded string :"
:feedback="decodeValidation.message"
:validation-status="decodeValidation.status"
>
<n-input
v-model:value="decodeInput"
type="textarea"
placeholder="The string to decode"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-form-item label="Your string decoded :">
<n-input
:value="decodeOutput"
type="textarea"
readonly
placeholder="Your string decoded"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-form-item label="Your string decoded :">
<n-input
:value="decodeOutput"
type="textarea"
readonly
placeholder="Your string decoded"
:autosize="{ minRows: 2 }"
/>
</n-form-item>
<n-space justify="center">
<n-button secondary @click="copyDecoded"> Copy </n-button>
</n-space>
</n-card>
</div>
<n-space justify="center">
<n-button secondary @click="copyDecoded"> Copy </n-button>
</n-space>
</n-card>
</template>
<script setup lang="ts">