worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

improve: Improved button design and placement in navigation bar settings

Browse source
This commit is contained in:
NoriDev 2022-09-14 17:31:17 +09:00
parent c7e068aef0
commit 8cc4581c09
1 changed files with 29 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/client/src/pages/settings/navbar.vue
View file

@ -24,9 +24,11 @@
</XDraggable>
</div>
<FormButton class="_formBlock" @click="addItem"><i class="fas fa-plus"></i> {{ i18n.ts.addItem }}</FormButton>
<FormButton v-if="isChanged" class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
<div class="wthhikgt">
<FormButton class="_formBlock" @click="addItem"><i class="fas fa-plus"></i> {{ i18n.ts.addItem }}</FormButton>
<FormButton v-if="isChanged" class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
</div>
</div>
</template>
@ -124,6 +126,30 @@ definePageMetadata({
}
}
.wthhikgt {
position: relative;
display: flex;
> ::v-deep(*) {
flex: 1;
margin: 0;
&:not(:last-child) {
margin-right: 16px;
}
}
@media (max-width: 500px) {
display: block;
> ::v-deep(*) {
margin: 0 0 10px 0;
width: 100%;
padding: var(--margin);
}
}
}
.item, .otherItem {
display: flex;
align-items: center;