How to align left image in f7-list-item properly?


#1

I have a list, changed my code and wnted to use f7-list-group for grouping however I lost my visuality. Before I used ul and li for final item listing

I prefer media-list (which is at bottom) but I need to find a away to manipulate image parameter.

I want images left side
I want shorter items (no empty spaces)

  f7-list
   f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
    f7-list-item(:title="key" group-title="")
    f7-list-item(v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")
     .item-content
       .item-media
         img.avatar-circle(:src="contact.photoUrl || noImg" width="44")

list0

  1. When I add css test-icon-left I get this
         img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")

list1

  1. If I change intendation of these Items get shorter but image overlaps the name
     .item-content
     .item-media
     img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")

list2

  1. If I comment item-content and itemmedia I get this
  f7-list
   f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
    f7-list-item(:title="key" group-title="")
    f7-list-item(v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")
     //-.item-content
     //-.item-media
     img.test-icon-left.avatar-circle(:src="contact.photoUrl || noImg" width="44")

list3

  1. Finally, if I use media-list (I think most proper way) I get this. Applying avatar-circle to f7-list-item doesnt make any sense
  f7-list(media-list="")
   f7-list-group.date(v-for='(groups, key) in groupedContacts' :key="key", v-show='!isSearch')
    f7-list-item(:title="key" group-title="")
    f7-list-item(:media="contact.photoUrl", v-for="contact in groups", :key="key", :title="contact.firstName + ' ' + contact.lastName")

list5