Skip to content

Commit

Permalink
3rd commit - Adjusted button placement and size
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikolaos Douranos committed Jun 12, 2024
1 parent b2fddcf commit bdea12c
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 105 deletions.
90 changes: 43 additions & 47 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1250,8 +1250,8 @@ html[data-view='flexible-day'] .punch-button img {

.switch {
position: relative;
width: 7.5rem;
height: 4rem;
width: 3.75rem; /* Half of the original width */
height: 2rem; /* Half of the original height */
}

.switch input {
Expand All @@ -1269,37 +1269,36 @@ html[data-view='flexible-day'] .punch-button img {
.background {
z-index: 1;
position: absolute;
width: 7.5rem;
height: 4rem;
border-radius: 2.5rem;
border: 0.25rem solid #202020;
width: 3.75rem;
height: 2rem;
border-radius: 1.25rem; /* Half of the original border-radius */
border: 0.125rem solid #202020; /* Half of the original border thickness */
background: linear-gradient(to right, #484848 0%, #202020 100%);
transition: all 0.3s;
}


.switch input:checked ~ .fill {
background: #E9F8FD;
}

.stars1,
.stars2 {
position: absolute;
height: 0.4rem;
width: 0.4rem;
height: 0.2rem; /* Half of the original height */
width: 0.2rem; /* Half of the original width */
background: #FFFFFF;
border-radius: 50%;
transition: 0.3s all ease;
}

.stars1 {
top: 6px;
right: 23px;
top: 3px;
right: 11.5px;
}

.stars2 {
top: 40px;
right: 48px;
top: 20px;
right: 24px;
}

.stars1:after,
Expand All @@ -1309,55 +1308,55 @@ html[data-view='flexible-day'] .punch-button img {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
height: 0.125rem; /* Half of the original size */
width: 0.125rem; /* Half of the original size */
background: #FFFFFF;
border-radius: 50%;
transition: 0.2s all ease;
}

.stars1:after {
top: 8px;
right: 20px;
top: 4px;
right: 10px;
}

.stars1:before {
top: 18px;
right: -12px;
top: 9px;
right: -6px;
}

.stars2:after {
top: -8px;
right: -16px;
top: -4px;
right: -8px;
}

.stars2:before {
top: 6px;
right: -26px;
top: 3px;
right: -13px;
}

.sun-moon {
z-index: 2;
position: absolute;
left: 0;
display: inline-block;
height: 3rem;
width: 3rem;
margin: 0.5rem;
height: 1.5rem; /* Half of the original height */
width: 1.5rem; /* Half of the original width */
margin: 0.25rem; /* Half of the original margin */
background: #FFFDF2;
border-radius: 50%;
transition: all 0.5s ease;
border: 0.25rem solid #DEE2C6;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
}

.sun-moon .dots {
position: absolute;
top: 3px;
left: 23px;
height: 1rem;
width: 1rem;
top: 1.5px;
left: 11.5px;
height: 0.5rem; /* Half of the original height */
width: 0.5rem; /* Half of the original width */
background: #EFEEDB;
border: 0.25rem solid #DEE2C6;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
border-radius: 50%;
transition: 0.4s all ease;
}
Expand All @@ -1367,27 +1366,24 @@ html[data-view='flexible-day'] .punch-button img {
position: absolute;
content: "";
display: block;
height: 0.25rem;
width: 0.25rem;
height: 0.5rem; /* Half of the original size */
width: 0.5rem; /* Half of the original size */
background: #EFEEDB;
border: 0.25rem solid #DEE2C6;
border: 0.125rem solid #DEE2C6; /* Half of the original border thickness */
border-radius: 50%;
transition: 0.4s all ease;
}

.sun-moon .dots:after {
top: -4px;
left: -26px;
}


.sun-moon .dots:before {
top: 18px;
left: -10px;
top: 2.5px;
left: -4px;
}

/* Transition to Sun */
.switch input:checked ~ .sun-moon {
left: calc(100% - 4rem);
left: calc(100% - 2rem); /* Adjusted left value */
background: #F5EC59;
border-color: #E7C65C;
transform: rotate(-25deg);
Expand All @@ -1401,20 +1397,20 @@ html[data-view='flexible-day'] .punch-button img {
}

.switch input:checked ~ .sun-moon .dots {
height: 1.5rem;
width: 1.5rem;
height: 0.75rem; /* Adjusted height */
width: 0.75rem; /* Adjusted width */
top: 0px;
left: -20px;
left: -10px; /* Adjusted left value */
transform: rotate(25deg);
}

.switch input:checked ~ .background .stars1,
.switch input:checked ~ .background .stars2 {
opacity: 0;
transform: translateY(2rem);
transform: translateY(1rem); /* Adjusted translateY value */
}

.switch input:checked ~ .background {
border: 0.25rem solid #78C1D5;
border: 0.125rem solid #78C1D5; /* Half of the original border thickness */
background: linear-gradient(to right, #78C1D5 0%, #BBE7F5 100%);
}
67 changes: 54 additions & 13 deletions renderer/classes/FlexibleDayCalendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,52 @@ class FlexibleDayCalendar extends BaseCalendar
* @param {Object.<string, any>} preferences
* @param {Object.<string, string>} languageData
*/
constructor(preferences, languageData)
{
constructor(preferences, languageData) {
super(preferences, languageData);
this._currentTheme = localStorage.getItem('theme') || 'light'; // Load theme from localStorage or default to 'light'
}

/**
* Initializes the calendar by generating the html code, binding JS events and then drawing according to DB.
*/
_initCalendar()
{
_initCalendar() {
this._generateTemplate();
this._bindEvents();
this._applyInitialTheme(); // Apply the stored or default theme on initialization
}


_bindEvents() {
$('#next-day').on('click', () => { this._nextDay(); });
$('#prev-day').on('click', () => { this._prevDay(); });
$('#switch-view').on('click', () => { this._switchView(); });
$('#current-day').on('click', () => { this._goToCurrentDate(); });
$('#input-calendar-date').on('change', (event) =>
{
$('#input-calendar-date').on('change', (event) => {
const [year, month, day] = $(event.target).val().split('-');
this._goToDate(new Date(year, month-1, day));
this._goToDate(new Date(year, month - 1, day));
});
this._setupThemeToggle();
}

_setupThemeToggle() {
const themeToggle = document.getElementById('toggle');
themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});
}

_applyInitialTheme() {
document.documentElement.setAttribute('data-theme', this._currentTheme);
const themeToggle = document.getElementById('toggle');
themeToggle.checked = this._currentTheme === 'dark';
}

/**
* Generates the calendar HTML view.
*/
Expand All @@ -48,32 +71,48 @@ class FlexibleDayCalendar extends BaseCalendar
const body = this._getBody();
$('#calendar').html(body);
$('html').attr('data-view', 'flexible-day');
$('#calendar').html(this._getBody());
$('html').attr('data-view', 'flexible-day');
}

/**
* Returns the header of the page, with the image, name and a message.
* @return {string}
*/
_getPageHeader()
{
_getPageHeader() {
const switchView = `<input id="switch-view" type="image" src="../assets/switch.svg" alt="${this._getTranslation('$BaseCalendar.switch-view')}" title="${this._getTranslation('$BaseCalendar.switch-view')}" height="24" width="24"></input>`;
const todayBut = `<input id="current-day" type="image" src="../assets/calendar.svg" alt="${this._getTranslation('$FlexibleDayCalendar.current-day')}" title="${this._getTranslation('$FlexibleDayCalendar.current-day')}" height="24" width="24"></input>`;
const leftBut = `<input id="prev-day" type="image" src="../assets/left-arrow.svg" alt="${this._getTranslation('$FlexibleDayCalendar.previous-day')}" height="24" width="24"></input>`;
const rightBut = `<input id="next-day" type="image" src="../assets/right-arrow.svg" alt="${this._getTranslation('$FlexibleDayCalendar.next-day')}" height="24" width="24"></input>`;
const title = 'Time to Leave';
return '<div class="title-header">'+
'<div class="title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>' +
const themeToggleButton = `
<div id="theme-toggle-area" class="theme-switch-container">
<div class="switch">
<label for="toggle">
<input id="toggle" class="toggle-switch" type="checkbox">
<div class="sun-moon"><div class="dots"></div></div>
<div class="background"><div class="stars1"></div><div class="stars2"></div></div>
<div class="fill"></div>
</label>
</div>
</div>`;

// Theme toggle button moved to the left of the logo
return '<div class="title-header">' +
`<div class="title-header-img"><img src="../assets/ttl.svg" height="64" width="64"></div>` +
`<div class="title-header-text">${title}</div>` +
'<div class="title-header-msg"></div>' +
'</div>' +
'<table class="table-header"><tr>' +
'<table class="table-header"><tr>' +
`${themeToggleButton}` +
'<th class="th but-switch-view" colspan="2">' + switchView + '</th>' +
'<th class="th but-left">' + leftBut + '</th>' +
'<th class="th th-month-name" colspan="18"><div class="div-th-month-name"><span id="header-date"></span></span><input type="date" id="input-calendar-date" required></div></th>' +
'<th class="th but-right">' + rightBut + '</th>' +
'<th class="th but-today" colspan="2">' + todayBut + '</th>' +
'</tr></table>';
'</tr></table>';
}


/**
* Returns the template code of the body of the page.
Expand Down Expand Up @@ -720,6 +759,8 @@ class FlexibleDayCalendar extends BaseCalendar
}
return targetDate;
}


}

export {
Expand Down
Loading

0 comments on commit bdea12c

Please sign in to comment.