FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Use <button> element for buttons instead of <a>

Browse source
This commit is contained in:
silverpill 2022-01-15 01:21:22 +00:00
parent b956df3479
commit 7b04cdfebe
8 changed files with 46 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App.vue
View file

@ -130,6 +130,14 @@ textarea {
resize: vertical;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
font-size: $text-font-size;
padding: 0;
}
.btn {
background-color: $btn-background-color;
border: none;

2
src/components/CryptoAddress.vue
View file

@ -46,9 +46,7 @@ export default class CryptoAddress extends Vue {
}
.copy-btn {
border: none;
border-radius: 0 10px 10px 0;
cursor: pointer;
height: $icon-size;
min-width: $icon-size;
padding: 3px 7px 3px 0;

20
src/components/Post.vue
View file

@ -64,7 +64,7 @@
<img :src="require('@/assets/forkawesome/comment-o.svg')">
<span>{{ post.replies_count }}</span>
</router-link>
<a
<button
v-else-if="inThread && canReply()"
class="icon"
title="Reply"
@ -72,12 +72,12 @@
>
<img :src="require('@/assets/forkawesome/comment-o.svg')">
<span>{{ post.replies_count }}</span>
</a>
</button>
<span v-else class="icon">
<img :src="require('@/assets/forkawesome/comment-o.svg')">
<span>{{ post.replies_count }}</span>
</span>
<a
<button
v-if="canRepost()"
class="icon"
:class="{ 'highlighted': post.reblogged }"
@ -86,12 +86,12 @@
>
<img :src="require('@/assets/feather/repeat.svg')">
<span>{{ post.reblogs_count }}</span>
</a>
</button>
<span v-else class="icon">
<img :src="require('@/assets/feather/repeat.svg')">
<span>{{ post.reblogs_count }}</span>
</span>
<a
<button
v-if="canLike()"
class="icon"
:class="{ 'highlighted': post.favourited }"
@ -100,7 +100,7 @@
>
<img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
<span>{{ post.favourites_count }}</span>
</a>
</button>
<span v-else class="icon">
<img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
<span>{{ post.favourites_count }}</span>
@ -135,9 +135,9 @@
v-if="canSaveToIpfs() || canMintToken() || canDeletePost()"
v-click-away="hideMenu"
>
<a class="icon" title="More" @click="toggleMenu()">
<button class="icon" title="More" @click="toggleMenu()">
<img :src="require('@/assets/feather/more-horizontal.svg')">
</a>
</button>
<ul v-if="menuVisible" class="dropdown-menu">
<li v-if="canSaveToIpfs()">
<a
@ -176,7 +176,7 @@
v-if="selectedPaymentAddress"
:address="selectedPaymentAddress"
></crypto-address>
<a
<button
v-for="option in getPaymentOptions()"
:key="option.code"
class="icon"
@ -184,7 +184,7 @@
@click="togglePaymentAddress(option)"
>
<img :src="require('@/assets/cryptoicons/' + option.code.toLowerCase() + '.svg')">
</a>
</button>
</div>
</div>
<post-editor

26
src/components/PostEditor.vue
View file

@ -20,7 +20,12 @@
<img :src="attachment.url">
</div>
<div class="toolbar">
<a class="icon" title="Attach image" @click="selectAttachment()">
<button
type="button"
class="icon"
title="Attach image"
@click="selectAttachment()"
>
<img :src="require('@/assets/feather/paperclip.svg')">
<input
type="file"
@ -29,14 +34,19 @@
style="display: none;"
@change="uploadAttachment($event.target.files)"
>
</a>
</button>
<div
class="dropdown-menu-wrapper"
v-click-away="hideVisibilityMenu"
>
<a class="icon" title="Post visibility" @click="toggleVisibilityMenu()">
<button
type="button"
class="icon"
title="Post visibility"
@click="toggleVisibilityMenu()"
>
<visibility-icon :visibility="visibility"></visibility-icon>
</a>
</button>
<ul v-if="visibilityMenuVisible" class="dropdown-menu">
<li>
<a
@ -63,13 +73,14 @@
<div class="character-counter" title="Characters left">
{{ characterCounter }}
</div>
<a
<button
type="submit"
v-if="inReplyTo"
class="submit-btn-small"
@click="publish($event)"
@click.prevent="publish($event)"
>
Publish
</a>
</button>
</div>
</div>
<div v-if="!inReplyTo" class="submit-btn-wrapper">
@ -257,6 +268,7 @@ textarea {
}
.submit-btn-small {
font-weight: bold;
margin-left: $block-inner-padding;
}
}

10
src/components/Search.vue
View file

@ -1,10 +1,10 @@
<template>
<form class="search" @submit.prevent="search($event)">
<input type="text" placeholder="Search..." v-model="q">
<button v-if="q" type="button" class="btn" @click="clear()">
<button v-if="q" type="button" @click="clear()">
<img :src="require('@/assets/feather/delete.svg')">
</button>
<button type="submit" class="btn" :disabled="!q">
<button type="submit" :disabled="!q">
<img :src="require('@/assets/feather/search.svg')">
</button>
</form>
@ -51,11 +51,9 @@ input {
}
button {
background-color: transparent;
border-radius: 0 $btn-border-radius $btn-border-radius 0;
font-size: 15px;
height: 100%;
padding: 0;
img {
filter: $text-colorizer;
@ -65,9 +63,5 @@ button {
vertical-align: middle;
width: 1.2em;
}
&:hover {
background-color: transparent;
}
}
</style>

1
src/styles/_mixins.scss
View file

@ -61,6 +61,7 @@
}
a.icon:hover,
button.icon:hover,
.icon.highlighted {
color: $secondary-text-hover-color;

6
src/views/Profile.vue
View file

@ -13,11 +13,11 @@
</div>
<div class="buttons">
<router-link v-if="isCurrentUser()" class="edit-profile btn" to="/settings">Edit profile</router-link>
<a v-if="canFollow()" class="follow btn" @click="follow()">Follow</a>
<a v-if="canUnfollow()" class="unfollow btn" @click="unfollow()">
<button v-if="canFollow()" class="follow btn" @click="follow()">Follow</button>
<button v-if="canUnfollow()" class="unfollow btn" @click="unfollow()">
<template v-if="isFollowRequestPending()">Cancel follow request</template>
<template v-else>Unfollow</template>
</a>
</button>
</div>
</div>
<div class="bio" v-html="profile.note"></div>

5
src/views/ProfileForm.vue
View file

@ -63,14 +63,15 @@
<img :src="require('@/assets/feather/x-circle.svg')">
</a>
</div>
<a
<button
v-if="form.fields_attributes.length <= extraFieldMaxCount"
type="button"
class="add-extra-field"
@click="addExtraField()"
>
<img :src="require('@/assets/feather/plus-circle.svg')">
Add new item
</a>
</button>
</div>
<button type="submit" class="btn">Save</button>
</form>