From 493ab2f7a3fcd640ac948058863d3631b1def4e8 Mon Sep 17 00:00:00 2001 From: Daniel Supernault Date: Sat, 4 May 2019 18:17:28 -0600 Subject: [PATCH] Add custom header backgrounds to MomentUI profiles --- resources/assets/js/components/Profile.vue | 12 ++- resources/assets/sass/app.scss | 2 + resources/assets/sass/appdark.scss | 2 + resources/assets/sass/moment.scss | 98 +++++++++++++++++ resources/views/settings/labs.blade.php | 118 +++++++++++++++++++++ 5 files changed, 231 insertions(+), 1 deletion(-) create mode 100644 resources/assets/sass/moment.scss diff --git a/resources/assets/js/components/Profile.vue b/resources/assets/js/components/Profile.vue index be2884baf..21d9f650d 100644 --- a/resources/assets/js/components/Profile.vue +++ b/resources/assets/js/components/Profile.vue @@ -294,7 +294,7 @@
-
+
@@ -1045,6 +1045,16 @@ export default { this.profile.following_count--; } }) + }, + + momentBackground() { + let c = 'w-100 h-100 mt-n3 '; + if(this.profile.header_bg) { + c += this.profile.header_bg == 'default' ? 'bg-pixelfed' : 'bg-moment-' + this.profile.header_bg; + } else { + c += 'bg-pixelfed'; + } + return c; } } } diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss index 179a956ce..2ead5cc68 100644 --- a/resources/assets/sass/app.scss +++ b/resources/assets/sass/app.scss @@ -24,3 +24,5 @@ @import '~plyr/dist/plyr.css'; @import '~vue-loading-overlay/dist/vue-loading.css'; + +@import "moment"; diff --git a/resources/assets/sass/appdark.scss b/resources/assets/sass/appdark.scss index a8bcbae68..34e83e884 100644 --- a/resources/assets/sass/appdark.scss +++ b/resources/assets/sass/appdark.scss @@ -66,3 +66,5 @@ textarea { @import '~plyr/dist/plyr.css'; @import '~vue-loading-overlay/dist/vue-loading.css'; + +@import "moment"; diff --git a/resources/assets/sass/moment.scss b/resources/assets/sass/moment.scss new file mode 100644 index 000000000..0d642d1f7 --- /dev/null +++ b/resources/assets/sass/moment.scss @@ -0,0 +1,98 @@ +/* + red +*/ +.bg-moment-passion { + background: #e53935; + background: -webkit-linear-gradient(to left, #e35d5b, #e53935); + background: linear-gradient(to left, #e35d5b, #e53935); +} + +/* + teal/purple +*/ +.bg-moment-azure { + background: #7F7FD5; + background: -webkit-linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5); + background: linear-gradient(to left, #91EAE4, #86A8E7, #7F7FD5); +} + +/* + blue +*/ +.bg-moment-reef { + background: #00d2ff; + background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff); + background: linear-gradient(to right, #3a7bd5, #00d2ff); +} + +/* + lush green +*/ +.bg-moment-lush { + background: #56ab2f; + background: -webkit-linear-gradient(to left, #a8e063, #56ab2f); + background: linear-gradient(to left, #a8e063, #56ab2f); +} + +/* + neon green +*/ +.bg-moment-neon { + background: #B3FFAB; + background: -webkit-linear-gradient(to right, #12FFF7, #B3FFAB); + background: linear-gradient(to right, #12FFF7, #B3FFAB); +} + +/* + orange +*/ +.bg-moment-flare { + background: #f12711; + background: -webkit-linear-gradient(to left, #f5af19, #f12711); + background: linear-gradient(to left, #f5af19, #f12711); +} + +/* + orange/pink +*/ + .bg-moment-morning { + background: #FF5F6D; + background: -webkit-linear-gradient(to left, #FFC371, #FF5F6D); + background: linear-gradient(to left, #FFC371, #FF5F6D); +} + +/* + pink +*/ +.bg-moment-tranquil { + background: #EECDA3; + background: -webkit-linear-gradient(to right, #EF629F, #EECDA3); + background: linear-gradient(to right, #EF629F, #EECDA3); +} + +/* + purple +*/ +.bg-moment-mauve { + background: #42275a; + background: -webkit-linear-gradient(to left, #734b6d, #42275a); + background: linear-gradient(to left, #734b6d, #42275a); +} + +/* + purple +*/ +.bg-moment-argon { + background: #03001e; + background: -webkit-linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e); + background: linear-gradient(to left, #fdeff9, #ec38bc, #7303c0, #03001e); +} + +/* + dark blue +*/ +.bg-moment-royal { + background: #141E30; + background: -webkit-linear-gradient(to left, #243B55, #141E30); + background: linear-gradient(to left, #243B55, #141E30); +} \ No newline at end of file diff --git a/resources/views/settings/labs.blade.php b/resources/views/settings/labs.blade.php index c7dcae813..2b8d47215 100644 --- a/resources/views/settings/labs.blade.php +++ b/resources/views/settings/labs.blade.php @@ -31,6 +31,124 @@

MomentUI offers an alternative layout for posts and your profile.

+ @if($profile->profile_layout == 'moment') +
+ +
+
+
+

+

+

+

Default

+ header_bg == 'default' || !$profile->header_bg ? 'checked':''}}> +
+
+
+
+

+

+

+

Azure

+ header_bg == 'azure' ? 'checked':''}}> +
+
+
+
+

+

+

+

Passion

+ header_bg == 'passion' ? 'checked':''}}> +
+
+
+
+

+

+

+

Reef

+ header_bg == 'reef' ? 'checked':''}}> +
+
+
+
+

+

+

+

Lush

+ header_bg == 'lush' ? 'checked':''}}> +
+
+
+
+

+

+

+

Neon

+ header_bg == 'neon' ? 'checked':''}}> +
+
+
+
+

+

+

+

Flare

+ header_bg == 'flare' ? 'checked':''}}> +
+
+
+
+

+

+

+

Morning

+ header_bg == 'morning' ? 'checked':''}}> +
+
+
+
+

+

+

+

Tranquil

+ header_bg == 'tranquil' ? 'checked':''}}> +
+
+
+
+

+

+

+

Mauve

+ header_bg == 'mauve' ? 'checked':''}}> +
+
+
+
+

+

+

+

Argon

+ header_bg == 'argon' ? 'checked':''}}> +
+
+
+
+

+

+

+

Royal

+ header_bg == 'royal' ? 'checked':''}}> +
+
+
+

Set your MomentUI profile background color. Adding a custom header image will be supported in a future version.

+
+ @endif
hasCookie('dark-mode') ? 'checked':''}}>