Calendar css local and not responsive, md10/md2 too wide/shallow

[ghost]

UPDATE: see #55

First, the calendar uses a local css that is not compatible (enough) with the humhub theme (see pictures; e.g. fontsize) further more, it does not work on mobile.

Second, imho the right md-2 columns is too shallow. Changing it to md-8 / md-4 in the debugger makes it a lot more attractive. See pics.

I'd like to see that the css is not local (custom changes will be overwritten in case of an update) and respects at least the theme's font settings.

I've chosen to testdrive HumHub apart from many other social media platforms, for reason that
humhub looks very good on mobile devices - this module breaks the main design and i need to switch it off for our site and that's a pity...

Just my five cents...

Martin

Looks chaotic on mobile:

Too shallow right column:

Smaller font (12px) and md-8 / md-4 division looks better:

[ghost]

Changing the HTML in such a way that the middle column becomes a TD on it's own TR, at the top, solves all problems on mobile.

Original code:

<tbody>
<tr>
  		<td class="fc-header-left">
			<span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on"><span class="fc-icon fc-icon-left-single-arrow"></span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"><span class="fc-icon fc-icon-right-single-arrow"></span></span><span class="fc-header-space"></span><span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-disabled" unselectable="on">Vandaag</span>
		</td>
  		<td class="fc-header-center">
			<span class="fc-header-title"><h2>maart 2017</h2></span>
		</td>
		<td class="fc-header-right">
			<span class="fc-button fc-button-month fc-state-default fc-corner-left fc-state-active" unselectable="on">Maand</span><span class="fc-button fc-button-agendaWeek fc-state-default" unselectable="on">Week</span><span class="fc-button fc-button-agendaDay fc-state-default fc-corner-right" unselectable="on">Dag</span>
		</td>
	</tr>
</tbody>

Picture (original code):

My alternative:

<tbody>
	<tr>
  		<td colspan="3" class="fc-header-center">
			<span class="fc-header-title"><h2>maart 2017</h2></span>
		</td>
  </tr> <tr>
  		<td class="fc-header-left">
			<span class="fc-button fc-button-prev fc-state-default fc-corner-left" unselectable="on"><span class="fc-icon fc-icon-left-single-arrow"></span></span><span class="fc-button fc-button-next fc-state-default fc-corner-right" unselectable="on"><span class="fc-icon fc-icon-right-single-arrow"></span></span><span class="fc-header-space"></span><span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-disabled" unselectable="on">Vandaag</span>
		</td>
		<td class="fc-header-right" colspan="2">
			<span class="fc-button fc-button-month fc-state-default fc-corner-left fc-state-active" unselectable="on">Maand</span><span class="fc-button fc-button-agendaWeek fc-state-default" unselectable="on">Week</span><span class="fc-button fc-button-agendaDay fc-state-default fc-corner-right" unselectable="on">Dag</span>
		</td>
	</tr>
</tbody>

Picture (alternative code):

[ghost]

see #55