diff options
| author |  Corentin Thomasset <corentin.thomasset74@gmail.com>
| 2022-04-24 23:09:12 +0200 |
|---|---|---|
| committer | Corentin Thomasset <corentin.thomasset74@gmail.com>
| 2022-04-24 23:09:12 +0200 |
| commit | e21230bbd9550ba3315607b021a60a4f9f9e1b61 (patch) | |
| tree | e48f28ab72b097bbb7ad1d34882bbb534aea80fd /src/tools/url-encoder/url-encoder.vue | |
| parent | 84cf1bb9645c5ae31579098df59471f7d99f6f0c (diff) | |
| download | it-tools-e21230bbd9550ba3315607b021a60a4f9f9e1b61.tar.gz it-tools-e21230bbd9550ba3315607b021a60a4f9f9e1b61.tar.zst it-tools-e21230bbd9550ba3315607b021a60a4f9f9e1b61.zip | |
refactor(responsive): row layout for multicards on big screens
Diffstat (limited to '')
| -rw-r--r-- | src/tools/url-encoder/url-encoder.vue | 107 |
1 files changed, 52 insertions, 55 deletions
diff --git a/src/tools/url-encoder/url-encoder.vue b/src/tools/url-encoder/url-encoder.vue index e178353..5615791 100644 --- a/src/tools/url-encoder/url-encoder.vue +++ b/src/tools/url-encoder/url-encoder.vue @@ -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"> |