• [deleted]

This is your community and this extension is also yours 🙂😌 see the screenshot below found a css optimization bug for mobile devices hope you will fix it soon.

Thanks,
Regards
@[deleted]

    [deleted] didn’t find a solution for this on mobile. I’m working on it….
    maybe @tuxmain can u explain how can i use aria? my last try didn't change anything

      Justoverclock I don't know how to explain better than in my previous messages 😅

      <style>
      .ttt {
          display: none;
          position: absolute;
      }
      .tt:hover .ttt, .ttc:focus + .ttt, .ttt:focus {
          display: block;
      }
      </style>
      <span class="tt">
          <span class="ttc" tabindex="0" aria-describedby="tt1" role="button">This has a tooltip.</span>
          <span role="tooltip" id="tt1" class="ttt">This is a tooltip.</span>
      </span>

      The keyword can then be focused with tab or by clicking on it, and the screen readers knows that #tt1 describes it.

      • [deleted]

      Hello @Justoverclock I don't know as I am not a developer but just a simple easy suggestion what If you show SweetAlert2 Pop up at the place of tooltip in mobile devices??

        Liverov in the backend u need to write all lower case, and in the frontend he will match both lower and uppercase

          [deleted] i do not want to use swal on this extension (too much invasive). i prefer tooltip.
          i'm working on a solution for mobile view

          • [deleted]

          Just a Quick Suggestion

          Justoverclock You can make something like this and replace 1, 2, 3, 4 with A, B,C If word is starting with A then profile image will be A.

          • [deleted]

          Found One more CSS Optimization problem

          I hovered on Flarum but it shown at right side and Mouse Cursor is not shown because Screen Snip in windows doesn't captures Mouse Cursor.

          Like Alex sir said it would be awesome if there is CSV important & export 🤤

          want to add 1200 words & meanings.

          This extension is really great and useful for all learning communities acts like a dictionary too

            • [deleted]

            • Edited

            I was testing this on your Community
            BEFORE

            See it is not properly compatible in Mobile Devices

            Fix

             .containDef {
                display: table !important;
            }
            .columngl {
                width: 100%;
            }
            .rowgl {
                display: inline-grid !important;
            }

            AFTER Some CSS

            You can add this only for Mobile Devices with @media 😉

              [deleted] i will add this to extension css:

              @media (min-width: 320px) and (max-width: 600px) {
                ol#myUL {
                  display: contents !important;
                }
              
                .columngl {
                  float: left;
                  width: 100%!important;
                }
              }
                • [deleted]

                • Edited

                Justoverclock It really feels good to help, Thank you for adding this!
                Waiting for this update

                Edit : Wait there is problem See this

                Fix
                ol#myUL {
                display: grid !important;
                }

                1.7 (only 1.0)

                css fix for mobile.

                Installation

                Install with composer:

                composer require justoverclock/flarum-ext-keywords

                Updating

                composer update justoverclock/flarum-ext-keywords
                php flarum cache:clear
                  • [deleted]

                  Justoverclock One More thing all users forum is not ORANGE like flarum so please change the book and bullet list color however temporarily I already fixed it with Custom CSS.