View Issue Details

IDProjectCategoryView StatusLast Update
0016766phplist applicationInterface - Administratorpublic19-06-13 12:00
Reporterduncanc 
PrioritynormalSeverityminorReproducibilityalways
Status resolvedResolutionfixed 
Product VersionSVN 
Target Version2.11.11Fixed in Version2.11.11 
Summary0016766: Table columns all have the same width causes clumsy layout
DescriptionUsing SVN trunk version.

The default theme has some CSS that makes all columns in tables have the same width.

In most cases this causes tables to look very clumsy, e.g. see the event log page where the narrow message column makes it difficult to use.

I think that it is these lines in file admin/ui/dressprow/css/style.css

table{
    table-layout: fixed;
    width:100%;
}
Steps To ReproduceView the event log page.
TagsNo tags attached.

Activities

mariez

09-04-13 19:27

developer   ~0052004

Hi Duncan.

Yes, that is the style who makes that.
But that style also force to cut words, and thats necessary for urls and long emails addresses, specially in small screen resolutions, where the table structure breaks without that.
I know it is a too arbitrary solution, but for the moment is the only one.
If you don't want it, just remove the line: table-layout: fixed;

Regards,
mz.

duncanc

27-04-13 14:50

developer   ~0052011

I found this technique of switching CSS for narrow screens

http://hawidu.com/2011/04/27/another-responsive-data-tables-approach/

Adding the CSS below to style.css and removing table-layout: fixed; helped to display the page with dynamic column widths at usual page width (>= 1024), but changed to fixed column widths when I narrowed the browser window.

@media screen and (max-width:720px){
    table{
        table-layout: fixed;
    }
}


The value of 720 might be a bit too small.

mariez

27-04-13 17:09

developer   ~0052012

This is a very usefull technique. But the urls can be very very long, even for big screens. I believe that the best solution is to find a way to cut urls, exposing just a part, and the complete on mousehover (like the Title). This is possible using javascript, but better using php for those who use javacript disabled. What do you think?

mariez

10-06-13 16:19

developer   ~0052114

Hi Michiel

I think the better way to do this is not showing the "http://www.", and show only the next 8 characters of each url adding "..." after that, and with the complete url on the title. After you do this change please assign me this issue back so i can free the column width on tables.

mariez

10-06-13 16:21

developer   ~0052115

Last edited: 10-06-13 16:22

View 2 revisions

May be you can do a function for manage different characters limit, so when url is into a table limit length to 8 characters, and when is outside a table limit length to 15, for example.

mariez

10-06-13 16:29

developer   ~0052116

Last edited: 10-06-13 16:30

View 2 revisions

same thing is need it for email addreses...

michiel

10-06-13 19:12

manager   ~0052117


I do that here already: http://dev.phplist.com/lists/admin/?page=mclicks&id=3

but I can limit it a little more

Can you give me the URLs (In the above dev site) where this needs to happen?

Also what do you want it to be the maximum lenght it has?

At the moment at a certain length (20) I take the first 10 and the last 10 and add ... between them,.

mariez

10-06-13 20:28

developer   ~0052122

In you example limit to 15 the url http://dev.phplist.com/lists/admin/?page=mclicks&id=3

Here limit to 15 the urls inside table (Available URLs) http://dev.phplist.com/lists/admin/?page=uclicks

Here limit to 30 the url in the title: http://dev.phplist.com/lists/admin/?page=uclicks&id=13

Here limit to 15 the email address inside table (Message open statistics) http://dev.phplist.com/lists/admin/?page=mviews&id=3

Here limit to 30 the address in the title http://dev.phplist.com/lists/admin/?page=userhistory&id=2
And in same window in Subscription tab, limit to 20 de http_referer inside table.

Here limit to 30 de address in the title: http://dev.phplist.com/lists/admin/?page=user&id=2
And limit to 10 de Unique ID inside table.

Here limit to 30 de url in the title http://dev.phplist.com/lists/admin/?page=userclicks&msgid=4&fwdid=4
and limit to 15 the address inside table (SUBSCRIBER CLICK STATISTICS)

Here limit to 15 the url inside table http://dev.phplist.com/lists/admin/?page=userclicks&userid=6

Here limit to 30 the url in the title http://dev.phplist.com/lists/admin/?page=uclicks&id=5

Here limit to 20 de address inside table http://dev.phplist.com/lists/admin/?page=members&id=4

mariez

10-06-13 20:32

developer   ~0052123

Last edited: 10-06-13 20:36

View 3 revisions

Here http://dev.phplist.com/lists/admin/?page=eventlog
limit to 15 the urls and email addresses inside table

And here limit to 15 the email address inside talbe http://dev.phplist.com/lists/admin/?page=listbounces&id=2

Here limit to 15 the url inside table http://dev.phplist.com/lists/admin/?page=domainstats

michiel

10-06-13 23:29

manager   ~0052124

briliant, thanks

michiel

14-06-13 14:06

manager   ~0052138

I've done through quite a few of them, but it may be useful to remove the restriction in CSS so it is more visible where it still needs changing.

mariez

14-06-13 15:59

developer   ~0052140

ok, done. I'm waiting the dev.phplist to update. In my local copy
i see a problem in small screens on: /lists/admin/?page=users

mariez

14-06-13 16:04

developer   ~0052141

may be we can show just the user on email addresses, and the complete address on title. I mean as a rule.

michiel

19-06-13 12:00

manager   ~0052151

I think I found all the places. I didn't reduce the size as much as you indicated in places, because then it looks really weird on the pages in normal size. Eventually the mobile version is less prevalent, and should be second stage.

If you find any other places let me know.