Συζήτηση Βικιπαίδεια:Πύλη Κοινότητας/Σελίδες που χρειάζονται προσοχή

@Verified Pie:, ποιο είναι το μέγεθος της οθόνης σου, και τι ανάλυση χρησιμοποιείς; — Geraki ^{(συζήτηση)} 09:24, 9 Μαρτίου 2022 (UTC)

Αυτήν τη στιγμή απαντώ από τον σταθερό υπολογιστή μου που έχει οθόνη 21 ίντσων (1920 x 1080 απ' ό,τι βλέπω στο skroutz). Γενικά, συνεισφέρω από μία ταμπλέτα 10,2 ιντσών 2160 x 1620. Μέσα στην ΒΠ:Πύλη Κοινότητας εξακολουθώ να θεωρώ ότι η τροποποίησή μου έπρεπε να γίνει. Επίσης, ίδια φαίνεται και στις δυο συσκευές. Ποιο πρόβλημα υπάρχει; -- Verified Pie 06:34, 10 Μαρτίου 2022 (UTC)

Λοιπόν, Γεράκι, κατάλαβα γιατί το λες. Χρησιμοποιείς -όπως τόσοι άλλοι- Legacy Vector στο οποίο αλλάζει η μορφή μιας σελίδας ανάλογα με το μέγεθος της οθόνης! Και εκεί φαίνεται όντως κακό.. πώς αντέχετε το Legacy Vector όλοι εσείς ;;--Verified Pie 06:51, 10 Μαρτίου 2022 (UTC)

Έχω μια ιδέα, απλά πρέπει να αλλάξεις ως διαχειριστής το μοντέλο περιεχομένου του Πρότυπο:Σελίδες που χρειάζονται προσοχή.css σε sanitized css.--Verified Pie 10:06, 10 Μαρτίου 2022 (UTC)

Όχι, χρησιμοποιώ το νέο Vector (2022) αλλά θυμάμαι πάντα αυτό που λέω συνεχώς: μην βασίζεστε σε αυτό που βλέπετε στην οθόνη σας για το ότι «φαίνεται εντάξει». Λάβε υπόψη ότι αυτό δεν είναι ακόμη default (δηλαδή ασύνδετοι χρήστες βλέπουν το παλιό vector). Αλλά και γενικά, το περιεχόμενο δεν πρέπει να δομείται θεωρώντας δεδομένο το θέμα περιβάλλοντος (και η προβολή σε κινητό επίσης δεν είναι σε Vector αλλά Minerva 😉). Για να καταλάβεις λοιπόν, σε legacy vector στην δικιά μου οθόνη (24', 1920x1200), τα δεδομένα εμφανίζονταν 15 ολόκληρα εκατοστά μακριά από την περιγραφή. Αλλά και σε Vector 2022, τα δεδομένα εμφανίζονταν 12 εκατοστά μακριά, όταν το παράθυρο ήταν στο μισό πλάτος/οθόνη (όπως συχνά δουλεύω), αφού ολόκληρη η σελίδα είναι responsive και από δύο στήλες γίνεται μία που αποκτά μεγαλύτερο πλάτος. Γενικά λοιπόν, ειδικά όταν έχει να κάνει με πλάτος, αποστάσεις, κλπ καλό είναι να παίζεις με το παράθυρο για να δεις αυτό που θέλεις να κάνεις σε διάφορες περιπτώσεις, ή ακόμη καλύτερα μέσα από τα DevTools, έχει να τεστάρεις το περιεχόμενο και για συγκεκριμένες συσκευές ή κατά βούληση αλλαγή αναλύσεων και zooming.

Για να το πάρουμε λοιπόν πως θα το κάνουμε, πιάνουμε από την αρχή το επιδιωκόμενο: υποθέτω ότι ο λόγος αλλαγής ήταν να μην είναι κολλημένοι οι αριθμοί της δεύτερης στήλης στα γράμματα της πρώτης στήλης. Ok, δεν είναι τρομερό, αλλά αμέσως αυτό μας λέει ότι δεν θέλουμε να μεγαλώσει ολόκληρος ο πίνακας μέχρι όπου πάει, αλλά να μπει μόνο ένα μικρό κενό. Άρα η κατεύθυνση είναι να μεγαλώσουμε το border ανάμεσα στα κελιά της κάθε γραμμής ή να μεγαλώσουμε ελαφρώς το αριστερό cell padding της δεύτερης στήλης. Διάβασε σχετικά, και δοκίμασέ το σε κάποιο πρόχειρο (δεν χρειάζεται καν να είναι στην ΒΠ, αφού δεν έχουμε χρήση κάποιας κλάσης μπορείς να κάνεις πειράματα και στο codepen)

Από εκεί και πέρα, εγώ να αλλάξω το μοντέλο, αλλά θα δεις ότι δεν πρόκειται να δουλέψει, και αν δούλευε θα ήταν λάθος, για πολλούς λόγους: α) δεν μπορείς να πειράξεις το #content. Εκ του σχεδιασμού του το TemplateStyles το αποτρέπει αλλάζοντας τα selectors ώστε να ισχύουν μόνο κάτω από το .mw-parser-output (χονδρικά, ότι είναι κάτω από τον τίτλο σελίδας) ώστε να μην μπορεί ένα πρότυπο να πειράξει τμήματα της σελίδας που δεν είναι επιθυμητό να πειραχτούν (δηλαδή δεν μπορεί ένα πρότυπο να παίξει το ρόλο του Common.css, Vector.css κλπ.). β) ούτως ή άλλως είναι λάθος ο selector, το περιεχόμενο της σελίδας βρίσκεται πολύ πιο κάτω. Αυξάνοντας το πλάτος του #content απλά το αυξάνεις στο μέγεθος του παραθύρου, αλλά μετά έρχεται και η sidebar από δίπλα οπότε γίνεται overflow και αποκτάς περιεχόμενο μεγαλύτερο από το παράθυρο. Δοκίμασέ το στο devtools να το βάλεις κατευθείαν πάνω στο div και θα το δεις. γ) Ακόμη και αν δούλευε, θα ήταν εξαιρετικά μεγάλο σφάλμα το να αλλάξεις το πλάτος ολόκληρης της σελίδας για χάρη ενός πίνακα! Μπορεί να έφερνες το αποτέλεσμα που ήθελες στον πίνακα, αλλά θα καταργούσες δεκάδες άλλες προβλέψεις για την εμφάνιση δεκάδων άλλων στοιχείων, είτε της διεπαφής, είτε του περιεχομένου.

Βασικά, και να καταλαβαίνεις, απλώς προσπαθώ να σε καθοδηγήσω επειδή φαίνεσαι ορεξάτος. Αν γίνομαι βαρετός, απλώς πες μου να το φτιάξω εγώ με μια επεξεργασία για να δούμε κάτι άλλο. — Geraki ^{(συζήτηση)} 12:28, 10 Μαρτίου 2022 (UTC)

Συμφωνώ με όσα λες. Απλώς το #content θα άλλαζε το πλάτος του πίνακα στο ΒΠ:Πύλη Κοινότητας/Σελίδες που χρειάζονται προσοχή, όχι της Πύλης κοινότητας. Και νομίζω ότι αυτό θα μπορούσε να δουλέψει. --Verified Pie 18:58, 10 Μαρτίου 2022 (UTC)

@Verified Pie Μα το #content είναι div πολύ πιο πάνω στο dom. Κοίτα τον κώδικα της σελίδας. Με ποιο τρόπο θα απέδιδε το width:100%; σε συγκεκριμένο table; — Geraki ^{(συζήτηση)} 12:36, 12 Μαρτίου 2022 (UTC)

Άλλαξα το content model για να πειραματιστείς αν θέλεις, αλλά όπως θα δεις δεν θα δουλέψει. Ο μόνος λόγος να πειράξεις το content είναι για να πειράξεις ολόκληρη τη σελίδα [1]. Όπως όμως εξήγησα, sanitized σημαίνει ότι το Mediawiki το μετατρέπει σε .mw-parser-output #content{...} δηλαδή μόνο σε #content που είναι μέσα σε .mw-parser-output. Όμως, η δομή του Mediawiki είναι #content > .mw-parser-output, όχι το αντίστροφο. Θεωρητικά θα λειτουργούσε κάνοντας μια ανωμαλία βάζοντας id="content" στο table αλλά θα έσπαγε τον κώδικα αφού τα id πρέπει να είναι μοναδικά. Άλλωστε δεν θα υπήρχε λόγος χρήσης ενός id και μάλιστα συγκεκριμένου αντί ενός class ειδικά για τη συγκεκριμένη δουλειά (ή έστω inline).

Ok, καταλαβαίνω (ίσως) τι θέλεις να πεις, ότι θα άλλαζε το πλάτος του πίνακα στο ΒΠ:Πύλη Κοινότητας/Σελίδες που χρειάζονται προσοχή, όχι της Πύλης κοινότητας, επειδή θα το έκανες transclude μόνο σε αυτή την υποσελίδα και όχι στην Πύλη, αλλά -ακόμη και αν ήταν σωστός ο selector- τα transclusions γίνονται διαδοχικά, οπότε θα γίνονταν κι εκεί και φυσικά θα άλλαζε όλη τη σελίδα.

Όμως τελικά, θα πρέπει να ξεκινάς να αποδίδεις styles για να κάνουν ακριβώς αυτό που θέλεις με τον απλούστερο τρόπο. Ακόμη και αν η επιλογή ή επιθυμία είναι να μην μεταβληθεί π.χ. το padding των κελιών, η το cell spacing, ή το πλάτος συγκεκριμένων στηλών, και η επιθυμία/επιλογή είναι να ρυθμιστεί το πλάτος ολόκληρου του πίνακα, η απλούστερη λύση είναι ένα απλό max-width (ακριβώς για αυτό το σκοπό) αντί να μπλέκεις με media queries. [2] — Geraki ^{(συζήτηση)} 13:45, 12 Μαρτίου 2022 (UTC)

Τώρα το έκανα έτσι ώστε να έχει width 100% σε αυτούς που έχουν μικρές οθόνες ή χρησιμοποιούν Vector 2022. Έκανα λίγο την αλλαγή στο vector legacy και δε μου άρεσε καθόλου πώς φαινόταν βέβαια. Καλά, όσο για το πρότυπο με το css πρέπει να πάει σίγουρα για διαγραφή, είναι όντως άχρηστο. --Verified Pie 06:29, 13 Μαρτίου 2022 (UTC)

😑Όχι, δεν το έκανες 100% σε αυτούς που έχουν μικρές οθόνες ή χρησιμοποιούν Vector 2022 (και γιατί μόνο για αυτούς, με όλο το παραπάνω εξακολουθείς να παρακάμπτεις το υπόλοιπο 90% χρηστών που δεν χρησιμοποιεί Vector 2022). Αυτό που έκανες είναι απλά να μεγαλώσεις το μέγιστο πλάτος από 25em σε 750px. Αυτό που λέω ότι δεν πρέπει να γίνεται, να έχει τόσο μεγάλο κενό χώρο μεταξύ των γραμμάτων και των αριθμών που να πρέπει να μετρήσει κάποιος τις σειρές σε κάθε στήλη για να δει πού αντιστοιχεί το κάθε κελί.

Όμως δεν θα σου αρέσει καθόλου, ούτε σε Vector 2022. Τώρα είμαι σε 1920x1080 με κλίμακα 120%, με Vector 2022, κλειστή sidebar, και το παράθυρο σε πλάτος 2/3 από τις τυπικές επιλογές των Windows 11: φαίνεται ακριβώς όπως εδώ Αν σου φαίνεται χάλια στην υποσελίδα, θα φαίνεται χάλια παντού.

Επίσης γιατί συνεχίζεις να βάζεις το attribute width αντί να το ορίζεις στο css. Το attribute width έχει οριστεί ως καταργημένο εδώ και κάπου 10 χρόνια. — Geraki ^{(συζήτηση)} 08:53, 13 Μαρτίου 2022 (UTC)