New Admin theme, responsive and more readability

[ghost]

Currently the menu of piwigo is small compared to other cms like wordpress, joomla ... it hurts in the eyes of users it would be interesting to improve the user experience.

[Ajtak]

I'm decided today to implement the best template AdminLTE for piwigo. First preview is as next, I release new template for piwigo soon.

[ghost]

The theme is beautiful, Super work, Best open source admin dashboard & control panel theme. Built on top of Bootstrap 3, AdminLTE provides a range of responsive, reusable, and commonly used components. Can send you your work to @plegall

https://www.le-gall.net/pierrick/contact.php

[flop25]

for now I only see the responsive advantage -quite a huge feature- but no improvement about the menu (yet i hope). Note that AdminLTE is known to have a lot of jquery plugins included and I think our team would like to keep the admin part lightweight

[flop25]

ps: keep sharing on github Thx

[Ajtak]

I'm create new repository. I commit template on today night.

[Ajtak]

Im commited now. I'll be glad for your comments :)

[flop25]

I have changed the initial purpose of the ticket since it evolved in a unexpected way and since the Piwigo menu just like the wordpress one (computed size, piwigo vs wp : 12.8 vs 13 px for sub item, 13 vs 14 px for top items)

So I'm testing your implementation of AdminLTE pros: -responsive -just 2 js more -more readability and design consistency -easy CSS with classes such as

<div class="col-lg-3 col-xs-6">
          <div class="small-box bg-aqua">

cons: -less readability for the menu : the contrast ratio is only 4.4 vs the current 5.4 for sub items. But that would be easily fix. -build with Node? this is quite an important point here. How do we update AdminLTE and how have you done the implementation?

of course other small fixes needed and the code also should be updated ; for instance the admin landing page should use the boxes from AdminLTE. But it sounds promising. The theme has regular updates ; January last stable, March/June/July for the alpha/beta/Rc new release. 18k Star github and 6k forks, 93 contributors Good job!

[Ajtak]

Hi, I was thinking of using npm, its priority for me, contrast ratio is change is simple, I do implementation in my free time :)

[flop25]

If we need to maintain it with npm and its billions of packages, it's a clear nogo -at least for me-. When I say "how have you done the implementation?" I'm asking for the technical details

[Ajtak]

Yes, i like npm too. I will send PM on today evening with technical details. You have Skype or Facebook for better communication?

[flop25]

We can communicate by email or maybe @plegall would like to use an instant messaging to 'speak" with you But I think we would all prefer if you just update your Readme to detail your implementations, how to update AdminLTE etc

[Ajtak]

Ok, I update my Readme on today evening. Around 19:00 CEST hour. :) And convert to npm-use too.

[flop25]

Let me repeat myself

If we need to maintain it with npm and its billions of packages, it's a clear NOgo -at least for me-.

[Ajtak]

Ok, but what do you suggest instead npm?

[flop25]

Well I was simply thinking of a built version, usable as this? a production one, like jQuery

[flop25]

all members of the team can be contacted on username at piwigo.org

[plegall]

Hi,

How could I have not seen this issue before ?!?

Very interesting. Having a responsive theme for admin would indeed be really nice.

I absolutely don't like the color scheme, but that's not really the point for now ;-) I will look deeper next week!

[flop25]

By email we discussed and after testing bymeslf, the fact that it uses Node is pointless for us : we just need three folders which are bootstrap dist and plugin from each release

After a proper testing and to sum up:

pros:

• responsive
• we load only 2 js more (bootstrap and adminlte)
• more readability and design consistency
• many CSS classes and a bunch of color schemes already built
• better integration with tables and graphics such as jquery.dataTables

cons or difficulties:

• currently there is a 2.4 RC with big updates such as the use of Jquery 3 (edit And the use of LESS but they will provide a version "Compiled and ready to use in production") ; we should focus on this one and be careful on the Jquery compatibility
• more js due to bootstrap integration of Jquery plugins For instance, in the 2.4 RC, the dataTables demo page loads

<!-- jQuery 3 -->
<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>

As you can see:

• it's a mess in the folders ! We would have to find proper locations. It would be the time to have a clear definition of what should be in themes\default\js or in admin\themes\default\js
• it adds one js per jquery plugin and maybe more ; I don't have defined yet if SlimScroll and FastClick are actually mandatory

So it could be a good target for 2.10 : we could even go further by jumping to bootstrap as a default public theme too (keeping the default theme but having a default-bootstrap one with a clear-bootstrap and dark-bootstrap based on it).

We might work on a special branch for that

[flop25]

Hi again I'm playing more and more with it and I'm seeing two solutions of integration (with of course a whole range of variation between both): The lazy one -but pragmatic depending on the human resources and time available- would be to stay as close as possible to the current design; keeping the navigation and form UX, changing only the scripts not working any more etc The better and optimal one would be to really embrace the theme design: tabs should be converted to sub items menu (I highly recommend it), scripts changed to the one recommended or developed by adminLTE, buttons and forms reworked etc And we could even add some new pages; for instance a time-line view of what happened on the gallery (who commented/rated/added what sorted by when) or/and a calendar view to sum up the events and to pick the starting date for that timeline

About the extensions, there would be very little to do for them except for the heavily scripted ones; they would require to be jQuery v3.1.1 compatible mainly

[Ajtak]

Hi, What is the next step? Its actually or discontinued?

[kelvinau]

When will we see this new admin theme?

[plegall]

Hi, I may seem to have forgotten about this proposal. I haven't.

I'm currently working with Samuel on administration design: UI and UX.

The current plan follows 2 steps:

1. to refresh the UI for Piwigo 2.10, with mainly CSS changes and very small HTML changes (I will soon post screenshots on Piwigo.org forum)
2. to rethink many part of the UX for Piwigo 3.0. Using Bootstrap for the technical integration is the obvious choice and that's where your work will be very useful, that will be a perfect start :-) I consider the implementation of Bootstrap by @Ajtak as a perfect PoC (Proof of Concept)

Using Bootstrap is a very good idea because it will bring responsiveness and some "standards" regarding HTML code and CSS classes. The huge drawback however is that it breaks the content of all pages, including extensions (plugins or theme configuration pages). This is why I can't imagine switching to Bootstrap before Piwigo 3.0 (and it would perfectly justify the change of major release number) : in addition to rewrite all core admin pages, we would need to assist plugin creators to upgrade their pages (and some of them would be quite impossible, like Advanced Menu Manager, I guess).

[tekstrand]

Been about a year, can we get any update on this? I am happy to provide my time/expertise writing and reviewing code for this. Are there any feature branches active for this already?

[plegall]

We haven't implemented Bootstrap in Piwigo administration, but the UI has quite changed in the last years. I like the way it looks, even if it doesn't rely on Bootstrap.

I think we have improved readibility but not much the responsiveness. I don't close this issue. I consider it as "use Bootstrap" but not really as a "redesign admin".