k4rli/stretch-my-time-off
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Final fixes

Browse Source
This commit is contained in:
Zachary
2024-11-11 18:33:30 +01:00
parent 1c52afa674
commit df9b8ec1b3
1 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/routes/+page.svelte
View File

@@ -52,10 +52,6 @@
optimizedDaysOff = []; optimizedDaysOff = [];
consecutiveDaysOff = []; consecutiveDaysOff = [];
} }
console.log('Year:', year);
console.log('Holidays updated:', holidays);
console.log('Optimized Days Off:', optimizedDaysOff);
console.log('Consecutive Days Off:', consecutiveDaysOff);
} }
function getFlagEmoji(countryCode) { function getFlagEmoji(countryCode) {
@@ -105,29 +101,29 @@
}); });
updateHolidays(); updateHolidays();
console.log(consecutiveDaysOff);
</script> </script>
<style> <style>
.header { .header {
max-width: 800px; max-width: 800px;
margin: 40px auto; margin: 20px auto;
padding: 0 10px;
text-align: center; text-align: center;
} }
.header h2 { .header h2 {
font-size: 2.5em; /* Slightly larger font size */ font-size: 2em;
margin: 0; margin: 0;
} }
.header p { .header p {
font-size: 1.1em; font-size: 1em;
} }
.content-box { .content-box {
max-width: 1200px; max-width: 1200px;
margin: 40px auto; margin: 20px auto;
padding: 20px; padding: 15px;
background-color: #111; background-color: #111;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -139,7 +135,7 @@
} }
input { input {
margin: 0 10px; margin: 0 5px;
font-size: 1em; font-size: 1em;
padding: 8px; padding: 8px;
background-color: transparent; background-color: transparent;
@@ -160,7 +156,7 @@
.calendar-grid { .calendar-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); /* Default to 3 columns */ grid-template-columns: repeat(3, 1fr);
gap: 20px; gap: 20px;
justify-items: center; justify-items: center;
padding: 20px; padding: 20px;
@@ -168,7 +164,7 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
.calendar-grid { .calendar-grid {
grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns for medium screens */ grid-template-columns: repeat(2, 1fr);
gap: 10px; gap: 10px;
padding: 10px; padding: 10px;
} }
@@ -182,19 +178,13 @@
} }
} }
@media (max-width: 400px) {
.calendar-grid {
grid-template-columns: repeat(1, 1fr); /* Adjust to 1 column for very small screens */
}
}
.calendar-container { .calendar-container {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
background-color: #111; background-color: #111;
color: #fff; color: #fff;
border-radius: 5px; border-radius: 5px;
padding: 15px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: visible; overflow: visible;
@@ -206,26 +196,27 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 10px; padding: 5px;
border-radius: 5px; border-radius: 5px;
margin-bottom: 20px; margin-bottom: 10px;
} }
.key-item { .key-item {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 15px; margin: 0 10px;
font-size: 0.8em;
} }
.color-box { .color-box {
width: 20px; width: 15px;
height: 20px; height: 15px;
margin-right: 8px; margin-right: 5px;
border-radius: 3px; border-radius: 3px;
} }
.color-box.weekend { .color-box.weekend {
background-color: #585858; /* Muted gray/white */ background-color: #585858;
} }
.color-box.optimized { .color-box.optimized {
@@ -238,9 +229,9 @@
footer { footer {
text-align: center; text-align: center;
padding: 20px; padding: 10px;
color: #c5c6c7; color: #c5c6c7;
font-size: 0.9em; font-size: 0.8em;
} }
footer a { footer a {
@@ -259,15 +250,24 @@
button { button {
background-color: #333; background-color: #333;
border: 1px solid #444; border-left: 4px solid #111;
border-top: 4px solid #111;
border-right: 4px solid #555;
border-bottom: 4px solid #555;
color: #fff; color: #fff;
font-size: 1em; font-size: 0.8em;
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 3px;
margin: 0 10px; margin: 0 5px;
border-radius: 5px; border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s, color 0.3s, transform 0.1s; transition: transform 0.1s;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-weight: bold;
} }
button:hover { button:hover {
@@ -276,26 +276,26 @@
button:active { button:active {
transform: translateY(2px); transform: translateY(2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); box-shadow: none;
} }
button:focus { button:focus {
outline: 2px solid #61dafb; outline: none;
} }
.bold { .bold {
font-weight: bold; font-weight: bold;
font-size: 1.2em; font-size: 1em;
} }
.flag { .flag {
font-size: 2em; font-size: 1.5em;
} }
.day { .day {
aspect-ratio: 1; aspect-ratio: 1;
text-align: center; text-align: center;
font-size: 0.7em; /* Adjust font size for smaller screens */ font-size: 0.6em;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -311,7 +311,7 @@
<p> <p>
In {selectedCountry}, there are {holidays.length} public holidays in {year}. In {selectedCountry}, there are {holidays.length} public holidays in {year}.
<br /> <br />
Let's stretch your {daysOff} days off to {consecutiveDaysOff.reduce((total, group) => total + group.totalDays, 0)} vacation days. Let's stretch your time off from {daysOff} days to {consecutiveDaysOff.reduce((total, group) => total + group.totalDays, 0)} days.
</p> </p>
</div> </div>
@@ -322,14 +322,14 @@
<input bind:this={inputElement} list="countries" class="editable-input bold" bind:value={selectedCountry} placeholder={placeholder} on:input={handleCountryChange} on:focus={() => { inputElement.value = ''; adjustInputWidth(); }} aria-label="Select country" /> <input bind:this={inputElement} list="countries" class="editable-input bold" bind:value={selectedCountry} placeholder={placeholder} on:input={handleCountryChange} on:focus={() => { inputElement.value = ''; adjustInputWidth(); }} aria-label="Select country" />
and have and have
<span class="arrow-controls"> <span class="arrow-controls">
<button on:click={() => { daysOff++; updateHolidays(); }} aria-label="Increase days off">▲</button>
<span class="bold">{daysOff}</span>&nbsp;days off
<button on:click={() => { if (daysOff > 0) { daysOff--; updateHolidays(); } }} aria-label="Decrease days off">▼</button> <button on:click={() => { if (daysOff > 0) { daysOff--; updateHolidays(); } }} aria-label="Decrease days off">▼</button>
</span> in <span class="bold">{daysOff} days</span>
<button on:click={() => { daysOff++; updateHolidays(); }} aria-label="Increase days off">▲</button>
</span>of vacation in
<span class="arrow-controls"> <span class="arrow-controls">
<button on:click={() => { year--; updateHolidays(); }} aria-label="Previous year">◀</button> <button on:click={() => { year--; updateHolidays(); }} aria-label="Previous year">▼</button>
<span class="bold">{year}</span> <span class="bold">{year}</span>
<button on:click={() => { year++; updateHolidays(); }} aria-label="Next year">▶</button> <button on:click={() => { year++; updateHolidays(); }} aria-label="Next year">▲</button>
</span> </span>
</p> </p>