UI: Add styles for tool list in course home

assets/css/scss/index.scss

@@ -10,6 +10,8 @@
 @import "atoms/buttons";
 @import "atoms/messages";
 
+@import "molecules/course_tool";
+
 @import "components/badges";
 @import "components/forms";
 //@import 'announcement';

assets/css/scss/molecules/_course_tool.scss

@@ -0,0 +1,27 @@
+.course-tool {
+  @apply flex flex-col gap-4 relative;
+
+  &__link {
+    @apply border border-solid border-gray-30 rounded-lg flex place-items-center justify-center shadow-lg w-[7.5rem] h-[7.5rem];
+  }
+
+  &__icon {
+    @apply text-transparent bg-clip-text bg-gradient-to-br from-primary to-primary-gradient text-header;
+
+    &::before {
+    }
+  }
+
+  &__title {
+    @apply text-caption-bold text-center text-primary;
+  }
+
+  &__options {
+    @apply absolute flex gap-2 p-2 right-0;
+
+    & > a,
+    & > button {
+      @apply inline-block h-6 text-center w-6;
+    }
+  }
+}

assets/vue/components/course/CourseToolList.vue

@@ -1,35 +1,33 @@
 <template>
-  <div
-      class=""
+  <div class="course-tool">
+    <a
+      :href="goToCourseTool(course, tool)"
+      class="course-tool__link"
+      :aria-labelledby="`course-tool-${tool.ctool.iid}`"
     >
-    <div class="flex flex-col flex-center">
-      <div class="p-9 rounded-xl shadow-lg">
-        <a :href="goToCourseTool(course, tool)" class="">
-            <v-icon
-                :icon="tool.tool.icon"
-                size="48px"
-                class="font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-ch-primary to-ch-primary-light"
+      <span
+        :class="tool.tool.icon"
+        class="course-tool__icon mdi"
+        aria-hidden="true"
       />
-<!--          <img-->
-<!--              :alt="tool.tool.name"-->
-<!--              :src="'/img/tools/' + tool.tool.name + '.png'"-->
-<!--              class="w-24 h-24 object-contain"-->
-<!--          />-->
     </a>
-      </div>
 
-      <div class="flex flex-row gap-2 font-bold text-gray-500 pt-3">
     <a
+      :id="`course-tool-${tool.ctool.iid}`"
+      v-t="tool.tool.nameToShow"
       :href="goToCourseTool(course, tool)"
-        >
-<!--          {{ tool.ctool.nameToTranslate }} -->
-          {{ $t(tool.tool.nameToShow) }}
-        </a>
+      class="course-tool__title"
+    />
 
-        <button v-if="isCurrentTeacher && changeVisibility" @click="changeVisibility(course, tool)">
+    <div class="course-tool__options">
+      <button
+        v-if="isCurrentTeacher && changeVisibility"
+        @click="changeVisibility(course, tool)"
+      >
         <v-icon
           v-if="tool.ctool.resourceNode.resourceLinks[0].visibility === 2"
-              icon="mdi-eye" size="lg"
+          icon="mdi-eye"
+          size="lg"
         />
         <v-icon
           v-else
@@ -41,41 +39,45 @@
       <a
         v-if="isCurrentTeacher"
         :href="goToSettingCourseTool(course, tool)"
-        >  <v-icon
-            icon="mdi-cog" size="lg"
+      >
+        <v-icon
+          icon="mdi-cog"
+          size="lg"
         />
       </a>
     </div>
   </div>
-  </div>
 </template>
 
-<script>
+<script setup>
+import { useStore } from 'vuex'
+import { computed } from 'vue'
 
-import {mapGetters} from "vuex";
+const store = useStore();
 
-export default {
-  name: 'CourseToolList',
-  props: {
-    course: Object,
-    tool: Object,
+// eslint-disable-next-line no-undef
+defineProps({
+    course: {
+        type: Object,
+        required: true,
+    },
+    tool: {
+        type: Object,
+        required: true,
+    },
     goToCourseTool: {
         type: Function,
-      required: true
+        required: true,
     },
     changeVisibility: {
         type: Function,
-      required: false
+        required: true,
     },
     goToSettingCourseTool: {
         type: Function,
-      required: false
-    },
+        required: true,
     },
-  computed: {
-    ...mapGetters({
-      'isCurrentTeacher': 'security/isCurrentTeacher',
-    }),
-  },
-};
+});
+
+const isCurrentTeacher = computed(() => store.getters['security/isCurrentTeacher']);
 </script>

assets/vue/views/course/Home.vue

@@ -128,7 +128,7 @@
     </div>
 
     <div
-        class="grid gap-5 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-6"
+      class="grid gap-y-12 sm:gap-x-5 md:gap-x-16 md:gap-y-12 justify-between grid-cols-course-tools"
     >
       <CourseToolList
           v-for="tool in tools.authoring"

tailwind.config.js

@@ -45,6 +45,9 @@ module.exports = {
       fontFamily: {
         sans: ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif']
       },
+      gridTemplateColumns: {
+        'course-tools': 'repeat(auto-fit, 120px)',
+      }
     },
   },
   plugins: [