[IMPORTANT] Animated UserList

[arshivbastian]

This is not a joke so buckle up , this is how it looks like : and this is how we build it , we use v-for to read data and target to make change on element :

HTML

<b-col cols="4" :style="{'height': deviceheight}">     
 <div class="friendsinfo" v-for="ally in allies" @mouseover="leftoright" @mouseleave="righttoleft">
   <sui-image class="friendsimg" :src="ally.src" style="display:inline-block"  size="tiny"/>
   <h2>{{ally.name}}</h2><br>
     <sui-popup content="Donate" size="mini">
                <sui-button circular color="violet" slot="trigger" icon="dollar" />
     </sui-popup>
     <sui-popup content="Black List" size="mini">
                <sui-button circular color="red" slot="trigger" icon="ban" />
     </sui-popup>
     <sui-popup content="Play a Game" size="mini">
                <sui-button circular color="yellow" slot="trigger" icon="plus" />
      </sui-popup>
      <sui-popup content="Call" size="mini">
                <sui-button circular color="green" slot="trigger" icon="phone" />
      </sui-popup>
   </div>
</b-col>

lets check the code : <b-col cols="4" :style="{'height': deviceheight}"> here we have a 4 columns width bootstrap grid that is taking the height of device for learning how can you set the column height to device size check here

<div class="friendsinfo" v-for="ally in allies" @mouseover="leftoright" @mouseleave="righttoleft"> this is mother div that keeps repeating based on the number of data we will define on allies we store that data in ally , also it has two event handler @mouseover and @mouseleave by hovering this mother div you call the functions in method <sui-image class="friendsimg" :src="ally.src" style="display:inline-block" size="tiny"/> in ally we have image's src and user's name so we add ally.src as the src of this image tag , the way we are defining the src is critical and IMPORTANT --> :src="ally.src"

<h2>{{ally.name}}</h2> as I said we have image's src and user's name in ally this is the way we take the neme

<sui-popup content="Donate" size="mini">
    <sui-button circular color="violet" slot="trigger" icon="dollar" />
</sui-popup>

we have four popups that are so simple just remember to add this line in beginning of your root div : <portal-target name="semantic-ui-vue"></portal-target>

CSS

.friendsinfo {
    width: 90%;
    background-color:  rgba(88, 115, 135, 1) ;
    margin-top: 10px  ;
    margin-left: -280px;
    padding-left: 10px;
    height: 85px ;
    border-radius: 0px 30px 70px 0px ;
    color: beige ;
    transition-duration: 1s;
  }
  .friendsinfo h2 {
    display:inline-block;
    margin-left:3%;
    margin-top: 1% ;
  }
  .friendsimg {
    float: right;
    margin-top: 1% ;
    margin-right: 7% ;
  }

things are crystal clear here .

Script

<script>
  export default {
    data () {
      return {
        allies : [
          {name : 'Fighter Grandma' , src : require('../assets/user/fgm.png')} ,
          {name : 'Black Star' , src : require('../assets/user/hailblackskins.png')},
          {name : 'Game Worm' , src : require('../assets/user/letsplay.png')},
          {name : 'Red Head Slayer' , src : require('../assets/user/redheadslayer.png')},
          {name : 'Ordinary Her' , src : require('../assets/user/normalwoman.png')}
        ]
      }
    },
    methods: {
      leftoright(hovered) {
        hovered.target.style.marginLeft = "0px" ;
      },
      righttoleft(hovered) {
        hovered.target.style.marginLeft = "-280px" ;
      }
    }
  };
</script>

data : we have an array that contains 5 users of us and each user contains 2 indexs (name and src) . In HTML part we sat name on h2 tag and add src to image so each user has one unique row in this array methods : in method we receive the hovered element ( friendsinfo that is build by v-for for each of our users ) so we go to its style (CSS) and then manipulate its marginLeft between 0 and -280px base on mouseover and leave events . the way we are defining the marginLeft is critical and IMPORTANT --> hovered.target.style.marginLeft

Not as easy as previous issues but the results will make you happy 😄

[arshivbastian]

Selected

if you want to use a click event to show a user is selected you can add these lines to the codes :

html extra

<div class="friendsinfo" v-for="ally in allies" @mouseover="leftoright" @mouseleave="righttoleft" @click="keepactive"> we only add this part to original code @click="keepactive" that calls keepactive function

Script extra

keepactive(clicked) {
        $(".friendsinfo").css('box-shadow','0px 0px 0px 0px');
        clicked.target.style.boxShadow = "9px 2px 25px 7px rgba(171,164,40,1)";
      }

all the divs with friendsinfo class that are our mother div rest to default ( without shadow ) but clicked one will get boxShadow