[4.0] Mobile template toolbar

[brianteeman]

This PR contains the markup for a proposed change to the display of the toggled toolbar.

It is does NOT contain the css changes that are required. I really could do with some help with converting the css below to appropriate scss - or even better scss

You can paste the css below into your browser dev tools after applying the PR to see the intended behaviour

Pull Requests welcome to create the scss
Pull Request for Issue #26486

Demo

[Fedik]

@brianteeman place this to /administrator/templates/atum/scss/blocks/_toolbar.scss at bottom and run node build.js --compile-css

@include media-breakpoint-down(xs) {
  .toggler-toolbar {
    top: 20px;

    .toggler-toolbar-icon::before {
      font: normal normal normal 30px/1 'Font Awesome 5 Free';
      content: "\f00d";
      color: var(--toggle-color);
    }

    &.collapsed .toggler-toolbar-icon::before {
      content: "\f085";
    }
  }

  .subhead{

    joomla-toolbar-button,
    .btn-group,
    .btn{
      width: 100%;
    }

    .btn{
      [class^='icon-'],
      [class*=' icon-'],
      [class^='fa-'],
      [class*=' fa-'] {
        float: left;
      }
    }
  }
}

[brianteeman]

Thanks @Fedik

[snehaM26]

I have tested this item 🔴 unsuccessfully on 98a5678

Tested unsuccessfully

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26513.}

[nidhi1709]

Tested successfully

[nidhi1709]

I have tested this item ✅ successfully on 98a5678

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26513.}

[snehaM26]

I have tested this item ✅ successfully on 98a5678

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26513.}

[snehaM26]

I have tested this item ✅ successfully on 98a5678

Tested successfully.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26513.}

[brianteeman]

Codestyle changes applied - thanks@quy

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/26513.}

[HLeithner]

Thanks.

[infograf768]

Totally dead in RTL where the icons buttons are misplaced (tested after also using PR #26613 which also corrects the place of the toggler)

[infograf768]

Making patch for RTL now.