Beautiful Design App

Wow that was fast. A truly smart mind.
Thanks also for the short video, I will try to develop what you quickly developed in CSS. I hope to get a good understanding of how you devised the system. If you had some time to articulate it all better that would be wonderful.
Thanks for the time you and everyone else devotes to this community. I can tell it is a subject you enjoy and you do it gladly. :muscle:

2 Likes

Yes, the search bar is user-specific by default and handled internally by Glide. I doubt we need a further native search bar component as you may only want to search on lists, and we can enable that from the lists themselves. What can be handled better is if there are no searchable components visible on the screen then the search bar should be hidden.

Thanks for the kind words, the CSS includes two parts, which are also two elements within the text entry component, as far as I understand. We have a tf-inner class combined with a ta-inputbox class to make up the component.

The first part in the CSS tries to imitate the greyish background of the search bar, while the second one re-positions the input box so it fits with the background in the first part.

2 Likes

I recently created an annotations tab, in which I can choose the color of each note with the help of CSS. Did you like it?

10 Likes

@Pedroydzito

Impressive!

1 Like

Little code to help “filling” a button when being hovered.

<pre><span><style>

[data-test="app-button-view"] {
background-color: transparent !important;
border: 1px solid transparent !important;
margin: 10px 90px;
color: #006570 !important;
border-color: #006570 !important;
}

[data-test="app-button-view"]:hover {
color: #fff !important;
background-color: #006570 !important;
border-color: #006570 !important;
}
11 Likes

A code to help with horizontal visibility issues.

https://community.glideapps.com/t/inline-list-horitzontal-ortientation-issues/28431/17?u=thinhdinh

2 Likes

Hi! How are you? Seeing your design is great. I see that you use the app icon in the main bar and you have the search bar activated. I wanted to know if for Android the search button does not move or is it hidden?

I am using a code but in the Android view it generates that problem for me when I activate the search bar button.

If it works well for you, could you share the code with me?

@Lucas_Pires @Manu.n

1 Like

Had a use case for this today. Any chance we can figure out how to prevent return characters in the input or at least, if a user types a return character, it still displays inline (like a caption in an inline list)?

@Manu.n

Hello @Robert_Petitto
What can I do for you ?

:slight_smile:

Is there a way using CSS to keep all input text on the same line even if a user types a return character? Targeting the text-input component.

Yes
I think about it.

https://www.xul.fr/css/white-space.php

white-space:nowrap;

But give me a few minutes to do a test. Unless you are (as usual ;-)) faster than me

In my experience, any code you use, when you click on the search bar - Android or iOS - disables any code you have in the screen

I tried the nowrap but it didn’t work.

me neither.
I am not very successful. But I continue my research

1 Like

Is this finished? looks out of the world… damn

1 Like

Seems like there’s some additional work under the hood to keep it on the same line, let’s say for the hint text’s header there is one but I can’t find it in the CSS. I think it’s a HTML conversion from a return character to a space.

I have found some time to do some testing and research, but I don’t have a solution for this problem. Sorry :frowning:

2 Likes

Releasing some of the Notion CSS me and @Lucas_Pires have been working on for the past few weeks.

Firstly we have this “floating” back and edit button, which goes in handy with screens where you have an image going straight to the top.

Displaying comments in a card view.

7 Likes

Circles for choices: This one has been a thing I want to do for a really long time. It takes some columns to get there, and the setup is not very easy, but it does the job.

Display quotes in card.

8 Likes

Padding for screens, a great-looking one from @Lucas_Pires.

Border for entry fields, with support for text, phone and email, credits to @Robert_Petitto.

12 Likes