diff --git a/OpenCast.class.php b/OpenCast.class.php index fe1e1904c..821befab7 100644 --- a/OpenCast.class.php +++ b/OpenCast.class.php @@ -60,6 +60,7 @@ public function __construct() // } } + $this->addStylesheet("assets/css/courseware.scss"); VersionHelper::get()->registerCoursewareBlock($this); } diff --git a/assets/css/courseware.scss b/assets/css/courseware.scss new file mode 100644 index 000000000..732bcd85b --- /dev/null +++ b/assets/css/courseware.scss @@ -0,0 +1,134 @@ +/* * * * * * * * * * * * * * * * * * */ +/* C O U R S E W A R E B L O C K */ +/* * * * * * * * * * * * * * * * * * */ + +.oc-cw-searchbar { + clear: both; + position: relative; + display: flex; + flex-direction: row; +} + +.oc-cw-searchbar .oc-cw-searchbar-container { + list-style-type: none; + padding: 0; + margin: 0; + width: 100%; + float: left; + margin-right: 5px; + flex: 3; + + display: flex; + flex-direction: row; + + border: 1px solid var(--light-gray-color-40); +} + +.oc-cw-searchbar .oc-cw-searchbar-container li { + padding: none; + white-space: nowrap; +} + +.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input { + padding: 8px; + width: 100%; +} + +.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input { + padding: 0px; + font-size: 16px; + border: none; + width: 100%; +} + +.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus { + outline: none; +} + +.oc-cw-searchbar .oc-cw-searchbar-sorter { + flex: 1; + min-width: 12em; + height: 40px !important; +} + +.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-search-icon { + display: flex; + align-items: center; + justify-content: center; + width: 35px; + + border-left: thin solid $content-color-40; + background-color: $content-color-20; + + cursor: pointer; +} + +.oc-cw-video-list { + margin-top: 1em; +} + +.oc-cw-video-list ul { + clear: both; + padding-left: 0; + list-style: none; + overflow: auto; + height: auto; +} + +.oc-cw-video-list ul li { + background: var(--dark-gray-color-5); + border-right-width: 1px; + border-left-width: 1px; + border-width: 1px 0 0; + margin-bottom: 1em; + padding: 1em; + display: block; + position: relative; + overflow: hidden; + border-color: #ddd; + cursor: pointer; +} + +.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected { + background: var(--content-color-40); +} + +.oc-cw-pagination { + margin-bottom: 1em; + display: flex; +} + +.oc-cw-pagination button { + padding: 8px 16px; + border: 1px solid #ddd; + float: left; + cursor: pointer; +} + +.oc-cw-pagination button:disabled { + cursor: default +} + +.oc-cw-pagination .active { + background-color: var(--base-color-60); + color: white; + cursor: default; +} + +.oc-cw-loadingbar { + border-radius: 15px; + background-color: var(--dark-gray-color-10); + height: 15px; + width: 300px; + display: block; +} + +.oc-cw-loadingbar:not(:last-of-type) { + margin-bottom: 5px; +} + +iframe.oc_cw_iframe { + border: none; + width: 100%; + height: 600px; +} diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss index 183d84647..aee9e9426 100644 --- a/assets/css/opencast.scss +++ b/assets/css/opencast.scss @@ -1343,127 +1343,6 @@ label.oc--file-upload { } } - -/* * * * * * * * * * * * * * * * * * */ -/* C O U R S E W A R E B L O C K */ -/* * * * * * * * * * * * * * * * * * */ - -.oc-cw-searchbar { - clear: both; - position: relative; - display: flex; - flex-direction: row; -} -.oc-cw-searchbar .oc-cw-searchbar-container { - list-style-type: none; - padding: 0; - margin: 0; - width: 100%; - float: left; - margin-right: 5px; - flex: 2; - - display: flex; - flex-direction: row; - - border: 1px solid var(--light-gray-color-40); -} -.oc-cw-searchbar .oc-cw-searchbar-container li { - padding: none; - white-space: nowrap; -} - -.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input { - padding: 8px; - width: 100%; -} - -.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input > input { - padding: 0px; - font-size: 16px; - border: none; - background: var(--dark-gray-color-5); - width: 100%; -} - -.oc-cw-searchbar .oc-cw-searchbar-container .oc-cw-searchbar-input input:focus { - outline: none; -} - -.oc-cw-searchbar .oc-cw-searchbar-sorter { - flex: 1; - height: 40px !important; -} - - -.oc-cw-video-list { - margin-top: 1em; -} - -.oc-cw-video-list ul { - clear: both; - padding-left: 0; - list-style: none; - overflow: auto; - height: auto; -} -.oc-cw-video-list ul li { - background: var(--dark-gray-color-5); - border-right-width: 1px; - border-left-width: 1px; - border-width: 1px 0 0; - margin-bottom: 1em; - padding: 1em; - display: block; - position: relative; - overflow: hidden; - border-color: #ddd; - cursor: pointer; -} - -.oc-cw-video-list ul li:hover, .oc-cw-video-list ul li.selected { - background: var(--content-color-40); -} - -.oc-cw-pagination { - margin-bottom: 1em; - display: flex; -} - -.oc-cw-pagination button { - padding: 8px 16px; - border: 1px solid #ddd; - float: left; - cursor: pointer; -} - -.oc-cw-pagination button:disabled { - cursor: default -} - -.oc-cw-pagination .active { - background-color: var(--base-color-60); - color: white; - cursor: default; -} - -.oc-cw-loadingbar { - border-radius: 15px; - background-color: var(--dark-gray-color-10); - height: 15px; - width: 300px; - display: block; -} -.oc-cw-loadingbar:not(:last-of-type) { - margin-bottom: 5px; -} - -iframe.oc_cw_iframe { - border: none; - width: 100%; - height: 600px; -} - /* * * * * * * * * * * */ /* M E S S A G E S * */ /* * * * * * * * * * * */ diff --git a/courseware/vueapp/components/CoursewareSearchBar.vue b/courseware/vueapp/components/CoursewareSearchBar.vue index 8551f7b18..a008a811c 100644 --- a/courseware/vueapp/components/CoursewareSearchBar.vue +++ b/courseware/vueapp/components/CoursewareSearchBar.vue @@ -10,6 +10,14 @@ @submit="doSearch" /> +