SweClockers nya hemsida lanseras skarpt!

Läsa text på 3840 och 100% bredd kan inte vara någon skön upplevelse, jag skulle tappa bort mig hela tiden

Kan förtydliga det som @Alling pratar om, mina erfarenheter när jag skapade Wider Sweclockers.

Som jag upptäckte så blir bilderna större så fort man breddar SweC, när bilderna blir större blir de också högre vilket gör att de kan fylla ut nästan hela sidan. När artiklelbilderna kommer över 1280px börjar de bli pixliga. Om man inte förstorar bilderna blir de i vissa bredder helt okej ändå och layouten förstörs inte, men ju bredare ju konstigare kan man säga.

Om artiklarna och foruminläggen blir för breda så blir det svårt att läsa dessa. Det är allmänt känt sedan länge att vi människor har svårt att läsa för långa rader.

När man breddar för mycket utan att göra om layouten hamnar faktiskt en del av det tomma utrymmet inuti istället för på sidorna. Helst i forumet. Om man har vit bakgrund så kan det kanske upplevas lite bättre än det vita på sidorna.

Ska man ha flera kolumner? På framsidan skulle det säkert kunna ha två kolumner om man har tillräckligt brett, men hur gör man på forumet och i artiklarna. Ska hela layouten flytta in och bli smalare, eller ska artiklarna blir smalare inuti? Ska man ha massa info om andra saker på sidorna som tar upp och stör?

Det jag skriver här ovanför är mina tankar och erfarenheter när jag gjorde Wider Sweclockers. Jag har inte läst så noga diskussionen som varit sista dagarna här.

Om ni vill prova hur SweC ser ut när det är 100% eller annan storlek så kan ni installera Wider Sweclockers i Stylus och sedan leka med inställningarna. Default-inställningarna på WSC tycker jag passar en 27" 1440p skärm och det är 1800px. Tur att man kan installera ett UserCSS/Userscript så man kan bestämma lite själv. Precis som Sweclockers Dark eller BSW.

Tittade lite på forum och trådindexen
Vad är tanken med att lägga antalet trådar och visningar före sista inlägget? Som användare så finner jag det rätt ointressant hur många visningar ett forum har. Sista inlägget däremot kan locka mig till en spännande tråd-tittel. Likaså kan ett inlägg av en "bra" användare locka. Detta känns därmed som en konstig prioritering.

Sen en mindre detalj. Forumkategorierna som tex Datorkomponenter är indragna 18px men de forum som tillhör kategorin har mindre indrag vilket ger ett rörigt intryck. Ser bättre ut med tex

.body.subForums td.cell.title {
  padding-left:18px;
}

Det är samma sak med trådlistorna. De för mig som användare intressanta fälten antalet svar och senaste svar har prioriterats ned och stuvats undan medan det relativt ointressanta fältet antalet visningar kraftigt framhävs. Sista svaret och antalet svar är ju det som gör en tråd lockande, om en tråd har visats ack så många miljoner gånger så är den ofta ointressant om den inte innehåller ett enda svar på en frågan.

Båda dessa layouter var riktiga i gamla forumet och utgör tyvärr ytterligare exempel där det känns som om man har glömt användarfokus när man kodade om sidan.

Provade att sno ihop en snutt som vänder på det. Stackars @allling får väl magsår av detta snart....
Ska tilläggas att delar av koden är hittad på nätet och de sämsta delarna lär vara egen produktion

//rearange forum indexes
Array.from(document.getElementsByClassName("table table-fixed content-primary")).forEach(table => {
  var colIndex1=1;
  var colIndex2=3;
  if (table && table.rows && table.insertBefore && colIndex1 !=colIndex2) {
    for (var i = 0; i < table.rows.length; i++) {
      var row = table.rows[i];
      if (row.cells.length>colIndex2){ 
        var cell1 = row.cells[colIndex1];
        var cell2 = row.cells[colIndex2];
        row.insertBefore(cell2, cell1);
        row.insertBefore(cell1, row.cells[colIndex2]);
        }
      }
   }
});


//rearange forum thread lists
Array.from(document.getElementsByClassName("table round-corners")).forEach(table => {
  var colIndex1=2;
  var colIndex2=3;
  if (table && table.rows && table.insertBefore && colIndex1 !=colIndex2) {
    for (var i = 0; i < table.rows.length; i++) {
      var row = table.rows[i];
      
      //if the row got enough columns swap the selected ones.
      if (row.cells.length>colIndex2){ 
        var cell1 = row.cells[colIndex1];
        var cell2 = row.cells[colIndex2];
        row.insertBefore(cell2, cell1);
        row.insertBefore(cell1, row.cells[colIndex2]);
        
        //insert a new header field
        if(row.className=="row display-none display-s-table-row")  {
          let newNode = document.createElement("th");
          newNode.className="cell numReplies";
          newNode.innerHTML="Svar";
          row.insertBefore(newNode,row.cells[3]);
          }
        else
          {
          //get the post counter and insert it as a new td
          var mycell=row.cells[0].getElementsByTagName("a");  
          var posts=mycell[0].getElementsByClassName("posts");
          var mypost=posts[0];
          let newNode = document.createElement("td");
          newNode.className="cell numReplies";
          newNode.innerHTML=mypost.innerHTML;
          row.insertBefore(newNode,row.cells[3]);
          } 
       }  
    }
  }
});

Tur du stavade mitt namn fel så jag inte såg något.

Två snabba tips för bättre JS är att byta ut alla dina var och let mot const och dina

for (var i = 0; i < xs.length; i++) {
    var x = xs[i];
    // …
}

mot

for (const x of xs) {
    // …
}

men vi ska inte gå för OT här!

Det hade nog hjälpt om ni som undrar detta gav mer info om hårdvara och mjukvara. För mig räcker det att kryssa i Desktop site (Chrome) eller Request desktop site (Firefox) på min Galaxy S9.

 .nav-top .profile-wrapper .avatar {
     margin-left: 4px;
-    max-width: 20px;
-    max-height: 20px;
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
 }

Taggar @jreklund och @UndaC, då jag i frånvaro av tecken på motsatsen utgår från att detta tar max fem minuter att fixa.

Efter all hjälp jag har fått så vill jag bjuda tillbaka lite så jag har matat in din ändring i min exprimentkod.
Jag ser inga negativa effekter så här långt

Nu är nya trådar i ’följda trådar’ alltid blåa (titeln) och går inte att få dem till grå som de andra...

Ios safari

Nu verkar det fungera igen?

Men mitt tidigare inlägg om följda trådar står fast

Håller med flera andra här angående hänglåset. Jag har flera gånger trott att jag fått ett meddelande eller blivit citerad. Att ha orange uppe i menyn för något statiskt är inte bra design imnsho. Snälla byt denna mot en ikon av ett öppet eller stängt hänglås istället.

Vart skickar man in nyhetstips nu för tiden?

Svar:

Tackar!

Bytte ordning på knapparna i menyn också. Inga problem med det, bara fattar inte varför pm bytte med följda trådar

@UndaC, @jreklund, @Gurt: Drömmer jag, eller är "inaktiv/inte ny"-gråa ljusare nu? Tycker mig känna det är betydligt större kontrast mot orange och lättare för mig med funktionsvarierad syn.

Funktionsvarierad syn?