Space Tourism website with Grid layout & Vanilla javascript

Community feedback

• 

  Steven Portas•440

  @satropPosted almost 2 years ago

  @denielden - hey there! As always great outcome!

  I have just a tiny bit of advice and this could be considered a personal opinion so if you don't add it I totally understand. I would add a transition to the content swap on the "Meet Your Crew" page. Adding a simple fade-in-out would work, it would make it less jarring to move from content to content.

  I was a designer first and dev second so I'm always looking out for little things like this.

  This will be my next project, might try it all in React as I'm doing with the Manage Landing Page. Its the first thing I've built in React and I am loving it. So keep an eye out for that. Hopefully, I'll finish that today/tomorrow.

  All the best, Steve

  Marked as helpful

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @satrop Thanks Steve! Also I was a designer before :)

  You are right, I fully agree! How would you add it?

  A normal transition would not work because the change takes place via javascript manipulation of the elements already rendered on the page.

  It will be a pleasure to have a look at your React projects :)

  All the best to you too!

  0

  

  Steven Portas•440

  @satropPosted almost 2 years ago

  @denielden without digging too much, I think somewhere in your changeContent function you can add a timeout to add a class a few 100ms after the new content has loaded.

  So in your CSS, set the content to:

  .image {
   display: none;
   opacity: 0;
  }
  

  Then on click add class active > 200ms timeout > then add the next class show.

  CSS will look something like:

  .image.active {
   display: block;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
  }
  
  .image.active.show {
   opacity: 1;
  }
  

  Doing this let’s you bring the content onto the page whilst still being hidden with the opacity 0, then you can transition from 0 to 1.

  Hope that makes sense.

  All the best, Steve.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @satrop Ingenious as a resolution! All that remains is to try :) As soon as I have some time available I will try this modification and I will let you know.

  In the meantime thank you and all the best you too :)

  1

  

  Steven Portas•440

  @satropPosted almost 2 years ago

  @denielden you are very welcome my friend.

  1
• 

  Tanmaya•50

  @arkni8Posted over 2 years ago

  Hey Deniel! It was good to receive your feedback and I decided to take some time to look through some of your projects and I saw this one in your solutions. So I took a look, everything looks good technically. But there are somethings you can fix in a couple of minutes.

  1. In mobile responsive mode, the hamburger menu doesn't appear for me. I am using Firefox btw. Its there, I can guess the location and click on it to open the hamburger menu, and then it shows the Cross button, but after I close the sidebar, the hamburger menu goes invisible.

  2. Like you know, backdrop-filter doesn't work on Firefox, so when the sidebar opens up (or even the navigation header in general), the background just mixes up with the navigation items and become completely unreadable. What you can do is, put a white background when backdrop-filter is unsupported and change the background opacity to something like 0.3. That's just a one line fix 'background-color: rgba(255, 255, 255, 0.35)'.

  3. Maybe you were speedrunning this project? Haha, some paragraph elements can use from padding. Easy fixes, right?

  4. I love the keyframes you have put on destination pages. Makes it look dynamic. I will borrow that idea :P Thanks! Please don't sue me T_T

  5. The tablet size has not been optimized as the design asked. But I guess you know that already.

  All of these are easy fixes though. Great job!

  1

  ---

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @arkni8 Thanks for your feedback!

  Yes, I decide the size of the various devices according the "breaks" of the design of project :)

  I have verified on different computers and mobile devices and the hamburger menu see correctly...

  I fear that the menu bugs are due to a problem of your Firefox. What version do you use?

  Furthermore for Firefox as you can see in the CSS code the property backdrop-filter is not used and the background of the mobile menu is set as a dark background background: hsl (var (- dark), .8)

  What do you mean by "Maybe you Weren't Speedrunning This Project? Haha, Some Paragraph Elements Can Use from Padding"? Sorry, but I don't understand

  0

  

  Tanmaya•50

  @arkni8Posted over 2 years ago

  @denielden Ahh, we can't post screenshot on here, can we? Maybe I can share something on the issues of Github page. Let me see.

  1

  

  Tanmaya•50

  @arkni8Posted over 2 years ago

  @denielden Yes, I have opened an issue on the Github page with screenshot now. Hopefully it will be more clear now.

  Firefox is definitely not opening the page as intended. But on Opera (Chromium based), the page opened perfectly. Weird.

  Sorry, about the speedrunning part. Speedrunning is a term used when you are trying to finish an objective as fast as possible. So I was thinking you made the site as fast as possible so you have missed optmizing certain elements of the page.

  Marked as helpful

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  @arkni8 I saw. Very strange I would say especially because we have the same version: firefox developer v98.

  Yeas, back then I was in speedrunning... I developed it as fast as possible.

  Thanks again for the feedback ;) and happy coding!

  1

  

  Tanmaya•50

  @arkni8Posted over 2 years ago

  @denielden I guess that's the life of a developer. Find edge cases, hit your head about it, find that the solution to it was something trivial, rinse and repeat. xD

  Happy Coding to you too!

  0