Beautiful Design App

[ThinhDinh]

Yes, as this is rich text I think you can do that without any issues.

[Robert_Petitto]

Really nice trick. Adding this to my code book

[Lucas_Pires]

I was used to do it with a .png image.

[Blue_Community]

me too

[Joe_Gabriele]

@Manu.n

<pre><span><style>

[data-test="app-hr"] {
   background-color: rgb(246, 246, 246);
padding:0px;
}

[data-test="app-hr"] .sep-line {
background-color: rgb(246, 246, 246);
}


[data-test="app-hr"]:after {
  content: "";
position:relative;
top:-30px;
height:20px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background:#fff;
box-shadow: 0 3px 0 0 rgb(226, 226, 226);
z-index:0 !important;
}

[data-test="app-hr"]:before {
  content: "";
position:relative;
top:30px;
  height:20px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background:#fff;
  box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
  z-index:0 !important;
}

</style></span></pre>

Is there a way to target just separator: small? Appears it affects all Separator element sizes.

[ThinhDinh]

Thanks to @Lucas_Pires, I now have a much more reliable way to do my notifications tab. I guess I did not really need Cloudinary with the CSS magic here, and can let Glide handle the on/off status of the icon instead of creating 4 separate images.

<pre><span><style>
  button[aria-label="Notifications"]::before {
  content: "{N}";
  position: absolute;
  font-size: 9px;
  font-weight: 800;
  color: white;
  padding: 1px;
  top: 6px;
  right: 25px;
  z-index: 1;
  height: 16px;
  width: 16px;
  background-color: red;
  border-radius: 70%;
}

With {N} being the number of notifications to show. Thanks to @Robert_Petitto for the lead to use CSS for this as well!!!

[alfonso_ayala]

That is very nice bro

[ThinhDinh]

Gotta make these more “lively” with icons.

<img src="https://i.imgur.com/GIOeqeL.png" align="left" style="width:18px;height:18px;" /><b>
‏‏‎ ‎‏‏‎ ‎Venmo</b> 

[Manu.n]

@Joe_Gabriele

Existe-t-il un moyen de cibler uniquement le séparateur : petit ? Il semble que cela affecte toutes les tailles d’élément de séparateur.

Bonjour @Joe_Gabriele

I also needed this option, so I adapted @Robert_Petitto CSS so that spaces respect “spacing”.
BUT BE CAREFUL, this uses unnamed classes so it may not work one day. however, if this happens, the default is taken into account.

CSS

<pre><span><style>

[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
padding-left:0px;
padding-right:0px;
}

[data-test="app-hr"]:after {
content: "";
position:relative;
top:-30px;
height:20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:#fff;
box-shadow: 0 3px 0 0 rgb(226, 226, 226);
z-index:0 !important;
}

[data-test="app-hr"]:before {
content: "";
position:relative;
top:30px;
height:20px; 
border-top-right-radius: 15px;
border-top-left-radius: 15px;
box-shadow: 0 -1px 0 0 rgb(226, 226, 226);
background:#fff;
z-index:0 !important;
}

/* **************** Default */
.kxHqnt:after {
}

.kxHqnt:before {
}

/* **************** Small */ 
.eUKgzh:after {
content: "";
top:-35px;
}

.eUKgzh:before {
content: "";
top:35px;
}

/* **************** Medium */
.gWGzJy:after {
content: "";
top:-45px;
}

.gWGzJy:before {
content: "";
top:45px;
}

/* **************** Large */
.iBGoXU:after {
content: "";
top:-55px;
}

.iBGoXU:before {
content: "";
top:55px;
}


</style></span></pre>

[Lucas_Pires]

Lively and lovely

[SantiagoPerez]

Hola @ThinhDinh, @Manu.n, @Lucas_Pires, @Robert_Petitto

Is there a CSS to change the wording of the comments component from “Add Comment” to something else, say, “write message”?

Thanks guys!

[Harry_OBrien]

Amazing work - are you following the same process outlined by @Lucas_Pires? The videos are no longer available on this post

In-app Notifications

Sup guys While we don’t have push notifications, I was testing and implementing some notifications in-app to improve the engagement in my apps. After a hardwork creating some logics, this is one of mine: Jungle™ - Transform scenes, excerpts, poems or even thoughts into incredible stories. The best place in the world is inside the jungle! Tab Notification: Working with 2 tabs, we can create an illusion of pending notifications. Here people can see the notifications if: People the…

What is the best practice here

[Lucas_Pires]

Actually not @Harry_OBrien, this topic is old. This css is recent

[alfonso_ayala]

the numbers are css Thinh

[Claudio_Balbino]

@ThinhDinh very good! Thanks for sharing

[ThinhDinh]

No they are not, it’s just two items from an inline list with images generated from https://dummyimage.com/.

Actually it’s a list of 4-item-per-line but the other two are intentionally made “blank”.

[alfonso_ayala]

ha I see for a moment I thought it was css thanks for the link

[Harry_OBrien]

I noticed, I was trying to understand how you built the notification page, but I think its just as simple inline list with user specific columns, right?

I’m not going to miss anything tricky am I

[Lucas_Pires]

Kind of. Not that simple, because in that app I was collecting infos from many parts of the apps, thats why wasnt that simple. But once you have user email related and you can filter by this

[ThinhDinh]

In my case it’s simply a list of rows from a Comments sheet. It’s marked “read” to a user-specific column when the user clicks it.