Improve HTML (columns width and idle rows)

[Fernando A F Lordão]

I have started to work with FET recently, but my colleagues have been working with it for 2 semesters.

To present scheduled time, they usually capture snapshots from the views generated through the menus "Timetable > View (students)" and "Timetable > View (teachers)". They agree with me that this procedure is a repetitive and boring task, but they do it this way because they think HTML files automatically generated by FET is difficult to appreciate due to the lack of alignment and width equalization between columns.

To trick this factor I tried to do a simple modification in HTML generated files in order to try a better width equalization between columns and they thought that it is better now (see old and new files in attachments).

The modification consists in inserting "width" attribute in "th" tags of day labels. It was assigned width value equals to (100%/NUMBER_OF_DAYS). Thus, as we used only weekdays, the attribute value was 20% and we modified HTML source code as follows:

* ORIGINAL CODE

Code Select Expand


        <tr>
          <!-- span -->
          <th class="xAxis">MON</th>
          <th class="xAxis">TUE</th>
          <th class="xAxis">WED</th>
          <th class="xAxis">THU</th>
          <th class="xAxis">FRI</th>
        </tr>


* MODIFIED CODE

Code Select Expand


        <tr>
          <!-- span -->
          <th class="xAxis" width="20%">MON</th>
          <th class="xAxis" width="20%">TUE</th>
          <th class="xAxis" width="20%">WED</th>
          <th class="xAxis" width="20%">THU</th>
          <th class="xAxis" width="20%">FRI</th>
        </tr>


Additionaly we also modified HTML files to ommit what we say "idle rows" like those ones produced by the following source code:

Code Select Expand


        <tr>
          <th class="yAxis">07:00 - 07:50</th>
          <td>-x-</td>
          <td>-x-</td>
          <td>-x-</td>
          <td>-x-</td>
          <td>-x-</td>
        </tr>


[Volker Dirr]

Hallo fernandolordao,

thank you for suggesting. The idea might be nice, but the way how you done it is not good.
1. the files size grow much more then they need. if you just add this feature into the css file, then you need to modify a single line only (and not each table itself).
2. the calculation is incorrect. You forgot the first column. so in fact your calculated with is over 100% now. Many browsers will do this: The first column is now as small as possible. let's say 5%. now the other 4 columns get 20%. so the last one got only 15%, not 20%. In worst case the browser will display up to 105%, so you need to scroll.
3. the tables look bad if you A) ...use shortcuts only b) ...have less days and/or c) ...have a large page size. Because now there is much unused space.

in fact you only need to modify the css file.
So just sear line:

Code Select Expand

th {

}
and modify into:

Code Select Expand

th {
th {
width: 20%;
}
}
Don't forget: 20% is incorrect!

the better way is searching this line in the css:

Code Select Expand

th.xAxis {
/* width: 8em; */
}

it effect not the first column, only the other ones. uncomment it. it use a fixed value. you need to check the best value for your timetable and printer.

[Volker Dirr]

About the idle rows:
please open the css file and search:

Code Select Expand

th.yAxis {
  height: 8ex;
}


Just remove that setting:

Code Select Expand

th.yAxis {

}


[Fernando A F Lordão]

Dear Volker,

I appreciate very much your considerations and tested both tips you gave about CSS. Now, I want to comment as follows:

1. Idle rows were not omitted with CSS changes you suggested. See that there are data in those rows, each cell is filled with "-x-", so they have to be shown. Because of that I deleted the corresponding source code in order to achieve the desired result;

2. About columns width, changing CSS my first column became larger than I want;

3. Regarding width percentage beyond 100%, I did NOT find any rendering problems with Chrome, Firefox, IE or Edge. In fact I had already thought about these potential problem and I was going to suggest a individual percentage to the first column, but considering the satisfactory result applying width attribute only to days columns, then I thought it wouldn't worth the additional work.

P.S.: I did my changes with two regex find and replace operations.

[Volker Dirr]

1. ah. you was taking about omitting. i thought you talk about size only. omitting will be done with "display:none;". i wrote that in the css file as second comment :-)
2. you are wrong, because it look like you used "td". but you need to style "th.xAxis". In that case the first column will keep as small as possible.
3. i tested with Chrome, Firefox and IE. All 3 variants have the render problem i descriped. The last column is smaller then the other columns. So your suggestion is bad.
ps: replacing is complicated. using the css is much faster :-)

[Fernando A F Lordão]

It's me again, Volker!  I'm sorry!

When I tried "display:none;" only titles of the days (MON, TUE, WED etc) were hidden, but I want to hide the lines whose values are allways "-x-". If you can, look at the appearence of the files I attached at this post to understand the effect I want (looking at first and second subgroups is enough).

If you could, I would ask you to make these changes into schedule_subgroups_days_horizontal_old.css in order to achieve similar appearence between the HTML attached files.

[Volker Dirr]

if you write "display:none;" into "th.xAxis" then of course the table head x-Axis will be removed. th=table head. xAxis=x-Axis.
you want to remove the "empty" cells. If you want to remove the whole cell including the boarder, then you need to add the "display:none;" stuff into "td.empty" (td = table data). If you want to remove only the "-x-" characters, then you need to add the "display:none;" stuff into "span.empty".

[Fernando A F Lordão]

Ok, ok, man! I give up! I can see your attention trying to show me that, but I also see that I need to study CSS in order to use it properly. 
So, given that I can't deal with CSS yet, let me give another suggestion: Is it difficult to automatically generate images like those colored views in "Timetable > View (students)" and "Timetable > View (teachers)"?

[Volker Dirr]

It is sadly not easy to code that. there are some problems with it. see:
http://lalescu.ro/liviu/fet/forum/index.php?topic=2247.0
so it is on my TODO, but it might take some time, since this is a very minor TODO on my list.

[rarunning]

Hey Fernando,

Did you find a solution to this problem?

[Liviu Lalescu]

Is it difficult to automatically generate images like those colored views in "Timetable > View (students)" and "Timetable > View (teachers)"?

This is done starting in FET-5.29.0, if you select HTML level 7. Does this help you, rarunning?

[rarunning]

Nope. I tried both

span.empty{display:none;} and
td.empty{display:none;}

Both do not make any impact on the html.

Trying to get rid of the "-x-" columns which are usually breaks and hence can be removed from the timetable.

[Liviu Lalescu]

Nope. I tried both

span.empty{display:none;} and
td.empty{display:none;}

Both do not make any impact on the html.

Trying to get rid of the "-x-" columns which are usually breaks and hence can be removed from the timetable.

I was referring that you can have the HTML timetables colored, if you select the HTML level 7.

You also have a setting to write or not -x- and -X- in the HTML timetables (if you deselect this, you will get ---).

[Volker Dirr]

Because the others are called "span.notAvailable", "td.notAvailable", "span.break" and "td.break". So you also need to modify them if you want to style them by css.