Beautiful Design App

[Uzo]

you can only make that with inline lists that will be controlled by action

[Jeff_Hager]

Anything that doesn’t require user input could probably be realtively easy with dynamically built html/css inserted into the screen with a rich text component. Once you start to mix your own design with user input components, then it becomes a bit more limited and complicated.

For example, the Month Layout tab in the following app has two different types of calendars on it. The top calendar is an inline list with some serious manipulation through CSS, but the bonus is that you can interact with each day by tapping on them. The bottom calendar is built completely with dynamically built html div tags in one rich text component, along with a second rich text component that handles the css. It looks pretty but you can’t interact with it like you can on the top calendar. You might be able to get something close to your image, but exactly the same might be hard. I would take some creative freedom and see if you can come up with something decent and present that to see if they like it or not.

Calendar Concept

[Daniel_Canup]

Yes, it is pulling data… I will show you what I am doing currently.

4 Numbers · Glide · Create Apps from Google Sheets

[Daniel_Canup]

I will do this Jeff. Thanks man. Could you show me what you mean code-wise about the Rich Text HTML and CSS? I didn’t relive I could use HTML in one? Just markup language.

[Jeff_Hager]

The app I shared is copyable.

Anything other than Markdown isn’t officially supported, but many of us some html or css sparingly.

[yinon_raviv]

Can’t view your video brother

[Lucas_Pires]

Thank you @gvalero

[ThinhDinh]

Hi brother, I re-recorded the flow for you:

Screen Recording 2021-02-08 at 10.27.54 AM.m3u8

[hisashi.fujita]

★ For pages where you want to hide the tab at the bottom of the app.
★ Hiding that tab closes the way to other tabs.
★ In that case, you may need a custom tab.

• The CSS presented by Lucas_Pires is used.

[Simon_Hill]

Stunning… would love to know how you make videos play automatically!

[ThinhDinh]

It’s a GIF, not a video.

[yinon_raviv]

Beautiful brother.
You have to show me the css for this

[ThinhDinh]

For the tile wrap in the first screen.

<pre><span><style>
[data-test="tile-item"] .tile-title {
white-space: break-spaces;
}
</pre></span></style>

For all the things inside:

<div><div>
    <style>
    [data-test="glide-app-bar"] >* {
    backdrop-filter: blur(2px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }
    #app-root div[opacity='1'] {
      color: transparent; 
    }
    .jiuuwu svg {
    display: none;
    }
    .gpkkHC svg {
    display: none;
    }
    .gpkkHC {
    position: unset;
    }
    .glbESi {
    padding-top: 10px;
    }
    [data-test="list-item"] {
    background-color: white;
    }
    .builder [data-test="list-item"].interactive:hover {
    background-color: #00CC66;
    }
    [data-test="card-item"] .card-subtitle {
    padding-top: 5px;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: break-spaces;
    font-size: 0.25 prem;
    }
    [data-test="card-item"] .card-title {
    text-align: center;
    color: #00CC66;
    font-size: 1rem;
    font-weight: bold;
    align: center;
    }
    [data-test="card-item"] {
    border-radius: 5px;
    }

[yinon_raviv]

I’m going to need help from you understanding this.
Let me know if you have time this week and we’ll do a zoom

[Lucas_Pires]

@Robert_Petitto

<pre><span><style>
.tile-image-area :nth-child(1) img {
height: 150px;
width: 150px;
border-radius: 50%;
margin: 10px;
}

[data-test="tile-item"] {
border: solid 1px #9ec1cc;
}

[data-test="app-tag-overlay"] {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 5px;
font-size: 1rem;
padding: 10px;
text-transform: unset;
}
.tile-title {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1.3rem !important;
line-height: 1.5rem !important;
}

.tile-subtitle {
white-space: pre-wrap !important;
overflow: visible !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 2rem !important;
}

.tile-text-container {
position: absolute;
top: 10%;
right: 10px;
white-space: pre-wrap !important;
overflow: visible !important;
text-align: left !important;
width: 150px;
}

.tile-image-area {
height: 170px;
}

@Robert_Petitto or anyone else
I changed the BG color or the card and how I remove this Hover effect?

[Lucas_Pires]

K, fixed.

Added:

[data-test="tile-item"]:hover {
background-color: BG-COLOR;
}

Used the same bg color as hover.

[everys]

quick fix for Swipe Card Style’s inline vertical list to keep things on screen.

[data-test=“app-vertical-list”] div div {
max-width: 100%;
}

[Pablo_books]

Here’s something I made:
the image component doesn’t have a ‘rounded’ feature, so…

<pre><span><style>
[class="sc-dsXyEt fKhxPv sc-bRucMC dfUOtl contain undefined"] {
border-radius: 100%;

[yinon_raviv]

it doesnt seems to do anything on my app. my inline list still being cropped

[yinon_raviv]

@Lucas_Pires @Robert_Petitto

Hi both,

Do you have any idea how to add bg color to the screen instead of using bg image?