Compare commits

...

9 Commits

Author SHA1 Message Date
e70cc67430 * Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme
- correct positio of flag-icon [SME: 12706]
2024-07-28 15:50:26 +01:00
b097acafab yet more adjustment to header button spacing 2024-07-28 15:46:08 +01:00
5d7655a709 and more adjustment to header 2024-07-28 14:19:54 +01:00
a58df95aa9 More position and format for flag-icon 2024-07-28 14:04:49 +01:00
251b454470 Get Flag icon in correct place 2024-07-28 12:13:03 +01:00
174d511899 * Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme
- Add in flag icon indication of locale [SME: 12706]
2024-07-27 22:33:07 +01:00
4be8a1411f Update js code for flag icon 2024-07-27 22:28:01 +01:00
ba431a8a7d Add in js code for flag icon 2024-07-27 22:07:10 +01:00
77a7849898 Add in locale icon in header 2024-07-27 20:03:14 +01:00
7 changed files with 229 additions and 32 deletions

4
clog
View File

@@ -1,2 +1,2 @@
* Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
- fix navigation2.conf to more correctly translate menus [SME: 12714]
* Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme
- correct positio of flag-icon [SME: 12706]

View File

@@ -1,5 +1,4 @@
{
$OUT = <<'EOF';
/* DO NOT MODIFY THIS FILE! It is updated automatically */
/* smeserver_manager2 */
@@ -234,7 +233,7 @@ a.menu-title {
width: 100%;
}
#h2e11 {
width: 70%;
width: 50%;
float: left;
}
#h2e12 {
@@ -257,9 +256,9 @@ a.menu-title {
width: 70%;
}
#h2e22,#h2e23 {
#h2e22,#h2e23,#h2e12 {
float: left;
width: 10%;
width: 14em;
text-align: center;
}
@@ -274,5 +273,4 @@ a.menu-title {
}
/*end*/
EOF
}

View File

@@ -0,0 +1,27 @@
document.addEventListener('DOMContentLoaded', () => {
const flagContainer = document.getElementById('flag-container');
// Function to get the browser's locale
function getBrowserLocale() {
return navigator.language || navigator.userLanguage;
}
// Function to map locale to country code
function getCountryCodeFromLocale(locale) {
const localeParts = locale.split('-');
return localeParts.length > 1 ? localeParts[1] : localeParts[0];
}
// Function to create and display the flag icon
function displayFlagIcon(countryCode) {
const flagIcon = document.createElement('span');
flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
flagIcon.id = 'flag-icon';
flagContainer.appendChild(flagIcon);
}
// Main logic
const locale = getBrowserLocale();
const countryCode = getCountryCodeFromLocale(locale);
displayFlagIcon(countryCode);
});

View File

@@ -0,0 +1,63 @@
document.addEventListener('DOMContentLoaded', () => {
const flagContainer = document.getElementById('flag-container');
// Function to get the browser's locale
function getBrowserLocale() {
return navigator.language || navigator.userLanguage;
}
// Function to map locale to country code
function getCountryCodeFromLocale(locale) {
const localeParts = locale.split('-');
return localeParts.length > 1 ? localeParts[1] : localeParts[0];
}
// Function to fetch country names from a CDN
async function fetchCountryNames() {
const response = await fetch('https://restcountries.com/v3.1/all');
const countries = await response.json();
const countryNames = {};
for (const country of countries) {
const code = country.cca2.toLowerCase(); // Country code (ISO 3166-1 alpha-2)
const name = country.name.common; // Common name of the country
countryNames[code] = name;
}
return countryNames;
}
// Function to create and display the flag icon
function displayFlagIcon(countryCode, countryName) {
const flagIcon = document.createElement('span');
flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
flagIcon.id = 'flag-icon';
flagIcon.title = countryName; // Set the title for the tooltip
// If you want a custom tooltip instead (uncomment the lines below):
/*
const tooltip = document.createElement('span');
tooltip.className = 'tooltip';
tooltip.innerText = countryName;
flagIcon.appendChild(tooltip);
flagIcon.addEventListener('mouseenter', () => {
tooltip.style.display = 'block';
});
flagIcon.addEventListener('mouseleave', () => {
tooltip.style.display = 'none';
});
*/
flagContainer.appendChild(flagIcon);
}
// Main logic
(async () => {
const locale = getBrowserLocale();
const countryCode = getCountryCodeFromLocale(locale);
const countryNames = await fetchCountryNames(); // Fetch country names
const countryName = countryNames[countryCode.toLowerCase()] || 'Unknown Country'; // Get the country name
displayFlagIcon(countryCode, countryName); // Display the flag with country name
})();
});

View File

@@ -31,7 +31,9 @@
%= javascript '/js/vfs_fonts.js'
%= javascript '/js/buttons.html5.min.js'
%= javascript '/js/buttons.print.min.js'
%= javascript '/js/flag-by-locale.js'
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">
%= stylesheet '/css/sme-jquery-overrides.css'
</head>

View File

@@ -1,27 +1,128 @@
<style>
#h2l1 {
display: flex; /* Use flexbox layout */
justify-content: space-between; /* Space between child elements */
align-items: center; /* Center items vertically */
}
#h2e11 {
flex: 1; /* Allow the first div to take available space on the left */
}
#h2e12 {
display: flex; /* Make this div a flex container */
align-items: center; /* Vertically center content in this div */
margin-left: 20px; /* Add margin to the left of this div */
}
#flag-container {
display: flex; /* Make this div a flex container */
align-items: center; /* Vertically center content in this div */
margin-left: 20px; /* Add margin to the left of the flag container */
padding-right: 20px; /* Add padding to the right side of the flag container */
}
.flag-icon {
width: 43px;
font-size: 20px;
}
#legacy-button button {
background-color: #98d36e; /* Button background color */
font-weight: lighter; /* Lighter text for the button */
color: #063; /* Button text color */
padding: 5px 10px; /* Padding for the button */
border: none; /* Remove default button border */
border-radius: 4px; /* Rounded corners for button */
cursor: pointer; /* Change cursor on hover */
}
#legacy-button button:hover {
background-color: #82c961; /* Change color on hover */
}
.infobar {
display: flex; /* Use flexbox for alignment */
justify-content: space-between; /* Space between child elements */
align-items: center; /* Center items vertically */
padding: 10px; /* Adjust padding as desired */
}
#h2e21 {
flex: 1; /* Allow the first div to take available space on the left */
}
#h2e22 {
display: flex; /* Make this div a flex container */
justify-content: center; /* Center the help button */
align-items: center; /* Center vertically */
flex: none; /* Prevent this div from growing */
position: relative; /* Relative position for centering */
width: 100px; /* Set a width for the help button container */
}
#h2e23 {
margin-left: auto; /* Push the third div to the right */
}
.login-button {
background-color: #98d36e; /* Button background color */
font-weight: bold; /* Bold text */
xxcolor: #ffffff; /* Button text color */
padding: 8px 12px; /* Adjust padding for button height */
border: none; /* Remove default border */
border-radius: 4px; /* Rounded corners */
cursor: pointer; /* Change cursor on hover */
}
.login-button:hover {
background-color: #82c961; /* Change color on hover */
}
#help-button {
text-decoration: none; /* Remove underline from link */
font-size: 20px; /* Adjust font size as needed */
padding: 8px 12px; /* Add padding to the help link */
background-color: #98d36e; /* Background for visibility */
border-radius: 4px; /* Rounded corners */
color: #000; /* Button text color */
}
#help-button:hover {
background-color: #82c961; /* Change background on hover */
}
</style>
<div id="header2" class="hd2">
<div id="h2l1">
<div id="h2e11">
<a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
</div>
<!-- <div id="h2e12"><h5><a href="initial">Server Manager</a>
<a href="/server-manager" target='_blank'>&nbsp &nbsp (Prev SM)</a></h5> -->
<div id="h2e12" style="float:right;"><br><a href="/server-manager" target='_blank'><button style="background-color:#98d36e;font-weight:bold;color:#063;">Legacy SM</button></a></div>
</div>
<div id="h2e11">
<a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
</div>
<div id="h2l2" class="infobar">
<div id="h2e21">
<b>
<%= session 'SystemName' %>@<%= session 'DomainName' %></b>
</div>
<div id="h2e22">
<a target="_parent" href="manual">&nbsp;&nbsp;<b> ? </b>&nbsp;&nbsp;</a>&nbsp;
</div>
<div id="h2e23">
% if ( not defined $c->session->{username} ) {
<a target="_parent" href="login"><b>Login</b></a>&nbsp;
% } else {
<a target="_parent" href="logout"><b><%= $c->session->{username} %> Logout</b></a>&nbsp;
% }
</div>
<div id="h2e22">
<a id="help-button" target="_parent" href="manual"><button> ? </button></a>
</div>
<div id="h2e12">
<a id="legacy-button" href="/server-manager" target='_blank'><button>Legacy SM</button></a>
</div>
<div id="h2e23">
% if ( not defined $c->session->{username} ) {
<a target="_parent" href="login"><button class="login-button">Login</button></a>
% } else {
<a target="_parent" href="logout"><button class="login-button"><%= $c->session->{username} %> Logout</button></a>
% }
</div>
<div id="flag-container">
<!-- The flag icon will be inserted here -->
</div>
</div>
<div id="h2l2" class="infobar">
<div id="h2e21">
<b>
<%= session 'SystemName' %>@<%= session 'DomainName' %></b>
</div>
</div>
</div>

View File

@@ -2,7 +2,7 @@ Summary: Sme server navigation module : manager 2
%define name smeserver-manager
Name: %{name}
%define version 11.0.0
%define release 10
%define release 12
Version: %{version}
Release: %{release}%{?dist}
License: GPL
@@ -108,6 +108,12 @@ true
%defattr(-,root,root)
%changelog
* Sun Jul 28 2024 Brian Read <brianr@koozali.org> 11.0.0-12.sme
- correct positio of flag-icon [SME: 12706]
* Sat Jul 27 2024 Brian Read <brianr@koozali.org> 11.0.0-11.sme
- Add in flag icon indication of locale [SME: 12706]
* Fri Jul 26 2024 Brian Read <brianr@koozali.org> 11.0.0-10.sme
- fix navigation2.conf to more correctly translate menus [SME: 12714]