Bug fix: Responsive Content στην σελίδα του Προσωπικού

[Geoter711]

Δήλωση Θέματος

• Όπως είχε παρατηρήσει και ο συμφοιτητής μου, το περιεχόμενο στην σελίδα του Προσωπικού δεν "αντιδράει" ανάλογα του viewport της συσκεύης, με το πρόβλημα σε μικρές οθόνες. Καθώς το green light είχε γίνει αλλά οι αλλαγές ποτέ δεν πραγματοποιήθηκαν, θα ήθελα να το ολοκληρώσω.

Παρατήρησα ότι το πρόβλημα προκύπτει από το γεγονός ότι στο αρχείοpeople-rank.html (https://github.com/ioniodi/minimal-ionio/blob/master/_includes/people-rank.html) τα διάφορα elements χρησιμοποιούν grid για το display τους, που παρόλο που είναι καλή επιλογή για σελίδα σε μεγάλες οθόνες, στην δικιά μας περίπτωση δημιουργεί προβλήματα. Το σκεπτικό είναι να χρησιμοποιηθούν media queries για το responsive κομμάτι. Το display θα αλλάξει από display: grid σε κάποιο άλλο είδους display (για την δικιά μας περίπτωση ίσως αρμόζει καλύτερα display: flex), και αντί για την κλάση grid-container θα δημιουργήσω μία καινούρια κλάση για αυτόν τον σκοπό στο αρχείο main.scss (https://github.com/ioniodi/minimal-ionio/blob/master/assets/css/main.scss) (ίσως και να πραγματοποιηθούν αλλαγές σχετικά με την κλάση rank_title, ακόμα θέλω να πειραματιστώ λίγο με τις αλλαγές).

Όσο αφορά το demo, σκοπεύω να το παραπέμψω σύντομα με τις αλλαγές!

Update: Εδώ είναι το demo link. Οι αλλαγές υπάρχουν στο εξής branch. Τελικά όντως άλλαξα το grid σε flexbox, το οποίο είχε πολύ καλά αποτελέσμα. Καθώς υπήρχαν προβλήματα με τα headings να είναι μέσα στο flexbox, αποφάσισα να τα διαχωρίσω από το container, όπως φαίνεται στο αρχείο people-rank.html(https://github.com/Geoter711/minimal-ionio/blob/2019145/_includes/people-rank.html) Επίσης όντως δεν χρείαστηκε η χρήση του rank_title. Το μόνο πρόβλημα μέχρι στιγμής είναι ότι για viewport width 600-767px έχει περίεργη συμπεριφορά καθώς το wrapping "σπάει" λίγο και δεν προσαρμόζει τα elements στο width (αλλά και πάλι δεν δημιουργείται το πρόβλημα από προηγουμένως). Ένα άλλο μικρότερο πρόβλημα είναι οτι το flexbox περιορίζεται σε 3 elements για τα τωρινά μεγέθη (σκοπέυω να πειραματιστώ περαιτέρω με αυτό εφόσον γίνει το green light!). Αν κάποιος συμφοιτητής έχει πρόταση προς την λύση αυτών θα ήταν σίγουρα θετικό. Μια εναλλακτική ήταν να χρησιμοποιηθεί grid έως ότου το σημειό στο οποίο χαλούσε αρκετά η ιστοσελιδά, και σε μικρότερα μεγέθη να χρησιμοποιηθεί flexbox, αλλά γρήγορα παρατήρησα ότι αυτό εμφάνιζει άλλα προβλήματα που η λύση τους δεν είναι αποδοτική ενώ θα χάθει και έως ένα σημείο η συνοχή.

• Εκτιμώμενη δυσκολία: hard
• Σχετικοί συνεργατές: @alexpoulis @peteskk
• Σχετικά σύνδεσμοι (π.χ., στην επίσημη ιστοσελίδα, προηγούμενα σχετικά θέματα): https://github.com/ioniodi/sitegr/issues/189

Απορίες σχετικά με το θέμα (αν υπάρχουν)

Υπενθυμίσεις

• [x] Έχω βάλει σύντομο και μοναδικό τίτλο (π.χ., το όνομα της σελίδας ή της ανακοίνωσης)
• [x] Έχω ενημερώσει τα παραπάνω πεδία με περισσότερες λεπτομέρειες, όπως σύνδεσμος στην σελίδα που αλλάζω ή/και σύνδεσμο στην αντίστοιχη σελίδα της επίσημης σελίδας με την ενημερωμένη πληροφορία.
• [x] Έχω ελέγξει ότι το περιέχομενο των αλλαγών μου δεν το έχει δηλώσει κάποιος άλλος σε προηγούμενο issue ανοιχτό ή κλειστό
• [x] Πριν προχωρήσω σε pull request θα πάρω ετικέτα green light
• [x] Για την δεύτερη συνεισφορά έχω υλοποιήσει μια νέα λειτουργία και έχω εντοπίσει δύο σχετικούς αξιολογητές όπως φαίνεται στο λινκ που δίνω παραπάνω, διαφορετικά δεν γίνονται δεκτά θέματα που αφορούν απλή συνεισφορά περιεχομένου όπως στην πρώτη συνεισφορά

[alexpoulis]

Για το bug το οποίο αναφέρεις άμα τσεκάρεις το mobile όντως θέλει να κάνεις zoom out και μετά το footer και το bar στην κορυφή της ιστοσελίδας «χαλάει» όπως φαίνεται και στο screenshot οπότε φαίνεται σαν ένα σημαντικό θέμα. Θα περιμένω και το demo για να σου δώσω σίγουρα το οκ.

[Geoter711]

@alexpoulis Πολύ καλη παρατήρηση! Σκέφτηκα να το δείξω και εγώ αρχικά αλλά αποφάσισα προς όχι. Εφόσον τώρα όμως υπάρχει και στα comments, θα ήταν καλό να ύπαρχει και στο κείμενο του issue. Επίσης προστέθηκε ένα update σχετικά με το demo!

[PeteSKK]

Βλέπω οτι το σκέφτηκες το θέμα καλά. Μου αρέσει η ιδέα σου!

[diogenisAl]

Τι επιλέγεις τελικά @alexpoulis ;

[alexpoulis]

Ναι ξεχάστηκα, αλλά από ότι είδα στο demo φαίνεται καλό.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.