all-admin theme

giz · 2024-07-30 23:16:02

all-admin rearranges your admin layout, screen-size permitting.

Write Tab with a wider, twin-column main area containing:
- Excerpt before
- Multiple textareas (if using glz_custom_fields)
- Custom fields
- Article images
Images list full width, entries in rows. Thumbnail resizing controls are hidden so users can’t fiddle with the thumbnail sizes. Your preferred thumbnail display height is set via the css.
Presentation Tab full width textareas

Layout changes are handled via css, with a simple jquery call to alter the DOM. I find this easier (and more reliable) to configure than my prior go-to plugin, Write Tab Customise.

UI

Skinning is simplified, with little decorative styling:

Content i.e. editable text is given prominence
Native checkboxes and radio buttons
Limited icon-usage
Textpattern yellow is reserved for buttons that trigger (or prepare for) a database change
Server success/warning/etc messages are less discrete, displayed at top of the viewport
Mobile layouts tweaked to fit more content

Last edited by giz (2024-07-30 23:19:50)

jakob · 2024-07-31 07:55:59

From a first look: pretty amazing!

I like the reduced look and hadn’t thought of a twin-column main area setup before. That’s an interesting idea, especially if you know what you’re looking for. I guess it depends a bit on typical article lengths, as the very long articles on the site I’m currently working on break apart the fields in the twin-column variant a bit. But that only kicks in upwards of 1440px, so that’s not a problem.

The grid image setup is something very desirable for high image volume sites. There’s a plugin that does something similar, but it would be nice to see in the core. Phil has an image grid mockup in his design panels too (edit: which you’re aware of already), but yours has more image details, which I think is good. It’d be nice to see that perhaps switchable in the core, as Phil hints at in his mockup (and the plugin does).

I have a custom.css of my own with some similar customizations – more padding around the main textareas, slightly toned down sidebar to give main content more prominence, wider inner gutter – but I’ve not gone as full-on as you have with removing almost all the UI delineations. Otherwise, I can imagine clients asking for a bit more contrast, especially when the inputs and textareas have no surround. That’s settable via a custom property, so easily adapted.

Overall: impressively minimal!

Bloke · 2024-07-31 08:08:37

Lots of fab stuff in this theme. Wow.

I’d love to, ummm, pay homage to some of the ideas here in core for the next big release. Let’s see what Phil thinks and if anything can be folded into the design patterns.

giz · 2024-07-31 18:13:57

:)

I struggled with the body length in the layout, eventually settling on optimising for a ‘typical’ article length, and leaving autosize.js to do its thing.

The layout is easy to manipulate; I’m using this css:

grid-template-areas:
        'title title'
        'authr authr'
        'excrp bodyt'
        'txta1 bodyt'
        '.     .'
        'custf arimg';

A change to:

grid-template-areas:
        'title title'
        'authr authr'
        'excrp bodyt'
        'arimg bodyt'
        'txta1 bodyt'
        '.     bodyt'
        'custf bodyt';

or similar would get around the issue. This could be set up as a variable at the beginning of the css file, making it easier to access.

In an earlier version I futzed with the positions of all elements on the write tab:

grid-template-areas:
  //  'xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx xxxxxx
      'headng headng headng paging paging paging paging paging paging save__ save__ save__'
      'title_ title_ title_ title_ title_ title_ title_ title_ title_ author author author'
      'title_ title_ title_ title_ title_ title_ title_ title_ title_ action action action'
      'excrpt excrpt excrpt body__ body__ body__ body__ body__ body__ srtdsp srtdsp srtdsp'
      'cf3___ cf3___ cf3___ body__ body__ body__ body__ body__ body__ datesg datesg datesg'
      'cfgrop cfgrop cfgrop body__ body__ body__ body__ body__ body__ catsgp catsgp catsgp'
      'artimg artimg artimg artimg artimg artimg artimg artimg artimg metagp metagp metagp'
      'artimg artimg artimg artimg artimg artimg artimg artimg artimg comtgp comtgp comtgp'
      'artimg artimg artimg artimg artimg artimg artimg artimg artimg recent recent recent'
    ;

This approach had many pros, but felt too complex for a first attempt ;-)

Last edited by giz (2024-07-31 19:32:27)

phiw13 · 2024-08-01 07:00:48

Woof… you do like some extreme ranges of contrast, right? On the one hand the hard black headlines / table headers / sidebar block headers. On the other hand the quite low contrast between text and background colour (< 4.5 – very hard to read for the old eyes) or between input fields background and main background (I can barely distinguish them from the main background).

Random note:

good: positioning the message pane / notification widget at the top of the page where it is nicely visible
interesting: the grid layout for the images panel (but what a hacky css construct…, I know… the source is an HTML table), plus point for including the image meta data, even if it is barely readable for me). Plus point also for respecting the image aspect-ratio. I would set the tbody grid to autofill rather than auto-fit, though. And avoid that slightly different background behind the image.

The white background on the header is confusing, using the same background-colour as the whole page would create a better continuity

Problematic: the main links in the header do not display any :focus state when navigating with the keyboard – also, general link related: consider using the :focus-visible pseudo-class.

Problematic: the delineation of the input fields, some buttons and select widgets against the background.

Problematic: contrast between text and background…

(tested with TXP4.9-dev)

giz · 2024-08-01 17:26:44

phiw13 wrote #337526:

Woof…

It suits my tastes :p

jakob · 2024-08-02 10:30:23

giz wrote #337525:

In an earlier version I futzed with the positions of all elements on the write tab:

grid-template-areas:... – This approach had many pros, but felt too complex for a first attempt ;-)

That’s a veritable grid template wall you have there! Feels almost like layout with tables again…

Textpattern CMS

Textpattern CMS support forum

#1 2024-07-30 23:16:02

all-admin theme

UI

#2 2024-07-31 07:55:59

Re: all-admin theme

#3 2024-07-31 08:08:37

Re: all-admin theme

#4 2024-07-31 18:13:57

Re: all-admin theme

#5 2024-08-01 07:00:48

Re: all-admin theme

#6 2024-08-01 17:26:44

Re: all-admin theme

phiw13 wrote #337526:

#7 2024-08-02 10:30:23

Re: all-admin theme

giz wrote #337525:

Board footer