diff --git a/branding/css/catalog_courses_as_list/README b/branding/css/catalog_courses_as_list/README new file mode 100644 index 0000000..ac35673 --- /dev/null +++ b/branding/css/catalog_courses_as_list/README @@ -0,0 +1,10 @@ +# Catalog Courses as List +Adding this CSS to a Catalog Instance will make it display courses in a list format instead of in a tile grid. The list should scale down on mobile devices. +Note: As with any part of Catalog, the links that these CSS Selectors target could change at any time. Be sure to check your beta environment before each production release to be sure that none of your JS/CSS has broken due to an upcoming code change. + +![Canvas Catalog courses displayed in a list format](screenshot.png) + +## Support +This is an unsupported, community-created project. Keep that in mind. Instructure won't be able to help you fix or debug this. That said, the community will hopefully help support and keep both the script and this documentation up-to-date. + +Good luck! diff --git a/branding/css/catalog_courses_as_list/catalog_courses_as_list.css b/branding/css/catalog_courses_as_list/catalog_courses_as_list.css new file mode 100644 index 0000000..f8b9be2 --- /dev/null +++ b/branding/css/catalog_courses_as_list/catalog_courses_as_list.css @@ -0,0 +1,43 @@ +/* Working as of 6/21/19 + * Displays Catalog Courses in a list view + * Version 0.1 + */ + +#listings .col-md-3, +#listings .col-sm-6, +#listings .col-xs-12 { + width: 100%; + float: none; +} + +#listings .product-tile { + padding: 1%; +} + +#listings .product-image, +#listings .product-account-image-wrapper { + display: none; +} + +#listings .product-heading, +#listings .product-description, +#listings .product-footer { + display: inline-block; + width: auto; + border: 0 none; + margin: 0 1em; + padding: 0; + vertical-align: top; + height: auto; + +} +#listings .product-heading, +#listings .product-footer { + width: 20%; +} +#listings .product-description { + width: calc(60% - 2% - 6em) +} +#listings .product-footer { + width: 20%; +} diff --git a/branding/css/catalog_courses_as_list/screenshot.png b/branding/css/catalog_courses_as_list/screenshot.png new file mode 100644 index 0000000..8f2ff39 Binary files /dev/null and b/branding/css/catalog_courses_as_list/screenshot.png differ