Feature Updates (Aug-2020) about epiclab.github.io HOT 9 CLOSED

Since we need to maintain the 1:1 aspect ratio on the logo, the use of height: auto, width: X (where X is any valid value, e.g. 150px, 27.5%) is critical to allowing for automatic scaling without breaking the aspect ratio. However, you can adjust the min-width value to lower than 100px to allow it to scale smaller on mobile devices. But I do want to maintain some minimum size, because at some point the logo becomes unreadable.

For the overall design of the banner, I'm not settled on a specific solution or design. But if you read through some web design articles, you will find things like this article, "Banner images that work well with multiple device sizes", with suggestions on how to design response banners (although that site is focused on using a tool called Pipeline, so just focus on the design suggestions). The layout in section 2 of that article (titled "Responsive design and height settings in Pipeline") is probably what we want to emulate; i.e. a zoomed in section of the banner image (probably the center) that scales to 100% of the screen (minus the navbar at the top). When we do this, we should probably go ahead and center the logo (the normal mode is set to left: 65%, which we should keep at full scale).

As an initial attempt (to illustrate what I'm suggesting), I would think having the following CSS Media Query might work well for switching the logo location on small screens:

@media (max-width: 600px), (max-height: 900px) {
  .logo {
    left: 50%;
  }
}

from epiclab.github.io.

For the mobile display of the banner image and EpicLab logo, should I just make them static? Mobile users cannot adjust the size of their browser, so the responsive banner image would not work, and the EpicLab logo movement on a phone might be a little distracting. Also, for editing the css to correspond just to laptops/tablets/etc. browsers, can I use the css code min-device-width: 600px? I found that online, and it appears to work fine. When I tried setting it to both min-device-height: 600px and min-device-width: 800px, it didn't work.

from epiclab.github.io.

For task #3, the publication titles can be clicked in order to access the hyperlinks. The icon effect shows up shortly after tapping on the paper's name. It is just the first 5 items on the Publications Page that do not have links since they are recently accepted papers and are not published yet.

from epiclab.github.io.

No, technically both images are static in the sense that the images do not change in response to any external factors (time-based, user-interactions, or third-party API updates for the GitHub organization image). Mobile users can, in fact, adjust the size of their browsers when rotating the screen from a vertical-orientation to a horizontal-orientation. Response design is just a concept (with some tips & tricks) for handling varying orientations and window sizes, so it still fits this situation.

I haven't dived into it too extensively, but what you probably need to use is CSS Media Queries to check for whether the screen height and/or width are below the previously stated thresholds (e.g. height: 600px, width: 800px for scaling the banner image). There is a guide available that provides a brief walk-through for using media queries along with device-width: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml (see the link to the second part of the series at the bottom, which is titled "width versus device-width").

(Side-note: When you type #3 into a comment on GitHub, it automatically links to the issue with that number within the current repository. If you're looking to link back to a specific comment within the issue, you can click the ... icon and select Copy link to get a link that goes directly to that comment. In this case, you might have wanted: #21 (comment))

from epiclab.github.io.

Just for clarity, is task 3 still relevant since the hyperlinks are accessible to mobile devices?

from epiclab.github.io.

No, task 3 is not needed if the hyperlinks still work on mobile devices.

I see that you deleted the portion of your comment containing a question about overflow scaling on the logo. But I'll respond anyways, since I was looking up a few tricks in order to do the effect that I was thinking. What we really want is the logo to scale down as the screen size reduces, but only to a minimum size (which is exactly what the min-widthproperty is for). And we also don't want it to scale up to be too big either (so also using max-width).

The two changes that are needed are to index.html (removing the style embedded on the img element):

<img class="img-fluid d-block logo" src="https://github.com/EPICLab.png" alt="">

And updating the full-width-pics.css file with:

.logo {
  position: fixed;
  left: 65%;
  height: auto;
  width: 27.5%;
  max-width: 250px;
  min-width: 100px;
}

from epiclab.github.io.

Yes! I deleted it because I figured it out. I changed the logo CSS from fixed to sticky so that it would be contained within the parent element (the banner picture), so now the logo won't go beyond the banner.

I did the css changes you sent, and it works great! However, if the display is similar to this (from iPhone 6/7/8), the logo is very big and will cover a significant portion of the banner. Is that okay?

I'm still not entirely understanding what we want for the banner image on a mobile display. Should it display the entire photo?

from epiclab.github.io.

If we are doing a zoomed-in version of the desktop banner, it will be difficult since cropping the image will crop out some of the members. Should we just display the center four members?

Also, should we get rid of the split screen on mobile browsers? When users have such a narrow screen, both the EpicLab acronym explanation and News Feed are squished to the point where they're hard to read.

from epiclab.github.io.

Yes, the zoomed-in version of the banner will just display the center four members. In the current banner, 6 out of the 10 people have graduated and left the group. We need to take a new group photo to update the banner, but for now the zoomed-in version will work.

Yes, please use CSS Flexbox (which is already being used by Bootstrap elsewhere in the site) to flow the News Feed down below the EPICLab explanation pane. You might also need to reduce the padding property on div.split-right class when the News Feed has flowed down into a new row, since the available width is not very big in that instance (so maximizing the space for content is preferred).

from epiclab.github.io.