From 8cd965cdad0e2f3af6c96c23b0f87eeb539ea116 Mon Sep 17 00:00:00 2001 From: Shawn Rice Date: Wed, 10 Apr 2024 09:54:19 -0400 Subject: [PATCH] refactor: Standardize tooltips, pure CSS method --- .../views/admin/members/edit.blade.php | 3 +- .../views/admin/pages/index.blade.php | 2 +- .../views/admin/snippets/index.blade.php | 2 +- .../Controllers/Admin/TemplatesController.php | 1 + .../views/admin/templates/index.blade.php | 2 +- .../views/admin/messages/edit.blade.php | 8 +- .../views/admin/directories/edit.blade.php | 6 +- .../Resources/views/admin/edit.blade.php | 113 ++++++++++-------- app/Themes/Admin/assets/css/index.css | 81 +++++++++---- 9 files changed, 130 insertions(+), 88 deletions(-) diff --git a/app/Modules/Groups/Resources/views/admin/members/edit.blade.php b/app/Modules/Groups/Resources/views/admin/members/edit.blade.php index 9f40381a4..16e9ba8be 100644 --- a/app/Modules/Groups/Resources/views/admin/members/edit.blade.php +++ b/app/Modules/Groups/Resources/views/admin/members/edit.blade.php @@ -34,9 +34,10 @@
{{ trans('global.details') }} -
+
+ {{ trans('groups::groups.name hint') }}
diff --git a/app/Modules/Knowledge/Resources/views/admin/pages/index.blade.php b/app/Modules/Knowledge/Resources/views/admin/pages/index.blade.php index 7700b5dcc..3a5be31d0 100644 --- a/app/Modules/Knowledge/Resources/views/admin/pages/index.blade.php +++ b/app/Modules/Knowledge/Resources/views/admin/pages/index.blade.php @@ -283,7 +283,7 @@ @if ($row->parent_id) - + diff --git a/app/Modules/Knowledge/Resources/views/admin/snippets/index.blade.php b/app/Modules/Knowledge/Resources/views/admin/snippets/index.blade.php index f209bdcb6..b714a34d9 100644 --- a/app/Modules/Knowledge/Resources/views/admin/snippets/index.blade.php +++ b/app/Modules/Knowledge/Resources/views/admin/snippets/index.blade.php @@ -195,7 +195,7 @@ {{ $row->used }} - + diff --git a/app/Modules/Mailer/Http/Controllers/Admin/TemplatesController.php b/app/Modules/Mailer/Http/Controllers/Admin/TemplatesController.php index 056010f75..836cb95a6 100644 --- a/app/Modules/Mailer/Http/Controllers/Admin/TemplatesController.php +++ b/app/Modules/Mailer/Http/Controllers/Admin/TemplatesController.php @@ -189,6 +189,7 @@ public function store(Request $request) { $row->alert = $request->input('alert'); } + $row->alert = $row->alert ?: ''; $row->template = 1; if (!$row->save()) diff --git a/app/Modules/Mailer/Resources/views/admin/templates/index.blade.php b/app/Modules/Mailer/Resources/views/admin/templates/index.blade.php index 2102fc0a4..ed98fdd39 100644 --- a/app/Modules/Mailer/Resources/views/admin/templates/index.blade.php +++ b/app/Modules/Mailer/Resources/views/admin/templates/index.blade.php @@ -148,7 +148,7 @@ - + diff --git a/app/Modules/Messages/Resources/views/admin/messages/edit.blade.php b/app/Modules/Messages/Resources/views/admin/messages/edit.blade.php index 3c5db083b..a7fc98b4f 100644 --- a/app/Modules/Messages/Resources/views/admin/messages/edit.blade.php +++ b/app/Modules/Messages/Resources/views/admin/messages/edit.blade.php @@ -86,12 +86,12 @@ {{ trans('global.publishing') }} @if ($row->id) -
+
-
+
@@ -99,7 +99,7 @@
-
+
@@ -108,7 +108,7 @@
@else -
+
diff --git a/app/Modules/Storage/Resources/views/admin/directories/edit.blade.php b/app/Modules/Storage/Resources/views/admin/directories/edit.blade.php index e9a3d6a53..8442206d5 100644 --- a/app/Modules/Storage/Resources/views/admin/directories/edit.blade.php +++ b/app/Modules/Storage/Resources/views/admin/directories/edit.blade.php @@ -307,15 +307,15 @@ $timetable .= '
'; ?> @if ($message->completed()) - + {{ $message->elapsed }} @elseif ($message->started()) - + {{ trans('messages::messages.processing') }} @else - + {{ trans('messages::messages.pending') }} @endif diff --git a/app/Modules/Widgets/Resources/views/admin/edit.blade.php b/app/Modules/Widgets/Resources/views/admin/edit.blade.php index 89ea1ec85..51f14fdd2 100644 --- a/app/Modules/Widgets/Resources/views/admin/edit.blade.php +++ b/app/Modules/Widgets/Resources/views/admin/edit.blade.php @@ -151,63 +151,70 @@
- +
diff --git a/app/Themes/Admin/assets/css/index.css b/app/Themes/Admin/assets/css/index.css index e69c8baee..2332f870b 100644 --- a/app/Themes/Admin/assets/css/index.css +++ b/app/Themes/Admin/assets/css/index.css @@ -2758,7 +2758,7 @@ fieldset.adminform fieldset { top: 1em; right: 1em; } - +/* .btn { color: var(--btn-cl); } @@ -2782,7 +2782,7 @@ fieldset.adminform fieldset { border-color: var(--btn-secondary-br-active); color: var(--btn-secondary-cl-active); } - +*/ .ui-widget { font-family: inherit !important; } @@ -3291,10 +3291,7 @@ html .select2-container--default .select2-selection--multiple .select2-selection overflow: visible; z-index: 1000000; pointer-events: none; - -webkit-transition: 0.3s ease; - -moz-transition: 0.3s ease; - -o-transition: 0.3s ease; - transition: 0.3s ease; + transition: all 0.3s ease-in-out; content: attr(data-title); background: var(--tip-back); color: var(--tip-color); @@ -3304,28 +3301,24 @@ html .select2-container--default .select2-selection--multiple .select2-selection line-height: 1; white-space: nowrap; box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3); - -webkit-border-radius: 0.25em; - -moz-border-radius: 0.25em; border-radius: 0.25em; left: 100%; bottom: 50%; margin-bottom: -1.2em; - visibility: hidden\9; - /* tail dimension */ --b: 0.8em; /* base */ --h: 0.4em; /* height */ --r: 0.25em; /* radius */ --p: 50%; /* position */ /*border-image: fill 0 // var(--h) conic-gradient(var(--tip-back) 0 0);*/ - border-image: conic-gradient(var(--tip-back) 0 0) fill 0/ - calc(50% - var(--b) / 2) 0 calc(50% - var(--b) / 2) 0 /* create a white box */ - 0 0 0 0.8em; /* nudge the box over */ - /*clip-path: + /*border-image: conic-gradient(var(--tip-back) 0 0) fill 0/ + calc(50% - var(--b) / 2) 0 calc(50% - var(--b) / 2) 0 + 0 0 0 0.8em; + clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%, calc(50% + var(--b) / 2) 100%, 50% calc(100% + var(--h)), - calc(50% - var(--b) / 2) 100%);*/ + calc(50% - var(--b) / 2) 100%); clip-path: polygon( 0 0, 100% 0, @@ -3334,9 +3327,10 @@ html .select2-container--default .select2-selection--multiple .select2-selection 0 calc(50% + var(--b) / 2), calc(0% - var(--h)) 50%, 0 calc(50% - var(--b) / 2) - ); + );*/ + transform: translate3d(-10px, 0, 0); } -/*#header [data-title]:before { +#header [data-title]:after { content: ""; padding: 0; margin-left: -10px; @@ -3347,15 +3341,11 @@ html .select2-container--default .select2-selection--multiple .select2-selection box-shadow: none; display: block; width: 0; -}*/ +} #header [data-title]:hover:before, #header [data-title]:hover:after { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - -webkit-opacity: 1; - -moz-opacity: 1; opacity: 1; - visibility: visible\9; + transform: translate3d(0, 0, 0); } #header .user-options li a { border: none; @@ -3365,7 +3355,6 @@ html .select2-container--default .select2-selection--multiple .select2-selection cursor: pointer; white-space: nowrap; position: relative; - /*color: transparent;*/ color: rgba(255, 255, 255, 0.6); overflow: hidden; -webkit-transition: all 0.2s; @@ -4243,6 +4232,50 @@ label[data-hint] { border-color: #f7eabc; } +[data-tip] { + position: relative; +} +[data-tip]:before, +[data-tip]:after { + position: absolute; + opacity: 0; + text-indent: 0; + overflow: visible; + z-index: 1000000; + pointer-events: none; + transition: all 0.3s ease-in-out; + content: attr(data-tip); + background: var(--tip-back); + color: var(--tip-color); + padding: 0.55em 0.85em 0.65em 0.85em; + font-size: 1em; + font-weight: 400; + line-height: 1; + white-space: nowrap; + box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3); + border-radius: 0.25em; + left: 50%; + bottom: 110%; + transform: translate3d(-50%, -10px, 0); +} +[data-tip]:after { + content: ""; + padding: 0; + margin-bottom: -10px; + margin-left: 6px; + background: transparent; + border: 6px solid transparent; + border-color: var(--tip-back) transparent transparent transparent; + box-shadow: none; + display: block; + height: 0; +} +[data-tip]:hover:before, +[data-tip]:hover:after { + opacity: 1; + transform: translate3d(-50%, 0, 0); +} + .ordering-control { display: inline-block; width: 1.5em;