Создание адаптивной таблицы лидеров

Question

Приведенный ниже код создает таблицу лидеров, которая оценивает пользователей от 1 до 10, и вот результат:

Как вы можете видеть, есть 10пользователи с их фотографиями профиля и их именами и т. д. ранжируются от 1 до 10.

Все данные, необходимые для заполнения таблицы лидеров, будут поступать с сервера (к которому мы сейчас не имеем никакого отношения,например, массив, содержащий баллы пользователей).

Теперь проблема в том, что я не могу понять, как изменить код, чтобы добавить эту функцию в мою таблицу лидеров:

давайте подумаем о пользователе (участнике), который смотрит на таблицу лидеров на своем ноутбуке, чтобы увидеть, какого ранга он / она достиг.хорошо ... мы называем его / ее основным пользователем.

Если основной пользователь находится между 1-м и 10-м рангом (например, 5-й ранг)таблица лидеров должна включать только его и выделять его:

Если Основной пользователь не ранжируется от 1 до 10, дляНапример, его ранг 1025, затем в таблице лидеров он занял 10-е место только для того, чтобы показать, какой ранг он достиг:

Вот код:

JS

// this is the array that will hold all the profile objects
let profiles = [];

let profile1 = {};
profile1.name = "Jim Bob";
profile1.job = "Doctor";
profile1.points = 1500;
profile1.level = 15;
profile1.img = "https://randomuser.me/api/portraits/men/12.jpg";
profile1.imgDiamonds = "Diamonds.png";
profiles.push(profile1);

let profile2 = {};
profile2.name = "Jane tanha";
profile2.job = "Dentist";
profile2.points = 2000;
profile2.level = 1;
profile2.img = "https://randomuser.me/api/portraits/women/22.jpg";
profile2.imgDiamonds = "Diamonds.png";
profiles.push(profile2);

let profile3 = {};
profile3.name = "Mike Jones";
profile3.job = "Medic";
profile3.points = 4000;
profile3.level = 5;
profile3.img = "https://randomuser.me/api/portraits/men/22.jpg";
profile3.imgDiamonds = "Diamonds.png";
profiles.push(profile3);

let profile4 = {};
profile4.name = "Sally Peterson";
profile4.job = "Agriculture";
profile4.points = 1900;
profile4.level = 55;
profile4.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile4.imgDiamonds = "Diamonds.png";
profiles.push(profile4);

let profile5 = {};
profile5.name = "Sally Peterson";
profile5.job = "Pumper";
profile5.points = 1100;
profile5.level = 4;
profile5.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile5.imgDiamonds = "Diamonds.png";
profiles.push(profile5);

let profile6 = {};
profile6.name = "Sally Peterson";
profile6.job = "Mother";
profile6.points = 1400;
profile6.level = 85;
profile6.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile6.imgDiamonds = "Diamonds.png";
profiles.push(profile6);

let profile7 = {};
profile7.name = "Sally Peterson";
profile7.job = "Nurse";
profile7.points = 1400;
profile7.level = 11;
profile7.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile7.imgDiamonds = "Diamonds.png";
profiles.push(profile7);

let profile8 = {};
profile8.name = "Sally Peterson";
profile8.job = "Taxi Diver";
profile8.points = 1400;
profile8.level = 17;
profile8.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile8.imgDiamonds = "Diamonds.png";
profiles.push(profile8);

let profile9 = {};
profile9.name = "Sally Peterson";
profile9.job = "High School Student";
profile9.points = 1400;
profile9.level = 37;
profile9.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile9.imgDiamonds = "Diamonds.png";
profiles.push(profile9);

let profile10 = {};
profile10.name = "Sally Peterson";
profile10.job = "Student";
profile10.points = 1500;
profile10.level = 14;
profile10.img = "https://randomuser.me/api/portraits/women/24.jpg";
profile10.imgDiamonds = "Diamonds.png";
profiles.push(profile10);

// sort the array by points
// b - a will make highest first, swap them so a - b to make lowest first
profiles.sort(function(a, b) {
  return b.points - a.points;
})


let count = 1;
profiles.forEach(function(entry) {
  let profilesDiv = document.getElementsByClassName('profiles')[Math.floor((count - 1) / 5)];

  let img = document.createElement('img');
  img.className = "profilePic";
  img.src = entry.img;

  let imgDiamonds = document.createElement('img');
  imgDiamonds.className = "profileDia";
  imgDiamonds.src = entry.imgDiamonds;


  let profile = document.createElement('div');
  profile.className = "profile";
  profile.innerHTML = "<div class='name'>" + entry.name + "</div>";


  let job = document.createElement('span');
  job.className = "job";
  job.textContent = entry.job;
  profile.appendChild(job);
  profile.prepend(img);
  profile.prepend(imgDiamonds);


  let points = document.createElement('span');
  points.className = "points";
  points.textContent = entry.points;
  profile.appendChild(points);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  let level = document.createElement('span');
  level.className = "level";
  level.textContent = entry.level;
  profile.appendChild(level);
  profile.prepend(img);
  profile.prepend(imgDiamonds);

  var span = document.createElement("span");
  span.textContent = count + '. ';
  span.className = "count";
  profile.prepend(span);
  profilesDiv.appendChild(profile);
  count++;

});

.row {
  display: flex;
}

.column {
  flex: 50%;
}

.profile {
  padding: 10px;
  margin: 100px 70px 0px 0px;
  width: 50%;
  height: 60px;
  box-sizing: border-box;
}

.profile .name {
  margin-right: -210px;
  float: right;
  width: 200px;
  height: 50px;
}

.profile .job {
  margin-right: -210px;
  margin-top: 25px;
  float: right;
  width: 200px;
  height: 50px;
}

.profile .count {
  float: left;
  margin-right: 5px;
  font-family: "Helvetica Neue";
  font-weight: 200;
  src: url(helveticaneue-ultrathin.woff);
  color: #E6E0EC;
  font-size: 55px;
}

.profile img.profilePic {
  position: absolute;
  margin: -50px 70px 50px 90px;
  background: #2f293d;
  border: 1px solid #2f293d;
  padding: 4px;
  border-radius: 50%;
  box-shadow: .2rem .2rem 1rem rgba(0, 0, 0, .5);
}

.profile img.profileDia {
  position: absolute;
  margin: -10px 70px 50px 520px;
  width: 2%;
  height: auto;
}

.points {
  position: absolute;
  margin: 0px 100px 100px 450px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #008CBA;
}

.level {
  position: absolute;
  margin: 35px 100px 100px 230px;
  float: right;
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
  color: #ed0909;
  font-size: 20px;
  display: block;
  height: 60px;
  width: 60px;
  line-height: 60px;
  -moz-border-radius: 30px;
  /* or 50% */
  border-radius: 30px;
  /* or 50% */
  background-color: black;
  color: white;
  text-align: center;
  font-size: 1.5em;
}

<div class="row">
  <div class="column">
    <div class="profiles"></div>
  </div>
  <div class="column">
    <div class="profiles"></div>
  </div>
</div>

Чтобы быть более четкими, выделение желаемых рангов, имен и изменение ранга 10 на 1025 или любого другого ранга - это мои самые большие проблемы ...Я даже не могу выбрать звание !!!(

Answer 1

Эту ситуацию можно решить несколькими способами.Нет хорошего свойства CSS для решения этого случая.

Один из способов - предварительно оценить максимальный объем пространства, которое займет каждый блок, а затем зафиксировать их размеры.или использовать подход проектирования на основе сетки, который учитывает эти ограничения пространства.

Второй способ - уменьшить размер шрифта чисел и попытаться поместить их в свой текущий блок, чтобы, даже если они имеют длину в четыре цифры, он не перемещал следующее содержимое.