Vivaldi’s forum has been updated


  • Moderator

    @LonM Yes, before uploads did not track which user sent them.

    And the "Red plus" when composing has now changed to a comment balloon, and it has a title/tooltip text (my patch 😁).


  • Moderator

    I know it has often been stated that vivaldi (the browser) isn't going to be fully open-source. I understand the logic behind this as keping it with a defined vision, not having tons of forks, keeping cohesive, business reasons etc.

    But that same logic isn't (in my mind) transitive to vivaldi.net (the forum). If the forum itself were open source (as the base nodebb already is) - users could contribute fixes for whatever nagging issues exist, like missing paddings and the like. And you're not going to lose any business with an open-source forum, no-one uses the browser just to access vivaldi.net.

    Case in point: The forum mod, and this:

    @An_dz said in Vivaldi’s forum has been updated:

    the "Red plus" when composing has now changed to a comment balloon, and it has a title/tooltip text (my patch).

    Just a thought idea that occurred to me.



  • Great to see so many positive changes!
    I'm so happy to see that what I wished only a month ago became true 🤟🏼
    Thank you Vivaldi!



  • One issue I just found...
    I use the forum in a tab stack with tiled tabs. On the smaller tiled tab, I don't have the navigation features anymore which were shown on the side after clicking on the hamburger icon (I can read in dark grey undefined right under the NAVIGATION title - see below) :
    0_1543442467743_b32b4c55-18cc-4e22-a51b-267374178928-image.png
    In the previous version, I was easily able to navigate through the full menu (Unread, Recent, Users, etc.)
    Is this a bug or is it made on purpose?
    Thanks in advance.


  • Moderator

    @Ornorm Yes, the navigation in the mobile view seems missing. Definitely a bug.



  • @pafflick Thanks for letting me know this.
    I'll then cry until the next update 😭


  • Ambassador

    Complain all you want. I like the blue.

    Emojis now working here. That's a lot of emojis. 👍



  • @Nekomajin Purple would have been best. 😛



  • I don't understand. In this new forum design, all my mouse gestures now are dead [but fine for all other sites still], & even my invaluable AutoScroll extension does not work [again, fine on non V sites]. My mind is melting down.



  • Rats, i posted an apparent serious problem with this new forum design in the wrong thread... https://forum.vivaldi.net/post/255802

    Update: No, not all MGs, only some, so that's even weirder now [as a totally code-clueless user i cannot grasp how revising the forum broke some of the MGs; why not none or all?].

    1. Still OK in V Forum: Next Tab, Previous Tab, Reload, Close Tab.
    2. Now Dead in V Forum: Scroll to Top/Bottom, Scroll Down/Up.

    Update 2: Oh dear, navigating this updated Forum is now really horrible, sorry to say. Not only can i no longer read down the pages via mouse per my usual workflow, even keyboard navigation is borked, if i keep Infinite Scrolling set. I've had to revert to Pagination, yuck.

    Update 3: Blimey, how amazing. NONE of my preceding whinges are correct, or at least, the root cause is more complex than i earlier assumed. I have discovered that all the symptoms i listed apply for both Snapshot & Stable, & in both Linux & Windows... but ONLY when i use my Stylus css. I've used it happily for a couple of years now for the V Forum, & never had a problem before, til now. It seems not to like the new forum update. If i deactivate this css [via the Stylus UI], the V Forum 100% behaves properly again. Tis so strange.

    Something herein now clashes with the forum software, creating the esoteric symptoms i listed:

    html,
    body {
        background-size: 10px 10px !important;
        background-color: #8171a2;
        background-image: linear-gradient(45deg, rgba(100, 100, 100, .2) 25%, transparent 25%, transparent 50%, rgba(100, 100, 100, .2) 50%, rgba(100, 100, 100, .2) 75%, transparent 75%, transparent) !important;
        min-height: 100% !important;
        height: 100% !important;
    }
    .body {
        background: #E2E3F5 !important;
        overflow-x: hidden;
    }
    .topic .posts > li a {
        text-decoration: underline;
        color: #24948c;
    }
    .menuwrapper {
        background: #3b0059;
        top: 50px;
        left: 0;
        right: 0;
        height: 50px;
    }
    #content {
        background: #E2E3F5 !important;
        padding-top: 5px !important;
        border-radius: 10px !important;
        border: 5px solid #4d585f!important;
        -webkit-box-shadow: 0px 0px 43px -6px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 43px -6px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 43px -6px rgba(0, 0, 0, 0.75);
    }
    .navbar-default {
        background-color: #f2f2f2 !important;
        border-color: #eee;
    }
    small.label.group-label.inline-block {
        margin-right: 6px;
        margin-left: 6px;
        background: #a54c52 !important;
    }
    .topic .posts .status:before {
        display: none !important;
    }
    .win .categories h2.title .description,
    .win .category h2.title .description,
    .win .subcategory h2.title .description {
        color: rgba(0, 0, 0, .8);
        font-weight: normal;
    }
    .categories > li .content h2,
    .category > ul > li .content h2 {
        font-size: 10pt;
    }
    .topic-title,
    a {
        color: #2c5e94;
        text-decoration: none;
    }
    span.timeago {
        color: #b05158 !important;
    }
    .stats {
        font-size: 14px !important;
        text-align: center;
        margin-top: 7px;
        line-height: 22px;
    }
    .dropdown-menu {
        font-size: 11px;
    }
    .avatar.avatar-md {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:focus,
    .navbar-default .navbar-nav > .open > a:hover {
        background-color: rgba(0, 0, 0, .25);
        color: #555;
    }
    .composer .title-container .title,
    .bootstrap-tagsinput input,
    .bootstrap-tagsinput input:focus {
        border: 1px solid #ddd !important;
    }
    .bootstrap-tagsinput {
        margin-top: 1ex !important;
        padding-left: 0 !important;
    }
    li[component="post"] > hr,
    .post-bar > hr {
        display: none !important;
    }
    li[component="post"] {
        background: #fff;
        position: relative !important;
        padding: 20px 10px !important;
        border-bottom: 3px solid #ddd !important;
        margin-bottom: 20px !important;
        border-radius: 5px !important;
    }
    li[component="post"]:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-width: 0 16px 16px 0;
        border-style: solid;
        border-color: #ddd #f2f2f2;
        border-bottom-left-radius: 3px;
    }
    .fa-ellipsis-v:before {
        font-size: 150% !important;
        vertical-align: -2px !important;
        content: "\f013" !important;
    }
    .menuwrapper {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    hr {
        border-top: 1px solid #ddd !important;
    }
    .categories > li:nth-child(even),
    .category > ul > li:nth-child(odd) {
        background: #f6f6f6 !important;
    }
    .categories > li,
    .category > ul > li {
        margin-bottom: 0 !important;
    }
    .categories > li,
    .category > ul > li {
        border-bottom: 1px solid #ddd !important;
    }
    .alert-warning {
        display: none !important;
    }
    .categories > li .content img,
    .category > ul > li .content img,
    .categories > li .content .user-icon,
    .category > ul > li .content .user-icon {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .categories > li .content .icon,
    .category > ul > li .content .icon {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .categories > li .content .user-icon,
    .categories > li .content img,
    .category > ul > li .content .user-icon,
    .category > ul > li .content img {
        border-radius: 5px !important;
    }
    .categories > li .card .user-icon,
    .category > ul > li .card .user-icon {
        display: inline-block;
        border-radius: 5px !important;
        width: 24px;
        height: 24px;
        line-height: 24px;
        font-size: 1.5rem;
    }
    .categories > li .card img,
    .category > ul > li .card img {
        border-radius: 5px !important;
        width: 24px;
        height: 24px;
    }
    .categories > li:hover,
    .category > ul > li:hover {
        background-color: transparent !important;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:active,
    .btn-primary.active {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .topic .posts .icon img,
    .topic .posts .icon .user-icon {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .topic .posts .icon .user-icon,
    .topic .posts .icon img {
        border-radius: 5px !important;
    }
    .btn-default:hover,
    .btn-default:focus,
    .btn-default.focus,
    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .pagination {
        -webkit-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 10px 14px -11px rgba(0, 0, 0, 0.75);
    }
    .navbar-default .navbar-nav > li > a {
        color: #f5f5f5 !important;
    }
    .navbar-default {
        background-color: #3d474c !important;
    }
    .navbar-default .btn-link {
        color: #f5f5f5 !important;
    }
    .vivaldinav ul a.active {
        color: #ef3938 !important;
    }
    .navbar-default .navbar-nav > li > a:focus,
    .navbar-default .navbar-nav > li > a:hover {
        color: #ef3938 !important;
        background-color: transparent;
    }
    .avatar.avatar-rounded {
        border-radius: 5px !important;
    }
    .header .forum-logo {
        border-radius: 5px !important;
    }
    .header #user_dropdown img {
        width: 30px;
        height: 30px;
        border-radius: 5px !important;
        border: 2px solid #E1E1E1;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .active > a:hover {
        background-color: #282e31;
    }
    @-webkit-keyframes rubberBand {
        from {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        30% {
            -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
        }
        40% {
            -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
        }
        50% {
            -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
        }
        65% {
            -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
        }
        75% {
            -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
        }
        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    @keyframes rubberBand {
        from {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        30% {
            -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
        }
        40% {
            -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
        }
        50% {
            -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
        }
        65% {
            -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
        }
        75% {
            -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
        }
        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    .categories > li .content .icon,
    .category > ul > li .content .icon,
    .header .forum-logo {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: rubberBand;
        animation-name: rubberBand;
    }
    li[data-uid="26290"] {
        color: #8800bb;
    }
    a.threaded-replies.no-select .avatars,
    a.threaded-replies.no-select span.replies-last.hidden-xs {
        display: unset;
    }
    

    This is a major catastrophe of simply epic proportions. Gone is my personal purple font. Gone is my lavender background. It's enough to drive a gal to drink.


  • Ambassador

    @Steffie I moved the post here for you. It is now above your previous post.



  • I think the header changes are interesting. We started out with 50px for the header-menu and 50px for the sub-menu. Then 70 header and 50 sub, and now 64 header 56 sub. It hasn't become bigger in this update, it just shifted.



  • @sjudenim Does not look like a donkey to me.



  • @Pesala I figured it out. The Vivaldi navigation was placed with no padding, but since they didn't contain this to the direct child, all li and ul are affected. It's a bug, the dev who designed it simply overlooked it, it's not on purpose. This fixes it:

    /* dropdown padding fix */
    .dropdown-menu {
        padding: 5px 0 !important;
    }
    .header .chat-list li, .slideout-menu .chat-list li, .header .notification-list li, .slideout-menu .notification-list li {
        padding: 0.5em !important;
    }
    

    pic

    0_1543453644154_Screenshot 2018-11-29 02.06.32.png



  • 0_1543474880059_a57f411f-4377-4226-9d91-73c891c9d407-image.png

    Hmm... Things are placed a bit tight here...

    @Nekomajin

    0_1543475231336_77ce76ac-b0e8-442d-b94a-0ae4d94336f1-image.png


  • Community Manager

    @Quinca71 Thanks for the feedback, am I understanding you correctly, the top menu is not staying translated for you? It switches from your language to English in a glance? Or vice versa?

    @Quinca71 said in Vivaldi’s forum has been updated:

    @gaelle said in Vivaldi’s forum has been updated:

    Vivaldi's top menu is now translated for some languages

    So long living with English in that place, that suddenly, at a glance, I found strange my language, as if it were the foreigner one. But it was only for a glance. If it had taken a few more seconds, I would schedule a psychiatrist tomorrow. Age explains.😵


  • Moderator

    @gaelle I guess it is meant that the line spacing and/or padding between entries is too small.



  • The new forum is looking nice - I like the blue hadn't much time to test the other new features already.

    But I stumbled upon a strange bug.

    The unread indicator is only visible for me in the tab where I logged in and in clones of this tab but when I open another tab containing the forum but with another topic, it isn't visible.

    A bit complicated I know - my testcase is this

    I went to: https://forum.vivaldi.net/topic/22559/better-notes-mod and clicked with middle mouse button on the first comment on "This FR" as this is a link to another topic - in the new tab there is no unread counter.
    When I click on it I get shown the correct topics I didn't read yet but no indicator.

    0_1543476237545_unread.png



  • @pafflick said in Vivaldi’s forum has been updated:

    the blue top bar... I hope that it's temporary. Thank goodness we have custom CSS...

    Ha!! I've wasted hours today trying-but-failing to change this, & some other page elements. I can do it ok, temporarily, using Inspect & inserting appropriate colouration code therein, but then 100% of the times i copy this code segment/s into my Stylus css it all goes to hell. A year or two ago you kindly taught be an introduction How-To for this stuff, which was invaluable & i've successfully tweaked many sites since then to my tastes. Today though with the new forum i've just been useless haha. Eg, none of these is working for me; Stylus tells me:

    Issues: 10 
    Code 1
    warning	39	:	1	Rule is empty.
    error	40	:	6	Expected : at line 40, col 6.
    warning	44	:	1	Rule is empty.
    error	45	:	6	Expected : at line 45, col 6.
    error	46	:	6	Expected : at line 46, col 6.
    error	47	:	6	Expected : at line 47, col 6.
    error	48	:	6	Expected : at line 48, col 6.
    warning	52	:	1	Rule is empty.
    error	53	:	6	Expected : at line 53, col 6.
    error	54	:	6	Expected : at line 54, col 6.
    
    /* My attempt to make header-bar purple -- NFG */
    #submenu li, #submenu ul {
        background-color: #420a61;
    }
    
    /* My attempt to make header-bar fonts purple [in lieu of preceding] -- NFG */
    span.visible-xs-inline.showmenutext {
        font-size: 12px;
        font-weight: 400;
        display: inline-block!important;
        color: #3b0495 !important;
    }
    
    /* My attempt to change info-link font colour -- NFG */
    .topic .posts>li a {
        text-decoration: underline;
        color: #005500;
    }
    
    

    It must be simply delightful to be one of the Illuminati who actually understands these Dark Arts. 😃



  • @Steffie Why not #submenu {background-color: purple}? Haven't tested but should work out fine. The only trick is to inspect and look for the color that has been set. When you find it you use exactly the element it was set on.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.