mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-04-24 08:46:15 -04:00
refactor(responsive): row layout for multicards on big screens
This commit is contained in:
Corentin Thomasset
parent
84cf1bb964
commit
e21230bbd9
8 changed files with 136 additions and 130 deletions
|
|
@ -33,20 +33,36 @@ useHead(head);
|
|||
{{ route.meta.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tool-content">
|
||||
<slot />
|
||||
</div>
|
||||
</base-layout>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tool-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
|
||||
::v-deep(& > *) {
|
||||
flex: 0 1 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-layout {
|
||||
max-width: 700px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tool-header {
|
||||
padding: 40px 0;
|
||||
width: 100%;
|
||||
|
||||
.n-h1 {
|
||||
opacity: 0.9;
|
||||
|
|
|
|||
|
|
@ -50,8 +50,7 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.n-input,
|
||||
.n-upload,
|
||||
.n-card {
|
||||
.n-upload {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
</n-space>
|
||||
</n-card>
|
||||
|
||||
<br />
|
||||
<n-card title="Compare string with hash">
|
||||
<n-form label-width="120">
|
||||
<n-form-item label="Your string: " label-placement="left">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
</n-form>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<br />
|
||||
<n-card>
|
||||
<pre>
|
||||
┌──────────── [optional] seconds (0 - 59)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<n-card v-for="{ name, information } in sections" :key="name" :title="name" style="margin-bottom: 15px">
|
||||
<n-card v-for="{ name, information } in sections" :key="name" :title="name">
|
||||
<n-grid cols="1 400:2" x-gap="12" y-gap="12">
|
||||
<n-gi v-for="{ label, value } in information" :key="label" class="information">
|
||||
<n-card :bordered="false" embedded>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,78 @@
|
|||
<template>
|
||||
<div>
|
||||
<n-card title="Encrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your text:" :show-feedback="false">
|
||||
<n-input
|
||||
v-model:value="cypherInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="cypherSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="cypherAlgo"
|
||||
:options="Object.keys(algos).map((label) => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-form-item label="Yout text encrypted:" :show-feedback="false">
|
||||
<n-card title="Encrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your text:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="cypherOutput"
|
||||
v-model:value="cypherInput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="cypherSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="cypherAlgo"
|
||||
:options="Object.keys(algos).map((label) => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-card title="Decrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your encrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
v-model:value="decryptInput"
|
||||
type="textarea"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="decryptSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="decryptAlgo"
|
||||
:options="Object.keys(algos).map((label) => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-form-item label="Yout decrypted text:" :show-feedback="false">
|
||||
<n-form-item label="Yout text encrypted:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="cypherOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
<n-card title="Decrypt">
|
||||
<n-space item-style="flex: 1 1 0">
|
||||
<n-form-item label="Your encrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="decryptOutput"
|
||||
v-model:value="decryptInput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
placeholder="The string to cypher"
|
||||
:autosize="{ minRows: 4 }"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</div>
|
||||
<n-space vertical>
|
||||
<n-form-item label="Your secret key:" :show-feedback="false">
|
||||
<n-input v-model:value="decryptSecret" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Encryption algorithm:" :show-feedback="false">
|
||||
<n-select
|
||||
v-model:value="decryptAlgo"
|
||||
:options="Object.keys(algos).map((label) => ({ label, value: label }))"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</n-space>
|
||||
<br />
|
||||
<n-form-item label="Yout decrypted text:" :show-feedback="false">
|
||||
<n-input
|
||||
:value="decryptOutput"
|
||||
type="textarea"
|
||||
placeholder="Your string hash"
|
||||
:autosize="{ minRows: 2 }"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
<n-button secondary @click="copyEscaped"> Copy </n-button>
|
||||
</n-space>
|
||||
</n-card>
|
||||
<br />
|
||||
<n-card title="Unescape html entities">
|
||||
<n-form-item label="Your escaped string :">
|
||||
<n-input
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue