Homey Web App [CSS customization]

Apps
21

Could you maybe comment the different sections to show what code changes what? Just to try and learn something from it :slight_smile:

1 Like
22

Read the entire thread, I haven’t created anything just copied from other people and consolidated. So no credits to me :wink:

1 Like
23

Surface pro :wink: works great now

24

I had planned to do that, just haven’t found the time yet, just hang on :wink:

1 Like
25

I’ve added all different options to the first post, including remarks on what they do and before and after screenshots.
Added the code to the second post without the screenshots for your convenience to copy.

9 Likes
26

Please be aware. It seems they’re using something which looks like styled components. This is creating a unique class name which, on next deploy might break all your changes.
It might be better to use attribute selectors like:
[class*="Main"] [class*="Root"] [class*="Center"] { ... }
as it is less likely these names are going to change.

Looking at their source code, I’m quite disappointed in their css coding quality.
It is very outdated and hard to maintain.

I don’t have the time to go in detail. But an example is the fixed width of the cards or the lack of using css grid or overuse of flexbox.

2 Likes
27

Athom just released an update where you can resize the sidebar:

(found on their Facebook page, and is on Instagram too)

5 Likes
28

I’ve brought this topic to @Emile’s attention on Slack, good to see this is getting picked up!
Now what else do we want… :thinking::stuck_out_tongue_winking_eye:

(Next to landscape view for flows!)

6 Likes
29

Why is it hard to maintain?

30

Sounds like Athom is doing all the layouting manually instead of letting the browser take care of it. Does fit with Athom’s NIH paradigm though :joy:

31

Een paar dingen die me zijn opgevallen zijn:

  • Naming: css-...Grid doet display: flex, css-...Content is geen content, maar nav

  • Flexbox voor containers

  • Pixels: Units zijn pixels. Hierbij heb ik het vermoeden dat er geen vast afstanden zijn voor bijvoorbeeld witruimtes.

  • inline css met svg-data attributen.

  • gebruik van niet bestaande attributen

  • gebruik van tab-index -1

  • overmatig gebruik van css (display: inline-block; width: 20px; min-width: 20px;

  • Onduidelijke custom properties of met een rare prefix: --lvl, --reach-slider, --tmp-color-white (Dit is natuurlijk smaakgevoelig)

  • Gebruik van !important

1 Like
32

I would like to see that the favourite devices scale to the screen to have them always in one screen instead of scrolling down, just like in your homeydash :blush: I’ve already shared this idea to them :wink:

1 Like
33

Did Athom update the app? Seems like the custom settings aren’t working anymore. No more horizontal cards, etc.

34

Yep

35

They seem to work on it pretty often

36

Flows in landscape does not work anymore but scripta are now online

37

@DaneedeKruyff
Yeh, something was changed, now your CSS code does not work anymore (on Windows- Chrome), what to do now?

38

My guess: wait until it is released as official. It is a beta so things change without notice

39

Can people leave feedback on the web app asking for the three column mode to be an official option. Maybe if they get asked often enough they might do it. As the previous css changes are quite simple, IF you know what you are doing :-), it surely can’t be a big effort for Athom to implement.

1 Like
40

New styleBot css for current webApp:

.css-1hu8qec-sc-Center {
    width: 100%;
  display: flex;    
}

.css-ppwutp-Section {
    width: 33%;
}

.css-7hhj7-CardContainer {
  width: 95%;
}

.css-l8ltv8-CardContainer-DraggableFlowCard {
  width: 95%;
}

.css-x1hjk3-CardContainer-DraggableFlowCard {
  width: 95%;
}
3 Likes