mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 14:56:17 -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

18
src/layouts/tool.layout.vue
View file

@ -33,20 +33,36 @@ useHead(head);
{{ route.meta.description }} {{ route.meta.description }}
</div> </div>
</div> </div>
</div>
<div class="tool-content">
<slot /> <slot />
</div> </div>
</base-layout> </base-layout>
</template> </template>
<style lang="less" scoped> <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 { .tool-layout {
max-width: 700px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
.tool-header { .tool-header {
padding: 40px 0; padding: 40px 0;
width: 100%;
.n-h1 { .n-h1 {
opacity: 0.9; opacity: 0.9;

3
src/tools/base64-converter/base64-converter.vue
View file

@ -50,8 +50,7 @@ async function onUpload({ file: { file } }: { file: UploadFileInfo }) {
<style lang="less" scoped> <style lang="less" scoped>
.n-input, .n-input,
.n-upload, .n-upload {
.n-card {
margin-bottom: 15px; margin-bottom: 15px;
} }

1
src/tools/bcrypt/bcrypt.vue
View file

@ -22,7 +22,6 @@
</n-space> </n-space>
</n-card> </n-card>
<br />
<n-card title="Compare string with hash"> <n-card title="Compare string with hash">
<n-form label-width="120"> <n-form label-width="120">
<n-form-item label="Your string: " label-placement="left"> <n-form-item label="Your string: " label-placement="left">

1
src/tools/crontab-generator/crontab-generator.vue
View file

@ -28,7 +28,6 @@
</n-form> </n-form>
</n-space> </n-space>
</n-card> </n-card>
<br />
<n-card> <n-card>
<pre> <pre>
┌──────────── [optional] seconds (0 - 59) ┌──────────── [optional] seconds (0 - 59)

2
src/tools/device-information/device-information.vue
View file

@ -1,5 +1,5 @@
<template> <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-grid cols="1 400:2" x-gap="12" y-gap="12">
<n-gi v-for="{ label, value } in information" :key="label" class="information"> <n-gi v-for="{ label, value } in information" :key="label" class="information">
<n-card :bordered="false" embedded> <n-card :bordered="false" embedded>

133
src/tools/encryption/encryption.vue
View file

@ -1,81 +1,78 @@
<template> <template>
<div> <n-card title="Encrypt">
<n-card title="Encrypt"> <n-space item-style="flex: 1 1 0">
<n-space item-style="flex: 1 1 0"> <n-form-item label="Your text:" :show-feedback="false">
<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-input <n-input
:value="cypherOutput" v-model:value="cypherInput"
type="textarea" type="textarea"
placeholder="Your string hash" placeholder="The string to cypher"
:autosize="{ minRows: 2 }" :autosize="{ minRows: 4 }"
readonly
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/> />
</n-form-item> </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 /> <br />
<n-card title="Decrypt"> <n-form-item label="Yout text encrypted:" :show-feedback="false">
<n-space item-style="flex: 1 1 0"> <n-input
<n-form-item label="Your encrypted text:" :show-feedback="false"> :value="cypherOutput"
<n-input type="textarea"
v-model:value="decryptInput" placeholder="Your string hash"
type="textarea" :autosize="{ minRows: 2 }"
placeholder="The string to cypher" readonly
:autosize="{ minRows: 4 }" autocomplete="off"
/> autocorrect="off"
</n-form-item> autocapitalize="off"
<n-space vertical> spellcheck="false"
<n-form-item label="Your secret key:" :show-feedback="false"> />
<n-input v-model:value="decryptSecret" /> </n-form-item>
</n-form-item> </n-card>
<n-form-item label="Encryption algorithm:" :show-feedback="false"> <n-card title="Decrypt">
<n-select <n-space item-style="flex: 1 1 0">
v-model:value="decryptAlgo" <n-form-item label="Your encrypted text:" :show-feedback="false">
: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 <n-input
:value="decryptOutput" v-model:value="decryptInput"
type="textarea" type="textarea"
placeholder="Your string hash" placeholder="The string to cypher"
:autosize="{ minRows: 2 }" :autosize="{ minRows: 4 }"
readonly
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
/> />
</n-form-item> </n-form-item>
</n-card> <n-space vertical>
</div> <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> </template>
<script setup lang="ts"> <script setup lang="ts">

1
src/tools/html-entities/html-entities.vue
View file

@ -23,7 +23,6 @@
<n-button secondary @click="copyEscaped"> Copy </n-button> <n-button secondary @click="copyEscaped"> Copy </n-button>
</n-space> </n-space>
</n-card> </n-card>
<br />
<n-card title="Unescape html entities"> <n-card title="Unescape html entities">
<n-form-item label="Your escaped string :"> <n-form-item label="Your escaped string :">
<n-input <n-input

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

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