#99 [TimeSpent] add: Modal Design

Evarisk · Jan 13, 2023 · 5aff5f6 · 5aff5f6
1 parent be3093d
commit 5aff5f6
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 8 deletions.
diff --git a/css/dolisirh.css b/css/dolisirh.css
@@ -1,4 +1,26 @@
 @charset "UTF-8";
+.modal-timespent {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.modal-timespent * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.modal-timespent .timespent-comment {
+  width: 100%;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+}
+.modal-timespent .timespent-date {
+  margin-right: 4px;
+}
+.modal-timespent .timespent-datehour, .modal-timespent .timespent-datemin, .modal-timespent .timespent-hour, .modal-timespent .timespent-min {
+  max-width: 35px !important;
+}
+.modal-timespent .modal-footer {
+  padding-top: 0 !important;
+}
+
 /*--------------------------------------------------------------
 	Module : Dropdown
 	Version : 1.0.0

diff --git a/css/dolisirh.min.css b/css/dolisirh.min.css
diff --git a/css/scss/element/_element.scss b/css/scss/element/_element.scss
@@ -0,0 +1 @@
+@import "modal-timespent";
diff --git a/css/scss/element/_modal-timespent.scss b/css/scss/element/_modal-timespent.scss
@@ -0,0 +1,20 @@
+.modal-timespent {
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+
+  .timespent-comment {
+    width: 100%;
+    border: 1px solid rgba(0,0,0,0.4);
+  }
+  .timespent-date {
+    margin-right: 4px;
+  }
+  .timespent-datehour, .timespent-datemin, .timespent-hour, .timespent-min {
+    max-width: 35px !important;
+  }
+  .modal-footer {
+    padding-top: 0 !important;
+  }
+}
diff --git a/css/scss/style.scss b/css/scss/style.scss
@@ -1,3 +1,4 @@
+@import "element/element";
 @import "variable/variable";
 @import "module/module";
 @import "page/page";
diff --git a/view/timespent_month.php b/view/timespent_month.php
@@ -686,7 +686,7 @@
     <!-- TIMESPENT ADD MODAL -->
 	<div class="timespent-add-modal">
 		<div class="wpeo-modal modal-timespent" id="timespent">
-			<div class="modal-container wpeo-modal-event" style="max-width: 300px; max-height: 250px;">
+			<div class="modal-container wpeo-modal-event" style="max-width: 400px; max-height: 300px;">
                 <!-- Modal-Header -->
                 <div class="modal-header">
                     <div class="modal-close"><i class="fas fa-times"></i></div>
@@ -697,12 +697,20 @@
                         <input type="hidden" class="timespent-taskid" value="">
                         <input type="hidden" class="timespent-timestamp" value="">
                         <input type="hidden" class="timespent-cell" value="">
-                        <div class="title"><?php echo $langs->trans('Date') . ' : '; ?><span class="timespent-date"></span></div>
-                        <span><input class="flat maxwidth50 timespent-datehour" type="number" placeholder="H" min="0" max="23"> : <input class="flat maxwidth50 timespent-datemin" type="number" placeholder="mn" min="0" max="59"></span>
-                        <div class="title"><?php echo $langs->trans('Comment'); ?></div>
-                        <textarea class="timespent-comment maxwidth100onsmartphone" name="timespent-comment" rows="4"></textarea>
-                        <div class="title"><?php echo $langs->trans('Duration'); ?></div>
-                        <span><input class="flat maxwidth50 timespent-hour" type="number" placeholder="H" min="0" max="23"> : <input class="flat maxwidth50 timespent-min" type="number" placeholder="mn" min="0" max="59"></span>
+                        <div class="wpeo-gridlayout grid-3">
+                            <div class="gridw-2">
+                                <div class="title"><strong><i class="far fa-calendar-alt"></i> <?php echo $langs->trans('Date'); ?></strong></div>
+                                <span><span class="timespent-date"></span> <input class="flat maxwidth50 timespent-datehour" type="number" placeholder="H" min="0" max="23"> : <input class="flat maxwidth50 timespent-datemin" type="number" placeholder="mn" min="0" max="59"></span>
+                            </div>
+                            <div>
+                                <div class="title"><strong><i class="far fa-clock"></i> <?php echo $langs->trans('Duration'); ?></strong></div>
+                                <span><input class="flat maxwidth50 timespent-hour" type="number" placeholder="H" min="0" max="23"> : <input class="flat maxwidth50 timespent-min" type="number" placeholder="mn" min="0" max="59"></span>
+                            </div>
+                        </div>
+                        <br/>
+                        <div class="title"><strong><i class="far fa-comment-alt"></i> <?php echo $langs->trans('Comment'); ?></strong></div>
+                        <textarea class="timespent-comment maxwidth100onsmartphone" name="timespent-comment" rows="6"></textarea>
+
                     </div>
                 </div>
                 <!-- Modal-Footer -->