Latest Posts

Topic: Table style

Forums » Widelands Development » Homepage » Table style
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2596
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-11-17, 19:53

I would suggest to make the tables more readable. Now they look like:



The headers are very close to the preceding table; the conclusions of tableheader and the corresponding cells aren't very well.

my suggestion:



In my opinion it fits in very well.

To get this make the following changes to http://bazaar.launchpad.net/~widelands-dev/widelands-website/trunk/view/head:/media/css/base.css

* for headers change "margin-top: 0px" → "margin-top: 0.5em"
* Add new style:

th {
background-image: url('../img/wood.png');\
border: 1px solid #000;
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.7);
border-radius: 4px;
padding: 0px 5px;
}

The padding is necessary to get some space between text and small headerboxes. Maybe the shadow has to be adjusted.

What do you think about this?

Edit: Oh, the images brake the style :D (but not in preview) i resize them...

Edit2: test after merge

Edited: 2015-07-16, 08:33
Top Quote
Tibor

Joined: 2009-03-23, 23:24
Posts: 1377
Ranking
One Elder of Players
Location: Slovakia
Posted at: 2014-11-17, 20:07

looks good to me

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3317
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-11-17, 22:07

thumbs up

It might also be good to have lines around the table cells.

Edited: 2014-11-17, 22:08

Busy indexing nil values

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2596
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-11-17, 22:32

It might also be good to have lines around the table cells.

Thats a matter of taste face-smile.png

In my mind lines around the cells are too many lines. I tried a border around the table, but i think its to much too.

The style for "th" are only tested on the fly in the sandbox. Maybe this should be limited by another class or something else to prevend sideeffects to other website styles.

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3317
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-11-18, 07:53

Table cells could look like in forum threads, with black lines and a darker background.

Busy indexing nil values

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2596
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-11-18, 09:21

OK, this would look like this:

tablestyle

stylecode:


table {
    border-collapse: collapse;
}

td{
    background-image: url('../img/black20.png');
    border: 1px solid black;
}

th {
    background-image: url('../img/wood.png');
    border: 1px solid #000;
    border-radius: 4px;
    padding: 0px 5px;
}

box-shadow is now skipped. The background image for tablecells (td) is the same as the brighter one in the forum.

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3317
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-11-18, 12:29

Looks good face-smile.png

Just one tiny nit: The rounded table header corners don't look good with the lines. I'd set border-radius = 0px for the th.

I have implemented this and made a merge request https://code.launchpad.net/~widelands-dev/widelands-website/css-table/+merge/242062

Edited: 2014-11-18, 13:10

Busy indexing nil values

Top Quote
kaputtnik
Avatar
Topic Opener
Joined: 2013-02-18, 20:48
Posts: 2596
OS: Archlinux
Version: current master
Ranking
One Elder of Players
Location: Germany
Posted at: 2014-11-18, 15:10

Thanks face-smile.png

I didn't noticed that there is a file wiki.css...

It would be great if you could also change the value of "margin-top" as described in my first post. This could also be added in wiki.css:

h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5em;
}

This adds various distances (depending on the font-height of the header) to preceding contents. With "margin-top: 0px;" (as now in base.css) the headers are very close to preceding content.

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3317
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-11-18, 16:58

Done face-smile.png

Busy indexing nil values

Top Quote
GunChleoc
Avatar
Joined: 2013-10-07, 15:56
Posts: 3317
Ranking
One Elder of Players
Location: RenderedRect
Posted at: 2014-11-19, 11:20

This change has now gone live, thanks for the patch face-smile.png

It might take a while until your browsers pick up the changed css. You can try to force it to update (e.g. CTRL+F5 in Firefox).

Busy indexing nil values

Top Quote