Expand 'Image' and 'Title' component to edge of screen

@Mark - In line with UI design trends I’d really like to see the Image and Title components expand all the way right up to the edge of the screen, is this planned by any chance or is there a way to achieving this?

Similar to this…

3 Likes

Yes please, extend Nicole pic! :wink::wink:

3 Likes

Love this idea…would certainly follow 2020 design trends as stated!

2 Likes

I’d love to! With you in this point :wink:

1 Like

Rogelio this is great! Unfortunately progressive web apps (PWA) on iOS have some limitations when it comes to specifying the status bar style. This style can only be defined once and for all the views/screens of your app, and it is not possible to change it on the fly and/or per view/screen, which is something we’d love to be able to do.

The status bar on the second image you’ve posted, that includes a full bleed image and has a transparent background, is the only style that could potentially be used to render an image below (and it’s actually the one we use for the Bold theme, where we use a solid color as a background). But this specific transparent style, only renders white content (icons and text). So even when this could be somehow possible, this won’t work with themes other than Dark/Pure Black due to the fact that on lighter themes, the content on the status bar will become invisible when place against white backgrounds.

Having said that, I wouldn’t be too discourage by this, since the design team is fully aware of these kind of limitations but we’re always looking for alternatives and new ideas to open up customization of the look-and-feel of apps :wink:

6 Likes

Thanks @Antonio appreciate your response.

So it is possible but only effectively on the Dark/Pure Black themes.

I would be perfectly fine with that (knowing the limitations of using any other theme) as so too would be a lot of other Glide users I suspect.

The UI is the first aspect of the app that the user sees and having a more aesthetically pleasing UI increases user satisfaction and thus overall app usage.

Having said that, can it be enabled please?

:slightly_smiling_face:

@Antonio

We discussed this was back early this year, any progress on a full top edge Image placement yet?

@Rogelio being an iOS limitation, we have WWDC from Apple now in June 22, and wishing they bring us some Brand news about PWA apps

1 Like

@Rogelio 8 months have passed, and here we are. Finally got it with CSS

4 Likes

Care to share the CSS?

2 Likes

Nav-bar and nav-bar name transparent

<div><div>
<style>
.bXffxp {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(0px);

}
#app-root div[opacity='1'] {
  color: transparent; 
}
7 Likes

Wow! That’s amazing!!

I love your focus on the UX which is equally important as the functionality of an app.

I hope the Glide team are working on ways to allow app builders to fully customize their apps, without these work-arounds you constantly post on this forum (which are fantastic btw) all Glide apps have the same look and feel (in my opinion).

Bubble do a fantastic job at allowing full app customisation, and perhaps Glide could take a leaf out of their book on this. Bubble focuses more on desktop webapps, as oppose to mobile apps as Glide do, if they did, they would really give Glide a run for their money.

Thanks for sharing this Lucas, I’ll play around with it.

4 Likes

100% agreed. I say that today I use what I’ve learned to improve the UX in my apps.

Sometimes we think “oh, I could this/that here… how can I achieve it?”
So we gotta know at least how all the platform works and all features/columns/components also works… Summing up, it’s always a hard work in “back end” to let your app easier, simple and beautiful to use.

3 Likes

What theme do you tend to start with in Glide when creating custom creations?

2 Likes

That simple one, I guess it’s “Light”

1 Like

Thank you for the idea Lucas!

2 Likes

Looks awesome :star_struck:

(Btw @ThinhDinh I update the code and add a tag to remove this blur, if you mind about it, just update it in your app too

2 Likes

With CSS being this week’s theme:

  • It may be of benefit to the community to occasionally add a tiny disclaimer that CSS is still not officially supported by Glide
  • A CSS library (app?), organized by category and contributor to collate all contributions so far.
  • Some feedback on how these experiments are holding up in the wild.
  • While it informally exists, it would be super to have a dedicated group of beta testers (+ forum tag?) for anyone who needs periodic and/or pre-template publishing feedback.
3 Likes

Thank you for getting this subject @Rasha. My Ritual app was created for this, but I was thinking in my Brazilian community where we can share, not only codes, but gifs and images also.

I was talking to @Robert_Petitto @Deena and I said to them I really wanted to improve my app to be (at first) biligual PT/EN, so you guys from here could also use it with no problem about not understand the language.

I love your ideas @rasha, and most of them are already made in Ritual. If anyone would like to join me to improve it, let me know, and we see it :relaxed:

4 Likes

Would love to contribute as well, while learning new CSS tricks :heart_eyes:

3 Likes