Beautiful Design App

Also in Desktop / Table view :grin:

1 Like

Yes, absolutely. I’ve been asked to do this, and I have a hard time explaining why I can’t.

2 Likes

:call_me_hand: That homescreen is SICK!

Care to share the CSS?

Screen Shot 2021-05-14 at 9.59.03 PM

3 Likes

Yeah! Im not on pc right now. When I get it, I send it here

1 Like

As far as getting the image full screen goes, I stole the following from @Mark_Turrell:

<div class="background"></div>
<pre><span><style>
.background {
  position: fixed;
  margin-top:0;
  margin-bottom:50px;
  width: 100%;
  height:100%;
  top:0;
  right:0; 
  left: 0%;
  z-index:-100;
  filter: brightness(100%);
  background-image: url("URL"); 
  background-size: cover;
  background-position: center center;
}
<pre><span><style>

[data-test="glide-app-bar"] :nth-child(1) {
    display: none;

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

<pre><span><style>
.class{
    font-family: 'Source Sans Pro', sans-serif;
}

Results in:

There is probably a bit of fluff in there that isn’t required, but I needed something quick and dirty at the time, and haven’t been back to experiment with it since.

6 Likes

Ya…messing around with some CSS and placement of items…

6 Likes

Funny seeing Netflix using emojis also in “tab’s name” lol

I thought only we did this :rofl:

3 Likes

I used this sequence of components in the screen to work well:

  • 1st - A single Rich text with the code below
  • 2nd - Image component (I used 3:2 format in this case)
  • 3rd - Text (as header upper the image)

Copy and put it in one rich text component.

Separated by /*----- What this is for ------*/ you can identify what which one can do.

<a style="position: absolute; width:100%; top: 125px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
<div style="background-color: white;  padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>
/*-----White rounded border bg -------*/
 </a>
<pre><span><style>
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}  /*----- Nav-bar hidden -------*/

#app-root div[opacity='1'] {
  color: transparent;
} /*----- Nav-bar name hidden -------*/

[data-test="nav-bar"] {
  content: "";
  display: flex;
background-image: url(URL);
  background-size: 45px 45px;
  background-repeat: no-repeat; 
background-position: center, center;
;} /*----- Nav-bar icon -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(2){
z-index: -2 !important;
opacity: 1 !important;
margin-top: -105px !important;
} /*----- Image to the Top -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(3) {
z-index: -1 !important;
margin-top: -115px !important;
} /*----- Text to the Top -------*/
19 Likes

BEAUTIFUL!

Thank you, Lucas!

2 Likes

THANKS LUCAS!

4 Likes

You’re welcome bro! :grin:

2 Likes

Hola me encantaron los botones redondeados, te importaría compartirme es css, te lo agradecería muchísimo :pray::v:

Thank you!

<span><style>
[data-test=app-button-view] {border-radius: 25px;
</style></span>
3 Likes

Thank you!, man! Simple but beatiful detail
Gonna try it

2 Likes

White entry components (text + image picker + phone) on full background.

<pre><span><style>
[data-test="app-text-field"] > .tf-inner {
border-bottom: 1px solid white;
background-color: transparent;
}
[data-test="app-text-field"] > .tf-inner >div {
color: white;
}
[data-test="app-text-field"]  .tf-inner :nth-child(1) {
color: white;
}
[data-test="app-text-field"]  .tf-inner .ta-inputbox {
color: white;
}
[data-test="app-file-picker"] >div {
color: white;
}
[data-test="app-file-picker"] :nth-child(1) {
opacity: 1;
color: white;
}
[data-test="app-file-picker"] :nth-child(2) {
color: white;
}
[data-test="app-hint"] .hint-header {
color: white;
}
12 Likes

Personalized welcome message at the top + circle profile image.

Preset: 1st item in the screen is an inline list with welcome message being the details field, title and caption are filled by a template empty character taken from https://emptycharacter.com/.

Code:

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

[data-test="list-item"] .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

Thanks to previous ideas from @Lucas_Pires and @Robert_Petitto (for styling nth-component and customizing the border of the image).

7 Likes

Update: If you want the text under the welcome message.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textCaptionStyle {
font-weight: 600;
color: black;
opacity: 0.6;
white-space: break-spaces;
}
8 Likes

How sick is that ! I’ve tried to reproduce it but it didn’t work the same way than on your pictures. Is the text under the Welcome message an action or rich texte ?

Do you mean for the first or second code? For the second one it’s the caption of the inline list.

Wrote too fast everything is working fine :slight_smile: Thanks !!

1 Like