2.1 admin CP: alternate layout

Started by Antechinus, May 16, 2022, 07:14:44 PM

Previous topic - Next topic

Antechinus

Quick revamp to make it more like the cPanel home page layout, which is much easier to scan in a hurry and (IMO) looks better too.

Code ("admin.css - Find:") Select
fieldset.admin_group legend {
    background: #eaf1f4;
    border: 1px solid #cacdd3;
    padding: 1px 5px;
    border-radius: 3px;
}
fieldset.admin_group a {
    display: inline-block;
    width: 100px;
    font-size: 85%;
    text-align: center;
    vertical-align: top;
}
fieldset.admin_group .inactive {
    opacity: 0.4;
}

/* The update warning. */
#update_section {
    margin: 6px 0;
}

/* The icons. */
.large_admin_menu_icon_file {
    margin: 0 auto;
    display: block;
    width: 32px;
    height: 32px;
}
.large_admin_menu_icon::before {
    background: url(../images/icons/admin_sprite.png) no-repeat -5px -47px;
    margin: 0 auto;
    display: block;
    content: '';
    width: 32px;
    height: 32px;
}
Code ("admin.css - Replace:") Select
.admin_group {
    display: flex;
    flex-wrap: wrap;
    padding: 4px;
    background: #f8f8f8 !important;
    border-radius: 0;
}
.admin_group#group_forum {
    margin-top: 10px;
}
.admin_group legend {
    display: block;
    width: calc(100% + 10px);
    margin-left: -5px;
    padding: 5px 9px;
    background: #f0f4f7;
    font-size: 1rem;
    font-weight: 400;
    border: 1px solid #cacdd3;
    border-radius: 4px 4px 0 0;
}
.admin_group a {
    width: calc(25% - 8px);
    margin: 4px;
    padding: 5px 9px;
    background: #f0f4f7;
    font-size: .875rem;
    line-height: 2rem;
    border: 1px solid #ccc;
}
.admin_group a:hover {
    text-decoration: none;
    border-color: #9ac;
}
.admin_group .inactive {
    opacity: 0.4;
}

@media screen and (max-width:72rem) {
    .admin_group a {
        width: calc(33% - 6px);
    }
}
@media screen and (max-width:56rem) {
    .admin_group a {
        width: calc(50% - 8px);
    }
}
@media screen and (max-width:36rem) {
    .admin_group {
        flex-direction: column;
    }
    .admin_group a {
        width: auto;
    }
}
/* @WIP: Kludge for default meh. :P */
@media screen and (max-width:480px) {
    .admin_group a {
        float: none !important;
        width: auto !important;
    }
}

/* The icons. */
.large_admin_menu_icon_file {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
}
.large_admin_menu_icon {
    float: left;
    padding-right: 8px;
    opacity: .8;
}
.large_admin_menu_icon::before {
    display: inline-block;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    background: url(../images/icons/admin_sprite.png) no-repeat -5px -47px;
    content: '';
}

Result looks like the screenshot, and is fully responsive down to phone size (< 400px width).

Aleksi "Lex" Kilpinen

I understand you are not being all serious - but I must say, I don't believe this should have been approved as it is, and would like you to think of a better name for this topic.
Slava
Ukraini!


"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

FrizzleFried


Antechinus

Ok, go ahead and change it to whatever you like. I can't edit it now anyway. I mean sure, I can think of "better" topic titles. No problem there, but you may not want to know. :D

TBH, although the CP is "usable" in default form, in that it is possible to use it, it is so awkward to scan in default form that I very much doubt anyone ever bothers.

Aleksi "Lex" Kilpinen

Slava
Ukraini!


"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum. Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

How you can help SMF

FrizzleFried

Just tried in the CSS editor built in to SMF and while everything looks good... none of the ICONS are showing up minus the ARCADE ones...

Of course that's only the way it looks in the built-in editors "window"... I've not committed the change as of yet...

You cannot view this attachment.

EDIT: Never mind.  Once I committed the edit and checked out the site all icons appeared.

:)

Looking awesome BTW!

You cannot view this attachment.

FrizzleFried

Question... note the bottom "Arcade" section... how do I adjust so the text appears to the right rather than below? My OCD triggers slightly...  ;)

You cannot view this attachment.

Steve

You mean to the right of the icon?
Autocorrect is my worst enema.

FrizzleFried

Quote from: Steve on May 17, 2022, 10:36:30 AMYou mean to the right of the icon?

Correct... like the rest (see examples above my post)... :)

All my icons look like the example above my post... icon then text to the right... except for the Arcade section which appears as I posted.

Antechinus

#9
Must be using different markup in that section. I'd need to know which classes and elements it is using.

ETA: Get me a shot of what your document inspector says about those arcade icons.

FrizzleFried

Does this help?

You cannot view this attachment.

You cannot view this attachment.

Antechinus

Ok, try find this:
.large_admin_menu_icon_file {
display: inline-block;
vertical-align: middle;
width: 32px;
height: 32px;
}

Replace with this:
.large_admin_menu_icon_file {
float: left;
width: 32px;
height: 32px;
padding-right: 8px;
opacity: .8;
}

FrizzleFried

...nope.  That stretched the icons a bit it seems... maybe some space between icon and text below...

You cannot view this attachment.

Antechinus

Ah. Effing border-box. This will fix the stretching:
.large_admin_menu_icon_file {
float: left;
width: 40px;
height: 32px;
padding-right: 8px;
opacity: .8;
}

The misalignment is odd. What extra CSS is being applied by the Arcade mod?

FrizzleFried

No idea.  It's just an admin entry and it looks the same as the rest when normal.

One odd thing... making edits via the SMF editor and the update "preview" doesn't show icons for any of your edits... until I commit and then check the actual admin page.  BUT... the Arcade icons (and only the arcade icons) are there.


Antechinus

Well it obviously ain't the same as the rest, so it has something odd being applied somehow.

I just ran a quick test, by adding a fake extra section with hard-coded markup, calling in the default cake.png as an image with that class. It works. :)

So, yer arcade mod is playing silly games somewhere.

Idea! Does the mod have CSS that is applying clear: both; to those images? That would screw it.

FrizzleFried

No idea... I looked for "clear" in the admin css and found one entry nothing to do with the arcade css...

My OCD will have to deal with it.

;)


Antechinus

No, it would not be in admin.css unless the mod bungs its own CSS into admin.css. If the mod has its own CSS file, it would be in that.

FrizzleFried

Yeah,  there is plenty of css for the Arcade mod... but none of it seems to be for the admin section except one file which is specifically for the ARCADE ADMIN section...

I'll live.

Antechinus

Attach them here and I'll take a look.

Advertisement: