admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
teddy
2025-03-05 18:13:32 +00:00
parent 48c4c9bef6
commit 5d488bd601
10 changed files with 117 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@@ -86,9 +86,6 @@
<h3>Enterprise ERP & E-commerce System</h3>
<p>Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.</p>
<p class="project-detail-button">Show details</p>
<div class="project-thumbnail">
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
</div>
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
@@ -99,6 +96,9 @@
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p>
</div>
<div class="project-thumbnail">
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
</div>
<div class="project-links">
<a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Ferp.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo ERP</a>
<!-- <a href="https://store.sandbox.partsenterprise.partsltd.co.uk" class="button">Demo Store</a> -->
@@ -111,9 +111,6 @@
<h3>partsERP Core Framework</h3>
<p>A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.</p>
<p class="project-detail-button">Show details</p>
<div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
</div>
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
@@ -124,6 +121,9 @@
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p>
</div>
<div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
</div>
<div class="project-links">
<a href="https://github.com/Teddy-1024/demo_partsERP.git" class="button">View on GitHub</a>
<a href="https://auth.sandbox.teddy.org.uk?target=https%3A%2F%2Fsandbox.partsERP.teddy.org.uk/" class="button">Demo Site</a>
@@ -135,11 +135,6 @@
<h3>Financial Data Reconciliation Tool</h3>
<p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p>
<p class="project-detail-button">Show details</p>
<!--
<div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
</div>
-->
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
@@ -150,6 +145,11 @@
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p>
</div>
<!--
<div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
</div>
-->
<div class="project-links">
<a href="https://github.com/Teddy-1024/demo_VBA.git" class="button">View on GitHub</a>
</div>
@@ -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');
}
</script>

6
styles/experience-section.css
View File

@@ -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;

5
styles/expertise-section.css
View File

@@ -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;
}

33
styles/github-contributions-calendar.css
View File

@@ -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);
}

29
styles/google-translate.css
View File

@@ -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;
}

12
styles/home.css
View File

@@ -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 {

3
styles/main.css
View File

@@ -23,4 +23,5 @@ a {
}
a:visited {
color: var(--text-link-visited-colour)
}
}

5
styles/navigation.css
View File

@@ -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;

4
styles/projects-section.css
View File

@@ -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;
}

20
styles/themes.css
View File

@@ -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 */