CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Pages: [1] 2

Author Topic: Ideas... Display Flex?  (Read 3523 times)

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Ideas... Display Flex?
« on: 6 Feb 2020, 04:11:35 pm »
Help again...

How can I merge these two pages so the navigation is on the left and the table is on the right? or what ever is selected from the menu:

Template:
Code: [Select]
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Control Panel</title>
<link rel="stylesheet" type="text/css" href="usercp.css">
</head>

<body>
<div>
<div class="user_HeaderNavigation">Logged in as: GrumpyYoungMan [ <a href="?module=LogOut">Log Out</a> ]</div> </div>

<div id="mainContainer"><h1>User Control Panel</h1><div>
<ul id="usercp_NavigationMenu">
<li>User Options</li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeNickName>Change Nick Name</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeEmail>Change Email</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangePassword>Change Password</a></li><li><a href=?module=UserCP&amp;section=Users&amp;action=ChangeUsername>Change Username</a></li></ul>
  </div><div>
<ul id="usercp_NavigationMenu">
<li>Vehicle Options</li><li><a href=?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=Add>Add MOT</a></li><li><a href=?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List>List MOTs</a></li></ul>
  </div> </div>

</body>

</html>
CSS:
Code: [Select]
html {}

* { box-sizing: border-box; }

body {
 
  font-family: Verdana;
  /*    font-size: 1em; */
  margin: 0;
  background: #b1bdc9;

}

.user_HeaderNavigation {

padding: 0.75em;
background: #7799de;

}
 
#mainContainer {

    max-width: 90em;
margin: auto;
    background: #fff;
    border-left: 2px solid #4472d0;
    border-right: 2px solid #4472d0;
    height: 100%;
   
}

#usercp_NavigationMenu {

    list-style: none;
    padding: 0.5em;
    background: #ccc;
    font-weight:  bold;
    max-width: 20em;

}

#usercp_NavigationMenu li {

    margin: 1em;
    border: 1px solid black;
    padding: 0.5em;
    border-radius: 0.25em;
    background: slategrey;

}

#usercp_NavigationMenu a:link, #usercp_NavigationMenu a:link, #usercp_NavigationMenu a:link {

    color: inherit;
    font-weight: normal;
    text-decoration: none;

}

#usercp_NavigationMenu a:hover {

    color: red;

}

.expired { color: red; }

.expiring { color: orange; }

.valid { color: green; }

table {
    position: relative;
    margin: auto;
    border-collapse: collapse;
    background-color: #f0f0f0;
 }

table th, table td {
    padding: 0.25em;
    border:1px solid #000;
    word-break: break-all;
 }

table th {
position: sticky;
    top: 0;
background-color: #000;
color:#fff;
 }

tr td:nth-of-type(2) div {
    padding: 0.3em;
    border: 2px solid #000;
    border-radius: 0.3em; 
    font-weight: bold;
    text-align: center;
 }

tr:nth-child(odd) td:nth-of-type(2) div {
    background-color: #ff0;
 }

tr:nth-child(even) td:nth-of-type(2) div {
    background-color: #fff;
 }

#paginationWrapper {

    display: flex;
    background: grey;
    padding: 1em;
    margin: 0.75em;
   
}

#paginationWrapper div {

    border: 0.1em solid black;
    padding: 0.5em;
    margin: 0.25em;

}

#paginationWrapper a:link, #paginationWrapper a:visited, #paginationWrapper a:active {

    text-decoration: none;
    color: inherit;
    /*border: 0.1em solid black;*/
    /*padding: 0.5em;*/
    /*margin: 0.25em;*/

 }

#paginationWrapper a:hover {

    color: white;

}

.currentPage {

    border: 0.1em solid black;
    padding: inherit;
    margin: inherit;
    background: orange;

}
Option from the menu:
Code: [Select]
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Control Panel - List MOTs</title>
<link rel="stylesheet" type="text/css" href="usercp.css">
</head>

<body>
<div>
<div class="user_HeaderNavigation">Logged in as: GrumpyYoungMan [ <a href="?module=LogOut">Log Out</a> ]</div> </div>

<div id="mainContainer"><h1>Your MOT reminders:</h1><table>
<tr>
<th></th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;Page=1">VRM</a></th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;Page=1">Expiry</a></th>
<th colspan="2">Status</th>
<th><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;Page=1">Remind?</a></th>
<th>Actions</th>
<th></th>
</tr>
<tbody>
<tr>
<td>1</td>
<td><div>JH58 VAB</div></td>
<td>February 14th 2019</td>
<td><div class="expired">Expired</div></td>
<td>11 months ago</td>
<td>No</td>
<td>[ Edit | Delete | <a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=View&amp;id=374">View</a> ]</td>

<td>1</td>
</tr><tr>
<td>2</td>
<td><div>OUL 057M</div></td>
<td>February 16th 2019</td>
<td><div class="expired">Expired</div></td>
<td>11 months ago</td>
<td>No</td>
<td>[ Edit | Delete | <a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=View&amp;id=147">View</a> ]</td>

<td>2</td>
</tr><tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td></td>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;order=DESC&amp;Page=3">Change Order</a></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Expiry&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td></td>
<td></td>
<td><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=Remind&amp;order=DESC&amp;Page=6">Change Order</a></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table><div id="paginationWrapper"><div>Page: 6</div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=1">&laquo;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=5">&lt;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=4">4</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=5">5</a></div><div class="currentPage">6</div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=7">7</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=8">8</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=7">&gt;</a></div><div><a href="?module=UserCP&amp;section=Vehicles&amp;subsection=MOT&amp;action=List&amp;column=VRM&amp;order=ASC&amp;Page=23">&raquo;</a></div></div> </div>

</body>

</html>
I probably should have posted this to my CodePen - I am sorry...

Please be aware the above is demo data and doesn't reflect any "real" actual data I hold.
« Last Edit: 7 Feb 2020, 03:46:21 pm by GrumpyYoungMan »
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas...
« Reply #1 on: 7 Feb 2020, 08:51:33 am »
Well I always like to give it a go, it's far from ideal and needs a lot of work in both HTML and CSS but it works, it just is not pretty but I can work on that. (I think)

Anyway, here is my CodePen.

I know the CSS needs work, I also can't get the background colours to work on the page link... as I have the selected page a different colour...
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Ideas... Display Flex?
« Reply #2 on: 9 Feb 2020, 10:33:46 pm »
What makes "User Control Panel" or "Your MOT reminders:" the name of the site and/or heading that everything on every page is a subsection of. You know, what a H1 means semantically/grammatically? In the case of the latter one, why isn't that a CAPTION for the TABLE?

Also, this is 2020 not 2009, you can stop saying type="text/css", and where's your MEDIA target? Omitting media="" is as bad as setting media="all" and a epic /FAIL/ at web development. No matter how many know-nothing framework "experts" skip right past that.

Where's your THEAD? Your SCOPE? Wouldn't the VRM TD make proper TH with SCOPE="row"?

Where's your "" around your HREF URI? Those haven't been optional in HTML since 1996.

What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?

Or the pagination. Pagination is a LIST of links, we have tags for lists.

... and seriously, learn to format your code. You've got your closures all over the place, nothing lines up, making it hard to even figure out what's wrapping what.

Otherwise you're asking how to make a normal columnar layout... so float, flex, or grid. I'd probably float for maximum compatibility and relative simplicity. Gimme a bit, having dinner... but then I'll toss together a rewrite.


« Last Edit: 9 Feb 2020, 11:00:50 pm by Jason Knight »
Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #3 on: 10 Feb 2020, 03:56:37 am »
Quote from: Jason Knight on  9 Feb 2020, 10:33:46 pm
What makes "User Control Panel" or "Your MOT reminders:" the name of the site and/or heading that everything on every page is a subsection of. You know, what a H1 means semantically/grammatically? In the case of the latter one, why isn't that a CAPTION for the TABLE?

Also, this is 2020 not 2009, you can stop saying type="text/css", and where's your MEDIA target? Omitting media="" is as bad as setting media="all" and a epic /FAIL/ at web development. No matter how many know-nothing framework "experts" skip right past that.

Where's your THEAD? Your SCOPE? Wouldn't the VRM TD make proper TH with SCOPE="row"?

Where's your "" around your HREF URI? Those haven't been optional in HTML since 1996.

What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?

Or the pagination. Pagination is a LIST of links, we have tags for lists.

... and seriously, learn to format your code. You've got your closures all over the place, nothing lines up, making it hard to even figure out what's wrapping what.

Otherwise you're asking how to make a normal columnar layout... so float, flex, or grid. I'd probably float for maximum compatibility and relative simplicity. Gimme a bit, having dinner... but then I'll toss together a rewrite.
Thanks for ripping my code apart! I thought I was getting on well! any how I have updated the 'Pen with some of the comments you made above, will work on the others later.

As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)

What quotes have I missed around a href? I can't find it?

Thanks again for the feedback and comments - I appreciate it! :)

Quote from: Jason Knight on  9 Feb 2020, 10:33:46 pm
What makes the titles of your links be LI? Or if they are LI wouldn't their children be UL/LI inside that LI for hierarchy?
I didn't even think of doing a list - within a list... I didn't think that would work... but thats why I post here, I appreciate the continued help! Sorry for posting the 'junk'
« Last Edit: 10 Feb 2020, 06:33:57 am by GrumpyYoungMan »
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Ideas... Display Flex?
« Reply #4 on: 10 Feb 2020, 09:14:32 pm »
Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)
If you're properly using PHP -- aka using comma delimited echo, not wasting time derping everything into stupid strings for nothing, not using the dumbass double quotes or {$variable} idiocy, there's little reason your PHP code cannot echo out well formatted HTML.

Sadly I've seen a lot of your PHP now, and you still refuse to break yourself of using the dumbass double quotes, garbage {$variable) inside them, or slopping everything into strings instead of just echo'ing it right then and there.

Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.

... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Ideas... Display Flex?
« Reply #5 on: 10 Feb 2020, 11:12:41 pm »
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.

Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #6 on: 11 Feb 2020, 01:16:27 am »
Quote from: Jason Knight on 10 Feb 2020, 09:14:32 pm
Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
As for the formatting, some of it is lost when I post - in my editor, it lines up. :) I'll work on the browser source as your right that is a mess... (some of it is better now as I made some small tweaks to the PHP source code (PHP_EOL?)
If you're properly using PHP -- aka using comma delimited echo, not wasting time derping everything into stupid strings for nothing, not using the dumbass double quotes or {$variable} idiocy, there's little reason your PHP code cannot echo out well formatted HTML.

Sadly I've seen a lot of your PHP now, and you still refuse to break yourself of using the dumbass double quotes, garbage {$variable) inside them, or slopping everything into strings instead of just echo'ing it right then and there.

Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.

... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
Actually I’m trying really hard to break the habit, and much has been changed since the very first code I posted, you must have noticed that?

Thanks, for the feedback.
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #7 on: 11 Feb 2020, 01:18:06 am »
Quote from: Jason Knight on 10 Feb 2020, 11:12:41 pm
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.
That is looking much better, although mine was very much a work a work in progress you were spot on about the colours!

Thanks again Jason!
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #8 on: 11 Feb 2020, 01:36:59 am »
Quote from: Jason Knight on 10 Feb 2020, 09:14:32 pm
Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
Quote from: GrumpyYoungMan on 10 Feb 2020, 03:56:37 am
What quotes have I missed around a href? I can't find it?
Your entire first code block with the side menu.
I think you are right - obviously, I didn;t update that - but I did my CodePen!

Quote from: Jason Knight on 10 Feb 2020, 09:14:32 pm
... and sorry I didn't get to the rewrite yesterday. I actually fell asleep mid-meal. Just put my head down ont he table for a second... Old man needs his naps I guess.

I'll see if I can squeeze it in tonight, but I've got two paying clients I need to at least do SOME work on first.
That's alright, I appreciate the feedback,  I seem to be having more come backs than Tyson!

Hopefully I won't be broken!

Thanks again!
« Last Edit: 11 Feb 2020, 07:06:05 am by GrumpyYoungMan »
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #9 on: 11 Feb 2020, 07:13:43 am »
I haven't integrated it fully yet - but this is what I have done so far:

CodePen

Thank you - that was the kind of look I was heading towards... I really do appreciate it...

And to prove I am trying to change here's a code snippet
Code: [Select]
// TABLE Header:
echo '<table id="reminders">
<caption>Your MOT reminders:</caption>
<thead>
<tr>

<th scope="col"><a href="', $link, '&amp;sort=VRM&amp;Page=', $page, '">VRM</a> <a href="', $link, '&amp;sort=VRM', $link_OrderChange, '&amp;Page=', $page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col"><a href="', $link, '&amp;sort=Expiry&amp;Page=', $page, '">Expiry</a> <a href="', $link, '&amp;sort=Expiry', $link_OrderChange, '&amp;Page=', $page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col" colspan="2">Status</th>
<th scope="col"><a href="' , $link , '&amp;sort=Remind&amp;Page=' , $page , '">Remind?</a> <a href="', $link, '&amp;sort=Remind', $link_OrderChange, '&amp;Page=',$page, '">', ( $queryOrder == "ASC" ? "&#38;#38;#9660;" : "&#38;#38;#9650;" ), '</a></th>
<th scope="col">Actions</th>

</tr>
</thead>
<tbody>';
One day, Jason hopefully you will say to me that I have posted really good code, if you bear with me... and keep steering me - I think my code is already starting to improve slightly?
« Last Edit: 11 Feb 2020, 08:32:40 am by GrumpyYoungMan »
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #10 on: 11 Feb 2020, 03:42:02 pm »
I can not style the top log out link?

Code: [Select]
#top a {}
doesn't work...
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #11 on: 12 Feb 2020, 01:19:15 am »
Quote from: GrumpyYoungMan on 11 Feb 2020, 03:42:02 pm
I can not style the top log out link?

Code: [Select]
#top a {}
doesn't work...
Try altering the right CSS file...   :o ::) Safe to say its working okay now...  :-\
« Last Edit: 12 Feb 2020, 03:34:43 am by GrumpyYoungMan »
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

GrumpyYoungMan

  • Hero Member
  • *****
  • Posts: 792
  • Karma: +8/-0
    • Grumpy Young Man
Re: Ideas... Display Flex?
« Reply #12 on: 12 Feb 2020, 03:37:00 am »
Quote from: Jason Knight on 10 Feb 2020, 11:12:41 pm
... and here's that rewrite:

https://cutcodedown.com/for_others/grumpyYoungMan/userCP/

I tossed a copy of the markup in as a .txt for those who are timid about "view source".

As you can see I played a bit with the style, you had a lot of areas of dubious colour contrast from a legibility standpoint. In that same vein your original felt a bit too crowded so I tried to open things up a bit. I added a footer to show how/where you would add one, and even laid the groundwork for making it responsive, including my current technique for a burger menu.

Though I didn't touch the table for responsiveness since tables suck for responsiveness. I'd probably set the td:last-child to display:block, and hide "thead th:last-child" to help open things up a bit in the media queries. Eventually setting them all to block based on the needs of the content and the screen size.

If I have time later I'll revisit this to give you a section by section breakdown of the how/what/why of the markup and CSS.
Thanks again for the rewrite and the CSS - I appreciate it! I had to make a few tweaks to make it work with my actual panel, but nothing major... :) Thank you!  ;D  :D  ;)  :)
Logged
Trying to learn a new trick to prove old dogs can learn new ones...

Total Novice have-a go Amateur Programmer - not sure that is the right thing to say... but trying to learn...

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Ideas... Display Flex?
« Reply #13 on: 12 Feb 2020, 11:03:39 am »
Quote from: GrumpyYoungMan on 11 Feb 2020, 07:13:43 am
I haven't integrated it fully yet - but this is what I have done so far:
A vast improvement, though as mentioned before your "variables for nothing" are really wasteful here. I also think it doesn't make a lot of sense to have order and item in the same $_GET, showing the SAME sort order on all items, and your formatting still needs help. Don't slop everything onto the same line like that if it can be avoided.

In general I think the link on the text should be moved to a independent arrow, just like the one to change the sort order. Likewise the current sort should be individually marked.

Leveraging some functions so as to DRY...

Code: [Select]
function template_reminderColHeader($name, $link = false, $colspan = false) {

echo '
<th scope="col"', (
$colspan ? ' colspan="' . $colspan . '"' : ''
), '>
', $name;


if ($link) {

$column = ($name == empty($_GET['sort']) ? 'VRM' : $_GET['sort']);
$desc = !empty($_GET['order']) && ($_GET['order'] == 'DESC');

echo (
$column && !$desc ? '
<span>&#38;#38;#x25B2;</code>'
: '
<a href="', $link, '">&#38;#38;#x25B2;</a>'
), (
$column && $desc ? '
<span>&#38;#38;#x25B2;</code>'
: '
<a href="', $link, '&order=DESC">&#38;#38;#x25BC;</a>'
);

}

echo '
</th>';

} // template_reminderColHeader

function template_reminderHeader($link) {

echo '
<table id="reminders">
<caption>Your MOT reminders:</caption>
<thead>
<tr>';

$link .= '&sort=' . $name . '&page=' . $page;

template_reminderColHeader('VRM', $link);
template_reminderColHeader('Expiry', $link);
template_reminderColHeader('Status', false, 2);
template_reminderColHeader('Remind', $link);
template_reminderColHeader('Actions');

echo '
</tr>
</thead><tbody>';

} // template_reminderHeader
A little different from how yours works, but not significantly. Again though, do the logic when you NEED it for the template, don't store it in some sort of global variable.
« Last Edit: 12 Feb 2020, 06:16:58 pm by Jason Knight »
Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1060
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Ideas... Display Flex?
« Reply #14 on: 12 Feb 2020, 06:16:02 pm »
Oh, and side note, as of HTML 5 you don't have to do the &amp; nonsense anymore in URI's. NOT that ANY legitimate UA ever actually cared -- they were at least smart enough to go "hey, this is in double quotes".
Logged
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.
Pages: [1] 2
 

SMF spam blocked by CleanTalk

Advertisement