[DONE] Code formatting (#979)

* Use Stylelint (https://stylelint.io/) with "stylelint-config-standard" coding rules to uniformize all Esup-Pod CSS files.
+ minor Py code formatting

* add minor code styling corrections

* remove unused data-attribute

* Auto Correct CSS by Prettier

* Remove unused commented CSS lines

* Remove CSS comments
+ correct a wrong default value "VOSK" for TRANSCRIPTION_TYPE

.github/workflows/code_formatting.yml

@@ -17,9 +17,11 @@ jobs:
           git config user.email [email protected]
           git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
 
-      # Prettify js code with prettier
+      # Prettify js+css code with prettier
       - name: Running prettier
-        run: npx prettier --write pod/*/static/**/*.js
+        run: |
+          npx prettier --write pod/*/static/**/*.js
+          npx prettier --write pod/*/static/**/*.css
 
       - name: Check for modified files
         id: prettier-git-check

.pa11yci

@@ -16,7 +16,7 @@
         "http://localhost:9090/video/0001-video-test/",
         "http://localhost:9090/live/events/"
     ],
-    "todo":[
+    "todo": [
         "These urls are not A11y compliant yet, and need more work from 3rd party",
         "http://localhost:9090/video/stats_view/videos/"
     ]

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}

pod/authentication/backends.py

@@ -20,8 +20,9 @@ def is_staff_affiliation(affiliation):
 class ShibbBackend(ShibbolethRemoteUserBackend):
     def authenticate(self, request, remote_user, shib_meta):
         """
-        The username passed as ``remote_user`` is considered trusted.  Use the
-        username to get or create the user.
+        Username passed as `remote_user` is considered trusted.
+
+        Use the username to get or create the user.
         """
         if not remote_user:
             return

pod/bbb/static/css/bbb.css

@@ -1,15 +1,22 @@
+/**
+ * Esup-Pod BBB styles
+ */
+
 #bbb_meetings_list .card-header {
   background: var(--color-black-alpha);
-  padding: 0 .25rem;
+  padding: 0 0.25rem;
   z-index: 9;
 }
-#bbb_meetings_list .card-header .text-muted{
-	color: var(--color-white) !important;
+
+#bbb_meetings_list .card-header .text-muted {
+  color: var(--color-white) !important;
 }
+
 /* To always see publish button */
-#bbb_meetings_list .infinite-item .card-body{
-height: auto !important;
+#bbb_meetings_list .infinite-item .card-body {
+  height: auto !important;
+}
+
+#bbb_meetings_list .infinite-item .card-body footer a {
+  width: 100% !important;
 }
-#bbb_meetings_list .infinite-item .card-body footer a{
-width: 100% !important;
-}

pod/chapter/static/css/chapters.css

@@ -1,90 +1,107 @@
+/**
+ * Esup-Pod Chapter styles
+ */
 
 /*** Table scroll ***/
 table.scroll {
-	width: 100%;
-	border-collapse: collapse;
-	border-spacing: 0;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
+
 table.scroll .btn-sm,
 table.scroll .btn-group-sm > .btn {
-	border-radius: 3px;
-	font-size: 12px;
-	line-height: 0.5;
-	padding: 5px 10px;
+  border-radius: 3px;
+  font-size: 12px;
+  line-height: 0.5;
+  padding: 5px 10px;
 }
+
 table.scroll tbody,
 table.scroll thead {
-	display: block;
+  display: block;
 }
+
 table.scroll thead tr th {
-	height: 27px;
-	line-height: 27px;
-	text-align: left;
+  height: 27px;
+  line-height: 27px;
+  text-align: left;
 }
+
 table.scroll tbody {
-	max-height: 200px;
-	overflow-y: auto;
-	overflow-x: hidden;
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
+
 table.scroll tbody td,
 table.scroll thead th {
-	width: 10%;
-	height: 20px;
-	white-space: nowrap;
-	line-height: 20px;
+  width: 10%;
+  height: 20px;
+  white-space: nowrap;
+  line-height: 20px;
 }
+
 table.scroll thead th.chapter_title,
 table.scroll thead th.chapter_time_start,
 table.scroll thead th.chapter_time_end {
-	white-space: nowrap;
+  white-space: nowrap;
 }
+
 #list_chapter .panel-heading,
 #form_chapter .panel-heading {
-	border-bottom: 1px solid transparent;
-	border-top-left-radius: 3px;
-	border-top-right-radius: 3px;
-	padding: 4px 15px;
+  border-bottom: 1px solid transparent;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  padding: 4px 15px;
 }
+
 #form_new {
-	padding-left: 12px;
-	padding-bottom: 10px;
+  padding-left: 12px;
+  padding-bottom: 10px;
 }
+
 #form_chapter,
 #form_chapter_import,
 #form_vtt {
-	padding: 10px;
+  padding: 10px;
 }
+
 form#form_chapter,
 form#form_chapter_import {
-	background-color: rgba(0, 0, 0, .05);
+  background-color: rgba(0 0 0 0.05);
 }
+
 .form-group.row p {
-	padding: 2px;
+  padding: 2px;
 }
 
 /** Filepicker override **/
 div.file-picker-overlay,
 div.file-picker,
 ul.css-tabs a {
-	box-sizing: content-box;
+  box-sizing: content-box;
 }
+
 textarea#id_description {
-	line-height: normal;
+  line-height: normal;
 }
+
 div.file-picker-overlay input[type="text"],
-div.file-picker-overlay textarea, 
+div.file-picker-overlay textarea,
 div.file-picker-overlay select {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 5px 6px;
-    margin-top: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 5px 6px;
+  margin-top: 0;
 }
+
 .file-list a:hover {
-	cursor: pointer;
-	color: #007bff !important;
+  cursor: pointer;
+  color: #007bff !important;
 }
 
 /** Bootstrap override **/
 .card-title {
-	margin: .45rem;
-}
+  margin: 0.45rem;
+}

pod/chapter/static/css/videojs-chapters.css

@@ -1,16 +1,18 @@
+/**
+ * Esup-Pod video-js chapter styles
+ */
+
 .chapters-list.inactive,
 .chapters-list.active {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: 20%;
-  background-color: rgba(43, 51, 63, .7);
+  background-color: rgba(43 51 63 0.7);
   overflow-y: auto;
-  /*border: 2px solid black;*/
   cursor: default;
   z-index: 2;
-
 }
 
 .chapters-list.inactive {
@@ -45,9 +47,17 @@
   display: list-item;
   list-style-type: none;
   text-align: -webkit-match-parent;
-  /*background-color: rgba(0, 0, 0, 0.8);*/
   margin: 0 3px;
-  border-top: 1px solid rgba(0, 0, 0, .8);
+  border-top: 1px solid rgba(0 0 0 0.8);
+}
+
+.chapters-list ol li a {
+  display: block;
+  padding: 0.7rem 1rem;
+  transition: 0.3s;
+  color: #fff;
+  text-align: left;
+  font-size: 1.3em;
 }
 
 .chapters-list ol li a:hover,
@@ -58,15 +68,6 @@
   cursor: pointer;
 }
 
-.chapters-list ol li a {
-  display: block;
-  padding: .7rem 1rem;
-  transition: .3s;
-  color: #fff;
-  text-align: left;
-  font-size: 1.3em;
-}
-
 #chapters {
   display: none;
 }