adding page UserDetail.vue

alex

2025-06-03 cedfd136bf19bcb01d2d93a77629f50177df599a

adding page UserDetail.vue

 vue/src/App.vue

@@ -27,12 +27,10 @@
}

header
   background-color #777;
   position fixed;
   top 0
   left 0
   right 0
   padding .5em;

main
   margin 0 auto

 vue/src/assets/styles.styl

@@ -10,5 +10,9 @@
   grid-template-columns 10rem 20rem 10rem 20rem
   gap .5em
   &>span
      font-variant all-small-caps
      font-variant small-caps
      color #555


.w100p
   width 100%;

 vue/src/components/Header.vue

@@ -5,11 +5,27 @@
<template>

   <div class="header">
      header
      <div>Globus-ILIAS-REST</div>
      <div>|</div>
      <RouterLink :to="`/ui/users`">Users</RouterLink>
      <RouterLink :to="`/ui/course`">Courses</RouterLink>
   </div>

</template>

<style scoped>
<style scoped lang="stylus">

.header
   color #ccc
   background-color #555
   padding .33em .66em
   display flex;
   gap 1em

   a
      color #ddd
      text-decoration none;
      &:hover
         color #eee

</style>

 vue/src/pages/Users.vue

@@ -45,11 +45,11 @@
      <p>{{ userId }}</p>
      <p v-if="error">{{ error }}</p>

      <div class="user">
      <div class="users">



         <table class="">
         <table class="w100p">
            <thead>
               <tr>
                  <th>usr_id</th>
@@ -57,7 +57,7 @@
                  <th>firstname</th>
                  <th>lastname</th>
                  <th>gender</th>
                  <th>email</th>
<!--                  <th>email</th>-->
                  <th>institution</th>
                  <th>department</th>
               </tr>
@@ -73,7 +73,7 @@
                  <td>{{user.firstname}}</td>
                  <td>{{user.lastname}}</td>
                  <td>{{user.gender}}</td>
                  <td>{{user.email}}</td>
<!--                  <td>{{ user.email}}</td>-->
                  <td>{{user.institution}}</td>
                  <td>{{user.department}}</td>
               </tr>