Merge pull request #565 from marwyg/fix/issue-540-misplaced-submit-bu…

…tton-in-event-details Fix button misplacmenet in the comment section and cleanup css
opencast · Jun 4, 2024 · 28424e8 · 28424e8
2 parents 51822e7 + fd201f1
commit 28424e8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 45 deletions.
diff --git a/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx b/src/components/events/partials/ModalTabsAndPages/EventDetailsCommentsTab.tsx
@@ -309,7 +309,42 @@ const EventDetailsCommentsTab = ({
 										}
 									></textarea>
 
-									{/* submit button for comment reply (only active, if text has been written) */}
+                  {/* 'resolved' checkbox */}
+									{hasAccess(
+										"ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE",
+										user
+									) && (
+										<>
+										  <div className="resolved-checkbox">
+                        <input
+                          type="checkbox"
+                          id="resolved-checkbox"
+                          className="ios"
+                          onChange={() =>
+                            setCommentReplyIsResolved(!commentReplyIsResolved)
+                          }
+                        />
+                        <label>
+                          {
+                            t(
+                              "EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED"
+                            ) /* Resolved */
+                          }
+                        </label>
+                      </div>
+										</>
+									)}
+
+									{/* cancel button (exits reply mode) */}
+									<button className="cancel" onClick={() => exitReplyMode()}>
+										{
+											t(
+												"EVENTS.EVENTS.DETAILS.COMMENTS.CANCEL_REPLY"
+											) /* Cancel */
+										}
+									</button>
+
+                  {/* submit button for comment reply (only active, if text has been written) */}
 									<button
 										disabled={
 											!!(
@@ -335,39 +370,6 @@ const EventDetailsCommentsTab = ({
 									>
 										{t("EVENTS.EVENTS.DETAILS.COMMENTS.REPLY") /* Reply */}
 									</button>
-
-									{/* cancel button (exits reply mode) */}
-									<button className="red" onClick={() => exitReplyMode()}>
-										{
-											t(
-												"EVENTS.EVENTS.DETAILS.COMMENTS.CANCEL_REPLY"
-											) /* Cancel */
-										}
-									</button>
-
-									{/* 'resolved' checkbox */}
-									{hasAccess(
-										"ROLE_UI_EVENTS_DETAILS_COMMENTS_RESOLVE",
-										user
-									) && (
-										<>
-											<input
-												type="checkbox"
-												id="resolved-checkbox"
-												className="ios"
-												onChange={() =>
-													setCommentReplyIsResolved(!commentReplyIsResolved)
-												}
-											/>
-											<label>
-												{
-													t(
-														"EVENTS.EVENTS.DETAILS.COMMENTS.RESOLVED"
-													) /* Resolved */
-												}
-											</label>
-										</>
-									)}
 								</form>
 							)
 						}

diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss
@@ -135,29 +135,39 @@
             @include border-bottom-radius($main-border-radius);
             height: 191px;
             padding: 3%;
-
-            .drop-down-container {
-                width: 100%;
-            }
+            display: flex;
+            flex-wrap: wrap;
 
             textarea {
+                flex: 100%;
                 width: 100%;
                 height: 80px;
                 resize: none;
-                margin-bottom: 20px;
+                margin-bottom: 24px;
+            }
+
+            .editable {
+              flex: 50%
             }
 
-            .btn {
+            .editable > div {
+              width: 50%;
+            }
+
+            button.save {
+                min-width: 100px;
                 @include btn(green);
-                padding: 10px 15px;
-                float: right;
             }
 
-            .drop-down-container {
-                width: 250px;
-                display: inline-block;
+            button.cancel {
+              min-width: 100px;
+              @include btn(red);
+
             }
 
+            .resolved-checkbox {
+              flex: 20%;
+            }
         }
     }
 
@@ -734,3 +744,4 @@
         }
     }
 }
+