Merge pull request #1266 from pixelfed/frontend-ui-refactor

Frontend ui refactor

resources/assets/js/components/Timeline.vue

@@ -389,7 +389,8 @@
 				followingCursor: 1,
 				followingMore: true,
 				lightboxMedia: false,
-				showSuggestions: false
+				showSuggestions: false,
+				showReadMore: true,
 			}
 		},
 
@@ -415,13 +416,21 @@
 				this.showSuggestions = true;
 			}
 
+			if(localStorage.getItem('pf_metro_ui.exp.rm') == 'false') {
+				this.showReadMore = false;
+			} else {
+				this.showReadMore = true;
+			}
+
 			this.$nextTick(function () {
 				$('[data-toggle="tooltip"]').tooltip()
 			});
 		},
 
 		updated() {
-			pixelfed.readmore();
+			if(this.showReadMore == true) {
+				pixelfed.readmore();
+			}
 		},
 
 		methods: {

resources/views/auth/passwords/reset.blade.php

@@ -5,7 +5,7 @@
     <div class="row justify-content-center">
         <div class="col-lg-5">
             <div class="card">
-                <div class="card-header">{{ __('Reset Password') }}</div>
+                <div class="card-header bg-white p-3 text-center font-weight-bold">{{ __('Reset Password') }}</div>
 
                 <div class="card-body">
                     <form method="POST" action="{{ route('password.request') }}">
@@ -14,11 +14,8 @@
                         <input type="hidden" name="token" value="{{ $token }}">
 
                         <div class="form-group row">
-                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>
-
+                            <div class="col-md-12">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" placeholder="{{ __('E-Mail Address') }}" required autofocus>
                                 @if ($errors->has('email'))
                                     <span class="invalid-feedback">
                                         <strong>{{ $errors->first('email') }}</strong>
@@ -26,12 +23,10 @@
                                 @endif
                             </div>
                         </div>
-
+                        <hr>
                         <div class="form-group row">
-                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+                            <div class="col-md-12">
+                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ __('Password') }}" required>
 
                                 @if ($errors->has('password'))
                                     <span class="invalid-feedback">
@@ -42,10 +37,8 @@
                         </div>
 
                         <div class="form-group row">
-                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
-
-                            <div class="col-md-6">
-                                <input id="password-confirm" type="password" class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}" name="password_confirmation" required>
+                            <div class="col-md-12">
+                                <input id="password-confirm" type="password" class="form-control{{ $errors->has('password_confirmation') ? ' is-invalid' : '' }}" name="password_confirmation" placeholder="{{ __('Confirm Password') }}" required>
 
                                 @if ($errors->has('password_confirmation'))
                                     <span class="invalid-feedback">
@@ -56,8 +49,8 @@
                         </div>
 
                         <div class="form-group row mb-0">
-                            <div class="col-md-6 offset-md-4">
-                                <button type="submit" class="btn btn-primary">
+                            <div class="col-md-12">
+                                <button type="submit" class="btn btn-primary btn-block py-0 font-weight-bold">
                                     {{ __('Reset Password') }}
                                 </button>
                             </div>

resources/views/settings/labs.blade.php

@@ -162,9 +162,16 @@
 			<label class="form-check-label font-weight-bold" for="show_suggestions">
 				{{__('Profile Suggestions')}}
 			</label>
-			<p class="text-muted small help-text">Show Profile Suggestions</p>
+			<p class="text-muted small help-text">Show Profile Suggestions.</p>
 		</div>
 		@endif
+		<div class="form-check pb-3">
+			<input class="form-check-input" type="checkbox" name="show_readmore" id="show_readmore">
+			<label class="form-check-label font-weight-bold" for="show_readmore">
+				{{__('Use Read More')}}
+			</label>
+			<p class="text-muted small help-text">Collapses captions/comments more than 3 lines.</p>
+		</div>
 		<div class="py-3">
 			<p class="font-weight-bold text-muted text-center">Discovery</p>
 			<hr>
@@ -191,18 +198,31 @@
 <script type="text/javascript">
 $(document).ready(function() {
 	let showSuggestions = localStorage.getItem('pf_metro_ui.exp.rec') == 'false' ? false : true;
+	let showReadMore = localStorage.getItem('pf_metro_ui.exp.rm') == 'false' ? false : true;
 
 	if(showSuggestions == true) {
 		$('#show_suggestions').attr('checked', true);
 	}
 
+	if(showReadMore == true) {
+		$('#show_readmore').attr('checked', true);
+	}
+
 	$('#show_suggestions').on('change', function(e) {
 		if(e.target.checked) {
 			localStorage.removeItem('pf_metro_ui.exp.rec');
 		} else {
 			localStorage.setItem('pf_metro_ui.exp.rec', false);
 		}
-	})
+	});
+
+	$('#show_readmore').on('change', function(e) {
+		if(e.target.checked) {
+			localStorage.removeItem('pf_metro_ui.exp.rm');
+		} else {
+			localStorage.setItem('pf_metro_ui.exp.rm', false);
+		}
+	});
 });
 </script>
 @endpush