Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-01-23 02:36:05 +00:00
Code Issues Projects Releases Wiki Activity

feat(task): improve mobile styling for time values

Browse source
This commit is contained in:
Johannes Millan 2025-04-22 17:13:14 +02:00
parent 50e5aa5621
commit 92e81d7d94
1 changed files with 32 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/app/features/tasks/task/task.component.scss
View file

@ -266,11 +266,11 @@
margin-right: $s;
align-items: stretch;
@include verySmallMainContainer {
flex-direction: column-reverse;
align-items: flex-end;
justify-content: center;
}
//@include verySmallMainContainer {
// flex-direction: column-reverse;
// align-items: flex-end;
// justify-content: center;
//}
}
.controls {
@ -313,9 +313,9 @@
margin-left: 5px;
}
@include verySmallMainContainer {
min-height: 40px;
}
//@include verySmallMainContainer {
// min-height: 40px;
//}
}
// OTHER UI ELEMENTS
@ -323,6 +323,7 @@
.title-and-tags-wrapper {
flex-grow: 1;
flex-shrink: 1;
min-width: 200px;
// we cannot do this since this cuts of the box shadow of the task edit
//overflow: hidden;
@ -334,23 +335,16 @@
}
@mixin timeWrapperMinimalStyles() {
&:after {
content: '';
border-top: 1px solid;
opacity: 0.1;
position: absolute;
left: 0;
right: 0;
top: 50%;
}
.time {
font-size: 13px;
flex-direction: column;
}
.separator {
display: none;
border-top: 1px solid;
height: 1px;
opacity: 0.1;
width: 100%;
}
}
@ -360,11 +354,12 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: stretch;
justify-content: center;
margin-right: $s;
z-index: $z-time-wrapper;
// note: fixes styles for empty time for very small mobile
min-width: 25px;
//border: 1px solid red;
@include mq(xxs) {
min-width: 0;
@ -429,12 +424,13 @@
padding: 0 $s * 0.5;
}
@include smallMainContainer {
@include timeWrapperMinimalStyles;
}
//@include smallMainContainer {
// @include timeWrapperMinimalStyles;
//}
@include mq(xs, max) {
@at-root .time-wrapper {
margin-right: 0;
@include timeWrapperMinimalStyles;
@include isDoneForFirstLine {
@ -443,18 +439,18 @@
}
}
@include verySmallMainContainer {
flex-direction: row;
&:after {
display: none;
}
.time {
flex-direction: row;
}
.separator {
display: block;
}
}
//@include verySmallMainContainer {
// flex-direction: row;
// &:after {
// display: none;
// }
// .time {
// flex-direction: row;
// }
// .separator {
// display: block;
// }
//}
}
.additional-info {
@ -491,6 +487,7 @@
&:hover {
opacity: 1 !important;
mat-icon {
animation: $transition-duration-m success-btn-ani linear;
}