Updates QueuePosition design

src/components/Queue.vue

 <template>
 
-    <div class="queue" v-if="studentQueue==null || studentQueue.length>0" >
+    <div class="queue" v-if="studentQueue!=null && studentQueue.length>0" >
         <ul>
-            <li v-for="student in this.studentQueue" :key="student.student_user_id">
-                <Student :student="student" :show-remove-button="showToolButtons" :show-pick-button="showToolButtons" :on-pick-button-pressed="onPickButtonPressed" :on-remove-button-pressed="onRemoveButtonPressed"/>
+            <li v-for="(student, index) in this.sortedByTime" :key="index">
+                <Student :number="index+1" :student="student" :show-remove-button="showToolButtons" :show-pick-button="showToolButtons" :on-pick-button-pressed="onPickButtonPressed" :on-remove-button-pressed="onRemoveButtonPressed"/>
             </li>
         </ul>
     </div>
@@ -37,6 +37,15 @@ export default {
         default: ()=>{}
       }
     },
+
+  computed: {
+      sortedByTime() {
+        console.log(this.studentQueue)
+        return this.studentQueue.sort ((a, b) => {
+          return new Date(a.entry_time) - Date(b.entry_time)
+        });
+      }
+  }
 }
 </script>
 

src/components/Student.vue

 <template>
   <div class="student box" :class="{ studentActive: student.active_student_assistant_id != -1 }">
-      <h4>{{ student.student.first_name + " " +  student.student.surname }}</h4>
-      <p>{{ student.queue_type }}</p>
-      <p>Assignment 1</p>
-    <div>
+    <div class="student-info-content">
+      <h2><b>{{ "#" + number + " - " +student.student.first_name + " " +  student.student.surname }}</b></h2>
+      <h3><i>Assignment {{ student.assignment_number }} - {{ student.queue_type }}</i></h3>
+      <p><i>Entered queue at {{new Date(student.entry_time).toLocaleTimeString()}}</i></p>
+      <p><i>Currently getting help from {{ student.active_student_assistant_id }}</i></p>
+    </div>
+
+    <div class="student-button-content">
       <button v-if="showPickButton" @click="pickButtonPressed">Pick</button>
       <button v-if="showRemoveButton" @click="removeButtonPressed">Remove</button>
     </div>
@@ -13,6 +17,9 @@
 <script>
 export default {
   props: {
+    number: {
+      required: true,
+    },
     student : {
       required: true,
       type: Object
@@ -49,19 +56,66 @@ export default {
 
 <style scoped>
 
+.student-info-content p, h3, h4 {
+  margin: 0;
+  padding: 0;
+}
+
+.student-info-content h4 {
+  padding-bottom: 16px;
+  margin-top: 8px;
+}
+
+.student-info-content {
+  text-align: left;
+}
+
+.student-button-content {
+  display: grid;
+  grid-auto-flow: row;
+}
+
 .student {
   margin: 20px auto;
   background: white;
   padding: 10px 20px 20px;
   border-left: 6px solid #9f9f9f;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
+  display: grid;
+  grid-auto-flow: column;
+
 }
 
 .studentActive {
     border-left: 8px solid #00e94e;
 }
 
+@media only screen and (min-width: 768px) and (max-width: 1268px) {
+
+  .student {
+    grid-auto-flow: row;
+    grid-column-gap: 10px;
+  }
+
+  .student-button-content {
+    grid-auto-flow: column;
+    grid-column-gap: 10px;
+  }
+
+}
+
+@media only screen and (max-width: 768px) {
+
+  .student {
+    grid-auto-flow: row;
+    grid-column-gap: 10px;
+  }
+
+  .student-button-content {
+    grid-auto-flow: column;
+    grid-column-gap: 10px;
+
+  }
+
+}
+
 </style>

src/views/StudentAssistantQueueView.vue

 <template>
   <h1>Student Assistant Queue-Panel</h1>
-  <h2>{{subject_name}}</h2>
+  <h2>{{subject_name + " - " + subject_code}}</h2>
 
   <div class="StudentAssistantQueueViewContainer">
 
@@ -31,6 +31,7 @@ export default {
       subject: null,
       queuePositions: null,
       subject_name: null,
+      subject_code: null,
       currentQueuePosition: null,
       ownUserId: null
     }
@@ -42,6 +43,7 @@ export default {
     SubjectQueueService.getSubject(this.getSubjectCode, this.getSemester, this.$store.state.token).
         then(ans => {
           this.subject_name = ans.data.subjectInfo.name
+          this.subject_code = ans.data.subjectInfo.subject_code
           this.subject = ans.data
 
           this.timer = setInterval(this.updateQueueData, 500);
@@ -121,9 +123,9 @@ export default {
 @media only screen and (max-width: 768px) {
 
   .StudentAssistantQueueViewContainer {
+    grid-template-columns: none;
     grid-auto-flow: row;
     grid-column-gap: 10px;
-
   }
 
 }