RIPEstat (Info service of the RIPE NCC)

ssuess

Hi all,

I work for RIPE NCC, and over the past several months I have been using quasar to build the new UI (as a PWA) for our RIPEstat service. We just launched a public beta today, you can check it out at https://beta-ui.stat.ripe.net

Thanks for all the help in this forum over the past months!

qyloxe

@ssuess VERY nice! Great!

I have a three little comments:

In help/suggestion carousel, theres animation, and during page transitions the ugly scrollbars are visible (chrome)
In search results there is an ugly browser scrollbar on the right side. You could use beautiful q-scrollarea from Quasar.
In some menus there are loaded files like jquery, bootstrap… ???

ssuess

@qyloxe thanks for the feedback. Yeah there are still a few issues to iron out, especially on windows and linux. Good idea about q-scrollable area, I will look into that (it already looks that way on Macs :)). As for menus with jquery/bootstrap there should not be any, where are you seeing those? I do load a couple of web components, but they don’t rely on any external library like that for styling, and I am not relying on any external styling library, although I do have a couple of adapted components like packery and highcharts in use for the boxes on the main page. Oh and there is usersnap which alas was a requirement (you can get to it by clicking on feedback) and loads its own crap

qyloxe

@ssuess said in RIPEstat (Info service of the RIPE NCC):

@qyloxe As for menus with jquery/bootstrap there should not be any, where are you seeing those? I do load a couple of web components, but they don’t rely on any external library like that for styling, and I am not relying on any external styling library, although I do have a couple of adapted components like packery and highcharts in use for the boxes on the main page.

checked again: after search, the widgets menu is accessible, and in some of them there’s loading of jquery and bootstrap. BUT those are iframes with its own code, so it’s probably OK

Anyway, there are infos in console log, for example 401 unauthorized or DOMException blocked frame etc.

Again - VERY nice app!

ssuess

Oh yeah, I forgot about those. That part is to help legacy users adapt with old style info when they need to, and as you pointed out are all in iframes, and there is nothing I can do about those, and they only load if someone uses that section (which hopefully isnt very often)

Thanks again!

dobbel

@ssuess

Looks really nice, especially the menu . I noticed that the feedback is broken.

ssuess

@dobbel thanks! Feedback button simply launches an included Usersnap feedback form (from an included js file). If you are blocking ads or cookies of certain domains, or run something like pi-hole on your internal network (as I myself do :)), I have noticed it will not launch (because domain api.usersnap.com is being blocked). I am advocating internally for a different feedback system, but for now this was alas a project requirement.

qyloxe

@ssuess said in RIPEstat (Info service of the RIPE NCC):

… I have noticed it will not launch (because domain api.usersnap.com is being blocked).

it’s possible to configure reverse proxy on your domain to proxy requests into api.usersnap.com like this for example:

stat.ripe.net/usersnap -> api.usersnap.com

In this way, the people who blocks your plugins are somewhat… fooled.

ssuess

Thanks, that is an interesting idea I will look into it (if we don’t replace this feedback mechanism soon that is).

metalsadman

you can hide the scroll bars by adding overflow:hidden css on the parent element that wraps your transition element.

ssuess

@metalsadman oddly, no matter what I do, I can’t make this work in Firefox. It works in all other browsers just fine. This is my css:

 /* Hide scrollbar for Chrome, Safari and Opera */
.noshowscroll::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noshowscroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none !important; /* FF */
  overflow: hidden !important;
}