mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-26 09:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(ui): removed all n-space

Browse source
This commit is contained in:
Corentin Thomasset 2023-05-27 17:36:15 +02:00 • committed by Corentin THOMASSET
parent 34d8e5ce2c
commit 4d2b037dbe
40 changed files with 222 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/tools/eta-calculator/eta-calculator.vue
View file

@ -6,46 +6,40 @@
{{ endAt }}.
</n-text>
<n-divider />
<n-space item-style="flex:1 1 0">
<div>
<n-space item-style="flex:1 1 0">
<n-form-item label="Amount of element to consume">
<n-input-number v-model:value="unitCount" :min="1" />
</n-form-item>
<n-form-item label="The consumption started at">
<n-date-picker v-model:value="startedAt" type="datetime" />
</n-form-item>
</n-space>
<div flex gap-2>
<n-form-item label="Amount of element to consume" flex-1>
<n-input-number v-model:value="unitCount" :min="1" />
</n-form-item>
<n-form-item label="The consumption started at" flex-1>
<n-date-picker v-model:value="startedAt" type="datetime" />
</n-form-item>
</div>
<n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
<n-input-number v-model:value="unitPerTimeSpan" :min="1" />
<span style="margin: 0 10px">in</span>
<n-input-group>
<n-input-number v-model:value="timeSpan" :min="1" />
<n-select
v-model:value="timeSpanUnitMultiplier"
:options="[
{ label: 'milliseconds', value: 1 },
{ label: 'seconds', value: 1000 },
{ label: 'minutes', value: 1000 * 60 },
{ label: 'hours', value: 1000 * 60 * 60 },
{ label: 'days', value: 1000 * 60 * 60 * 24 },
]"
></n-select>
</n-input-group>
</n-form-item>
<n-form-item label="Amount of unit consumed by time span" :show-feedback="false">
<n-input-number v-model:value="unitPerTimeSpan" :min="1" />
<span mx-3>in</span>
<n-input-group>
<n-input-number v-model:value="timeSpan" :min="1" />
<n-select
v-model:value="timeSpanUnitMultiplier"
:options="[
{ label: 'milliseconds', value: 1 },
{ label: 'seconds', value: 1000 },
{ label: 'minutes', value: 1000 * 60 },
{ label: 'hours', value: 1000 * 60 * 60 },
{ label: 'days', value: 1000 * 60 * 60 * 24 },
]"
></n-select>
</n-input-group>
</n-form-item>
<n-divider />
<n-space vertical>
<c-card>
<n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
</c-card>
<c-card>
<n-statistic label="It will end ">{{ endAt }}</n-statistic>
</c-card>
</n-space>
</div>
</n-space>
<n-divider />
<c-card mb-2>
<n-statistic label="Total duration">{{ formatMsDuration(durationMs) }}</n-statistic>
</c-card>
<c-card>
<n-statistic label="It will end ">{{ endAt }}</n-statistic>
</c-card>
</div>
</template>