Card settings Part 2

even more styles

README.md

@@ -2,6 +2,8 @@
 
 # Betterer Canvas
 
+name idea: even better canvas
+
 I don't like the direction bettercanvas (bettercampus) is heading so I forked it
 
 They tried to change license but forgot to wipe the codebase for thier MIT licensed version, so this is a fully legal fork.
@@ -56,14 +58,14 @@ Better Canvas introduces improvements to the Canvas user interface:
 - GPA presets
 - Scheduled Reminder Popups (broken) 
 - searching themes (the original didn't actually impliment that)
-- Card Styles (image size, card roundness, card spacing)
+- Card Styles (image size, card roundness, card spacing, width, height)
 
 ## Planned Features
 - custom backgrounds
 - custom side logo
 - widgets (music, timer)
 - fix darkmode fixer
-- more card settings (Width, Height, Rotation) (in progress, to be theme compatible)
+- more card settings (in progress, to be theme compatible)
 - calender sync
 - update better todo list
 - better sidebar
@@ -75,6 +77,9 @@ Better Canvas introduces improvements to the Canvas user interface:
 - theme history
 - mail assistent
 - transcribe lecture
+- hover assignment preview
+- better what if grade
+- when opening assignments it will show you "if you get a 0 on this your grade will be _"
 
 ## Dev Installation
 

html/popup.html

@@ -671,7 +671,14 @@
         </div>
         <div class="option-container">
             <h3 class="header-small">More Card Styles</h3>
-            <!-- Image Size, Roundness, Width, Space Between -->
+
+            <div class="sub-options">
+                <div class="sub-option" style="margin-top:5px">
+                    <input type="checkbox" id="customCardStyles" name="customCardStyles">
+                    <label for="customCardStyles" class="sub-text">Custom Card Styles</label>
+                </div>
+            </div>
+
             <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                 <div class="sub-option">
                     <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
@@ -689,8 +696,22 @@
                 </div>
                 <div class="sub-option">
                     <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
-                        <span class="sub-text" style="width:75px;">Card Spacing</span>
-                        <input type="number" id="cardSpacing" class="card-input" min="0" max="300" value="1" style="width: 80px;">
+                        <span class="sub-text" style="width:75px;">Extra Card Spacing</span>
+                        <input type="number" id="cardSpacing" class="card-input" max="300" value="1" style="width: 80px;">
+                        <span class="sub-text">px</span>
+                    </div>
+                </div>
+                <div class="sub-option">
+                    <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
+                        <span class="sub-text" style="width:75px;">Card Width</span>
+                        <input type="number" id="cardWidth" class="card-input" min="0" max="300" value="1" style="width: 80px;">
+                        <span class="sub-text">px</span>
+                    </div>
+                </div>
+                <div class="sub-option">
+                    <div style="margin-top: 5px;display: flex;gap: 8px;align-items: center">
+                        <span class="sub-text" style="width:75px;">Card Height</span>
+                        <input type="number" id="cardHeight" class="card-input" min="0" max="300" value="1" style="width: 80px;">
                         <span class="sub-text">px</span>
                     </div>
                 </div>

js/background.js

@@ -94,8 +94,11 @@ chrome.runtime.onInstalled.addListener(function () {
             "browser_show_likes": false,
             "custom_styles": "",
             "imageSize": 100,
-            "cardRoundness": 4,
-            "cardSpacing": 36,
+            "cardRoundness": 5,
+            'cardSpacing': 0,
+            "cardWidth": 262,
+            "cardHeight": 150,
+            "customCardStyles": false,
         }
     };
 

js/content.js

@@ -368,6 +368,9 @@ function applyOptionsChanges(changes) {
             case ("imageSize"):
             case ("cardRoundness"):
             case ("cardSpacing"):
+            case ("cardWidth"):
+            case ("cardHeight"):
+            case ("customCardStyles"):
                 applyAestheticChanges();
                 break;
         }
@@ -2005,9 +2008,13 @@ function applyAestheticChanges() {
     if (options.hide_feedback === true) style.textContent += ".recent_feedback {display: none}";
     if (options.full_width === true) style.textContent += ".ic-Layout-wrapper{max-width:100%!important}";
 
-    if (options.imageSize !== undefined && options.imageSize !== 100) style.textContent += `.ic-DashboardCard__header_image {transform: scale(${options.imageSize / 100})!important; }`;
-    if (options.cardRoundness !== undefined && options.cardRoundness !== 4) style.textContent += `.ic-DashboardCard {border-radius: ${options.cardRoundness}px!important;}`;
-    if (options.cardSpacing !== undefined && options.cardSpacing !== 36) style.textContent += `.ic-DashboardCard {margin: ${options.cardSpacing / 2}px!important;}`;
+    if (options.customCardStyles === true) {
+        if (options.imageSize !== undefined && options.imageSize !== 100) style.textContent += `.ic-DashboardCard__header_image {transform: scale(${options.imageSize / 100})!important; }`;
+        if (options.cardRoundness !== undefined && options.cardRoundness !== 5) style.textContent += `.ic-DashboardCard {border-radius: ${options.cardRoundness}px!important;}`;
+        if (options.cardSpacing !== undefined && options.cardSpacing !== 0) style.textContent += `.ic-DashboardCard {margin-right: ${options.cardSpacing / 2}px!important; margin-bottom: ${options.cardSpacing / 2}px!important;}`;
+        if (options.cardWidth !== undefined && options.cardWidth !== 10) style.textContent += `.ic-DashboardCard {width: ${options.cardWidth}px!important;}`;
+        if (options.cardHeight !== undefined && options.cardHeight !== 10) style.textContent += `.ic-DashboardCard {height: ${options.cardHeight}px!important;}`;
+    }
 
     if (options.custom_styles !== "") style.textContent += options.custom_styles;
     document.documentElement.appendChild(style);

js/popup.js

@@ -1,5 +1,5 @@
 const syncedSwitches = ['remind', 'tab_icons', 'hide_feedback', 'dark_mode', 'remlogo', 'full_width', 'auto_dark', 'assignments_due', 'gpa_calc', 'gradient_cards', 'disable_color_overlay', 'dashboard_grades', 'dashboard_notes', 'better_todo', 'condensed_cards'];
-const syncedSubOptions = ['todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'auto_dark_start', 'auto_dark_end', 'num_assignments', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'num_todo_items', 'hover_preview', 'scheduledReminder', 'scheduledReminderTime'];
+const syncedSubOptions = ['todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'auto_dark_start', 'auto_dark_end', 'num_assignments', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'num_todo_items', 'hover_preview', 'scheduledReminder', 'scheduledReminderTime', 'customCardStyles'];
 const localSwitches = [];
 
 //const apiurl = "http://localhost:3000";
@@ -87,8 +87,11 @@ const defaultOptions = {
         "scheduledReminder": false,
         "scheduledReminderTime": { "hour": "09", "minute": "00" },
         "imageSize": 100,
-        "cardRoundness": 4,
-        "cardSpacing": 36,
+        "cardRoundness": 5,
+        "cardSpacing": 0,
+        "cardWidth": 262,
+        "cardHeight": 150,
+        "customCardStyles": false,
     }
 };
 
@@ -220,11 +223,27 @@ function setupCardSpacingInput(initial) {
     });
 }
 
+function setupCardWidthInput(initial) {
+    let el = document.querySelector("#cardWidth");
+    el.value = initial;
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "cardWidth": e.target.value });
+    });
+}
+
+function setupCardHeightInput(initial) {
+    let el = document.querySelector("#cardheight");
+    el.value = initial;
+    el.addEventListener("input", (e) => {
+        chrome.storage.sync.set({ "cardheight": e.target.value });
+    });
+}
+
 function setup() {
 
     const menu = {
         "switches": syncedSwitches,
-        "checkboxes": ['browser_show_likes', 'gpa_calc_weighted', 'gpa_calc_cumulative', /*'card_method_date',*/ 'show_updates', 'todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'hover_preview', 'scheduledReminder'],
+        "checkboxes": ['browser_show_likes', 'gpa_calc_weighted', 'gpa_calc_cumulative', /*'card_method_date',*/ 'show_updates', 'todo_colors', 'device_dark', 'relative_dues', 'card_overdues', 'todo_overdues', 'gpa_calc_prepend', 'auto_dark', 'assignment_date_format', 'todo_hr24', 'grade_hover', 'hide_completed', 'hover_preview', 'scheduledReminder', 'customCardStyles'],
         "tabs": {
             "advanced-settings": { "setup": displayAdvancedCards, "tab": ".advanced" },
             "gpa-bounds-btn": { "setup": displayGPABounds, "tab": ".gpa-bounds-container" },
@@ -244,9 +263,11 @@ function setup() {
             { "identifier": "card_method_dashboard", "setup": (initial) => setupDashboardMethod(initial) },
             { "identifier": "custom_styles", "setup": (initial) => setupCustomStyle(initial) },
             { "identifier": "scheduledReminderTime", "setup": (initial) => setupScheduledReminderInput(initial) },
-            { "identifier": "image_size", "setup": (initial) => setupImageSizeInput(initial) },
-            { "identifier": "card_roundness", "setup": (initial) => setupCardRoundnessInput(initial) },
-            { "identifier": "card_spacing", "setup": (initial) => setupCardSpacingInput(initial) }
+            { "identifier": "imageSize", "setup": (initial) => setupImageSizeInput(initial) },
+            { "identifier": "cardRoundness", "setup": (initial) => setupCardRoundnessInput(initial) },
+            { "identifier": "cardSpacing", "setup": (initial) => setupCardSpacingInput(initial) },
+            { "identifier": "cardWidth", "setup": (initial) => setupCardWidthInput(initial) },
+            { "identifier": "cardHeight", "setup": (initial) => setupCardHeightInput(initial) },
         ],
     }
 
@@ -669,6 +690,16 @@ function setup() {
         chrome.storage.sync.set({ "cardSpacing": value });
         document.querySelector("#cardSpacingValue").textContent = value + "px";
     })
+    document.getElementById("cardWidth").addEventListener("input", (e) => {
+        const value = e.target.value;
+        chrome.storage.sync.set({ "cardWidth": value });
+        document.querySelector("#cardWidthValue").textContent = value + "%";
+    });
+    document.getElementById("cardHeight").addEventListener("input", (e) => {
+        const value = e.target.value;
+        chrome.storage.sync.set({ "cardHeight": value });
+        document.querySelector("#cardHeightValue").textContent = value + "%";
+    });
 }
 
 function applyGPAPreset(bounds) {