Manu.n
June 4, 2021, 6:08pm
20
Hello @Jason
Personally I use CSS to supplement or create objects that I need (or at the request of some Glide users).
Here are my few observations (with my small level in CSS):
it is quite difficult to make a “responsive” CSS (rwd?!) for the 3 screens: phone, tablet, desktop
I also often have surprises between rendering under the editor, desktop or on the mobile, probably a lack of knowledge on my part on the problems of cross-platform PWA.
It would be nice to publish a guide to good or bad practices (so as not to disrupt the entire application).
Finally The Most Important (for me): As now we can name the components, is it possible to have class or id names in relation to the names. it would then be easy to identify.
Here are some recent examples:
Calendar
Hello,
Despite the offer of components provided by the Glide team, I made, for my personal needs, a modal date picker. Something similar to the “Date” component but with a visualization of my data. I stupidly call it: “PickCalendar”. It exists with or without the images.
I also added a no modal calendar / schedule tabs with full pictures, single pictures or no picture.
I used the @Jeff_Hager calendar example, which I have to thank very much, as the basis for the structure and the like.
Here …
Message box
Hello,
I needed a MessageBox, and since it doesn’t exist in glide, I did it with CSS.
You can adapt it to your needs.
For the demo, click on the “floating button” to make it appear.
When the “MsgBox” is visible, you normally can’t click anything else.
Here is a small demo application.
EDIT : I retrieve a part of CSS in the community (but I no longer have the author), I just adapted with buttons.
Edit text
Hello, @erik
If you are interested, here is a small example.
You must adapt the number in each “nth-child (…)” according to the order of the components.
Be careful, if you change the visibility of the components, this trick no longer works (or badly!)
Test on Chrome / Windows 10 & Android
[image]
The CSS
<pre><span><style>
/* Text Entry (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:50%;
height:70px;
}
/* Number Entry (3eme component) */
…
Choice
Hello,
a bit to replace the component “Choice” but it could be personalized. I made this CSS this morning
[image]
Here is a small demo.
Demo
bonjour @SantiagoPerez
something like that ???
[image]
<pre><span><style>
/* Choice 1 (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) {
margin-left:-5px;
width:150px;
}
/* Choice 2 (3eme component) */
div[id*='screenScrollView'] > div > :nth-child(3) {
margin-top:-97px;
margin-left:115px;
width:150px;
}
/* Choice 3 (4eme component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
margin-top:-97px;
margin-left:235px;
width:150px;
}
</style></span></pre>
EDIT: I…
multi choice
Hello
I’ve been tinkering with Glide since August 2020. From the start I have been waiting for a multiple selection “Choice”, I know the team has a lot of work to do and that my request will eventually be available.
But in the meantime I made an alternative solution (like “CSS Customizable Selection ”)
and I took the opportunity to integrate the “Trebuchet Method ” of @Lucas_Pires (thank you lucas)
[image]
Demo
Date picker
Courtesy of @Manu.n - star work!
Existing UX for picker
[Screenshot 2021-05-19 at 10.48.55]
and the Manu way
[Screenshot 2021-05-19 at 17.23.36]
<pre><span><style>
/* Month (Mai 2021) */
.MuiPickersSlideTransition-transitionContainer > * {
font-size: 1.5em !important;
margin-top:-5px;
}
/* Year & Day */
.MuiPickersToolbarText-toolbarTxt {
font-size: 2.125rem;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 400;
line-height: 1.235;
letter-spacing: 0.00735em;
}
/*…
other
just for Laughs,
isn’t that a carousel ???
ok it’s not funny !!!
Hello,
my original idea was to create tooltips for the floating buttons.
Because despite many icons available, it is not always easy for some users.
Except that I forgot that it doesn’t work with a mobile [image]
<pre><span><style>
.fab-target > :hover:nth-chi…
That’s all for the moment !!
10 Likes