Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Reverted to the previous style for entities on mobile.

Browse source 
Better to use screen width wisely and avoid unnecessary padding.
This commit is contained in:
Fabio Manganiello 2023-05-17 01:13:09 +02:00
parent 61ea3d79e4
commit 91daec579d
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 8 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
View file

@ -509,6 +509,7 @@ export default {
@include until(#{$tablet - 1}) { @include until(#{$tablet - 1}) {
padding: 0; padding: 0;
margin-bottom: $main-margin;
} }
@include from($tablet) { @include from($tablet) {
@ -524,12 +525,9 @@ export default {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
position: relative; position: relative;
@include from($tablet) {
border-radius: 1em; border-radius: 1em;
box-shadow: $group-shadow; box-shadow: $group-shadow;
} }
}
.header { .header {
width: 100%; width: 100%;
@ -579,10 +577,6 @@ export default {
overflow: auto; overflow: auto;
flex-grow: 1; flex-grow: 1;
@include until(#{$tablet - 1}) {
background: $default-bg-4;
}
@include from($tablet) { @include from($tablet) {
background: $default-bg-2; background: $default-bg-2;
} }
@ -590,20 +584,12 @@ export default {
.entity-frame { .entity-frame {
background: $background-color; background: $background-color;
@include until(#{$tablet - 1}) {
margin: 0.75em 0.25em;
border: $default-border-2;
border-radius: 1em;
}
@include from($tablet) {
&:last-child { &:last-child {
border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em;
} }
} }
} }
} }
}
:deep(.modal) { :deep(.modal) {
@include until(#{$tablet - 1}) { @include until(#{$tablet - 1}) {

51
platypush/backend/http/webapp/src/components/panels/Entities/common.scss
View file

@ -6,10 +6,6 @@ $collapse-toggler-width: 2em;
background: $selected-bg; background: $selected-bg;
font-weight: bold; font-weight: bold;
box-shadow: 0 0 3px 2px $default-shadow-color; box-shadow: 0 0 3px 2px $default-shadow-color;
@include until(#{$tablet - 1}) {
border-radius: 1em;
}
} }
.entity-container { .entity-container {
@ -18,18 +14,7 @@ $collapse-toggler-width: 2em;
align-items: center; align-items: center;
position: relative; position: relative;
padding: 0 !important; padding: 0 !important;
@include until(#{$tablet - 1}) {
border-radius: 1em;
&:not(:last-child) {
border-bottom: $default-border-3; border-bottom: $default-border-3;
}
}
@include from($tablet) {
border-bottom: $default-border-3;
}
&.with-children:not(.collapsed) { &.with-children:not(.collapsed) {
@include expanded-entity(); @include expanded-entity();
@ -50,12 +35,6 @@ $collapse-toggler-width: 2em;
} }
@include until(#{$tablet - 1}) { @include until(#{$tablet - 1}) {
.entity-container {
.children {
border-radius: 0 0 1em 1em;
}
}
.child { .child {
&:not(:last-child) { &:not(:last-child) {
.entity-container { .entity-container {
@ -239,42 +218,12 @@ $collapse-toggler-width: 2em;
&.with-children:not(.collapsed) { &.with-children:not(.collapsed) {
box-shadow: 0 3px 4px 0 $default-shadow-color; box-shadow: 0 3px 4px 0 $default-shadow-color;
@include until(#{$tablet - 1}) {
border-radius: 1em;
}
@include from($tablet) {
.children .child:last-child { .children .child:last-child {
box-shadow: 0 3px 4px 0 $default-shadow-color; box-shadow: 0 3px 4px 0 $default-shadow-color;
} }
} }
} }
@include until(#{$tablet - 1}) {
box-shadow: 0 3px 4px 0 $default-shadow-color;
&.collapsed {
border-radius: 1em;
}
.children {
.entity-container-wrapper {
border-radius: 0;
box-shadow: none;
&.with-children:not(.collapsed) {
border-radius: 1em;
box-shadow: 0 3px 4px 0 $default-shadow-color;
}
&:last-child {
border-radius: 0 0 1em 1em;
}
}
}
}
}
.blink { .blink {
animation: blink-animation 1s steps(20, start); animation: blink-animation 1s steps(20, start);
} }