No animation update, yes

Author: AlexFlipnote

src/js/index.js

@@ -72,6 +72,10 @@ if (isExtension) {
   }
 
   chrome.storage.local.get({ ...extensionSettings }, function(items) {
+    if (!items.animations) {
+      document.body.classList.add("no-animations")
+    }
+
     // Start by setting language
     setLocale(items.language)
     const defaultTime = translate(items.language, "time.format.default")

src/js/options.js

@@ -32,6 +32,7 @@ function saveOptions(message, css="") {
 
   chrome.storage.local.set({
     language: document.getElementById("language").value,
+    animations: document.getElementById("animations").checked,
     custombg: custombg,
     show_time: document.getElementById("show_time").checked,
     show_date: document.getElementById("show_date").checked,
@@ -86,6 +87,10 @@ function restoreOptions() {
     language.value = items.language
     language.onchange = () => { saveOptions(`Language changed: ${language.value || "default"}`, "change") }
 
+    const animations = document.getElementById("animations")
+    animations.checked = items.animations
+    animations.onchange = () => { saveOptions(`Animations set: ${animations.checked}`, animations.checked ? "add" : "remove") }
+
     const showTime = document.getElementById("show_time")
     showTime.checked = items.show_time
     showTime.onchange = () => { saveOptions(`Show time set: ${showTime.checked}`, showTime.checked ? "add" : "remove") }

src/js/utils/settings.js

@@ -3,6 +3,7 @@
 export const extensionSettings = {
   language: "",
   searchbar: false,
+  animations: true,
   custombg: [],
   show_time: true,
   show_date: true,

src/manifest.json

@@ -4,7 +4,7 @@
   "name": "AlexFlipnote/Homepage",
   "description": "A website that gives you a clean homepage.",
   "homepage_url": "https://alexflipnote.dev/homepage/",
-  "version": "2.4.2",
+  "version": "2.4.3",
 
   "chrome_url_overrides": {
     "newtab": "index.html"

src/options.html

@@ -22,10 +22,15 @@ <h1 class="no-margin">General settings</h1>
             <option value="">Default: English (United Kingdom)</option>
           </select>
         </label>
-        <label><input type="checkbox" id="show-settings"> Show settings button</label>
-        <label><input type="checkbox" id="searchbar"> Show search bar</label>
-        <label><input type="checkbox" id="show_time"> Show time</label>
-        <label><input type="checkbox" id="show_date"> Show date</label>
+        <div class="flex-grid">
+          <div class="col-xs">
+            <label><input type="checkbox" id="show-settings"> Show settings button</label>
+            <label><input type="checkbox" id="searchbar"> Show search bar</label>
+            <label><input type="checkbox" id="show_time"> Show time</label>
+            <label><input type="checkbox" id="show_date"> Show date</label>
+            <label><input type="checkbox" id="animations"> Enable animations</label>
+          </div>
+        </div>
       </div>
 
       <div class="box-container">

src/scss/components/container.scss

@@ -0,0 +1,61 @@
+@use "sass:list";
+
+$grid-list: (
+  8.33%, 16.66%, 25%,
+  33.33%, 41.66%, 50%,
+  58.33%, 66.66%, 75%,
+  83.33%, 91.66%, 100%
+);
+
+.container {
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 1100px;
+  padding: 0 2em;
+  padding-top: 1.5em;
+  position: relative;
+  width: 100%;
+}
+
+.flex-grid {
+  $default-width: .5rem;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &.column { flex-direction: column; }
+  &.row { flex-direction: row; }
+
+  .col-xs,
+  .col-xs-1, .col-xs-2, .col-xs-3,
+  .col-xs-4, .col-xs-5, .col-xs-6,
+  .col-xs-7, .col-xs-8, .col-xs-9,
+  .col-xs-10, .col-xs-11, .col-xs-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    padding-left: $default-width;
+    padding-right: $default-width;
+  }
+
+  [class^="col-xs"] {
+    &:first-child { padding-left: 0; }
+    &:last-child { padding-right: 0; }
+  }
+
+  .col-xs {
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+  }
+
+  @each $g in $grid-list {
+    $i: list.index($grid-list, $g);
+
+    .col-xs-#{$i} {
+      flex-basis: $g;
+      max-width: $g;
+    }
+  }
+}

src/scss/components/global.scss

@@ -253,6 +253,18 @@ body {
   -webkit-user-select: none;
 }
 
+.no-animations {
+  .time-container,
+  #search-form,
+  #weather-container,
+  #bookmarks,
+  #background {
+    animation: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+  }
+}
+
 .no-overflow { overflow: hidden; }
 .no-margin { margin: 0; }
 .no-padding { padding: 0; }
@@ -269,3 +281,4 @@ body {
 .warning-bg { background-color: var(--warning) !important; }
 .error-bg { background-color: var(--error) !important; }
 .grey-bg { background-color: var(--grey) !important; }
+

src/scss/index.scss

@@ -11,3 +11,6 @@
 @use "components/settings";
 @use "components/timestamp";
 @use "components/weather";
+
+// Utils
+@use "components/container";