refs #753, use VideoTable in Courseware as well

elan-ev · Oct 30, 2023 · a618ab4 · a618ab4
1 parent 0324db6
commit a618ab4
Show file tree

Hide file tree

Showing 7 changed files with 391 additions and 531 deletions.
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -278,136 +278,6 @@ $action-menu-icon-size: 20px;
     }
 }
 
-.oc--episode-list--small {
-    clear: both;
-    padding-left: 0;
-    list-style: none;
-    overflow: auto;
-    height: auto;
-
-
-    .oc--grid-episode {
-        border-bottom: 1px solid $light-gray-color-40;
-        padding: 5px 1em 5px 1em;
-        position: relative;
-        overflow: hidden;
-        max-height: 70px;
-
-        display: grid;
-        grid-template-columns: auto auto minmax(auto, min-content) minmax(min-content,1fr) auto auto;
-
-        .oc--playercontainer {
-            background-color: transparent;
-            margin-top: 5px;
-            margin-right: 12px;
-
-            grid-column: 2;
-            grid-row: 1 / span 2;
-
-            img.oc--previewimage {
-                max-height: 60px;
-            }
-
-            .oc--duration{
-                bottom: 0px;
-                right: 0px;
-            }
-
-            .oc--views {
-                left: 0px;
-                bottom: 0px;
-            }
-
-            .oc--image-button {
-                height: 40px;
-                opacity: 0.6;
-            }
-        }
-
-        .oc--metadata-title {
-            grid-column: 3;
-            grid-row: 1;
-
-            margin: 10px 0 0 0;
-
-            overflow: hidden;
-
-            h2 {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-        }
-
-        .oc--date {
-            grid-column: 4;
-            grid-row: 1;
-
-            margin: 10px 0 0 0;
-
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .oc--tooltips {
-            grid-column: 5;
-            grid-row: 1;
-
-            .tooltip {
-                margin: 10px 5px 0 5px;
-            }
-        }
-
-        .oc--tags {
-            grid-column: 3 / span 3;
-            grid-row: 2;
-
-            margin-right: 5px;
-
-            white-space: nowrap;
-            overflow: auto;
-        }
-
-        .oc--metadata--empty {
-            grid-column: 3 / span 4;
-            grid-row: 1 / span 2;
-
-            h2, div {
-                margin-bottom: 5px;
-            }
-        }
-
-        .oc--flex-checkbox {
-            grid-column: 1;
-            grid-row: 1 / span 2;
-        }
-    }
-
-    .oc--sort-options {
-        grid-column: 6;
-        grid-row: 1 / span 2;
-
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding-left: 5px;
-        border-left: 1px solid $light-gray-color-40;
-        align-self: center;
-        white-space: nowrap;
-
-        img {
-            cursor: pointer;
-        }
-    }
-
-    .oc--ghost {
-        opacity: 0.5;
-        background: dodgerblue;
-    }
-}
-
 .oc--episode-table--small {
     clear: both;
     padding-left: 0;
@@ -1099,73 +969,6 @@ label.oc--file-upload {
 }
 
 @media only screen and (max-width: $major-breakpoint-large) {
-    .oc--episode-list--small {
-        grid-template-columns: auto 10em auto auto auto auto;
-        grid-template-rows: auto 1fr auto;
-
-        .oc--grid-episode {
-            max-height: 100px;
-
-            .oc--playercontainer {
-                grid-column: 2;
-                grid-row: 2 / span 2;
-
-                margin-top: 0;
-                padding-right: 11;
-            }
-
-            .oc--metadata-title {
-                grid-column: 2 / span 3;
-                grid-row: 1;
-
-                max-height: 1.4em;
-                margin-top: 4px;
-
-                h2 {
-                    margin-bottom: 0;
-                    overflow: auto;
-                }
-            }
-
-            .oc--date {
-                grid-column: 3 / span 3;
-                grid-row: 2;
-
-                margin-top: 0;
-
-                max-height: 2.8em;
-                white-space: normal;
-                overflow: hidden;
-            }
-
-            .oc--tags {
-                grid-column: 3 / span 3;
-                grid-row: 3;
-
-                max-height: 3em;
-                margin-bottom: 0;
-            }
-
-            .oc--actions-container {
-                grid-column: 6;
-                grid-row: 1 / span 3;
-            }
-
-            .oc--tooltips {
-                grid-column: 5;
-                grid-row: 1;
-
-                .tooltip {
-                    margin: 5px 5px 0 5px;
-                }
-            }
-
-            .oc--metadata--empty {
-                grid-row: 1 / span 3;
-            }
-        }
-    }
-
     .oc--episode-table--small {
 
         .oc--episode {

diff --git a/courseware/vueapp/components/CoursewareSearchBar.vue b/courseware/vueapp/components/CoursewareSearchBar.vue
@@ -19,15 +19,6 @@
                 />
             </li>
         </ul>
-
-        <select class="oc-cw-searchbar-sorter" v-model="inputSort" @change="setSort">
-            <option
-                v-for="sort in sorts"
-                v-bind:key="sort.key"
-                v-bind:value="sort">
-                <translate>{{ sort.text }}</translate>
-            </option>
-        </select>
     </div>
 </template>
 
@@ -36,50 +27,14 @@ export default {
     name: "CoursewareSearchBar",
 
     data() {
-        const sorts = [
-            {
-                field: 'created',
-                order: 'desc',
-                text: 'Datum hochgeladen: Neueste zuerst'
-            }, {
-                field: 'created',
-                order: 'asc',
-                text: 'Datum hochgeladen: Älteste zuerst'
-            }, {
-                field: 'title',
-                order: 'asc',
-                text: 'Titel: Alphabetisch'
-            }, {
-                field: 'title',
-                order: 'desc',
-                text: 'Titel: Umgekehrt Alphabetisch'
-            }
-        ];
-
         return {
-            sorts: sorts,
-            inputSort: sorts[0],
             inputSearch: ''
         }
     },
 
     methods: {
         doSearch() {
             this.$emit('doSearch', this.inputSearch);
-        },
-
-        resetSearch() {
-            this.inputSearch = '';
-            this.startSearch();
-        },
-
-        setSort() {
-            this.$emit('doSort', this.inputSort);
-        },
-
-        resetSort() {
-            this.inputSort = null;
-            this.startSort();
         }
     },
 }