Beautiful Design App

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

1 Like

One for the CSS gurus… @Lucas_Pires @Manu.n @ThinhDinh

I’m trying to stop that “Wed” from wrapping, and can’t for the life of me figure it out. Here’s my current CSS:

.calendar__date {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
  grid-gap: 10px;
  box-sizing: border-box;
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  font-weight: 600;
  color: #262626; 
}

Note that the Days of Week use the .calendar__day class, which inherits from .calendar__date.
I’ve tried adjusting the font-size, I’ve tried setting nowrap, but nothing seems to work.

Any clues?

1 Like

H @Darren_Murphy
It’s curious,
Can be a padding: 0px;
or a slightly larger Width
or a white-space: pre-wrap! important;

Edit
But the base is a List component or HTML ?
It may be correct to make a new discussion on the forum !

1 Like

Can you give us the HTML code of that calendar to test? Thank you.

1 Like

here’s what the HTML template looks like:

<div class="calendar">
  <div class="calendar__picture">
    <h2>{Year}</h2>
    <h3>{Month}</h3>
  </div>
  <div class="calendar__date">
    <div class="calendar__day">Sun</div>
    <div class="calendar__day">Mon</div>
    <div class="calendar__day">Tue</div>
    <div class="calendar__day">Wed</div>
    <div class="calendar__day">Thu</div>
    <div class="calendar__day">Fri</div>
    <div class="calendar__day">Sat</div>
    {ListDays}
  </div>
</div>

One thing I realised is that the wrapping issue is only present in the builder - when I view on my IOS phone, it’s fine. So maybe I’m worrying about nothing…

2 Likes

Personally I’m finishing an adaptation, but I’m using an in-list component for the data and a simple “table” for the info.

5 Likes

Is it possible to load a video in the background with rich text editor ?
I’m trying to use WebM but its not working…
wanna make a perfect loop back and forth behind reversing the first video and then combining in a loop, if its not possible to load a video behind on the background i will convert to gif but i’m worried about the weight of all …, so is it possible to have a video in the background with rich text editor ?
Thanks
ps.anyone know how to change the color and the font at very beginning of the app…its black…and frankly even the icon is only squared…, i mean if i put a png with alpha i’m not seeing the icon and the background which is the same color of the accent…

Hi @Manu_Marea

I don’t know anything about videos, but my first instinct is to look for documentation:

https://www.w3schools.com/html/html5_video.asp

Unfortunately, I don’t have a lot of free time to help you.

1 Like

Doesn’t matter , thanks for your answer as well ,
i’ll look at it and i’m concerned by weight in order to affect app’s speed…
h 264 and 265 are far smaller as far i can see in terms of dimensions and
gif have just 256 colors so…
thanks for your time…

1 Like

ps.
while it works in the link you gave me, is not working here, as far i can do.

Thanks again

Ah uh
I recommend that you open a new topic on the forum so that everyone can see it.

And I just looked at the native video component of glide, it uses exactly the above doc.

I thought this would be the place because i was talking about background but if i have disturbed frankly weren’t my intentions…i do apologize.Got the message.Cheers from Florence.

Thanks.

no no you do not bother at all on the contrary.
Initially, this is indeed the right place for your question.

As soon as I have 5 minutes I look at your request. Unless someone has already done something about it.
I have gone through the docs, and there are different autoplay options and playload settings.
To be continued …

1 Like

Works fine for me when I add “width: 35px;”

Also I had to change weight to 700 to reproduce your issue. Probably it’s related to the font you’re using for the app.

2 Likes

mmm, unfortunately that didn’t work for me…
but thanks

1 Like

Hi @Lucas_Pires ,

This is my app’s screen. I seek your help to implement your css code to this screen.
I am sorry but I am failed to understand and implement your code on this.

I would like the colour shown on screen (green), to be used for as image) As each entry has separate colour.

Can you please help me? Thanks

Oh…thank God…i have to be honest and i’m going now off topic , this week has been the worst in my life and working on the app took me a little bit away with the mind ,so now my app is ready ,almost and i wanna thank YOU ALL for all the resources i found here … i don’t know if i’m off topic and i really beg the pardon of Glide all if i’m unrespectful sayin this , but seeing the need to remove the download option in the audio player ( the one in Glide which is faster and i would like to use it…) and due to my poor skills on it i found in the elfsight.com audio player a beautiful way to embed in a webview with an iframe , its cheap and customizable…and for the background loading.io and makebackground.io are incredible…lottiefiles are good as well but are way too big hence thinking in terms of videos ,thanks you all , stay fine and safe


UPDATE.Just saw that all the gif i call have a spinner…that circle under the text…can i remove it?
Schermata 2021-05-22 alle 21.06.24
update 2 . spinner is gone…after a while it has completed the load i suppose

6 Likes

Updated my Link in Bio App:
Concept: Creators can design their own “Landing Page” and receive a custom Rebrandly link based on their Instagram name to paste into their Bio. (Ex: journey.rs/yourname)

Dashboard:

  • Performance Metrics allows Users to see the # of clicks each of their posts and links recieved in total, today, last 7 days and last 30 days.
  • Ambassador Program allows people to activate a special link where new people can copy the Ambassadors unique code and paste it into their application.
  • Donations and Ambassador payments are sent via Paypal.me

Public Bio:

  • Full image background with White Text
  • User can switch to a “Light Theme” that adds opacity to the background image, changes the Font and Social Icons to Black and Logo to Dark
  • Dynamic Social Icons (if you dont have a link, the icon does not appear)
  • Custom Button Colors (User can set the background and font colors of both the Primary and Secondary links using HEX)

Light Theme:

Custom Button Colors:

Matches the Post Tag to the Primary Button Color they’ve chosen:

21 Likes