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,81 +1,83 @@
 <template>
-  <div
-      class=""
-  >
-    <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"
-            />
-<!--          <img-->
-<!--              :alt="tool.tool.name"-->
-<!--              :src="'/img/tools/' + tool.tool.name + '.png'"-->
-<!--              class="w-24 h-24 object-contain"-->
-<!--          />-->
-        </a>
-      </div>
+  <div class="course-tool">
+    <a
+      :href="goToCourseTool(course, tool)"
+      class="course-tool__link"
+      :aria-labelledby="`course-tool-${tool.ctool.iid}`"
+    >
+      <span
+        :class="tool.tool.icon"
+        class="course-tool__icon mdi"
+        aria-hidden="true"
+      />
+    </a>
 
-      <div class="flex flex-row gap-2 font-bold text-gray-500 pt-3">
-        <a
-            :href="goToCourseTool(course, tool)"
-        >
-<!--          {{ tool.ctool.nameToTranslate }} -->
-          {{ $t(tool.tool.nameToShow) }}
-        </a>
+    <a
+      :id="`course-tool-${tool.ctool.iid}`"
+      v-t="tool.tool.nameToShow"
+      :href="goToCourseTool(course, tool)"
+      class="course-tool__title"
+    />
 
-        <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"
-          />
-          <v-icon
-              v-else
-              icon="mdi-eye-off"
-              size="lg"
-          />
-        </button>
+    <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"
+        />
+        <v-icon
+          v-else
+          icon="mdi-eye-off"
+          size="lg"
+        />
+      </button>
 
-        <a
-            v-if="isCurrentTeacher"
-            :href="goToSettingCourseTool(course, tool)"
-        >  <v-icon
-            icon="mdi-cog" size="lg"
+      <a
+        v-if="isCurrentTeacher"
+        :href="goToSettingCourseTool(course, tool)"
+      >
+        <v-icon
+          icon="mdi-cog"
+          size="lg"
         />
-        </a>
-      </div>
+      </a>
     </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
+        type: Function,
+        required: true,
     },
     changeVisibility: {
-      type: Function,
-      required: false
+        type: Function,
+        required: true,
     },
     goToSettingCourseTool: {
-      type: Function,
-      required: false
+        type: Function,
+        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: [