MRC iteration - News Bits and Scaling

MRC iteration - News Bits and Scaling

بواسطة ro بتاريخ 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)

بواسطة selios2000

Hero (595)

صورة 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.

بواسطة Briqunullus

Paladin (775)

صورة 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.

بواسطة santiontanon

Paragon (1832)

صورة 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!

بواسطة Manuel

Ascended (19688)

صورة 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!!!!!!!!!!!!!!!!!

بواسطة Grauw

Ascended (10821)

صورة 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.

بواسطة ro

Scribe (5063)

صورة 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

بواسطة Grauw

Ascended (10821)

صورة 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;
    }
}

بواسطة Haze

Master (152)

صورة 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!

بواسطة gdx

Enlighted (6440)

صورة gdx

04-03-2022, 13:27

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

بواسطة Bengalack

Paladin (805)

صورة 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!!!

بواسطة syn

Prophet (2135)

صورة syn

04-03-2022, 20:30

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

بواسطة Jorito

Mr. Ambassadors (1803)

صورة 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?

بواسطة ro

Scribe (5063)

صورة 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 ????

بواسطة tfh

Prophet (3430)

صورة 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!

بواسطة syn

Prophet (2135)

صورة 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

بواسطة sdsnatcher73

Enlighted (4307)

صورة 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).

بواسطة shalafi

Master (171)

صورة 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!

بواسطة mcolom

Champion (322)

صورة 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.

بواسطة gdx

Enlighted (6440)

صورة gdx

05-03-2022, 12:00

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

بواسطة ren

Paragon (1947)

صورة 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;
}

بواسطة sdsnatcher73

Enlighted (4307)

صورة 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.

بواسطة gdx

Enlighted (6440)

صورة gdx

06-03-2022, 11:26

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

بواسطة ren

Paragon (1947)

صورة 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.

بواسطة albs_br

Champion (499)

صورة albs_br

06-03-2022, 22:52

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

بواسطة Manuel

Ascended (19688)

صورة 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:

بواسطة gdx

Enlighted (6440)

صورة 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.

بواسطة ro

Scribe (5063)

صورة 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