new-look

[noam-honig]

[develad]

Hey Noam :)

1. It's a nice look. I like it. But I'm only one person. I think maybe you should make a poll in Facebook to see how the community will react to the new UI change
2. in case this look will be merged the results that haven't got an image will need a filler image
3. in the addDataToResult function in utils.ts file it can be replaced to '800px' instead of '300px' to get much better image resolution
4. I attached a mock up with small UI changes (no margins, no border radius, putting the 'text-part' box in the bottom)
5. Thank you for all the merges ! 😀

[noam-honig]

@develad Hi Elad,

1. I think that between you and , we can decide on this look :)
2. Results without an image are displayed on white background (or black in dark mode) - they look like before
3. I'm concerned about slow internet when I'm abroad - maybe there is a way to get low res image first and later a high res or something.
4. I had the text part at the bottom first :) and changed it - if you prefer at the bottom, no problem. I wasn't aware that I left the margin and border-radius. Can you let me know where you've found them?
5. It's fun; I'm enjoying the collaborative creation process :)

[develad]

@noam-honig Hey Noam,

1. We sure can 👍
2. We can add the loading="lazy" to the img element, That is a quick fix to slow internet connections MDN link
3. I've attached the code for the result-entry.scss file with the styling I've suggested

.ResultEntry {
  &--main {
    display: flex;
    border-bottom: solid 2px lightgrey;
    justify-content: space-between;
    padding: 4px;
    gap: 16px;
    &__link {
      font-size: x-large;
    }
    &__image {
      width: 300px;
      @media only screen and (max-width: 768px) {
        width: 100px;
      }
    }
    &__google-link {
      width: 32px;
      height: 32px;
    }
    &__distance {
      white-space: nowrap;
      font-size: small;
      &--text {
        font-size: small;
      }
    }
    &__ltr {
      direction: ltr;
      width: 100%;
      display: block;
    }
    &__data-cell {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
  }
}
.ResultEntry {
  &--main {
    &__link {
      font-size: x-large;
    }

    &__image {
      width: 100%;
    }

    &__google-link {
      width: 32px;
      height: 32px;
    }

    &__distance {
      white-space: nowrap;
      font-size: small;

      &--text {
        font-size: small;
      }
    }

    &__data-cell {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }
  }
}

.NewResultEntry {
  .text-part {
    display: flex;
    gap: 4px;

    padding: 8px;
    box-sizing: border-box;
  }

  &__ltr {
    direction: ltr;
    width: 100%;
    display: block;
  }

  &--location-area {
    display: flex;
    text-align: center;
    flex-direction: column;
    max-width: 48px !important;
  }
}

.has-image {
  position: relative;

  a {
    display: flex;
  }

  .text-part {
    color: white;
    position: absolute;
    bottom: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9));

    a {
      color: white;
    }
  }

  .google-link {
    color: white;
  }
}