diff --git a/app/Http/Controllers/ProfilesController.php b/app/Http/Controllers/ProfilesController.php index 34caee05..768043dd 100644 --- a/app/Http/Controllers/ProfilesController.php +++ b/app/Http/Controllers/ProfilesController.php @@ -272,7 +272,7 @@ public function update(Profile $profile, string $section, ProfileUpdateRequest $ public function updateImage(Profile $profile, ProfileImageRequest $request): RedirectResponse { - return redirect()->route('profiles.edit', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images')); + return redirect()->route('profiles.show', [$profile->slug, 'information'])->with('flash_message', $profile->processImage($request->file('image'), 'images')); } /** diff --git a/app/Http/Livewire/BannerImageEditor.php b/app/Http/Livewire/BannerImageEditor.php new file mode 100644 index 00000000..27ea189a --- /dev/null +++ b/app/Http/Livewire/BannerImageEditor.php @@ -0,0 +1,64 @@ +banner_image_exists = $this->profile->hasMedia('banners'); + $this->fancy_header_right = $this->profile->hasFancyHeaderRight(); + } + + public function updatedBannerImage() + { + $this->validate([ + 'banner_image' => $this->image_rules, + 'fancy_header_right' => 'boolean', + ]); + } + + public function submit() + { + $this->authorize('update', $this->profile); + + $message = "Profile layout has been updated."; + + $this->validate([ + 'banner_image' => "nullable|{$this->image_rules}", + 'fancy_header_right' => 'boolean' + ]); + + if (!is_null($this->banner_image)) + { + $message = "Profile cover image has been updated."; + + $this->profile->processImage($this->banner_image, 'banners'); + } + + $profile_info = $this->profile->information->first(); + + $profile_info->data = array_merge($profile_info->data ?? [], [ + 'fancy_header' => true, + 'fancy_header_right' => (bool) $this->fancy_header_right, + ]); + + $profile_info->save(); + + redirect()->route('profiles.show', $this->profile)->with('flash_message', $message); + } + + public function render() + { + return view('livewire.banner-image-editor'); + } +} diff --git a/app/Http/Livewire/ProfileHeaderEditorModal.php b/app/Http/Livewire/ProfileHeaderEditorModal.php new file mode 100644 index 00000000..45738694 --- /dev/null +++ b/app/Http/Livewire/ProfileHeaderEditorModal.php @@ -0,0 +1,31 @@ +image_rules = $this->uploadedImageRules(); + $this->fancy_header = $this->profile->hasFancyHeader(); + } + + public function render() + { + return view('livewire.profile-header-editor-modal'); + } +} diff --git a/app/Http/Livewire/ProfileImageEditor.php b/app/Http/Livewire/ProfileImageEditor.php new file mode 100644 index 00000000..6a40a553 --- /dev/null +++ b/app/Http/Livewire/ProfileImageEditor.php @@ -0,0 +1,45 @@ +validate([ + 'image' => $this->image_rules + ]); + } + + public function submit() + { + $this->authorize('update', $this->profile); + + $message = "Profile layout has been updated."; + + $this->validate([ + 'image' => "nullable|{$this->image_rules}" + ]); + + if (!is_null($this->image)) + { + $message = $this->profile->processImage($this->image, 'images'); + } + + $profile_info = $this->profile->information->first(); + + $profile_info->data = array_merge($profile_info->data ?? [], ['fancy_header' => false]); + + $profile_info->save(); + + redirect()->route('profiles.show', $this->profile)->with('flash_message', $message); + } + + public function render() + { + return view('livewire.profile-image-editor'); + } + +} diff --git a/app/Profile.php b/app/Profile.php index 04f34c7b..b521256c 100644 --- a/app/Profile.php +++ b/app/Profile.php @@ -19,6 +19,7 @@ use Illuminate\Database\Eloquent\Builder; use Illuminate\Database\Eloquent\SoftDeletes; use Illuminate\Support\Facades\Cache; +use Illuminate\Support\Facades\Http; /** * @method public() @@ -573,7 +574,7 @@ public function getImageThumbUrlAttribute() */ public function getBannerUrlAttribute() { - return url($this->getFirstMediaUrl('banners', 'large') ?: '/img/default.png'); + return url($this->getFirstMediaUrl('banners', 'large')); } /** @@ -596,6 +597,16 @@ public function getApiUrlAttribute() return route('api.index', ['person' => $this->slug, 'with_data' => true]); } + public function hasFancyHeader() + { + return $this->information->first()->data['fancy_header']; + } + + public function hasFancyHeaderRight() + { + return $this->information->first()->data['fancy_header_right']; + } + /////////////// // Relations // /////////////// diff --git a/public/css/app.css b/public/css/app.css index 48bc5819..04ad0693 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -10461,7 +10461,7 @@ button.video-control .fa-play { background-attachment: fixed; background-position: center top; background-size: cover; - height: 85vh; + height: calc(70vh - 20px); position: relative; } @media (max-width: 992px) { @@ -10492,6 +10492,11 @@ button.video-control .fa-play { background: #f8f9fa; width: auto; } +.profile .fancy_header .edit_banner_button { + position: absolute; + bottom: 2px; + right: 2px; +} .profile .profile_list_photo { width: 100%; height: auto; @@ -10633,6 +10638,12 @@ button.video-control .fa-play { width: 100%; } +a.edit_photo_button { + position: relative; + top: -33px; + right: 2px; +} + .student-card-img-overlay { position: absolute; top: 0; diff --git a/public/img/cover.png b/public/img/cover.png new file mode 100644 index 00000000..fd329ae5 Binary files /dev/null and b/public/img/cover.png differ diff --git a/public/js/app.js b/public/js/app.js index 8b9b4d0a..e35ff256 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -629,7 +629,7 @@ $(function () { //show preview of uploaded image $('input[type="file"]').on('change', function (e) { - return profiles.preview_selected_image(e); + profiles.preview_selected_image(e); }); // enable drag and drop sorting for items with sortable class diff --git a/public/mix-manifest.json b/public/mix-manifest.json index de5f1463..cd053b32 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -1,6 +1,6 @@ { - "/js/app.js": "/js/app.js?id=24be537863fbbe2259218dfb56ecef72", + "/js/app.js": "/js/app.js?id=f1170fe3e2888e47851541584fd2b3e9", "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c", - "/css/app.css": "/css/app.css?id=bff46e69abe7a97b008296b99e4abadd", + "/css/app.css": "/css/app.css?id=1db270db632f6d9af0123a31855e03c3", "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880" } diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js index c187b44f..bbaca78e 100644 --- a/resources/assets/js/app.js +++ b/resources/assets/js/app.js @@ -569,7 +569,9 @@ $(function() { $('.datepicker.month').datepicker(profiles.config.datepicker.month); //show preview of uploaded image - $('input[type="file"]').on('change', (e) => profiles.preview_selected_image(e)); + $('input[type="file"]').on('change', function(e) { + profiles.preview_selected_image(e); + }); // enable drag and drop sorting for items with sortable class if ($('.sortable').length > 0) { diff --git a/resources/assets/sass/_profile.scss b/resources/assets/sass/_profile.scss index 073cdb46..8963f565 100644 --- a/resources/assets/sass/_profile.scss +++ b/resources/assets/sass/_profile.scss @@ -51,7 +51,7 @@ background-attachment: fixed; background-position: center top; background-size: cover; - height: 85vh; + height: calc(70vh - 20px); position: relative; @media (max-width: map-get($grid-breakpoints, lg)){ @@ -85,6 +85,12 @@ background: $light; width: auto; } + + .edit_banner_button { + position: absolute; + bottom: 2px; + right: 2px; + } } .profile_list_photo { @@ -240,3 +246,10 @@ .profile_photo{ width: 100% } + +a.edit_photo_button { + position: relative; + top: -33px; + right: 2px; +} + diff --git a/resources/views/livewire/banner-image-editor.blade.php b/resources/views/livewire/banner-image-editor.blade.php new file mode 100644 index 00000000..18dffa62 --- /dev/null +++ b/resources/views/livewire/banner-image-editor.blade.php @@ -0,0 +1,46 @@ +
+
2- Select Cover Image
+
+ @csrf + @if ($errors->any()) + + @endif +
+
+ +
+
+ {!! Form::file('banner_image', ['id' => 'banner', 'name' => 'banner_image', 'accept' => 'image/*', 'wire:model' => 'banner_image', 'class' => 'd-none form-control']) !!} + + This will use a full-width header style - please use a high-quality image (1280 × 720 pixels or larger). +
+
+ + + +
+
+ + + +
+
+
+
\ No newline at end of file diff --git a/resources/views/livewire/profile-header-editor-modal.blade.php b/resources/views/livewire/profile-header-editor-modal.blade.php new file mode 100644 index 00000000..c1009c55 --- /dev/null +++ b/resources/views/livewire/profile-header-editor-modal.blade.php @@ -0,0 +1,77 @@ + diff --git a/resources/views/livewire/profile-image-editor.blade.php b/resources/views/livewire/profile-image-editor.blade.php new file mode 100644 index 00000000..e21ef579 --- /dev/null +++ b/resources/views/livewire/profile-image-editor.blade.php @@ -0,0 +1,33 @@ +
+
2- Select Profile Image
+
+ @csrf + @if ($errors->any()) + + @endif +
+
+ +
+
+ {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'accept' => 'image/*', 'wire:model' => 'image', 'class' => 'd-none form-control']) !!} + + This photo will appear on your profile page and as your application profile image - please use a high-quality image (300x300 pixels or larger). +
+
+ +
+
+ + +
+
+
+
\ No newline at end of file diff --git a/resources/views/profiles/edit/information.blade.php b/resources/views/profiles/edit/information.blade.php index 422ebe09..758033a8 100644 --- a/resources/views/profiles/edit/information.blade.php +++ b/resources/views/profiles/edit/information.blade.php @@ -1,45 +1,7 @@

Edit {{$profile->name}}'s Contact Information

@foreach($data as $info) -
- {!! Form::open(['url' => route('profiles.update-image', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!} - - -
-
-
-
- {!! Form::file('image', ['id' => 'file', 'name' => 'image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!} - - {!! Form::inlineErrors('image') !!} -
-
- - {!! Form::close() !!} -
-
- {!! Form::open(['url' => route('profiles.update-banner', [$profile->slug]), 'method' => 'POST', 'files' => true]) !!} - - -
-
-
-
- {!! Form::file('banner_image', ['id' => 'banner', 'name' => 'banner_image', 'required' => 'true', 'accept' => 'image/*', 'class' => 'd-none form-control']) !!} - - {!! Form::inlineErrors('banner_image') !!} -
-
- - {!! Form::close() !!} -
-
-
-
+
{!! Form::model($profile, ['route' => ['profiles.update', 'profile' => $profile, 'section' => 'information']]) !!}
{!! Form::label('full_name', 'Display Name') !!} @@ -156,46 +118,6 @@

Refresh all publications via ORCID. All previous publications will be removed and fresh data will be pulled in at regular intervals. Keep unchecked to manually edit your publications.

-
-
-
- - id}.data.fancy_header", $info->fancy_header)) - value="1" - data-toggle="show" - data-toggle-target="#fancy_header_options" - > - -
- {{-- reset sub-options if main option is unchecked --}} - -
!old('data.show_accepting_students', $info->show_accepting_students) - ]) - > -
- id}.data.fancy_header_right", $info->fancy_header_right)) - value="1" - > - -
-
-
-
-

This will use a full-width header style - please make sure uploaded banner image is of sufficient quality!

-
-
diff --git a/resources/views/profiles/profile_card_example.blade.php b/resources/views/profiles/profile_card_example.blade.php new file mode 100644 index 00000000..38a46acf --- /dev/null +++ b/resources/views/profiles/profile_card_example.blade.php @@ -0,0 +1,59 @@ + +
+
+
+
+
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/resources/views/profiles/show.blade.php b/resources/views/profiles/show.blade.php index 117af383..1724021c 100644 --- a/resources/views/profiles/show.blade.php +++ b/resources/views/profiles/show.blade.php @@ -37,8 +37,15 @@ @if(!$information->fancy_header)
{{ $profile->full_name }} + @if($editable) + + Edit + + @endif +
@endif +
@@ -110,6 +117,14 @@ @endif
+ @if($editable & $information->fancy_header) +
+ + Edit + +
+ @endif +