[MS] User list reponsive

Author: fabienSvstr

client/src/components/files/FileListItem.vue

@@ -228,26 +228,6 @@ async function onOptionsClick(event: PointerEvent): Promise<void> {
   }
 }
 
-.file-options {
-  ion-button::part(native) {
-    padding: 0;
-  }
-
-  .options-button {
-    --background-hover: none;
-
-    &__icon {
-      color: var(--parsec-color-light-secondary-grey);
-    }
-
-    &:hover {
-      .options-button__icon {
-        color: var(--parsec-color-light-primary-500);
-      }
-    }
-  }
-}
-
 .file-list-item-mobile {
   overflow: hidden;
   text-overflow: ellipsis;

client/src/components/users/UserListItem.vue

@@ -20,6 +20,7 @@
     <div class="user-selected">
       <!-- eslint-disable vue/no-mutating-props -->
       <ms-checkbox
+        :class="{ 'checkbox-mobile': isSmallDisplay }"
         v-model="user.isSelected"
         v-show="user.isSelected || isHovered || showCheckbox"
         v-if="!user.isRevoked() && !user.isCurrent"
@@ -30,10 +31,12 @@
     </div>
 
     <!-- user name -->
-    <div class="user-name">
+    <div
+      class="user-name"
+      v-if="isLargeDisplay"
+    >
       <ion-label class="user-name__label cell">
         <user-avatar-name
-          class="main-cell"
           :user-avatar="user.humanHandle.label"
           :user-name="user.humanHandle.label"
         />
@@ -45,6 +48,29 @@
         </span>
       </ion-label>
     </div>
+    <div
+      class="user-mobile"
+      v-if="isSmallDisplay"
+    >
+      <user-avatar-name
+        :user-avatar="user.humanHandle.label"
+        class="user-mobile-avatar"
+        :class="{
+          'hide-avatar': showCheckbox && !user.isRevoked() && !user.isCurrent,
+          'disable-avatar': user.isRevoked() || user.isCurrent,
+        }"
+      />
+      <div class="user-mobile-text">
+        <ion-text class="button-medium user-mobile-text__name">{{ user.humanHandle.label }}</ion-text>
+        <ion-text class="cell user-mobile-text__email">
+          {{ user.humanHandle.email }}
+        </ion-text>
+        <tag-profile
+          :profile="user.currentProfile"
+          class="user-mobile-text__profile"
+        />
+      </div>
+    </div>
 
     <!-- user profile -->
     <div class="user-profile">
@@ -80,7 +106,7 @@
     <!-- options -->
     <div class="user-options ion-item-child-clickable">
       <ion-button
-        v-show="(isHovered || menuOpened) && !user.isCurrent"
+        v-show="((isHovered || menuOpened) && !user.isCurrent) || isSmallDisplay"
         fill="clear"
         class="options-button"
         @click.stop="onOptionsClick($event)"
@@ -96,17 +122,18 @@
 </template>
 
 <script setup lang="ts">
-import { formatTimeSince, MsCheckbox } from 'megashark-lib';
+import { formatTimeSince, MsCheckbox, useWindowSize } from 'megashark-lib';
 import TagProfile from '@/components/users/TagProfile.vue';
 import UserAvatarName from '@/components/users/UserAvatarName.vue';
 import UserStatusTag from '@/components/users/UserStatusTag.vue';
 import { UserModel } from '@/components/users/types';
-import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+import { IonButton, IonIcon, IonItem, IonLabel, IonText } from '@ionic/vue';
 import { ellipsisHorizontal } from 'ionicons/icons';
 import { ref } from 'vue';
 
 const isHovered = ref(false);
 const menuOpened = ref(false);
+const { isLargeDisplay, isSmallDisplay } = useWindowSize();
 
 const props = defineProps<{
   user: UserModel;
@@ -134,93 +161,57 @@ async function onOptionsClick(event: Event): Promise<void> {
 </script>
 
 <style scoped lang="scss">
-.user-selected {
-  min-width: 4rem;
-  justify-content: end;
-  width: auto;
-}
-
 .user-name {
-  padding: 0.5rem 1rem;
-  width: auto;
-  flex-grow: 1;
-  min-width: 11.25rem;
-  max-width: 25rem;
-
   &__label {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     overflow: hidden;
-
-    .main-cell {
-      white-space: nowrap;
-      overflow: hidden;
-    }
   }
 
   &__you {
     color: var(--parsec-color-light-primary-600);
   }
 }
 
-.user-profile {
-  min-width: 11.5rem;
-  max-width: 10vw;
-  width: auto;
-  flex-grow: 2;
-}
+.user-mobile {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+  padding: 0.75rem 0.5rem;
 
-.user-email {
-  max-width: 16rem;
-  min-width: 16rem;
-  flex-grow: 0;
-  color: var(--parsec-color-light-secondary-grey);
-  overflow: hidden;
+  .user-mobile-avatar {
+    padding: 0.5rem;
 
-  &__label {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.user-status {
-  min-width: 8rem;
-  width: auto;
-  flex-grow: 0;
-  color: var(--parsec-color-light-secondary-grey);
-}
-
-.user-join {
-  min-width: 11.25rem;
-  flex-grow: 0;
-  overflow: hidden;
-  color: var(--parsec-color-light-secondary-grey);
-}
-
-.user-options {
-  min-width: 4rem;
-  width: auto;
-  flex-grow: 0;
-  margin-left: auto;
+    &.hide-avatar {
+      opacity: 0;
+    }
 
-  ion-button::part(native) {
-    padding: 0;
+    &.disable-avatar {
+      filter: grayscale(100%);
+      opacity: 0.6;
+    }
   }
 
-  .options-button {
-    --background-hover: none;
+  &-text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
 
-    &__icon {
-      color: var(--parsec-color-light-secondary-grey);
+    &__name {
+      color: var(--parsec-color-light-secondary-text);
     }
 
-    &:hover {
-      .options-button__icon {
-        color: var(--parsec-color-light-primary-500);
-      }
+    &__email {
+      color: var(--parsec-color-light-secondary-grey);
     }
   }
 }
+
+.user-status,
+.user-join,
+.user-email {
+  color: var(--parsec-color-light-secondary-grey);
+}
 </style>