article preview component, html sass

Community feedback

• 

  ricardoychino•190

  @ricardoychino

  Posted 9 months ago

  Hi, good job finishing the challenge!

  About displaying and positioning, I am looking at the styling and I think the approach is a little bit overcomplicated. It could be simpler. It is awesome that you learned and applied clip-path property (I myself don't really know how to use it, to be honest), but I think you could get the desired result without it.

  But first, I think it is better to wrap the whole button .card__profile--share inside the <a> tag, because currently the "tooltip" opens only when the icon per se is clicked, not the "button" (.card__profile--share) - if the user clicks on the padding, for example, nothing really happens. That requires certain precision from the user, and that could led to some bad experience. So I recommend wrapping the whole button with the anchor tag. Also, as a bonus I'd define a height and width to make it a perfect circle. It is a bit elliptical currently.

  Now about the approach, I think you could:

  (1) Remove the margins from .card__action ("SHARE" text) and .card__socials--links (the social icons wrapper)

  (2) Reduce the vertical padding from .card__profile--social, perhaps to:

  padding: 0.75rem 2.25rem;
  

  This makes the tooltip visual fine, and with simple styling

  (3) Now let's add the "tail" of the tooltip. You can do this by adding a pseudo-element ::after to the "tooltip" component, just like:

  .card__profile--social::after{
    /* Part 1 */
    content: "";
  
    /* Part 2 */
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
  
    /* Part 3 */
    border-top: 15px solid hsl(217, 19%, 35%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
  

  Let me explain the rule above in parts:

  Part 1: Pseudo-elements always needs a content property, even if it is empty. If you don't add it to the rule, the browser will just ignore it

  Part 2: We need to position it relative to the content. As a pseudo-element is a child of the content and that content has the position defined, we just add position: absolute on it to position it as we wish. top: 100% will position it right after the parent, as it jumps the full size of the parent. left: calc(50% - 10px) will position it centered horizontally (50% of the parent width minus the half of its own size). This positioning makes it dynamic, so even if you need to change the content of the tooltip that will change its size later on the future, you won't need to redefine all these properties

  Part 3 This will define the shape of the "tail" per se. The border-top will be the "tail", with the same color as the content, and the border-width (15px) is what will define how long the tail will be. The border-left and border-right are needed to give it a triangular shape. Changing their width (10px) will make the tail wider or thinner. Change them as you wish

  (4) Now for the final touch, it would be really helpful if we could split the .card__profile--social into two elements, such as:

  <div class="card__profile--social" id="card-social">
    <div class="card__profile--social-wrapper">
      <!-- p.card__action and div.card__socials -->
    </div>
  </div>
  

  This way we can split the responsibilities, .card__profile--social for the visibility and positioning relative to father "button", and .card__profile--social-wrapper for the styling and positioning. The result will be something like:

  .card__profile--social {
    position: absolute;
    bottom: calc(100% + 10px); /* Position of the whole component */
    left: 50%; /* Right to the middle of the "button" */
    visibility: hidden;
  }
  .card__profile--social-wrapper {
    padding: 0.75rem 2.25rem; /* The padding I mentioned before on (2) - we move to this rule */
    margin-left: -50%; /* This will help position the tooltip right to the middle of "button" */
    width: 100%;
    position: relative; /* We need this to position the "tail" */
  
    /* The others are properties that already existed in .card__profile--social and I moved to this wrapper/styling class */
    background-color: hsl(217, 19%, 35%);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border-radius: 0.5rem;
  }
  
  /* Let's move the "tail" ::after pseudo-element to the new element too */
  .card__profile--social-wrapper::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 10px);
    border-top: 15px solid hsl(217, 19%, 35%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
  
  /* Remove the margins as I mentioned on (1) */
  .card__action {
    color: hsl(0, 0%, 100%);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 3px;
  }
  .card__socials--links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  

  The point of adding a new element is that the parent .card__profile--social will have the size of its content, and we can use it to apply the margin-left: -50% on .card__profile--social-wrapper to center it inside the parent. If we don't add the new element, the parent will be the "button" element (.card__profile--share), which has a smaller size. Since the % always are proportional to the element's parent, the margin-left won't have the desired result.

  I'm sorry for the lengthy comment, but I think this is the most common and a more dynamic approach. I hope this helps! Good job and keep it up!

  00