From 0c745e7544a85f159df59bcc857616533977ed72 Mon Sep 17 00:00:00 2001 From: Kobe Date: Tue, 27 May 2025 14:36:40 +0200 Subject: [PATCH] Fix colour system --- routes/__pycache__/main.cpython-313.pyc | Bin 33880 -> 35291 bytes routes/main.py | 91 +++++++++++++----------- static/css/auth.css | 3 - static/css/base.css | 3 - static/css/dashboard.css | 3 - static/css/home.css | 3 - static/css/trash.css | 3 - static/js/settings.js | 33 +++++++-- templates/auth/login.html | 10 ++- templates/auth/register.html | 10 +++ templates/common/base.html | 11 ++- templates/dashboard/dashboard.html | 49 ++++--------- templates/trash/trash.html | 1 - 13 files changed, 120 insertions(+), 100 deletions(-) diff --git a/routes/__pycache__/main.cpython-313.pyc b/routes/__pycache__/main.cpython-313.pyc index 54be3984988ff2eba73898c9bf4c6f4a35f3e4d3..7d9d1d02c855630ac0a1f38dc2125cbee18565cf 100644 GIT binary patch delta 4354 zcmb7HTTola8QwiYcOiiQBV>>c7aIw4k-*%+fUyA^Y%a%&0fDg)0?P$~&k?@JN#({b zxRZ`M-AUs#=>&H&4S8wtIMZ>SLNaY?cRG`!NGUO;X_{sxlZT`tcIzaawB0=y49-Ji z&9LYDzyIIw-`%tSp5^@o>d%NW-b+o@0sK38qxzJ^f5WI8)T^Ttp^xE6(u`pAUe#9&I7kQkY=bD>XB8U2OUrQxhfIgBwfCNw-~cYZqw$Oqm6IZh3H9y}2R z9&h8GTqBd_EtXv#1#;(SLowS}C&`ut)6u2jtc(zYyR<1L;Us8Q*uf-pn$gm5wI`zQ zm}O_^318UPKt~Mi%s>Ynp8Z}R)IhK4{2V(uCRpqnI0w6en~1584bJ%33$%ZBdX~kV z(wTsNHZ-w?LZ1w`If~nfpQGpJuy|mC=H~tW0LM+vPfuTp`m?PaUi&Cj#U1Q|Kjco%SchR&Ze!{mJX2&O=l` zQd+MuUNu}X{P^O_wXZZ?Z(1zpv)l!Sv3hwt<;szb}ZR>M?Ig_kkB-uAB{APtF^sw-C(?W_{!l` zLte~~moV7Z4d$yoS9!q9|NqjaH~M10NV;MxAp)Y4G^-Y(E}LB-ppZTik8 z#qXPxUGQet=s2aigCm?qyi`T#b#EbhFxCYx-)ueEt%Y~cGr=zSE_yH6gy_=_{RcRb z{VQocL~nTWkni*}@VT3xpZ+zKu~~M*DFB?%p3prDP`}9zAsW*PRj1eBe!_1+hyJ!J z6Y(=T=s`C;S=JErfB~cIe)tSgL?TL&>S7cg3fEYQTtzfsQmkM`%P4WHV|ID89^GDw zQCq=j&1o1?9Mcv650s-rDT2LOx*?@ULHvxWniBJcR02b7VbqLfARPeoPi zNCwge868F{0qHSHVGN`o1v^!+jgQ!-O*`!|5D#If}F=pVEupbgF?W=8SKQixEFFU64xUS zBXLvN35RvRy12K4UdK? zWQyvkBH-K|sqPGf0xUi+>4^&=-%QX?w=)cV*2e~Y_5=O`CQc(*jPJ)HhQzrN!Eg1IGc)A=QGAWz#n|B9Q(ff6kGy)cK2J{ zO8$$AYwa&*EcP!IF2h%gm!F6^8)Lf~r}WH<1G zRbV;xYl0q-=HICM>}d5m$w5B8UtI!s&AHcx;^yLo_H}c1BD?!dE}q>TH+L_z-_6Lo z=0`2Op@7|uV^QY0d66tCV(? zyXu^nEi!JQ+|`7l&6U;LA}d8Yz1k(y$B6)D%P-gv9nqt2&hU)4ZQ ziJRnZix{XD9edGwBqv(+=oY5sTA2`vDsNi=2Oba3iac+K?C zD-sGkOlbpRJx;H{Es8vOFnXKp#7=y!VNA+t{t2G_5nhw6Ylh5o* zXbxd#&aPF9`(2AWZmC*Gecytus+a(+#jDoZn6-AnL~cNWK-)^$ik+y*RVX#4Ys; zsduf#OQu^HaclE}>4C~>GTZ~WNdiTNEh!)su$NvNOR5R0f@L-lX+%~_SPd-8O$tZ{ z@*GR>`J?>KJ<+6|_;jGOTt*cQxAI>N@ny|2v9A@%unqRW+ihV)ckjxy$W0dg`I0*T{p*u(UZm-0_5v(i7 zq+#8tESye+(}=Kywg^j%AS~f+!XhUK3(&k}z!^l>Omro*MHe$s;uM4>_cmdXQ;a}b z>}>)0F5d1+<`7W}bkicTO7u=bTcO*Q6i_aH`AcmvTRERsk<25$T;QsdQB^Bkfw5@i ze%{?Ka|d7tlyN6K2Ki&2SjQ9m!Q&E%SJNp%8z`w=J`;1+^Nxn3ooL%YW3!C*b;H~4 zSo0CS>8MQg!hR^@0XPQvv6HcWA0O=-msseBB_gE3p1NBwR?@&b8vR`iRfe+&PPrY;|X7Ifos9^8%IxqL~>sbQsXDfl1f)|{6B delta 3193 zcmZuyS!^4}8J<}lA}LY_se_V5aw$?2N!|BtNtR??)?sfHDOMzzq9s}ZMF~s!j!ZX2 zQrRewhj~fU08WY&P=TUx;651bLxsjcWWY&xLlv~x6iLzK!G`OuBBx2(0_n^yFS#Co z|9tcP-+#>P&hjsay1zkX?CW$IfJgf;8qWAU?`J5c(4$^8^%{k4D2q|o)Firb%7Cs7 zveZ2zxfM*C<8f)gQ;*w` z{a>cPo;24f;wnbNPz{u{qJaf4IHFrNIwH-Ba1nIKEMO73(vkbc1`YcMEM>Q_LBD;m z8<}Uy(ELm-%toXBLiGEYCUj$7f#B>kwFl5U%N6Lu*;14<*A5lv_*||!o6|SncI{|; z(TumKcMN`}&3Jw2+E7Gm;kA|>t@Sf4R`hQ9BHB@2JNh3%L8-^!zk}o`K9IY6DR76< z^a0r&t-H5PcBf6z2X1{cH%}?IvA~sqd$6OO8GN?$Bk=OAf6Nc7;WldV55Pa6SN!ei zVXR_zi1{=6oxdD?B*ikaCHib>*)uph>ycr4B#U%4) zGU+GOc*{?XD!^#Rp?D^x8DJbTI=rGpl!1{+{2V#YU4|c_ch7a0AL0{vAjifG z8oRU_Rji#|^)I*}`xyOjj)5N{=KLmni2i%t1Mi~Q3)T7F*y|*orV?8N{_P(_zqwE# ze@ZRPO|{d`S- zxMCn;ALQ(VSo3|5?C8g3l@M=YA48XdeT*me2V%Y@<_R(1q0^UULib1&J6?Z(73}JZ z-gqIbFWuI5at4U(rxD-bBobj-0$a=XT-%C(MEM20bQj)@OfL&m5F(=`34)Q^1 z3#4Y;vFhSF!Ri4P_k-_G2;FUIKOf|XT|cWLe7 zTunnXGf_A$N)q$FP>jq;k}0wA6P^>#BPPv_7fB%(*l6Cf=-^s3(UT-6n~x?>Fmxbw zezJ>$$&Jr;;PfetrxcKRgTdIf!lxG`pM>~}o|wD3@LflrgqlKI(__xB+OyfGJh$rWIGrxW;m5)*H(Sg6sZ~IYeu*==o$wl1 zXOoZ?*c-XxMnOktt*nWbkRDhoBXkE(cW{=&f`K^ou#=Wh4zN~pmTDoF&^fTiCZW7o zs(eD{!KM;HL`L9fh3J?k#{?A#;fOJZ`-SFcuTittUz!^>dWEz@i3FehJ8yDtOE9Aa7o zIbI62=)Ir3r0s!{$Gu1OppuO{@C)>CW6(n4*)o!k{B?={wNX|3^2+J6{)NM=8=bgz LRUJr!wW9lfPOY1g diff --git a/routes/main.py b/routes/main.py index 5e46c84..5a78311 100644 --- a/routes/main.py +++ b/routes/main.py @@ -356,9 +356,15 @@ def init_routes(main_bp): flash('Only administrators can update settings.', 'error') return redirect(url_for('main.dashboard')) + logger.debug(f"Form data: {request.form}") + logger.debug(f"CSRF token: {request.form.get('csrf_token')}") + primary_color = request.form.get('primary_color') secondary_color = request.form.get('secondary_color') + logger.debug(f"Primary color: {primary_color}") + logger.debug(f"Secondary color: {secondary_color}") + if not primary_color or not secondary_color: flash('Both primary and secondary colors are required.', 'error') return redirect(url_for('main.settings')) @@ -369,8 +375,10 @@ def init_routes(main_bp): try: db.session.commit() + logger.debug("Colors updated successfully in database") flash('Color settings updated successfully!', 'success') except Exception as e: + logger.error(f"Error updating colors: {str(e)}") db.session.rollback() flash('An error occurred while updating color settings.', 'error') @@ -447,9 +455,17 @@ def init_routes(main_bp): @main_bp.route('/dynamic-colors.css') def dynamic_colors(): - site_settings = SiteSettings.get_settings() + """Generate dynamic CSS variables based on site settings""" + logger.info(f"[Dynamic Colors] Request from: {request.referrer}") - # Calculate derived colors + # Get colors from settings + site_settings = SiteSettings.get_settings() + primary_color = site_settings.primary_color + secondary_color = site_settings.secondary_color + + logger.info(f"[Dynamic Colors] Current colors - Primary: {primary_color}, Secondary: {secondary_color}") + + # Convert hex to RGB for opacity calculations def hex_to_rgb(hex_color): hex_color = hex_color.lstrip('#') return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4)) @@ -457,60 +473,49 @@ def init_routes(main_bp): def rgb_to_hex(rgb): return '#{:02x}{:02x}{:02x}'.format(rgb[0], rgb[1], rgb[2]) - def lighten_color(hex_color, amount): + def lighten_color(hex_color, amount=0.2): rgb = hex_to_rgb(hex_color) - return rgb_to_hex(tuple(min(255, int(c + (255 - c) * amount)) for c in rgb)) + rgb = tuple(min(255, int(c + (255 - c) * amount)) for c in rgb) + return rgb_to_hex(rgb) - # Calculate all color variants - primary_light = lighten_color(site_settings.primary_color, 0.15) - primary_bg_light = lighten_color(site_settings.primary_color, 0.9) - primary_opacity_15 = site_settings.primary_color + '26' + # Calculate derived colors + primary_rgb = hex_to_rgb(primary_color) + secondary_rgb = hex_to_rgb(secondary_color) - secondary_light = lighten_color(site_settings.secondary_color, 0.15) - secondary_bg_light = lighten_color(site_settings.secondary_color, 0.9) - secondary_opacity_15 = site_settings.secondary_color + '26' - - # Calculate chart colors - primary_chart_light = lighten_color(site_settings.primary_color, 0.2) - primary_chart_lighter = lighten_color(site_settings.primary_color, 0.4) - primary_chart_lightest = lighten_color(site_settings.primary_color, 0.6) - primary_chart_pale = lighten_color(site_settings.primary_color, 0.8) - - secondary_chart_light = lighten_color(site_settings.secondary_color, 0.2) - secondary_chart_lighter = lighten_color(site_settings.secondary_color, 0.4) - secondary_chart_lightest = lighten_color(site_settings.secondary_color, 0.6) - secondary_chart_pale = lighten_color(site_settings.secondary_color, 0.8) + # Lighten colors for hover states + primary_light = lighten_color(primary_color, 0.2) + secondary_light = lighten_color(secondary_color, 0.2) + # Generate CSS with opacity variables css = f""" :root {{ /* Primary Colors */ - --primary-color: {site_settings.primary_color}; + --primary-color: {primary_color}; --primary-light: {primary_light}; - --primary-bg-light: {primary_bg_light}; - --primary-opacity-15: {primary_opacity_15}; + --primary-rgb: {primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}; + --primary-opacity-8: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.08); + --primary-opacity-15: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.15); + --primary-opacity-25: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.25); + --primary-opacity-50: rgba({primary_rgb[0]}, {primary_rgb[1]}, {primary_rgb[2]}, 0.5); /* Secondary Colors */ - --secondary-color: {site_settings.secondary_color}; + --secondary-color: {secondary_color}; --secondary-light: {secondary_light}; - --secondary-bg-light: {secondary_bg_light}; - --secondary-opacity-15: {secondary_opacity_15}; + --secondary-rgb: {secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}; + --secondary-opacity-8: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.08); + --secondary-opacity-15: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.15); + --secondary-opacity-25: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.25); + --secondary-opacity-50: rgba({secondary_rgb[0]}, {secondary_rgb[1]}, {secondary_rgb[2]}, 0.5); /* Chart Colors */ - --chart-primary: {site_settings.primary_color}; - --chart-secondary: {site_settings.secondary_color}; - --chart-warning: #ffd700; - - /* Primary Chart Colors */ - --chart-primary-light: {primary_chart_light}; - --chart-primary-lighter: {primary_chart_lighter}; - --chart-primary-lightest: {primary_chart_lightest}; - --chart-primary-pale: {primary_chart_pale}; - - /* Secondary Chart Colors */ - --chart-secondary-light: {secondary_chart_light}; - --chart-secondary-lighter: {secondary_chart_lighter}; - --chart-secondary-lightest: {secondary_chart_lightest}; - --chart-secondary-pale: {secondary_chart_pale}; + --chart-color-1: {primary_color}; + --chart-color-2: {secondary_color}; + --chart-color-3: {lighten_color(primary_color, 0.4)}; + --chart-color-4: {lighten_color(secondary_color, 0.4)}; }} """ + + logger.info(f"[Dynamic Colors] Generated CSS with primary color: {primary_color}") + logger.info(f"[Dynamic Colors] Cache version: {site_settings.updated_at.timestamp()}") + return Response(css, mimetype='text/css') \ No newline at end of file diff --git a/static/css/auth.css b/static/css/auth.css index 66a6d7f..3d0904f 100644 --- a/static/css/auth.css +++ b/static/css/auth.css @@ -1,6 +1,3 @@ -/* Import color variables */ -@import 'colors.css'; - body { background-color: var(--bg-color); } diff --git a/static/css/base.css b/static/css/base.css index 0d1aa6b..bd1dcc6 100644 --- a/static/css/base.css +++ b/static/css/base.css @@ -1,6 +1,3 @@ -/* Import color variables */ -@import 'colors.css'; - body { background-color: var(--bg-color); } diff --git a/static/css/dashboard.css b/static/css/dashboard.css index a231b08..ea69399 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -1,6 +1,3 @@ -/* Import color variables */ -@import 'colors.css'; - /* Masonry Layout */ .masonry { column-count: 1; diff --git a/static/css/home.css b/static/css/home.css index 692c6a5..07d1a2f 100644 --- a/static/css/home.css +++ b/static/css/home.css @@ -1,6 +1,3 @@ -/* Import color variables */ -@import 'colors.css'; - .navbar { background-color: var(--primary-color) !important; } diff --git a/static/css/trash.css b/static/css/trash.css index 82764f4..9f4ebcc 100644 --- a/static/css/trash.css +++ b/static/css/trash.css @@ -1,6 +1,3 @@ -/* Import color variables */ -@import 'colors.css'; - .btn-group .btn.active { background-color: var(--primary-bg-light) !important; border-color: var(--primary-color) !important; diff --git a/static/js/settings.js b/static/js/settings.js index 81c3e83..61cae45 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -1,6 +1,7 @@ document.addEventListener('DOMContentLoaded', function() { const primaryColorInput = document.getElementById('primaryColor'); const secondaryColorInput = document.getElementById('secondaryColor'); + const colorSettingsForm = document.getElementById('colorSettingsForm'); // Tab persistence const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]'); @@ -163,15 +164,37 @@ document.addEventListener('DOMContentLoaded', function() { // Initialize colors from database values function initializeColors() { - // Reset inputs to original database values - primaryColorInput.value = primaryColorInput.dataset.originalValue; - secondaryColorInput.value = secondaryColorInput.dataset.originalValue; + // Get the current computed CSS variable values + const computedPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color').trim(); + const computedSecondaryColor = getComputedStyle(document.documentElement).getPropertyValue('--secondary-color').trim(); + + console.log('[Settings] Initializing colors:', { + primary: computedPrimaryColor, + secondary: computedSecondaryColor, + timestamp: new Date().toISOString() + }); + + // Update input values + primaryColorInput.value = computedPrimaryColor; + secondaryColorInput.value = computedSecondaryColor; // Update all color previews - updateAllColors(primaryColorInput.value, true); - updateAllColors(secondaryColorInput.value, false); + updateAllColors(computedPrimaryColor, true); + updateAllColors(computedSecondaryColor, false); } // Initialize colors when the page loads initializeColors(); + + // Handle form submission + if (colorSettingsForm) { + colorSettingsForm.addEventListener('submit', function(e) { + console.log('[Settings] Form submitted with values:', { + primary: primaryColorInput.value, + secondary: secondaryColorInput.value, + csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'), + timestamp: new Date().toISOString() + }); + }); + } }); \ No newline at end of file diff --git a/templates/auth/login.html b/templates/auth/login.html index 87b24b8..b0a2c0b 100644 --- a/templates/auth/login.html +++ b/templates/auth/login.html @@ -8,7 +8,15 @@ - + +