☰

Udemy Notifications Enhanced

Enhances the Udemy notification area to show more and make the buttons more accessible.

  1. // ==UserScript==
  2. // @name         Udemy Notifications Enhanced
  3. // @namespace    https://github.com/lundeen-bryan
  4. // @author       lundeen-bryan
  5. // @version      1.0.1
  6. // @description  Enhances the Udemy notification area to show more and make the buttons more accessible.
  7. // @match        https://www.udemy.com/user/view-notifications/
  8. // @icon         tbd
  9. // @homepage     tbd
  10. // @license      MIT
  11. // @run-at       document-end
  12. // @noframes     n/a
  13. // @unwrap       n/a
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     var css = `
  20.     /* Your CSS goes here */
  21.     /* Make main container flexible and stack children vertically */
  22.     [data-testid="notification-tab-pane-student"] {
  23.         display: flex;
  24.         flex-direction: column;
  25.     }
  26.     /* Move notification list to end
  27.     *  Make text wide enough to fill
  28.     *  the width of the screen. */
  29.     .activity-notifications-module--notification-list--3I_hF {
  30.         order: 3;
  31.         width: 220%;
  32.         margin: 0 auto;
  33.         max-width: 1500px;
  34.     }
  35.     /* Move 'load more' and 'mark all as read' to start */
  36.     .activity-notifications-module--load-more-row--3_jVO, .activity-notifications-module--footer--3bQw7 {
  37.         order: 1;
  38.     }
  39.     /* Align 'load more' contents to left */
  40.     .activity-notifications-module--load-more-row--3_jVO {
  41.         justify-content: left;
  42.     }
  43.     .activity-notification-module--notification-info--3Yr2y {
  44.         height: 170px;
  45.     }
  46.     /* create CRLF after title then, normal font for the body text */
  47.     span[data-purpose="safely-set-inner-html:activity-notification:notification-template"] span.subject::before {
  48.       content: "\\A";
  49.       white-space: pre;
  50.     }
  51.     .subject {
  52.       font-weight: normal;
  53.     }
  54.     /* Text area for message body */
  55.     .item-card-module--item-card-title--S729p{
  56.       height: 250px;
  57.     }
  58.     /* move the msg body down a little to reveal the time posted */
  59.     .item-card-module--item-card-title--S729p{
  60.      padding-top: 5px;
  61.     }
  62.     /* increase msg vertical scroll area */
  63.     .activity-notifications-module--notification-list--3I_hF{
  64.       max-height:300rem
  65.     }
  66.     /* size of the card area where messages are shown */
  67.     .activity-notification-module--card-container--3C8QZ {
  68.       height: 300px
  69.     }
  70.     `;
  71.  
  72.     var style = document.createElement('style');
  73.     style.type = 'text/css';
  74.     style.innerHTML = css;
  75.     document.head.appendChild(style);
  76. })();