[TikiWiki-commits] [Git][tikiwiki/tiki][master] [FIX][UI] _cypht-tiki.scss: Add Bootstrap icons CSS for Cypht integration and enhance mobile layout

Victor Emanouilov pushed to branch master at Tiki Wiki CMS Groupware / Tiki


Commits:
3d6db98b by Joseph Lwanzo Kausi at 2025-08-11T09:24:12+00:00
[FIX][UI] _cypht-tiki.scss: Add Bootstrap icons CSS for Cypht integration and enhance mobile layout
---
* [FIX][UI] _cypht-tiki.scss: Add Bootstrap icons CSS for Cypht integration and enhance mobile layout

See merge request tikiwiki/tiki!8163

- - - - -


3 changed files:

- lib/wiki-plugins/wikiplugin_cypht.php
- themes/base_files/scss/_cypht-tiki.scss
- tiki-webmail.php


Changes:

=====================================
lib/wiki-plugins/wikiplugin_cypht.php
=====================================
@@ -363,6 +363,9 @@ function wikiplugin_cypht($data, $params)
         .inline-cypht { position: relative; }
     ");
 
+    // Ensure Bootstrap icons CSS is loaded for Cypht
+    $headerlib->add_cssfile(BOOTSTRAP_ICONS_FONT_PATH . '/bootstrap-icons.css');
+
     /* get configuration */
     $config = new Tiki_Hm_Site_Config_File([], $session_prefix, $settings_per_page);
     $environment->define_default_constants($config);


=====================================
themes/base_files/scss/_cypht-tiki.scss
=====================================
@@ -233,6 +233,7 @@
     }
     .search_form > form {
         flex-wrap: wrap;
+        gap: 0.1rem !important;
     }
     .search_terms, .search_form select {
         width: auto !important;
@@ -274,8 +275,64 @@
             z-index: 9999;
         }
         .menu-toggle {
-            z-index: 9999;
+            right: 0;
+            left: 0;
+            width: 100%;
+            z-index: 1000;
+            text-align: left;
+            top: 0;
+            padding: 15px 0 15px 20px;
+            background: #fff;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(10px);
+        }
+        .mobile nav .menu-toggle {
+            right: 20px;
+            left: unset;
+            text-align: left;
+            top: 20px;
+            background: none;
+            box-shadow: none;
+            backdrop-filter: none;
+            position: absolute;
+            z-index: 1001;
+            color: var(--bs-primary);
+          }
+
+        .mobile .nav-header {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+        padding: 0;
+        border-bottom: 1px solid var(--bs-secondary-bg);
         }
+        
+        .nav-header a {
+        margin: auto 45% auto auto;
+        }
+        
+        .mobile .nav-header .app-logo {
+        display: block;
+        height: 2rem;
+        width: auto;
+        padding: 0;
+        margin: 0;
+        }
+        
+        .mobile .nav-header .close-toggle {
+        position: static;
+        background: none;
+        box-shadow: none;
+        backdrop-filter: none;
+        width: fit-content;
+        margin-left: 0;
+        padding: 15px 20px;
+        }
+        
+        .mobile .app-logo{
+        display: none;
+        }
+
         .content_cell {
             border: none;
             display: block !important;
@@ -341,15 +398,22 @@
 
         // mobile search
         .search_content {
-            padding-top: 0;
-            .content_title { display: block; padding-top: 20px; padding-bottom: 10px; }
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 100vh;
+            .content_title { max-height: 500px; flex: 0 0 auto; margin-top: 0.5rem !important;}
+            .mobile .search_content .p-3 {
+                flex: 1 1 auto;
+                overflow: auto;
+              }
             .search_form {
-                display: block; padding: 0; font-size: 100%;
-                select { width: auto; margin: 5px; }
+                display: block; padding: 0; margin: 0 !important;
+                select { width: calc(50% - 0.5rem); margin: 5px; }
                 input[type=submit], input[type=button] { font-size: 80%; }
             }
             #search_terms { margin: 10px 3px 3px; width: 270px; max-width: 100%; }
-            .message_table { margin-top: 115px;    }
+            .message_table { margin-top: 0.1rem; }
         }
 
         .time_section input[type=date] { display: block; margin-bottom: 10px; }
@@ -389,7 +453,7 @@
         .msg_text { max-width: 100% !important; word-break: break-word; }
         .msg_text_inner { width: 100%; padding: 15px !important; }
         .msg_parts { table-layout: auto; }
-        .msg_controls { position: relative; left: 0 !important; height: auto; padding-top: 0; }
+        .msg_controls { position: fixed; right: 1rem !important; top: 0.3rem; z-index: 1000; height: auto; padding-top: 0; }
         #list_controls_menu { background-color: var(--bs-body-bg); }
         #list_controls_menu.show { justify-content: center; align-items: center; margin-top: 1rem; }
         .msg_text table { word-break: normal; }


=====================================
tiki-webmail.php
=====================================
@@ -138,6 +138,8 @@ if (isset($_POST['display']) && $_POST['display'] == 'pdf') {
     }
 }
 
+$headerlib->add_cssfile(BOOTSTRAP_ICONS_FONT_PATH . '/bootstrap-icons.css');
+
 $headerlib->add_js_module('import "@jquery-tiki/plugins/cypht";');
 
 $smarty->display('tiki.tpl');



View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/3d6db98b822c59857134b201cebc43e685d4b107

-- 
View it on GitLab: https://gitlab.com/tikiwiki/tiki/-/commit/3d6db98b822c59857134b201cebc43e685d4b107
You're receiving this email because of your account on gitlab.com.

_______________________________________________
TikiWiki-cvs mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/tikiwiki-cvs