chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Update sass, improve accessibility

This commit is contained in:
Daniel Supernault 2020-07-21 19:18:35 -06:00
parent e12cc6311d
commit a452fae9b9
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
resources/assets/js/components/Timeline.vue
View File

@ -42,7 +42,7 @@
<div class="card-body text-center pt-3"> <div class="card-body text-center pt-3">
<p class="mb-0"> <p class="mb-0">
<a :href="'/'+rec.username"> <a :href="'/'+rec.username">
<img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> <img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
</a> </a>
</p> </p>
<div class="py-3"> <div class="py-3">
@ -97,7 +97,7 @@
</div> </div>
<div v-else> --> <div v-else> -->
<div> <div>
<img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> <img class="rounded-circle box-shadow" :src="status.account.avatar" width="32px" height="32px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
</div> </div>
<div class="pl-2"> <div class="pl-2">
<!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> --> <!-- <a class="d-block username font-weight-bold text-dark" v-bind:href="status.account.url" style="line-height:0.5;"> -->
@ -117,12 +117,13 @@
<span class="font-weight-bold cursor-pointer text-primary">Follow</span> <span class="font-weight-bold cursor-pointer text-primary">Follow</span>
</span> --> </span> -->
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<a v-if="status.place" class="small text-decoration-none" :href="'/discover/places/'+status.place.id+'/'+status.place.slug" style="color:#718096" title="Location" data-toggle="tooltip"><i class="fas fa-map-marked-alt"></i> {{status.place.name}}, {{status.place.country}}</a> <a v-if="status.place" class="small text-decoration-none text-muted" :href="'/discover/places/'+status.place.id+'/'+status.place.slug" title="Location" data-toggle="tooltip"><i class="fas fa-map-marked-alt"></i> {{status.place.name}}, {{status.place.country}}</a>
</div> </div>
</div> </div>
<div class="text-right" style="flex-grow:1;"> <div class="text-right" style="flex-grow:1;">
<button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)"> <button class="btn btn-link text-dark py-0" type="button" @click="ctxMenu(status)">
<span class="fas fa-ellipsis-h text-lighter"></span> <span class="fas fa-ellipsis-h text-lighter"></span>
<span class="sr-only">Post Menu</span>
</button> </button>
</div> </div>
</div> </div>
@ -164,7 +165,7 @@
<i class="far fa-user" data-toggle="tooltip" title="Tagged People"></i> <i class="far fa-user" data-toggle="tooltip" title="Tagged People"></i>
<span v-for="(tag, index) in status.taggedPeople" class="mr-n2"> <span v-for="(tag, index) in status.taggedPeople" class="mr-n2">
<a :href="'/'+tag.username"> <a :href="'/'+tag.username">
<img :src="tag.avatar" width="20px" height="20px" class="border rounded-circle" data-toggle="tooltip" :title="'@'+tag.username"> <img :src="tag.avatar" width="20px" height="20px" class="border rounded-circle" data-toggle="tooltip" :title="'@'+tag.username" alt="Avatar">
</a> </a>
</span> </span>
</span> </span>
@ -257,10 +258,10 @@
<a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3"> <a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3">
<!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> --> <!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> -->
<div v-if="userStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()"> <div v-if="userStory" class="has-story cursor-pointer shadow-sm" @click="storyRedirect()">
<img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> <img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
</div> </div>
<div v-else> <div v-else>
<img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> <img class="rounded-circle box-shadow" :src="profile.avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
</div> </div>
</a> </a>
<div class="media-body d-flex justify-content-between word-break" > <div class="media-body d-flex justify-content-between word-break" >
@ -269,7 +270,10 @@
<p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p> <p class="my-0 text-muted pb-0">{{profile.display_name || 'loading...'}}</p>
</div> </div>
<div class="ml-2"> <div class="ml-2">
<a class="text-muted" href="/settings/home"><i class="fas fa-cog fa-lg"></i></a> <a class="text-muted" href="/settings/home">
<i class="fas fa-cog fa-lg"></i>
<span class="sr-only">User Settings</span>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -313,7 +317,7 @@
<div class="card-body pt-0"> <div class="card-body pt-0">
<div v-for="(rec, index) in suggestions" class="media align-items-center mt-3"> <div v-for="(rec, index) in suggestions" class="media align-items-center mt-3">
<a :href="'/'+rec.username"> <a :href="'/'+rec.username">
<img :src="rec.avatar" width="32px" height="32px" class="rounded-circle mr-3" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> <img :src="rec.avatar" width="32px" height="32px" class="rounded-circle mr-3" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'" alt="avatar">
</a> </a>
<div class="media-body"> <div class="media-body">
<p class="mb-0 font-weight-bold small"> <p class="mb-0 font-weight-bold small">
@ -510,7 +514,7 @@
body-class="p-0" body-class="p-0"
> >
<div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100"> <div v-if="lightboxMedia" :class="lightboxMedia.filter_class" class="w-100 h-100">
<img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%"> <img :src="lightboxMedia.url" style="max-height: 100%; max-width: 100%" alt="lightbox media">
</div> </div>
</b-modal> </b-modal>
<b-modal ref="replyModal" <b-modal ref="replyModal"

5
resources/assets/sass/_variables.scss vendored
View File

@ -1,6 +1,6 @@
// Body // Body
$body-bg: #f5f8fa; $body-bg: #f7fbfd78;
// Typography // Typography
$font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; $font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
@ -19,7 +19,8 @@ $custom-control-indicator-disabled-bg: #e9ecef;
$custom-control-description-disabled-color: #868e96; $custom-control-description-disabled-color: #868e96;
$white: white; $white: white;
$theme-colors: ( $theme-colors: (
'primary': #08d 'primary': #2c78bf,
'muted' : #697179
); );
$card-cap-bg: $white; $card-cap-bg: $white;