Merge pull request #1069 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
bbfb20d9f2
|
@ -125,10 +125,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body flex-grow-0 py-1">
|
<div class="card-body flex-grow-0 py-1">
|
||||||
<div class="reactions my-1">
|
<div class="reactions my-1">
|
||||||
<h3 v-bind:class="[reactions.liked ? 'fas fa-heart text-danger pr-3 m-0' : 'far fa-heart pr-3 m-0 like-btn']" title="Like" v-on:click="likeStatus"></h3>
|
<button v-bind:class="[reactions.liked ? 'fas fa-heart btn btn-link text-decoration-none text-danger px-0 mr-2 m-0' : 'far fa-heart px-0 mr-2 m-0 like-btn btn btn-link text-decoration-none text-dark']" title="Like" v-on:click="likeStatus"></button>
|
||||||
<h3 class="far fa-comment pr-3 m-0" title="Comment" v-on:click="commentFocus"></h3>
|
<button class="far fa-comment px-0 mr-2 m-0 btn btn-link text-decoration-none text-dark" title="Comment" v-on:click="commentFocus"></button>
|
||||||
<h3 v-bind:class="[reactions.shared ? 'far fa-share-square pr-3 m-0 text-primary' : 'far fa-share-square pr-3 m-0 share-btn']" title="Share" v-on:click="shareStatus"></h3>
|
<button v-bind:class="[reactions.shared ? 'far fa-share-square px-0 mr-2 m-0 btn btn-link text-decoration-none text-primary' : 'far fa-share-square px-0 mr-2 m-0 share-btn btn btn-link text-decoration-none text-dark']" title="Share" v-on:click="shareStatus"></button>
|
||||||
<h3 v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark text-warning m-0 float-right' : 'far fa-bookmark m-0 float-right']" title="Bookmark" v-on:click="bookmarkStatus"></h3>
|
<button v-bind:class="[reactions.bookmarked ? 'fas fa-bookmark btn btn-link text-warning px-0 m-0 text-decoration-none float-right' : 'far fa-bookmark btn btn-link text-dark px-0 m-0 text-decoration-none float-right']" title="Bookmark" v-on:click="bookmarkStatus"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="reaction-counts font-weight-bold mb-0">
|
<div class="reaction-counts font-weight-bold mb-0">
|
||||||
<span style="cursor:pointer;" v-on:click="likesModal">
|
<span style="cursor:pointer;" v-on:click="likesModal">
|
||||||
|
|
|
@ -84,9 +84,9 @@
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="reactions my-1">
|
<div class="reactions my-1">
|
||||||
<h3 v-bind:class="[status.favourited ? 'fas fa-heart text-danger pr-3 m-0 cursor-pointer' : 'far fa-heart pr-3 m-0 like-btn cursor-pointer']" title="Like" v-on:click="likeStatus(status, $event)"></h3>
|
<button v-bind:class="[status.favourited ? 'btn-lg h3 fas fa-heart btn btn-link text-decoration-none text-danger px-0 mr-2 m-0' : 'btn-lg h3 far fa-heart px-0 mr-2 m-0 text-decoration-none like-btn btn btn-link text-dark']" title="Like" v-on:click="likeStatus(status, $event)"></button>
|
||||||
<h3 class="far fa-comment pr-3 m-0 cursor-pointer" title="Comment" v-on:click="commentFocus(status, $event)"></h3>
|
<button class="far fa-comment px-0 mr-2 m-0 btn btn-link text-dark text-decoration-none" title="Comment" v-on:click="commentFocus(status, $event)"></button>
|
||||||
<h3 v-bind:class="[status.reblogged ? 'far fa-share-square pr-3 m-0 text-primary cursor-pointer' : 'far fa-share-square pr-3 m-0 share-btn cursor-pointer']" title="Share" v-on:click="shareStatus(status, $event)"></h3>
|
<button v-bind:class="[status.reblogged ? 'far fa-share-square px-0 mr-2 m-0 btn btn-link text-decoration-none text-primary' : 'far fa-share-square px-0 mr-2 m-0 share-btn btn btn-link text-decoration-none text-dark']" title="Share" v-on:click="shareStatus(status, $event)"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="likes font-weight-bold">
|
<div class="likes font-weight-bold">
|
||||||
|
|
7
resources/assets/sass/custom.scss
vendored
7
resources/assets/sass/custom.scss
vendored
|
@ -280,7 +280,6 @@ body, button, input, textarea {
|
||||||
background-position: 50%;
|
background-position: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.status-photo img {
|
.status-photo img {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -316,6 +315,12 @@ body, button, input, textarea {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 0 3px 3px 0;
|
border-radius: 0 3px 3px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reactions button {
|
||||||
|
font-size: 1.575rem;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.touch .card {
|
.touch .card {
|
||||||
|
|
|
@ -22,7 +22,8 @@
|
||||||
<meta name="medium" content="image">
|
<meta name="medium" content="image">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<link rel="canonical" href="{{request()->url()}}">
|
<link rel="canonical" href="{{request()->url()}}">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
||||||
@stack('styles')
|
@stack('styles')
|
||||||
|
|
|
@ -21,7 +21,8 @@
|
||||||
<meta name="medium" content="image">
|
<meta name="medium" content="image">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<link rel="canonical" href="{{request()->url()}}">
|
<link rel="canonical" href="{{request()->url()}}">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
||||||
@stack('styles')
|
@stack('styles')
|
||||||
|
|
|
@ -20,7 +20,8 @@
|
||||||
<meta name="medium" content="image">
|
<meta name="medium" content="image">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<link rel="canonical" href="{{request()->url()}}">
|
<link rel="canonical" href="{{request()->url()}}">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
||||||
@stack('styles')
|
@stack('styles')
|
||||||
|
|
|
@ -21,7 +21,8 @@
|
||||||
<meta name="medium" content="image">
|
<meta name="medium" content="image">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<link rel="canonical" href="{{request()->url()}}">
|
<link rel="canonical" href="{{request()->url()}}">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
||||||
@stack('styles')
|
@stack('styles')
|
||||||
|
|
|
@ -20,7 +20,8 @@
|
||||||
<meta name="medium" content="image">
|
<meta name="medium" content="image">
|
||||||
<meta name="theme-color" content="#10c5f8">
|
<meta name="theme-color" content="#10c5f8">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<link rel="shortcut icon apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
<link rel="shortcut icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
|
<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
|
||||||
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
<link href="{{ mix('css/app.css') }}" rel="stylesheet" data-stylesheet="light">
|
||||||
</head>
|
</head>
|
||||||
<body class="">
|
<body class="">
|
||||||
|
|
Loading…
Reference in a new issue