Beautiful Design App

Think I got most of the formatting fine tuned so it scales properly on different screens. Integrated it into the existing events from the first tab so now it shows if there is an event for the day. Dates are clickable to view details of that day. Still a handful of bugs and some cleanup needed, but it’s working pretty good for now.

13 Likes

That looks awesome, I need a month view so bad!!! May I ask for the coding you used…???

1 Like

Looks awesome ! :heart_eyes::heart_eyes::heart_eyes:

I see the days as well. !

geez, man - that is just superb. Looks so, so good…

I wonder if I could benefit from some of your CSS bits? I had an android user complaining yesterday about wonky text…

I eventually figured out that the main source of his issue was that he had the system-wide LARGE FONT setting enabled on his phone, and apparently Chrome respects this setting. So reducing that mostly fixed his issue, but still, would be nice to know if you have learned any new tricks to help with cross platform/browser compatibility? :thinking:

1 Like

You know what I was thinking, you might not need a script @Darren_Murphy if you changed to the month layout.

You mean for generating my CSS?
Now that I have that working, I’m becoming quite attached to it :stuck_out_tongue:

1 Like

I prefer Glide native CSS. - emojis :stuck_out_tongue_winking_eye:

Hi, i created an app for you, is time to organize :wink:

In this App you can browse or post useful CSS, HTML, Scripts and Links.
Is easy to copy or share them.
CSS codes have a screen to test codes in action.

Please add some of your favorites there.
let me know if any bugs or room for improvement…
thank you.

10 Likes

please add this CSS to Code BOOK

5 Likes

This is awesome. I tried to login, but it brings me back to home pagea

2 Likes

It’s Glide’s CSS library - add all the CSS on this thread to your app.!

2 Likes

Hi Rogelio, this looks so good! Did you just have to upload gifs for the pictures? Sorry I’m new here so still trying to navigate around but wow! It looks so good!

Yeah that’s correct! simple as that :slight_smile:

1 Like

oh, is not logging you in??? i just check, and everything works
Signing in can take up to 1 min, because i made this app public so people can use it without signing in, just wait a bit than you can update your profile and start posting codes,
you can use this app as your own data base … your profile will show codes that you posted, and you can mark others posts as favorites and use filter

I think I’ve taken this about as far as I’m comfortable going. I may play with the events more and there is a small bug when flipping through months that I have to work out, but as far as the calendar layouts, I think I have it about as good as it’ll get. I’d rather wait for a Glide native version of a calendar. To be honest, the Month Layout tab required a lot more CSS manipulation and other various hacks to get it to look good. In the end, the top calendar is a calendar made with a card layout list that lets you tap on a day to see any events for that day. Days with events are marked with a dot (•). The current day is marked with brackets ([29]). I had to play with various widths, percentages, pixels just to get it to look good and scale across different screen sizes, but this also squeezed the cards really tight, so trying to add any settings to the card, other than the Title, really didn’t look good. When tapping on a date to look at the event cards for that day, somehow the CSS tricks really throw the regular event cards list for a loop and squeezes them temporarily, so all the tricks are causing issues elsewhere (I guess there’s a reason this stuff isn’t officially supported by Glide :wink: )

Below the first calendar is a second calendar that is build using dynamic DIV tags. Unfortunately, there is no way to click on a day and get some sort of action out of it, so it’s only just pretty to look at. The advantage though is that it’s way easier to manipulate and design to your liking. @Darren_Murphy, I think the original version we came up with is much better for your use case compared to the list version I created. With our version you can build the div tags however you want instead of trying to override div tags already created by glide.

@Uzo If you look at my copy, the main trick to get more tiles, or cards in my case, is to use the horizontal orientation. Then you set the number of items to view, to a large number to hide the ‘See All’ button. In the CSS, you need to then override the repeat attribute to a smaller number, which will be the number of items displayed width wise. It should auto wrap the rest of the cards so it will appear like a list with a vertical orientation. Again, you may have to play with other width and padding settings to get it to look right and scale correctly on multiple devices. It is not a simple solution where you plug in some CSS and it just works correctly the first time. It takes a lot of manipulation to get it to look right. To answer you question about making tiles seamless without gaps…yes, I think it’s possible but would take some playing around to get it right. I didn’t use images for anything, so I have no idea how much work it would be. For these reasons, I don’t think I’ll add any of the CSS for the calendar into your app. It’s just too volatile if you don’t know what you are doing with it. You’re welcome to add it yourself, but you’ll probably have weird results as I had set it up to be very specific to my calendar use case.

@Darren_Murphy I did manage to mess around with the CSS in my Swipe Layout tab to get the calendar a bit wider. The swipe layout squeeze everything, so my weekdays at the top of the calendar were wrapping as well. I had to put in some negative pixel positioning and a calc() formula in the CSS to add extra pixels plus 100% to get it to fit the full width of the swipe card. you could probably do the same to make the calendar a bit wider on a detail screen. Otherwise, you could always change your weekdays to single character S,M,T,W,T,F,S…but try the width settings to see if that helps you out.

9 Likes

Awesome, thanks - I’ll give that a try.

2 Likes

hey guys, i need more CSS for my App lol… any cool ideas?

Wow!! It’s a life saver.

1 Like

i hope it will get fill up soon by users here…

Has anyone styled the “Group by” headings of an inline list? I have a long list of items and the Group By isn’t obvious since its just bolded text. Adding some background color to this text line would make it much easier to find separate groups in a long list. Thanks!