MRC iteration - News Bits and Scaling

MRC iteration - News Bits and Scaling

by ro on 03-03-2022, 08:10
トピック: MRC
言語:

The MSX Resource Center - or MRC - its dedicated website will receive a few updates. This includes better scaling on mobile devices, and a front page column with News Bits.

While the MRC website has proven its value over 25 years, it still needs repairs and updates from time-to-time. We've had a major upgrade with MRC2k11, which is already 10 years ago. We're still looking at the same pages from that iteration and planning on updating to a complete new website. But more on that in a later news post. This time we did some minor changes to improved the old lady.

The following two changes will be activated this weekend:

  1. Scaling on mobile devices
  2. News Bits

Let's start with the second one, the News Bits. This is a new column on the front page filled with short news like tweets. It contains quick links to MSX related news which we don't plan a full news report on. Think of bits like "new preview of game xxx on youtube", or "Minor firmware upgrade with fixes for device". Topics that would otherwise not be on the front page. The News Bits will replace the bi-monthly news post we call "SHRTS".

To make room on the front page, however, we remove the "Today's History" column. we moved the "Today's History" column further down. We also moved the Photo carrousel from the right side panel to the front-page.

Then about the first, mobile scaling. The MRC2k11 website has always been kind of static, or fixed, when it comes to its dimensions. On a regular computer or laptop, this is not an issue. But on mobile devices, like a smartphone, the MRC display ain't perfect. It's best read in landscape mode, but we fixed that. The adaptive scaling will change the MRC layout on mobile devices to make it much more readable.

With that, the website of MRC just got a bit better. We hope you like it. If you do, wby not donate?

* this news post was updated on 20220304

コメント (27)

By selios2000

Hero (526)

selios2000 さんの画像

03-03-2022, 10:06

I have always thought that the "Photoshoots" slideshow in the front page would be better bigger in some other place, because it is fun to watch.
Thank you for the entire effort.

By Briqunullus

Champion (512)

Briqunullus さんの画像

03-03-2022, 10:51

Looking forward to a full responsive website. That's a major improvement!

Will miss Today's History though. I have been away from MSX for a long time, so that section is a useful resource to catch up.

By santiontanon

Paragon (1636)

santiontanon さんの画像

03-03-2022, 16:28

Wow, thank you for working on this behind the scenes!! This website offers a huge service to the community, and it's often easy to forget that there are people behind it offering their time to make it work, paying the hosting bills, etc. A huge thank you for all the work!

By Manuel

Ascended (18785)

Manuel さんの画像

03-03-2022, 21:47

I know you didn't ask for my opinion, but I'm giving it anyway:
1. I use the website a lot on my phone and I don't care about the scaling at all. I can use 2 fingers to zoom in where necessary just fine. No problem. For me, absolutely no priority.
2. I would really REALLY suggest to keep the "Today's History" column. I think it's really fantastic! It reminds us of things that happened in the past and is often a trigger to check back on things. I would really miss it, please keep it!
3. How about checking with the users what they think are the most urgent issues to address?
4. Thanks a lot for working on the site and keeping it online!!!!!!!!!!!!!!!!!

By Grauw

Ascended (10581)

Grauw さんの画像

03-03-2022, 23:28

Manuel wrote:

1. I use the website a lot on my phone and I don't care about the scaling at all. I can use 2 fingers to zoom in where necessary just fine. No problem. For me, absolutely no priority.

I got used to it, I frequently visit on my phone, but it could definitely be better. I basically always start with a double-tap to zoom in. And since I recently started using the Firefox app, its biggest downside is that the double-tap doesn’t work anymore so I gotta use both hands to zoom in now.

Manuel wrote:

2. I would really REALLY suggest to keep the "Today's History" column. I think it's really fantastic! It reminds us of things that happened in the past and is often a trigger to check back on things. I would really miss it, please keep it!

It’s true that it does have its moments, where it reminds me of something that happened years ago, and I go “hah, on yeah that happened” or ”it’s been that many years ago already”. So it’s a fun category, although I might not miss it severely.

By ro

Scribe (4698)

ro さんの画像

04-03-2022, 08:18

Thank you for you feedback, guys. We've listened and did a little extra tweaking so that History is back on the Front page. And in order to have the layout complete, the PHOTOS are also a FP block now.
updated news post

By Grauw

Ascended (10581)

Grauw さんの画像

04-03-2022, 13:08

Very nice!

I noticed some variance in the width of the blocks on the frontpage, and I could scroll right a little bit in a number of places. In the desktop browser I made a user style in Stylus which cleaned it up in the places that I could find, hopefully that’s useful to tweak the CSS a bit more!

@media only screen and (max-width:988px) {
    /* frontpage: clear a bunch of float: lefts and width: 100%s */
    #main .block-contentblock,
    #main #block-contentblock-6,
    div.front-one,
    div.front-two,
    div.front-three,
    div.front-four,
    div.front-five,
    div#spotlight-items {
        width: auto !important;
        float: none !important;
    }
    
    /* frontpage: tweak some white space in the spotlight */
    div#spotlight-items div.slp {
        width: auto !important;
        margin-left: 4px;
        left: 0;
        right: 0;
    }

    /* newspost/forum: negative margin caused horizontal scroll */
    div.comment-options {
        margin: 0 -4px -2px -4px;
    }

    /* newspost/forum: let post contents span full width */
    /* To cancel out the max-width: 90% (can’t remove with userstyle) */
    div.txt {
        max-width: 100% !important;
    }

    /* forum/photoshoots: negative margin caused horizontal scroll */
    /* It was just to cancel out the padding, so we remove the padding instead. */
    body.node-forum-view #content,
    body.page-image #content {
        margin: 0;
        padding: 0;
    }
}

By Haze

Master (140)

Haze さんの画像

04-03-2022, 13:12

ro wrote:

Thank you for you feedback, guys. We've listened and did a little extra tweaking so that History is back on the Front page. And in order to have the layout complete, the PHOTOS are also a FP block now.
updated news post

Oh yes, that looks like a very nice solution, indeed! Thanks for the hard work!

By gdx

Enlighted (5500)

gdx さんの画像

04-03-2022, 13:27

It's better to put the wiki above "News bits".

By Bengalack

Hero (578)

Bengalack さんの画像

04-03-2022, 17:59

Love it. Muuuuuuch better.

One thing though. On my phone, the first post on each thread looks a bit off and different from the rest. But still better than no-scaling :-)

Anyways, thank you for your efforts!!!

By syn

Prophet (2096)

syn さんの画像

04-03-2022, 20:30

Any way to turn the scaling off? Even with "desktop site" enabled I get the scaled site.

By Jorito

Mr. Ambassadors (1782)

Jorito さんの画像

04-03-2022, 21:13

syn wrote:

Any way to turn the scaling off? Even with "desktop site" enabled I get the scaled site.

The full site needs 1024x768 because of the design, so simply make your window a bit bigger?

By ro

Scribe (4698)

ro さんの画像

04-03-2022, 21:51

Or use landscape on ye phone. I always hated that I needed to zoom on my phone. And even onㅣlandscape... We are old msx users, out sight gets less with age. I need glasses to read on my phone since last year. This scaling helps a lot ????

By tfh

Prophet (3178)

tfh さんの画像

05-03-2022, 00:34

My compliments on the new layout. The usability of the site on a mobile device is a lot better now!
Great work guys!

By syn

Prophet (2096)

syn さんの画像

05-03-2022, 01:32

Jorito wrote:
syn wrote:

Any way to turn the scaling off? Even with "desktop site" enabled I get the scaled site.

The full site needs 1024x768 because of the design, so simply make your window a bit bigger?

screen resolution is 1080 x 2400 pixels, chrome browser
on phone obviously.

doesnt seem to be possible to get the full site regardless of what i do, portrait mode /landscape

By sdsnatcher73

Prophet (3224)

sdsnatcher73 さんの画像

05-03-2022, 10:26

I think it is a great improvement! I notice that the white text field for the “Post new comment” at the bottom of a thread is slightly too wide (on Safari on iOS at least).

By shalafi

Expert (67)

shalafi さんの画像

05-03-2022, 10:50

I browse MRC from my phone quite often, and there's only one thing I can say:

THANK YOU!!

What you've done makes a hell of a difference!

By mcolom

Master (241)

mcolom さんの画像

05-03-2022, 11:44

Looks great on the phone now, thanks!
Perhaps I'd be better to move the last forum comments to the top? It's quite an active section, luckily.

By gdx

Enlighted (5500)

gdx さんの画像

05-03-2022, 12:00

Yes, what is used less must be lower. The wiki is more used that the News bits section.

By ren

Paragon (1928)

ren さんの画像

05-03-2022, 19:00

@syn: hw vs css pixels: https://www.mydevice.io/

AFAIK 'desktop site' only changes the user agent your browser sends to make it look like a desktop client. Most responsive sites (just) act upon the viewport width however.

Put the wiki section on top:

#main {
	display: flex;
	flex-direction: column;
}
#main > .front-four {
	order: -1;
	display: flex;
	flex-flow: row wrap;
}
#main > .front-four > * {
	flex-grow: 1;
}
#main > .front-four > :last-child {
	order: -1;
}

By sdsnatcher73

Prophet (3224)

sdsnatcher73 さんの画像

06-03-2022, 07:36

mcolom wrote:

Looks great on the phone now, thanks!
Perhaps I'd be better to move the last forum comments to the top? It's quite an active section, luckily.

That is a great idea, basically reverse the chronological order of comments in a thread so newer comments are on top.

gdx wrote:

Yes, what is used less must be lower. The wiki is more used that the News bits section.

That is not what mcolom said.

By gdx

Enlighted (5500)

gdx さんの画像

06-03-2022, 11:26

Look the date history. It is discouraging to see how this mass of work is considered.

By ren

Paragon (1928)

ren さんの画像

06-03-2022, 14:27

Because fun:

/**
 * MRC layout tweaker -  arrange msx.org frontpage to your liking
 * v0.1
 * 
 * .front-
 *     one             spotlight (6)             (2 blocks wide)
 *     two        news headlines (2)  &  latest forum posts (12)
 *   three    lastest reactions (10)  &            news bits (9)
 *    four  trading & collecting (4)  &         wiki updates (3)
 *    five      today's history (11)  &         photoshoots (22)
 *
 */

Say you want latest forum posts first, then latest reactions, then wiki updates, and then whatever, pass [12,10,3] to the function:

(function(n,t=[]){const e=document,o=e.createElement("style");o.innerText="\n#main {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr 1fr;\n\trow-gap: 8px;\n\tgrid-auto-flow: dense;\n}\n#main > div[class|=front] { display: contents; }\n#main > div[class|=front] > .block {\n\tmargin: 0!important;\n\tpadding: 5px;\n}\n\n#right > .sidebar {\n\tpadding-top: 6px;\n}\n#right > .sidebar > .block {\n\tmargin: 0 6px 6px 6px;\n}\n\n@media (min-width: 989px) {\n\t#main > .front-one > .block { grid-column: 1/3 }\n\t#main > .help { grid-column: 1/3 }\n\t#main > .share { grid-column: 1/3 }\n}\n\n@media only screen and (max-width:988px) {\n\t#main {\n\t\tgrid-template-columns: 100%;\n\t}\n}\n",document.head.append(o);e.getElementById("main");let i=0;const a=n.length;for(const d of n){i++;e.getElementById(`block-contentblock-${d}`).style.order=-1*(a-i+1)}for(const d of t){e.getElementById(`block-contentblock-${d}`).style.display="none"}})([12,10,3])

You can use this as bookmarklet, or try it in your console. If there's any interest I could write this as user-style, or user-script (JS isn't actually needed). Note: a subsequent invocation (with other values passed) won't work properly ATM.

By albs_br

Champion (375)

albs_br さんの画像

06-03-2022, 22:52

Responsiveness for better mobile experience is a very welcome improvement.
Congrats!

By Manuel

Ascended (18785)

Manuel さんの画像

07-03-2022, 00:10

There's something that can be improved for the photo part... it has a wrong scaling option, chopping off important parts of the image:

By gdx

Enlighted (5500)

gdx さんの画像

30-03-2022, 02:54

The site is a little buggy here.

There's six times the same reaction and "Multiplatformer Ascend in the making" has no link in News bits.

By ro

Scribe (4698)

ro さんの画像

30-03-2022, 07:02

Hai, I fixed the link in Ascend, it was padded with a space. That's buggy indeed.
The Nijmegen reactions are correct, those point to different images with the same title. Yup, confusing.

thanx gdx, for keeping an eye on things