fix: Responsive color buttons, cleanup

client/src/components/labels/LabelsStep/AddStep.jsx

@@ -15,8 +15,6 @@ import { useForm } from '../../../hooks';
 import LABEL_COLORS from '../../../constants/LabelColors';
 import Editor from './Editor';
 
-import styles from './AddStep.module.scss';
-
 const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -52,7 +50,7 @@ const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
           <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.createLabel')} className={styles.submitButton} />
+          <Button positive content={t('action.createLabel')} />
         </Form>
       </Popup.Content>
     </>

client/src/components/labels/LabelsStep/AddStep.module.scss

@@ -1,10 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-:global(#app) {
-  .submitButton {
-    margin-top: 12px;
-  }
-}

client/src/components/labels/LabelsStep/EditStep.jsx

@@ -89,19 +89,18 @@ const EditStep = React.memo(({ labelId, onBack }) => {
         })}
       </Popup.Header>
       <Popup.Content>
-        <div className={styles.content}>
-          <Form onSubmit={handleSubmit}>
-            <Editor data={data} onFieldChange={handleFieldChange} />
-            <div className={styles.actions}>
-              <Button positive content={t('action.save')} className={styles.submitButton} />
-              <Button
-                content={t('action.delete')}
-                className={styles.deleteButton}
-                onClick={handleDeleteClick}
-              />
-            </div>
-          </Form>
-        </div>
+        <Form onSubmit={handleSubmit}>
+          <Editor data={data} onFieldChange={handleFieldChange} />
+          <div className={styles.actions}>
+            <Button positive content={t('action.save')} />
+            <Button
+              type="button"
+              content={t('action.delete')}
+              className={styles.deleteButton}
+              onClick={handleDeleteClick}
+            />
+          </div>
+        </Form>
       </Popup.Content>
     </>
   );

client/src/components/labels/LabelsStep/EditStep.module.scss

@@ -4,15 +4,14 @@
  */
 
 :global(#app) {
+  .actions {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+  }
+
   .deleteButton {
     box-shadow: 0 1px 0 #cbcccc;
   }
-
-  .actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 12px;
-    gap: 12px;
-  }
 }

client/src/components/labels/LabelsStep/Editor.module.scss

@@ -5,12 +5,8 @@
 
 :global(#app) {
   .colorButton {
-    float: left;
-    height: 30px;
-    margin: 3px;
-    padding: 0;
+    margin: 0;
     position: relative;
-    width: 41.6px;
 
     &:hover {
       opacity: 0.9;
@@ -18,28 +14,43 @@
   }
 
   .colorButtonActive:before {
-    bottom: 1px;
     color: #ffffff;
     content: "Г";
     font-size: 16px;
     line-height: 32px;
     position: absolute;
-    right: 4px;
+    right: calc(50% - 5px);
     text-align: center;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
+    top: calc(50% - 17px);
     transform: rotate(-135deg);
-    width: 32px;
   }
 
   .colorButtons {
-    margin: -3px;
-    padding-bottom: 16px;
+    display: grid;
+    gap: 6px;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    margin-bottom: 12px;
+    max-height: 60vh;
+    overflow-y: auto;
 
-    &:after {
-      clear: both;
-      content: "";
-      display: table;
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
     }
   }
 

client/src/lib/popup/Popup.module.css

@@ -16,8 +16,6 @@
 }
 
 .wrapper {
-  display: flex;
-  flex-direction: column;
   border-radius: 3px !important;
   border-width: 0 !important;
   box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25),
@@ -26,13 +24,4 @@
   max-height: calc(100% - 70px);
   padding: 0 12px 12px !important;
   width: 304px;
-  overflow: auto;
-}
-
-@media (max-width: 900px) {
-  .wrapper {
-    width: 95vw;
-    max-width: 100vw;
-    max-height: 90vh;
-  }
 }

server/api/controllers/cards/assigned.js

@@ -1,57 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-module.exports = {
-  inputs: {},
-
-  async fn() {
-    const { currentUser } = this.req;
-
-    // Get all cards where the user is a member
-    const cardMemberships = await CardMembership.find({ userId: currentUser.id });
-    const cardIdsByMembership = cardMemberships.map((cm) => cm.cardId);
-
-    // Get all cards where the user is the author
-    const cardsByAuthor = await Card.find({ creatorUserId: currentUser.id });
-    const cardIdsByAuthor = cardsByAuthor.map((c) => c.id);
-
-    // Merge card ids
-    const cardIds = Array.from(new Set([...cardIdsByMembership, ...cardIdsByAuthor]));
-    if (cardIds.length === 0) {
-      return { items: [], included: {} };
-    }
-
-    // Get cards
-    const cards = await Card.qm.getByIds(cardIds);
-
-    // Collect related data
-    const users = await User.qm.getByIds(cards.map((c) => c.creatorUserId));
-    const cardMembershipsAll = await CardMembership.qm.getByCardIds(cardIds);
-    const cardLabels = await CardLabel.qm.getByCardIds(cardIds);
-    const taskLists = await TaskList.qm.getByCardIds(cardIds);
-    const taskListIds = taskLists.map((tl) => tl.id);
-    const tasks = await Task.qm.getByTaskListIds(taskListIds);
-    const attachments = await Attachment.qm.getByCardIds(cardIds);
-    const customFieldGroups = await CustomFieldGroup.qm.getByCardIds(cardIds);
-    const customFieldGroupIds = customFieldGroups.map((cfg) => cfg.id);
-    const customFields = await CustomField.qm.getByCustomFieldGroupIds(customFieldGroupIds);
-    const customFieldValues = await CustomFieldValue.qm.getByCardIds(cardIds);
-
-    return {
-      items: cards,
-      included: {
-        cardMemberships: cardMembershipsAll,
-        cardLabels,
-        taskLists,
-        tasks,
-        customFieldGroups,
-        customFields,
-        customFieldValues,
-        users: sails.helpers.users.presentMany(users, currentUser),
-        attachments: sails.helpers.attachments.presentMany(attachments),
-      },
-    };
-  },
-};

server/config/routes.js

@@ -227,8 +227,6 @@ module.exports.routes = {
     skipAssets: false,
   },
 
-  'GET /api/cards/assigned': 'cards/assigned',
-
   'GET /*': {
     view: 'index',
     skipAssets: true,