Improve Nothing styles for small screens

Author: JuanKman94

assets/components.js

@@ -9,6 +9,12 @@ window.LIST_EVENTS = {
   DELETE: 'list:delete',
 }
 
+/**
+ * @param {string} eventName
+ * @param {string} task
+ * @param {boolean} isDone
+ * @param {HTMLElement} target
+ */
 function dispatchTaskEvent(eventName, task, isDone, target) {
   target = target || document
   const taskChangeEvent = new CustomEvent(eventName, { detail: { task: task, done: isDone } })
@@ -31,8 +37,10 @@ class TaskControl extends HTMLElement {
   static TAG = 'task-control'
   static TEMPLATE_ID = 'newtask-template'
 
+  /** @return {HTMLElement} */
   get form() { return this.querySelector('form') }
 
+  /** @return {HTMLElement} */
   get taskList() { return Sortable.utils.closest(this, TaskList.TAG) }
 
   setup() {
@@ -69,6 +77,7 @@ class TaskItem extends HTMLElement {
   static TAG = 'task-item'
   static TEMPLATE_ID = 'taskitem-template'
 
+  /** @return {HTMLElement} */
   get checkbox() { return this.querySelector('input[type=checkbox]') }
 
   get done() { return this.checkbox.checked }
@@ -84,6 +93,7 @@ class TaskItem extends HTMLElement {
     }
   }
 
+  /** @return {HTMLElement} */
   get label() { return this.querySelector('.task-item--name') }
 
   get name() { return this.getAttribute('name') }

assets/components_base.js

@@ -1,5 +1,10 @@
-// https://javascript.info/mixins
-// Object.assign(ComponentClass, CustomElementStaticMixin)
+/**
+ * @example Add mixin to a class
+ *
+ *   Object.assign(ComponentClass, CustomElementStaticMixin)
+ *
+ * @see https://javascript.info/mixins
+ */
 const CustomElementStaticMixin = {
   /**
    * Create custom element with provided attributes
@@ -22,7 +27,11 @@ const CustomElementStaticMixin = {
   },
 }
 
-// Object.assign(ComponentClass.prototype, CustomElementMixin)
+/**
+ * @example Add mixin to a class
+ *
+ *   Object.assign(ComponentClass.prototype, CustomElementMixin)
+ */
 const CustomElementMixin = {
   connectedCallback() {
     this.events = this.events || []
@@ -74,9 +83,13 @@ const CustomElementMixin = {
   },
 }
 
-// for (let k in CustomElementGetSetMixin) {
-//   Object.defineProperty(ComponentClass.prototype, k, CustomElementGetSetMixin[k])
-// }
+/**
+ * @example Add getters and setters to class prototype
+ *
+ *   for (let k in CustomElementGetSetMixin) {
+ *     Object.defineProperty(ComponentClass.prototype, k, CustomElementGetSetMixin[k])
+ *   }
+ */
 const CustomElementGetSetMixin = {
   template: {
     get: function() {

assets/styles.css

@@ -430,11 +430,20 @@ task-item .delete,
   font-size: 1.5em;
 }
 
+.task-control label {
+  width: 100%;
+}
+
+.task-control .icon {
+  margin: 0 0 0 0.5rem;
+  flex: 0 1 auto;
+}
+
 .task-control .text-field {
   font-family: var(--theme-font, 'xkcd');
-  min-width: 80%;
-  max-width: 85%;
+  flex: 1 0 80%;
   flex-grow: 1;
+  width: initial;
 }
 
 fieldset {

bin/run bin/dev

@@ -252,7 +252,7 @@ <h3 class="task-list--title">
   <template id="newtask-template">
     <form action="#" class="new-task--form">
       <label for="task">
-        <span class="icon mx-2">+</span>
+        <span class="icon">+</span>
         <span class="sr-only">Task</span>
 
         <input