taubem
/
ChangeCalendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout changes

main
Said Gedik 2024-06-07 15:44:28 +02:00
parent ea37c02fbd
commit 894ef0dbaf
2 changed files with 50 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/app/ntt-gantt/ntt-gantt.component.css
View File

@ -10,6 +10,7 @@
border-right: 1px rgba(0, 0, 0, 0.181) solid; border-right: 1px rgba(0, 0, 0, 0.181) solid;
margin-left: 15px; margin-left: 15px;
} }
.head { .head {
color: rgba(41, 46, 50, 0.8); color: rgba(41, 46, 50, 0.8);
padding-left: 10px; padding-left: 10px;
@ -18,13 +19,11 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
/* border-bottom: 1px solid rgba(0, 0, 0, 0.2); */
height: 60px; height: 60px;
margin-bottom: 5px; margin-bottom: 5px;
background-color: white; background-color: white;
} }
.head { .head {
overflow: hidden; overflow: hidden;
/* Hides anything that overflows the boundary of this element */ /* Hides anything that overflows the boundary of this element */
@ -107,15 +106,17 @@
} }
.restartButton { .restartButton {
width: 60px;
background-color: white; background-color: white;
border: none; border: none;
border: solid 1px rgba(94, 94, 94, 0.18); border: solid 1px rgba(94, 94, 94, 0.18);
color: #000000a7;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
.restartButton mat-icon {
opacity: 0.75;
}
.restartButton:hover { .restartButton:hover {
color: #000000; color: #000000;
background-color: rgb(240, 240, 240); background-color: rgb(240, 240, 240);
@ -188,7 +189,7 @@
.restartButton mat-icon { .restartButton mat-icon {
transform: scale(0.9); transform: scale(0.9);
margin-right: -2px; margin-right: -2px;
margin-bottom: 2px; margin-bottom: 1px;
} }
.detailsButton { .detailsButton {
@ -315,9 +316,10 @@
} }
.dateButton mat-icon { .dateButton mat-icon {
transform: scale(0.8); transform: scale(0.7);
opacity: 0.75; opacity: 0.75;
margin-right: 0px; margin-right: 1px;
margin-top: 1px;
} }
.dateButton:hover>mat-icon { .dateButton:hover>mat-icon {
@ -328,59 +330,62 @@
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
.editButton { .editButton{
height: 59px; margin-left: 10px;
width: 59px; display: flex;
background-color: rgba(0, 0, 0, 0.04); align-items: center;
border: none; justify-content: center;
border-top-right-radius: 4px; height: 70%;
margin-right: 15px; background-color: rgb(255, 255, 255);
cursor: pointer;
padding-left: 10px;
padding-right: 10px;
border: solid 1px rgba(0, 0, 0, 0.124);
border-radius: 8px;
font-weight: 500;
gap: 3px;
transition: background-color 0.3s ease; /* Add this line for smooth transition */
} }
.editButton:hover { .editButton:hover {
height: 59px;
width: 59px;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
border-top-right-radius: 4px;
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
.editButton:checked {
height: 59px; .editButton mat-icon{
width: 59px; transform: scale(0.7);
background-color: rgba(0, 0, 0, 0.04); opacity: 0.75;
border-top-right-radius: 4px; }
background-color: red; .deleteButton mat-icon {
transform: scale(0.8);
opacity: 0.75;
}
.editButton:hover>mat-icon, .deleteButton:hover>mat-icon {
opacity: 1;
} }
.deleteButton { .deleteButton {
height: 59px; display: flex;
width: 59px; align-items: center;
background-color: rgba(0, 0, 0, 0.04); justify-content: center;
border-width: 1px; height: 70%;
border: none; background-color: rgb(255, 255, 255);
border-top-right-radius: 4px; cursor: pointer;
margin-right: 15px; padding-left: 10px;
margin-left: -15px; padding-right: 10px;
border: solid 1px rgba(0, 0, 0, 0.124);
border-radius: 8px;
font-weight: 500;
gap: 3px;
transition: background-color 0.3s ease; /* Add this line for smooth transition */
} }
.deleteButton:hover { .deleteButton:hover {
height: 59px;
width: 59px;
background-color: rgba(0, 0, 0, 0.04); background-color: rgba(0, 0, 0, 0.04);
border-width: 2px;
border-top-right-radius: 4px;
background-color: rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.08);
} }
.deleteButton:checked {
height: 59px;
width: 59px;
background-color: rgba(0, 0, 0, 0.04);
border-width: 2px;
border-top-right-radius: 4px;
background-color: red;
}
/* .datePickerContainer{ /* .datePickerContainer{
height: 20px; height: 20px;

4
frontend/src/app/ntt-gantt/ntt-gantt.component.html
View File

@ -1,9 +1,9 @@
<div class="head" style=""> <div class="head" style="">
<div class="left" style="display: flex; align-items: center; gap: 15px; height: 100%;"> <div class="left" style="display: flex; align-items: center; gap: 8px; height: 100%;">
<h2>W&I Kalender</h2> <h2>W&I Kalender</h2>
<div class="splitter"></div> <div class="splitter"></div>
<!-- Preset Picker --> <!-- Preset Picker -->
<div appearance="fill" style="width: 200px;padding-left: 15px; padding-top: 3px; font-size: 14px;"> <div appearance="fill" style="width: 200px; padding-left: 15px; padding-top: 3px; font-size: 14px;">
<mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)"> <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
<mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled"> <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
<mat-option *ngFor="let preset of group.presets" [value]="preset"> <mat-option *ngFor="let preset of group.presets" [value]="preset">