From 205ac5da92524547a13aa594702e26000b23af45 Mon Sep 17 00:00:00 2001 From: Dean Lofts Date: Wed, 4 Sep 2024 12:36:33 +1000 Subject: [PATCH] it will do --- app/assets/stylesheets/application.css.scss | 131 +++++++++++++------- app/helpers/application_helper.rb | 8 +- app/views/links/user_links.html.erb | 2 +- package-lock.json | 124 ++++++++++++++++++ package.json | 2 + 5 files changed, 214 insertions(+), 53 deletions(-) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 6b24f08..f43abbe 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -1,48 +1,83 @@ -@import "font-awesome"; - -/* Rainbow border animation */ -@keyframes rainbow-border { - 0% { box-shadow: 0 0 0 4px red; } - 14% { box-shadow: 0 0 0 4px orange; } - 28% { box-shadow: 0 0 0 4px yellow; } - 42% { box-shadow: 0 0 0 4px green; } - 56% { box-shadow: 0 0 0 4px blue; } - 70% { box-shadow: 0 0 0 4px indigo; } - 84% { box-shadow: 0 0 0 4px violet; } - 100% { box-shadow: 0 0 0 4px red; } -} - -/* Rainbow overlay animation */ -@keyframes rainbow-overlay { - 0% { filter: hue-rotate(0deg); } - 100% { filter: hue-rotate(360deg); } -} - -.avatar-rainbow-border { - animation: rainbow-border 5s linear infinite; -} - -.avatar-rainbow-overlay { - position: relative; - display: inline-block; - overflow: hidden; - border-radius: 50%; - animation: rainbow-border 5s linear infinite; -} - -.avatar-rainbow-overlay::before { - content: ''; - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - background: linear-gradient(45deg, rgba(255,0,0,0.5), rgba(255,165,0,0.5), rgba(255,255,0,0.5), rgba(0,128,0,0.5), rgba(0,0,255,0.5), rgba(75,0,130,0.5), rgba(238,130,238,0.5)); - z-index: 2; - animation: rainbow-overlay 5s linear infinite; - mix-blend-mode: overlay; - opacity: 0.7; -} - -.avatar-rainbow-overlay img { - display: block; - position: relative; - z-index: 1; -} \ No newline at end of file +// General avatar styles +.avatar-container { + width: 8rem; + height: 8rem; + overflow: hidden; + border-radius: 50%; + display: inline-block; + } + + .avatar-image { + width: 100%; + height: 100%; + object-fit: cover; + } + + // Enhanced rainbow border animation + @keyframes rainbow-border { + 0% { box-shadow: 0 0 0 4px red, 0 0 10px red; } + 14% { box-shadow: 0 0 0 4px orange, 0 0 10px orange; } + 28% { box-shadow: 0 0 0 4px yellow, 0 0 10px yellow; } + 42% { box-shadow: 0 0 0 4px green, 0 0 10px green; } + 56% { box-shadow: 0 0 0 4px blue, 0 0 10px blue; } + 70% { box-shadow: 0 0 0 4px indigo, 0 0 10px indigo; } + 84% { box-shadow: 0 0 0 4px violet, 0 0 10px violet; } + 100% { box-shadow: 0 0 0 4px red, 0 0 10px red; } + } + + // Enhanced rainbow overlay animation + @keyframes rainbow-overlay { + 0% { filter: hue-rotate(0deg) brightness(1); } + 50% { filter: hue-rotate(180deg) brightness(1.2); } + 100% { filter: hue-rotate(360deg) brightness(1); } + } + + // Pulsing animation + @keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } + } + + .avatar-rainbow-border, + .avatar-rainbow-overlay { + animation: rainbow-border 5s linear infinite, pulse 2s ease-in-out infinite; + position: relative; + } + + .avatar-rainbow-overlay::before { + content: ''; + position: absolute; + top: -5px; right: -5px; bottom: -5px; left: -5px; + background: linear-gradient(45deg, + rgba(255,0,0,0.7), + rgba(255,165,0,0.7), + rgba(255,255,0,0.7), + rgba(0,128,0,0.7), + rgba(0,0,255,0.7), + rgba(75,0,130,0.7), + rgba(238,130,238,0.7) + ); + border-radius: 50%; + z-index: 1; + animation: rainbow-overlay 5s linear infinite; + mix-blend-mode: overlay; + opacity: 0.8; + } + + // Border color styles + .avatar-border-white, + .avatar-border-black, + .avatar-rainbow-border, + .avatar-rainbow-overlay { + border-radius: 50%; + overflow: hidden; + } + + .avatar-border-white { + box-shadow: 0 0 0 4px white, 0 0 10px rgba(255,255,255,0.5); + } + + .avatar-border-black { + box-shadow: 0 0 0 4px black, 0 0 10px rgba(0,0,0,0.5); + } \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index ddb78fa..131c033 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -8,13 +8,13 @@ def auto_link_urls(text) def avatar_border_class(border_preference) case border_preference when 'white' - 'border-4 border-white' + 'avatar-border-white' when 'black' - 'border-4 border-black' + 'avatar-border-black' when 'rainbow' - 'border-4 border-transparent avatar-rainbow-border' + 'avatar-rainbow-border' when 'rainbow-overlay' - 'avatar-rainbow-overlay' + 'avatar-rainbow-border avatar-rainbow-overlay' else '' end diff --git a/app/views/links/user_links.html.erb b/app/views/links/user_links.html.erb index 566c6ab..9dc55ac 100644 --- a/app/views/links/user_links.html.erb +++ b/app/views/links/user_links.html.erb @@ -7,7 +7,7 @@ <% end %>
-
+
<% local_avatar_path = "/avatars/#{@user.username}_avatar#{File.extname(@user.avatar)}" %> <% if File.exist?(Rails.root.join('public' + local_avatar_path)) %> <%= image_tag local_avatar_path, alt: @user.email, class: "rounded-full object-cover", style: "width: 8rem; height: 8rem;" %> diff --git a/package-lock.json b/package-lock.json index 72178e3..fd20363 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,12 +5,14 @@ "packages": { "": { "dependencies": { + "@fortawesome/fontawesome-free": "^6.6.0", "@rails/ujs": "^7.1.3-4", "chart.js": "^4.4.3", "chartkick": "^5.0.1", "flowbite": "^2.4.1" }, "devDependencies": { + "sass": "^1.78.0", "vite": "^5.3.5", "vite-plugin-ruby": "^5.0.0" } @@ -406,6 +408,15 @@ "node": ">=12" } }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz", + "integrity": "sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", + "engines": { + "node": ">=6" + } + }, "node_modules/@kurkle/color": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", @@ -749,6 +760,33 @@ "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==", "license": "MIT" }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/braces": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", @@ -808,6 +846,31 @@ "date-fns": ">=2" } }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/date-fns": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", @@ -1001,6 +1064,26 @@ "node": ">= 0.4" } }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "dev": true, + "license": "MIT" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/is-builtin-module": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz", @@ -1129,6 +1212,16 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", @@ -1204,6 +1297,19 @@ ], "license": "MIT" }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -1292,6 +1398,24 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/sass": { + "version": "1.78.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.78.0.tgz", + "integrity": "sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", diff --git a/package.json b/package.json index 1583fe6..30abb90 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,13 @@ { "dependencies": { + "@fortawesome/fontawesome-free": "^6.6.0", "@rails/ujs": "^7.1.3-4", "chart.js": "^4.4.3", "chartkick": "^5.0.1", "flowbite": "^2.4.1" }, "devDependencies": { + "sass": "^1.78.0", "vite": "^5.3.5", "vite-plugin-ruby": "^5.0.0" }