Beautiful Design App

Project Showcase
387

In place of an image or title component, a lot of times I’ll create a multiple relation to link a row back to itself. This allows for an inline list with a Tile or Card view with all the design and layout features. That becomes my image on the screen and you can have your rounded corners, tags, captions, and whatever else you want.

3 Likes
388

Assuming you have the code for background picture already, you can use this website to generate a background image with just color: https://dummyimage.com/

Set the background color and fontground color to be the same to get the effect.

Example: https://dummyimage.com/600x400/1a8f74/1a8f74

2 Likes
389

Can you try adding:

<pre><span><style>

Before the data test part.

390

I use it to avoid an image:

<pre><span>
<div class="background"></div><style>
  .background {
    position:fixed;
    margin-top:0;
    background: black;
    width:100%;
    height: 100%;
    top:5.5em;
    right:0;
    z-index:-1;
}
</pre></span>

I hope it helps you.
Saludos!

5 Likes
391

Thanks brother.
I don’t want to use image. I was looking for a way to set bg color without image. Don’t know if this even possible with css

1 Like
392

Exactly what I was looking for. Will give this a try today.

Thank you

1 Like
393

thank you!

Works perfectly

1 Like
394

Would it be my dream to build an app like this? :worried:

12 Likes
395

:flushed: :star_struck:

I think you could make something close - you already have some pretty awesome apps!

1 Like
396

Have you ever try Flutter? :bulb:

397

No, but I know it could be made there

(i’m not a programmer btw lol)

398

Here’s a way to change the color of the icons in rating component.

I have to opt for the 5 rich text way, didn’t find a way to do it more smoothly with only one.

<pre><span><style>
[class="rating-icon rating-id-1"] svg {
fill: #800020;
}

Change id-1 to id-2 till id-5 and set the corresponding visibility based on the rating value.

3 Likes
399

Would it be better to still have the 5 styles for each ID, but place them all in a single rich text component?

1 Like
400

Change the rating color:

<pre><span><style>
[data-test="app-rating-component"] :nth-child(2) svg {
fill: red;
}

Screen Shot 2021-02-19 at 9.08.11 PM
Screen Shot 2021-02-19 at 9.08.11 PM1194×332 32.5 KB

@alfonso_ayala

8 Likes
401

thanks man when the rest fails look for robert :slight_smile: very friendly as always

1 Like
402

But in your screenshot doesn’t it fill the 5th star as well? That was the part where I struggled.

@Jeff_Hager I had to do 5 because each corresponds to a single icon.

1 Like
403

Hm. So it does. Ignore my last post…will need to rework this.

1 Like
404

Yep, I understand that. I was just thinking you could join all of the css from each rich text into a single rich text component. They would still be separate and set each star individually, but you wouldn’t need so many rich text components.

2 Likes
405

If I join all 5 then it would be in an “active” state at all times.

Let’s say the rating is 3, I only need to override Glide’s default “grey” value for the first 3 icons of the 5.

If I join all 5 then it will always have my override color whatever the rating value is.

Separating into 5 components let me have the conditions to override only when the rating is 3 or more, is 4 or more etc.

Definitely would love a better way to do this :sweat_smile:

2 Likes
406

Ahh, ok. Sorry about that. I missed the part about the visibility conditions. Nevermind. :flushed:

2 Likes