Skip to content

Commit

Permalink
Merge pull request #402 from chain4travel/528-responsive-design-impro…
Browse files Browse the repository at this point in the history 
…vements-needed-for-mint-collectible-and-collectible-family-sections

responsive design improvements needed for mint collectible and collectible family sections
  • Loading branch information
@Ysrbolles
Ysrbolles authored Jun 5, 2024
2 parents 5f49010 + ea5a3d2 commit e363a87
Show file tree
Hide file tree
Showing 9 changed files with 353 additions and 196 deletions.
26 changes: 18 additions & 8 deletions src/components/CamInput.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<template>
<div class="cam-input">
<input
<component
:is="textArea ? 'textarea' : 'input'"
class="full-width-input"
:placeholder="placeholder"
:value="value"
@input="updateValue"
:class="{ error: error }"
:disabled="disabled"
:type="type"
:type="textArea ? null : type"
/>
<div class="validation-message" v-if="error && errorMessage">
<svg
Expand All @@ -22,9 +23,7 @@
fill="#E5431F"
/>
</svg>
<p class="err">
{{ errorMessage }}
</p>
<p class="err">{{ errorMessage }}</p>
</div>
</div>
</template>
Expand All @@ -34,17 +33,21 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class CamInput extends Vue {
@Prop({ default: {} }) Inlinestyle!: any
@Prop({ default: false }) textArea!: boolean
@Prop({ default: '' }) placeholder!: string
@Prop({ default: false }) error!: boolean
@Prop({ default: '' }) errorMessage!: string
@Prop({ default: '' }) value!: string
@Prop({ default: false }) disabled!: boolean
@Prop({ default: 'text' }) type!: string
updateValue(event: Event) {
this.$emit('input', (event.target as HTMLInputElement).value)
}
}
</script>

<style scoped lang="scss">
.v-application .error {
background-color: transparent !important;
Expand All @@ -53,13 +56,15 @@ export default class CamInput extends Vue {
border: 1px solid var(--camino-slate-slate-600) !important;
}
}
.cam-input {
display: flex;
flex-direction: column;
gap: 4px;
}
input {
input,
textarea {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border-color);
Expand All @@ -68,8 +73,13 @@ input {
}
}
textarea {
width: 100%;
height: 80px;
max-width: 100%;
}
.full-width-input {
/* flex: 1; */
background-color: var(--bg);
&:focus {
border-color: var(--camino-brand-too-blue-to-be-true);
Expand All @@ -94,7 +104,7 @@ input {
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
line-height: 20px;
}
}
</style>
1 change: 1 addition & 0 deletions src/components/misc/MnemonicInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<p class="index">{{ i }}.</p>
<input
:id="'i' + i"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
:type="isHidden && password ? 'password' : 'text'"
Expand Down
149 changes: 76 additions & 73 deletions src/components/wallet/studio/NewCollectibleFamily.vue
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,69 @@
<template>
<div class="new_family">
<div>
<p>{{ $t('studio.family.desc') }}</p>
<form @submit.prevent="submit" v-if="!isSuccess">
<div style="display: flex">
<div style="flex-grow: 1">
<label>{{ $t('studio.family.label1') }}</label>
<input
type="text"
placeholder="Name"
v-model="name"
style="width: 100%"
maxlength="128"
/>
</div>
<div class="symbol">
<label>{{ $t('studio.family.label2') }}</label>
<input
type="text"
placeholder="xxxx"
v-model="symbol"
max="4"
maxlength="4"
/>
</div>
</div>

<div>
<label>{{ $t('studio.family.label3') }}</label>
<p>{{ $t('studio.family.desc') }}</p>
<form @submit.prevent="submit" v-if="!isSuccess">
<div style="display: flex">
<div style="flex-grow: 1">
<label>{{ $t('studio.family.label1') }}</label>
<input
type="number"
placeholder="Name of the Collection"
min="1"
max="1024"
v-model="groupNum"
type="text"
placeholder="Name"
v-model="name"
style="width: 100%"
maxlength="128"
/>
</div>
<div>
<p>
{{ $t('studio.family.fee') }}: {{ txFee.toLocaleString() }}
{{ nativeAssetSymbol }}
</p>
<div class="symbol">
<label>{{ $t('studio.family.label2') }}</label>
<input type="text" placeholder="xxxx" v-model="symbol" max="4" maxlength="4" />
</div>
<p v-if="error" class="err">{{ error }}</p>
<CamBtn :loading="isLoading" variant="accent" type="submit">
{{ $t('studio.family.submit') }}
</CamBtn>
</form>
<div class="success_cont" v-if="isSuccess">
<p style="color: var(--success); margin: 12px 0 !important">
<fa icon="check-circle"></fa>
{{ $t('studio.family.success.desc') }}
</div>

<div>
<label>{{ $t('studio.family.label3') }}</label>
<input
type="number"
placeholder="Name of the Collection"
min="1"
max="1024"
v-model="groupNum"
/>
</div>
<div>
<p>
{{ $t('studio.family.fee') }}: {{ txFee.toLocaleString() }}
{{ nativeAssetSymbol }}
</p>
<div>
<label>{{ $t('studio.family.success.label1') }}</label>
<p style="word-break: break-all">{{ txId }}</p>
</div>
<div>
<label>{{ $t('studio.family.success.label2') }}</label>
<p>{{ name }}</p>
</div>
<div>
<label>{{ $t('studio.family.success.label3') }}</label>
<p>{{ symbol }}</p>
</div>
<div>
<label>{{ $t('studio.family.success.label4') }}</label>
<p>{{ groupNum }}</p>
</div>
<v-btn class="button_secondary" small @click="cancel" depressed>
{{ $t('studio.family.back') }}
</v-btn>
<CamBtn @click="cancel" variant="accent">
{{ $t('studio.family.back') }}
</CamBtn>
</div>
<p v-if="error" class="err">{{ error }}</p>
<CamBtn :loading="isLoading" variant="accent" type="submit">
{{ $t('studio.family.submit') }}
</CamBtn>
</form>
<div class="success_cont" v-if="isSuccess">
<Alert variant="positive">
{{ $t('studio.family.success.desc') }}
</Alert>
<div class="family-info">
<label>{{ $t('studio.family.success.label1') }}</label>
<p style="word-break: break-all">{{ txId }}</p>
</div>
<div class="family-info">
<label>{{ $t('studio.family.success.label2') }}</label>
<p>{{ name }}</p>
</div>
<div class="family-info">
<label>{{ $t('studio.family.success.label3') }}</label>
<p>{{ symbol }}</p>
</div>
<div class="family-info">
<label>{{ $t('studio.family.success.label4') }}</label>
<p>{{ groupNum }}</p>
</div>

<CamBtn @click="cancel" variant="accent">
{{ $t('studio.family.back') }}
</CamBtn>
</div>
</div>
</template>
Expand All @@ -84,10 +73,12 @@ import { ava } from '@/AVA'
import { bnToBig } from '@/helpers/helper'
import Big from 'big.js'
import CamBtn from '@/components/CamBtn.vue'
import Alert from '@/components/Alert.vue'
@Component({
components: {
CamBtn,
Alert,
},
})
export default class NewCollectibleFamily extends Vue {
Expand Down Expand Up @@ -186,8 +177,9 @@ export default class NewCollectibleFamily extends Vue {
.new_family {
max-width: 100%;
width: 340px;
//display: grid;
//grid-template-columns: 1fr 350px;
display: flex;
flex-direction: column;
gap: 1rem;
}
form > div {
margin: 12px 0;
Expand Down Expand Up @@ -232,10 +224,21 @@ input {
}
.success_cont {
> div {
padding: 3px 12px;
display: flex;
flex-direction: column;
gap: 0.5rem;
.family-info {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 5px;
@include mixins.typography-caption;
background-color: var(--bg-light);
resize: none;
width: 100%;
border-radius: var(--border-radius-sm);
padding: 4px 12px;
}
.v-btn {
Expand Down
Loading

0 comments on commit e363a87

Please sign in to comment.