[BETA][3.2][3.3] Kalender

[Melmac]

Trying to get a picture of what exactly your users expect to see in mobile views

The "classic" monthly overview is eight columns wide (seven for the weekdays Moday to Sunday plus one for the number of the week) and four to five rows in height, one for each week a month covers - is this layout to be shown when viewed on mobile as well?
If so: down to which resolution before it switches to the layout now in use for mobiles? At some point or resolution it has to switch to "blocks" (for the weeks) and days arranged in rows, though.

The breakpoint currently in use is set to =< 800px in width which could be changed to a still reasonable but lower value than now without causing too much impact on the CSS in use or too complex follow-on adjustments.

Provided a lower edge of 600px in width for the "classic" layout could be accepted:
I didn't have the time to evaluate it in detail (demo board with extension installed but with no real demo data at the moment ) but if you are willing to give it a try:

1. In /ext/hjw/calendar/styles/Hexagon/theme/calendar.css
2. find (starting at line 19 in an unmodified file)

   Code: Alles auswählen

   .weeknr {
   	font-size: 16px;
   	height: 20px;
   	width:25px;
   	line-height: 16px;
   	margin: 20px -4px 0 -14px;
   	text-align: center;
   	transform:rotate(-90deg);
   	color: #cadceb;
   	font-weight: bold;
   }

   and delete or comment out

   Code: Alles auswählen

   	margin: 20px -4px 0 -14px;

3. same code as in (1) => add after in a new line

   Code: Alles auswählen

   @media only screen and (min-width: 601px), only screen and (min-device-width: 601px) {
     .weknr {
       margin: 20px -4px 0 -14px;
     }
   }

   This will restore the setting for margin at resolutions higher than the new breakpoint - otherwise the layout would now be slightly distorted between 600px and 800px in width.
4. find (line 216 in an unmodified file)

   Code: Alles auswählen

   @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {

   and replace with

   Code: Alles auswählen

   @media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {

   in order to set the new breakpoit to 600px.

The result of this should now look like

Res.: 640 x 480

Please check for signs of flaws with the display of events etc. (i.e. distorted/broken event entries) - as mentioned before: I couldn't find the time to evaluate on this as thoroughly as I wished I could.
In case any problems occur please report back here - there might then be more modifications needed.


(Waiting for the extension's author to let all hell break loose over me for corrupting his works )

[menz01]

I guess i should have posted some pictures to show what i mean.

Here is my calendar when viewed from a PC (looking good now):
[ externes Bild ]


now here is my calendar when viewing from Motorola Z Play Android phone which has a large display:
[ externes Bild ]


thats a view i was not expecting. its not horrible but just not what users expect to see thats all and i was curious if a mobile view could be changed to look more like the calendar view you see on a PC

[HJW]

And if you turn the screen about 90°?

[Melmac]

It's not about size: it's about resolution
The layout switches whenever the horizontal resolution of the display mode (landscape or portrait) is detected to hit the defined breakpoint resolution (in this case: width in Pixels) - and this is independent of the physical size of the display (i.e. diagonal in inches).

Something else you could do:
Instesad of inserting

Code: Alles auswählen

@media only screen and (min-width: 601px), only screen and (min-device-width: 601px) {
  .weknr {
    margin: 20px -4px 0 -14px;
  }
}

as in (2) of my previous post insert

Code: Alles auswählen

@media all and (min-width: 601px) {
  .weknr {
    margin: 20px -4px 0 -14px;
  }
}

And in step (3), accordingly, instead of replacing the original code with

Code: Alles auswählen

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {

replace it with

Code: Alles auswählen

@media all and (max-width: 600px) {

[menz01]

My Calendar.css does not have the same settings as you are referencing. I know i have been making changes to it but the only changes i have made are to color hex codes. i have not change anything else. you said to look for this code:

[quote="Melmac"]

Code: Alles auswählen

@media only screen and (min-width: 601px), only screen and (min-device-width: 601px) {
  .weknr {
    margin: 20px -4px 0 -14px;
  }
}

but the only codes that look similar say this:

Code: Alles auswählen

@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px)

and i see another one close to the bottom that says this:

Code: Alles auswählen

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px)

so being that i am learning this coding thing from scratch i am a little leery on what change to make since the codes you are referring to i am not seeing. Again, sorry for being such a noob at this but i am trying

[Melmac]

Strange - the calendar.css files for 3.2.1 and 3.2.2 respectivly are identical - at least as far as the current version(= 0.9.1) of this extension is concerned.

Please check the extention version in use on your side and compare an unmodified original file with your modified one - just to make sure your file has not been corrupted or parts of its code been erroneously deleted while being edited.

--------------------------

Edit:
The first code you mentioned you couldn't find in that file

Code: Alles auswählen

@media only screen and (min-width: 601px), only screen and (min-device-width: 601px) {
  .weknr {
    margin: 20px -4px 0 -14px;
  }
}

is step (2) of the modifications I suggested in my first answer
It was to be inserted right after the modified code in step (1) - in other words: this code is "brand new" and does not have any "ancestors" in the original code.

My bad, sorry, in case I didn't express myself unambiguously enough

[menz01]

i have confirmed that i have installed this version:

Display Name:
Calendar
Clean Name:
hjw/calendar
Description:
Calendar for phpBB >=3.2.0
Version:
0.9.1
Homepage:
http://calendar.zoo-am-ring.de/
Release Time:
2017-12-10
Licence:
GPL-2.0

i have also confirmed by looking at the calendar.css that i did not touch that is still in my prosilver folder that i have

Code: Alles auswählen

[code]@media only screen and (max-width: 1220px), only screen and (max-device-width: 1220px) {

[/code]

and

Code: Alles auswählen

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {

i am not trying to be argumentative if i am coming across like that i apologize. i am just trying to figure this all out and when lines don't match it makes me think i will break something. i am copying all files before i edit them just in case. would it be better if i just post my entire calendar.css file in here?

[Melmac]

No problem and definitly no reason to apologize - simply put the blame on my English

It might be easier to see these proposed code changes in place, I guess:
https://ufile.io/wglnt (link will expire in about seven days)

It's the original calendar.css for prosilver with these modifications added but without any further adjustments such as adapted colour values etc.

And: keep asking!

[menz01]

thank you for the file. unfortunately it did not change the look on my mobile device. i took your file and made all the color changes that i needed and left all the rest of the code alone. i could see the changes you made were in there. i then renamed my calendar.css file that was on the server and downloaded it to my PC and deleted it from the server. i then took your file with my changes and uploaded it. i then verified on my PC that everything looked the same (did an F5) and it did. i then checked my mobile and the days were still in a straight down format like my previous screenshot. i did do a refresh on my device as well.

[HJW]

Do you run this in the ACP:

Code: Alles auswählen

Purge the cache
Purge all cache related items, this includes any cached template files or queries.