Add an option for jExam like styling in Selma

src/freshContent/settings/Settings.vue

@@ -78,6 +78,7 @@ import AutoLogin from './settingPages/AutoLogin.vue'
 import Email from './settingPages/Email.vue'
 import OpalCourses from './settingPages/OpalCourses.vue'
 import ImproveOpal from './settingPages/ImproveOpal.vue'
+import SelmajExamTheme from './settingPages/SelmajExamTheme.vue'
 import Shortcuts from './settingPages/Shortcuts.vue'
 import SearchEngines from './settingPages/SearchEngines.vue'
 import Rockets from './settingPages/Rockets.vue'
@@ -115,6 +116,7 @@ export default defineComponent({
     Email,
     OpalCourses,
     ImproveOpal,
+    SelmajExamTheme,
     Shortcuts,
     SearchEngines,
     Rockets,

src/freshContent/settings/settingPages/SelmajExamTheme.vue

@@ -0,0 +1,54 @@
+<template>
+  <p class="max-line p-margin">
+    Dieses feature fügt Graphen für die Notenverteilungen und Versuchstracker in
+    selma hinzu. Zusätzlich wird das layout und design angepasst
+    umbenutzerfreundlicher zu sein.
+  </p>
+
+  <Setting
+    v-model="selmajExamTheme"
+    txt="Das jExam theme bei Selma benutzen"
+    class="setting"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeMount, ref, watch } from 'vue'
+
+// components
+import Setting from '../components/Setting.vue'
+
+export default defineComponent({
+  components: {
+    Setting
+  },
+  setup () {
+    const selmajExamTheme = ref(false)
+
+    onBeforeMount(async () => {
+      const { selmajExamTheme: storedValue } = await chrome.storage.local.get([
+        'selmajExamTheme'
+      ])
+
+      selmajExamTheme.value = storedValue ?? false
+      watch(selmajExamTheme, valueUpdate)
+    })
+
+    const valueUpdate = async () => {
+      // When we got here, we have the permission
+      await chrome.storage.local.set({
+        selmajExamTheme: selmajExamTheme.value
+      })
+    }
+
+    return {
+      selmajExamTheme
+    }
+  }
+})
+</script>
+
+<style lang="sass" scoped>
+.setting
+    margin-bottom: .8rem
+</style>

src/freshContent/settings/settings.json

@@ -19,6 +19,11 @@
         "icon": "PhSparkle",
         "settingsPage": "ImproveOpal"
     },
+    {
+        "title": "Selma jExam Theme",
+        "icon": "PhSparkle",
+        "settingsPage": "SelmajExamTheme"
+    },
     {
         "title": "Shortcuts",
         "icon": "PhGauge",

src/manifest.chrome.json

@@ -83,6 +83,11 @@
       "run_at": "document_idle",
       "matches": ["https://selma.tu-dresden.de/*"]
     },
+    {
+      "js": ["contentScripts/other/selma/layout.js"],
+      "run_at": "document_start",
+      "matches": ["https://selma.tu-dresden.de/*"]
+    },
     {
       "js": ["contentScripts/login/qis.js"],
       "run_at": "document_idle",
@@ -263,6 +268,10 @@
       "snowpack/pkg/*"
     ],
     "matches": ["https://qis.dez.tu-dresden.de/*"]
+  },
+  {
+    "resources": ["styles/contentScripts/selma/*"],
+    "matches": ["https://selma.tu-dresden.de/*"]
   }],
   "manifest_version": 3,
   "commands": {

src/manifest.firefox.json

@@ -2,20 +2,15 @@
   "name": "TUfast TU Dresden",
   "version": "8.1.0.1",
   "description": "Das Produktivitäts-Tool für TU Dresden Studierende 🚀",
-  "permissions": [
-    "storage",
-    "alarms"
-  ],
+  "permissions": ["storage", "alarms"],
   "optional_permissions": [
     "tabs",
     "notifications",
     "cookies",
     "webRequest",
     "webRequestBlocking"
   ],
-  "host_permissions": [
-    "*://*/"
-  ],
+  "host_permissions": ["*://*/"],
   "background": {
     "scripts": ["background.js"],
     "type": "module"
@@ -83,6 +78,11 @@
       "run_at": "document_idle",
       "matches": ["https://selma.tu-dresden.de/*"]
     },
+    {
+      "js": ["contentScripts/other/selma/layout.js"],
+      "run_at": "document_start",
+      "matches": ["https://selma.tu-dresden.de/*"]
+    },
     {
       "js": ["contentScripts/login/qis.js"],
       "run_at": "document_idle",
@@ -223,47 +223,47 @@
     "page": "freshContent/settings/index.html",
     "open_in_tab": true
   },
-  "web_accessible_resources": [{
-    "resources": [
-      "assets/*",
-      "contentScripts/other/notification.js"
-    ],
-    "matches": ["<all_urls>"]
-  },
-  {
-    "resources": ["contentScripts/login/common.js"],
-    "matches": [
-      "https://*.tu-dresden.de/*",
-      "https://bildungsportal.sachsen.de/*",
-      "https://videocampus.sachsen.de/*",
-      "https://git.imld.de/*",
-      "https://gitlab.hrz.tu-chemnitz.de/*",
-      "https://*.slub-dresden.de/*"
-    ]
-  },
-  {
-    "resources": [
-      "contentScripts/forward/searchEngines/common.js",
-      "contentScripts/forward/searchEngines/sites.json*"
-    ],
-    "matches": [
-      "https://www.startpage.com/*",
-      "https://www.qwant.com/*",
-      "https://www.google.de/*",
-      "https://www.google.com/*",
-      "https://duckduckgo.com/*",
-      "https://www.ecosia.org/*",
-      "https://www.bing.com/*",
-      "https://search.brave.com/*"
-    ]
-  },
-  {
-    "resources": [
-      "contentScripts/other/hisqis/*",
-      "snowpack/pkg/*"
-    ],
-    "matches": ["https://qis.dez.tu-dresden.de/*"]
-  }],
+  "web_accessible_resources": [
+    {
+      "resources": ["assets/*", "contentScripts/other/notification.js"],
+      "matches": ["<all_urls>"]
+    },
+    {
+      "resources": ["contentScripts/login/common.js"],
+      "matches": [
+        "https://*.tu-dresden.de/*",
+        "https://bildungsportal.sachsen.de/*",
+        "https://videocampus.sachsen.de/*",
+        "https://git.imld.de/*",
+        "https://gitlab.hrz.tu-chemnitz.de/*",
+        "https://*.slub-dresden.de/*"
+      ]
+    },
+    {
+      "resources": [
+        "contentScripts/forward/searchEngines/common.js",
+        "contentScripts/forward/searchEngines/sites.json*"
+      ],
+      "matches": [
+        "https://www.startpage.com/*",
+        "https://www.qwant.com/*",
+        "https://www.google.de/*",
+        "https://www.google.com/*",
+        "https://duckduckgo.com/*",
+        "https://www.ecosia.org/*",
+        "https://www.bing.com/*",
+        "https://search.brave.com/*"
+      ]
+    },
+    {
+      "resources": ["contentScripts/other/hisqis/*", "snowpack/pkg/*"],
+      "matches": ["https://qis.dez.tu-dresden.de/*"]
+    },
+    {
+      "resources": ["styles/contentScripts/selma/*"],
+      "matches": ["https://selma.tu-dresden.de/*"]
+    }
+  ],
   "manifest_version": 3,
   "browser_specific_settings": {
     "gecko": {

src/styles/contentScripts/selma/base.scss

@@ -0,0 +1,5 @@
+.pageContent {
+  min-width: unset;
+  max-width: unset;
+  padding: 3rem 5vw 5rem 5rem;
+}

src/styles/contentScripts/selma/exam_results.scss

@@ -0,0 +1,107 @@
+// Better spacing of the table content
+table {
+  line-height: 1.5;
+}
+
+// Alternating background and separator lines
+tbody > tr > th {
+  padding-top: 2rem;
+  padding-bottom: 0.5rem;
+  background: unset;
+}
+
+tbody > tr > td {
+  background: unset;
+  border-bottom: 1px solid #ccc;
+}
+
+tbody :nth-child(2n of tr) {
+  background: #e7eaf0;
+}
+
+tbody > tr ::first-line {
+  color: #002557;
+}
+
+// Make the bottom text gray in the "Prüfungsleistung section"
+tbody > tr > td ::first-line {
+  color: #666;
+}
+
+// Vertically center the text in all courseresult rows
+tbody > tr > td.tbdata {
+  vertical-align: middle;
+}
+
+// The diagram
+tbody > tr > td > svg {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  .passed {
+    fill: #315584;
+  }
+
+  .failed {
+    fill: #dd2727aa;
+  }
+
+  .used {
+    fill: #315584;
+  }
+
+  .open {
+    fill: none;
+    stroke: #315584aa;
+  }
+
+  &.distribution-chart {
+    height: 3lh;
+  }
+
+  &.tries-counter {
+    height: 1lh;
+  }
+}
+
+// Not sure if this helps
+tbody > tr > td :has(svg) {
+  vertical-align: middle;
+}
+
+//Courseresults page
+tbody > tr > td.tbdata > svg.distribution-chart {
+  height: 2lh;
+}
+
+// Date styling
+// tr.tbdata means it only applies to the Examresults page
+tbody > tr.tbdata :nth-child(2 of td) {
+  vertical-align: middle;
+}
+// td.tbdata means it only applies to the Courseresults page
+tbody > tr :nth-child(3 of td.tbdata) {
+  vertical-align: middle;
+}
+
+// Grade styling
+tbody > tr :nth-child(3 of td) {
+  vertical-align: middle;
+  text-align: center;
+  font-size: 1.7rem;
+}
+
+// Align the Header texts
+thead > tr {
+  // "Note" / "Modulenote"
+  :nth-child(3) {
+    text-align: center;
+  }
+
+  // "Notenverteilung"
+  :nth-last-child(1),
+  :nth-last-child(2) {
+    text-align: center;
+  }
+}

src/styles/contentScripts/selma/my_exams.scss

@@ -0,0 +1,24 @@
+//Alternating background
+tbody > tr {
+  > th {
+    padding-top: 2rem;
+    padding-bottom: 0.5rem;
+    background: unset;
+  }
+
+  > td {
+    background: unset;
+    border-bottom: 1px solid #ccc;
+    padding-top: 0.5rem;
+    padding-bottom: 2rem;
+
+    &.module-description {
+      padding-right: 2rem;
+    }
+  }
+}
+
+tbody :nth-child(4n of tr),
+tbody :nth-child(4n - 1 of tr) {
+  background: #e7eaf0;
+}