Catalog courses as list (unsupported#112)

* catalog_courses_as_list

CSS styles for a Catalog instance to display courses in a list instead of the default grid view.

* fix readme typo for screenshot

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!

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%;
+}