4.4.0: Улучшения UI детализации задачи

VERSION

@@ -1 +1 @@
-4.3.0
+4.4.0

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/TaskDetail.css

@@ -199,7 +199,7 @@
 .task-actions-section {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.125rem;
 }
 
 .task-actions-bottom {
@@ -212,10 +212,12 @@
 .task-action-left {
   flex: 1;
   display: flex;
+  min-width: 0;
 }
 
 .complete-at-end-of-day-checkbox {
   margin-top: 0;
+  margin-bottom: 0.25rem;
 }
 
 .complete-at-end-of-day-checkbox .checkbox-label {
@@ -257,9 +259,11 @@
 }
 
 .task-action-complete-buttons {
+  flex: 1;
   display: flex;
   gap: 0.25rem;
   align-items: stretch;
+  min-width: 0;
 }
 
 .action-button {
@@ -290,19 +294,19 @@
 }
 
 .action-button-check {
-  width: calc(0.75rem * 2 + 1rem + 0.125rem * 2);
+  flex: 1;
-  min-width: calc(0.75rem * 2 + 1rem);
+  width: 100%;
+  min-width: 0;
   height: calc(0.75rem * 2 + 1rem + 0.125rem * 2);
-  padding: 0.75rem;
+  padding: 0.75rem 1.5rem;
-  flex-shrink: 0;
   box-sizing: border-box;
-  background: linear-gradient(to right, #10b981, #059669);
+  background: linear-gradient(to right, #6366f1, #8b5cf6);
   margin: 0;
 }
 
 .action-button-check:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
 .action-button-double-check {
@@ -327,13 +331,21 @@
 .action-button-save {
   flex: 1;
   width: 100%;
+  min-width: 0;
+  background: linear-gradient(to right, #10b981, #059669);
+}
+
+.action-button-save:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
 }
 
 
 .next-task-date-info {
   font-size: 0.875rem;
   color: #6b7280;
-  text-align: right;
+  text-align: left;
+  margin-top: 0.25rem;
 }
 
 .next-task-date-bold {

play-life-web/src/components/TaskDetail.jsx

@@ -837,9 +837,38 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
 
               {/* Кнопки действий */}
               <div className="task-actions-section">
+                {/* Чекбокс над кнопками */}
+                <div className="complete-at-end-of-day-checkbox">
+                  <label className="checkbox-label">
+                    <input
+                      type="checkbox"
+                      checked={completeAtEndOfDay}
+                      onChange={(e) => {
+                        console.log('Checkbox changed to:', e.target.checked)
+                        setCompleteAtEndOfDay(e.target.checked)
+                      }}
+                      disabled={isSaving || !canComplete}
+                      className="checkbox-input"
+                    />
+                    <span>Выполнить в конце дня</span>
+                  </label>
+                </div>
+                
                 <div className="task-actions-buttons">
-                  {/* Левая часть: кнопка "Сохранить" */}
+                  {/* Левая часть: кнопка "Выполнить" */}
                   <div className="task-action-left">
+                    <button
+                      onClick={handleComplete}
+                      disabled={isCompleting || !canComplete}
+                      className="action-button action-button-check"
+                      title={!canComplete && wishlistInfo ? 'Желание не разблокировано' : 'Выполнить'}
+                    >
+                      Выполнить
+                    </button>
+                  </div>
+                  
+                  {/* Правая часть: кнопка "Сохранить" */}
+                  <div className="task-action-complete-buttons">
                     <button
                       onClick={handleSave}
                       disabled={isSaving || !canComplete}
@@ -849,61 +878,14 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
                       {isSaving ? 'Сохранение...' : 'Сохранить'}
                     </button>
                   </div>
-                  
-                  {/* Правая часть: кнопки выполнения */}
-                  <div className="task-action-complete-buttons">
-                    {/* Кнопка с одинарной галочкой */}
-                    <button
-                      onClick={handleComplete}
-                      disabled={isCompleting || !canComplete}
-                      className="action-button action-button-check"
-                      title={!canComplete && wishlistInfo ? 'Желание не разблокировано' : 'Выполнить'}
-                    >
-                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M13.5 4L6 11.5L2.5 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                      </svg>
-                    </button>
-                    
-                    {/* Кнопка с двойной галочкой (только для повторяющихся задач) */}
-                    {!isOneTime && (
-                      <button
-                        onClick={handleCompleteFinally}
-                        disabled={isCompleting || !canComplete}
-                        className="action-button action-button-double-check"
-                        title="Выполнить окончательно"
-                      >
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                          <path d="M20 6L9 17l-5-5"/>
-                          <path d="M20 12L9 23l-5-5"/>
-                        </svg>
-                      </button>
-                    )}
-                  </div>
                 </div>
                 
-                {/* Чекбокс и дата на одной линии */}
+                {/* Дата слева */}
-                <div className="task-actions-bottom">
+                {!isOneTime && nextTaskDate && (
-                  <div className="complete-at-end-of-day-checkbox">
+                  <div className="next-task-date-info">
-                    <label className="checkbox-label">
+                    Следующая: <span className="next-task-date-bold">{nextTaskDate}</span>
-                      <input
-                        type="checkbox"
-                        checked={completeAtEndOfDay}
-                        onChange={(e) => {
-                          console.log('Checkbox changed to:', e.target.checked)
-                          setCompleteAtEndOfDay(e.target.checked)
-                        }}
-                        disabled={isSaving || !canComplete}
-                        className="checkbox-input"
-                      />
-                      <span>Выполнить в конце дня</span>
-                    </label>
                   </div>
-                  {!isOneTime && nextTaskDate && (
+                )}
-                    <div className="next-task-date-info">
-                      <span className="next-task-date-bold">{nextTaskDate}</span>
-                    </div>
-                  )}
-                </div>
               </div>
             </>
           )}