From 5d488bd6019e5119176dc5d421d9409c608e72ef Mon Sep 17 00:00:00 2001 From: teddy Date: Wed, 5 Mar 2025 18:13:32 +0000 Subject: [PATCH] Fix(UI): \n 1. Increase margin on cards. \n 2. Move project details above project thumbnail in project section. \n 3. Disable Google Translate on-text-hover behaviour that interferes with page and expected functionality. \n 4. Updated GitHub contributions calendar colour scale to match user-selected page theme. --- index.html | 29 ++++++++++++--------- styles/experience-section.css | 6 ----- styles/expertise-section.css | 5 ---- styles/github-contributions-calendar.css | 33 ++++++++++++++++++++++++ styles/google-translate.css | 29 +++++++++++++++++++++ styles/home.css | 12 +++++++++ styles/main.css | 3 ++- styles/navigation.css | 5 +++- styles/projects-section.css | 4 --- styles/themes.css | 20 ++++++++++++++ 10 files changed, 117 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index de72471..6114128 100644 --- a/index.html +++ b/index.html @@ -86,9 +86,6 @@

Enterprise ERP & E-commerce System

Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.

Show details

-
- Live PARTS Enterprise Store -

Key Features:

Technologies: Python, MySQL / MariaDB, Docker

+
+ Live PARTS Enterprise Store +
Demo ERP @@ -111,9 +111,6 @@

partsERP Core Framework

A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.

Show details

-
- Demo PARTS ERP Site -

Key Features:

    @@ -124,6 +121,9 @@

Technologies: Python - Flask, MySQL / MariaDB, JavaScript

+
+ Demo PARTS ERP Site +
View on GitHub Demo Site @@ -135,11 +135,6 @@

Financial Data Reconciliation Tool

VBA Excel automation that simplifies complex data processing between multiple spreadsheets.

Show details

-

Key Features:

    @@ -150,6 +145,11 @@

Technologies: VBA, Excel Object Model

+
View on GitHub
@@ -252,8 +252,13 @@ function initGoogleTranslateElement() { new google.translate.TranslateElement({ pageLanguage: 'en', + // autoDisplay: false, // layout: google.translate.TranslateElement.InlineLayout.SIMPLE - layout: google.translate.TranslateElement.InlineLayout.VERTICAL + layout: google.translate.TranslateElement.InlineLayout.VERTICAL, + // Disable the automatic translation popups + gaTrack: false, + gaId: '', + multilanguagePage: false }, 'google_translate_element'); } diff --git a/styles/experience-section.css b/styles/experience-section.css index 58d0588..d0f83ed 100644 --- a/styles/experience-section.css +++ b/styles/experience-section.css @@ -1,12 +1,6 @@ /* Experience */ .experience-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-bottom: 2rem; - margin-top: 2rem; } .experience-card h3 { margin-bottom: 0; diff --git a/styles/expertise-section.css b/styles/expertise-section.css index f2decd1..9af075c 100644 --- a/styles/expertise-section.css +++ b/styles/expertise-section.css @@ -6,9 +6,4 @@ } .expertise-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-bottom: 2rem; } \ No newline at end of file diff --git a/styles/github-contributions-calendar.css b/styles/github-contributions-calendar.css index a51d7a7..652f45b 100644 --- a/styles/github-contributions-calendar.css +++ b/styles/github-contributions-calendar.css @@ -21,4 +21,37 @@ content: "GitHub Contributions Calendar"; color: var(--text-colour); font-size: 1rem; +} + +/* Colour scale to match theme */ +/* +.github-calendar table tbody td:not(:first-child), +div.ContributionCalendar-day { + border: solid 1px grey; +} +*/ +td.ContributionCalendar-day[data-level="0"], /*[aria-describedby="contribution-graph-legend-level-4"]*/ +div.ContributionCalendar-day[data-level="0"] +{ + background-color: var(--github-calendar-level-0-colour); +} +td.ContributionCalendar-day[data-level="1"], +div.ContributionCalendar-day[data-level="1"] +{ + background-color: var(--github-calendar-level-1-colour); +} +td.ContributionCalendar-day[data-level="2"], +div.ContributionCalendar-day[data-level="2"] +{ + background-color: var(--github-calendar-level-2-colour); +} +td.ContributionCalendar-day[data-level="3"], +div.ContributionCalendar-day[data-level="3"] +{ + background-color: var(--github-calendar-level-3-colour); +} +td.ContributionCalendar-day[data-level="4"], +div.ContributionCalendar-day[data-level="4"] +{ + background-color: var(--github-calendar-level-4-colour); } \ No newline at end of file diff --git a/styles/google-translate.css b/styles/google-translate.css index a842cb9..1e9ef23 100644 --- a/styles/google-translate.css +++ b/styles/google-translate.css @@ -12,4 +12,33 @@ iframe.skiptranslate { } body { top: 0px !important; +} + +/* Disable Google Translate hover popups and text highlighting */ +.goog-text-highlight:not(#google_translate_element *), +.goog-tooltip:not(#google_translate_element *), +.goog-tooltip-bubble:not(#google_translate_element *), +.goog-te-balloon-frame:not(#google_translate_element *), +.VIpgJd-suEOdc:not(#google_translate_element *), +#goog-gt-tt:not(#google_translate_element *), +.VIpgJd-yAWNEb-L7lbkb:not(#google_translate_element *), +div.skiptranslate.goog-te-gadget span:not(#google_translate_element *), +.goog-te-banner-frame:not(#google_translate_element *), +.goog-te-gadget-simple span.text:not(#google_translate_element *), +.goog-te-gadget-icon:not(#google_translate_element *), +.goog-te-gadget-icon:not(#google_translate_element *)::before { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + height: 0 !important; + pointer-events: none !important; +} + +/* Keep text selection normal */ +* { + -webkit-touch-callout: default !important; + -webkit-user-select: text !important; + -moz-user-select: text !important; + -ms-user-select: text !important; + user-select: text !important; } \ No newline at end of file diff --git a/styles/home.css b/styles/home.css index a4a7b07..1aced90 100644 --- a/styles/home.css +++ b/styles/home.css @@ -20,6 +20,18 @@ ul, li { } /* Common card styles */ +.expertise-card, +.project-card, +.experience-card { + background: var(--text-background-colour); + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + margin-top: 2rem; + padding-left: 1.5vw; + padding-right: 1.5vw; +} .expertise-card h3, .project-card h3, .experience-card h3 { diff --git a/styles/main.css b/styles/main.css index b8ece22..a25dd48 100644 --- a/styles/main.css +++ b/styles/main.css @@ -23,4 +23,5 @@ a { } a:visited { color: var(--text-link-visited-colour) -} \ No newline at end of file +} + diff --git a/styles/navigation.css b/styles/navigation.css index fa3b266..fa70088 100644 --- a/styles/navigation.css +++ b/styles/navigation.css @@ -13,7 +13,10 @@ nav ul { justify-content: center; gap: 2rem; } - +nav ul li { + margin-top: auto; + margin-bottom: auto; +} nav a { color: var(--text-background-colour); text-decoration: none; diff --git a/styles/projects-section.css b/styles/projects-section.css index b412fd6..93546cd 100644 --- a/styles/projects-section.css +++ b/styles/projects-section.css @@ -10,10 +10,6 @@ .project-card-gridslot { } .project-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: fit-content; } diff --git a/styles/themes.css b/styles/themes.css index b0d41c1..8dd3bd6 100644 --- a/styles/themes.css +++ b/styles/themes.css @@ -9,6 +9,11 @@ --text-background-colour: white; --text-link-unvisited-colour: #0000EE; --text-link-visited-colour: #551A8B; + --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg); + --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg); + --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg); + --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg); + --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg); } :root[data-theme="purple"] { /* Purple theme @@ -23,6 +28,11 @@ /* --text-link-unvisited-colour: #0000EE; --text-link-visited-colour: #551A8B; + --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg); + --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg); + --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg); + --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg); + --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg); */ } :root[data-theme="red"], @@ -40,6 +50,11 @@ /* --text-link-unvisited-colour: #0000EE; --text-link-visited-colour: #551A8B; + --github-calendar-level-0-colour: var(--color-calendar-graph-day-bg); + --github-calendar-level-1-colour: var(--color-calendar-graph-day-L1-bg); + --github-calendar-level-2-colour: var(--color-calendar-graph-day-L2-bg); + --github-calendar-level-3-colour: var(--color-calendar-graph-day-L3-bg); + --github-calendar-level-4-colour: var(--color-calendar-graph-day-L4-bg); */ } :root[data-theme="dark"] { @@ -60,6 +75,11 @@ --text-background-colour: black; /* Dark Red */ --text-link-unvisited-colour: #ADD8E6; /* Light Blue */ --text-link-visited-colour: #D8BFD8; /* Thistle (Light Purple) */ + --github-calendar-level-0-colour: rgba(30, 30, 30, 255); /* var(--text-background-colour); */ + --github-calendar-level-1-colour: #ff5252; + --github-calendar-level-2-colour: #f30000; + --github-calendar-level-3-colour: #c10000; + --github-calendar-level-4-colour: #840000; } /* Toggle light mode / dark mode button */