Bug: Τα κουμπιά "Learn More" στην αρχική σελίδα ανήκουν σε διαφορετικά div από τις αντίστοιχες στήλες

[p15zerv]

Αφήνω στο τέλος το τεχνικό κομμάτι από το σχόλιο στο #105 για όποιον ενδιαφέρεται να ασχοληθεί. Στο ίδιο PR συνεχίζει λίγο η συζήτηση, οπότε ανατρέξτε κι εκεί για περισσότερες λεπτομέρειες/ιδέες.

Overview

Οι αλλαγές του #94 προκάλεσαν την εμφωλευμένη χρήση κάποιων στοιχείων div, με αποτέλεσμα να υπάρχει μία επιπλέον διαχωριστική γραμμή πριν το footer της σελίδας. Στην πραγματικότητα, η "δομή" της σελίδας είναι λάθος και τυχαίνει οι στήλες πριν από τη διαχωριστική γραμμή να είναι ευθυγραμμισμένες με τα κουμπιά "Learn More".

Για τις προσθήκες στο #105, ο @provopoulos είχε δυσκολίες να ευθυγραμμίσει το twitter feed με τις υπόλοιπες στήλες, λόγω του προηγούμενου προβλήματος. Για να το διορθώσει αφαίρεσε ένα επιπλέον div, με αποτέλεσμα να χαθεί η πρώτη διαχωριστική γραμμή.

Όπως είναι αυτή τη στιγμή, η σελίδα παραμένει λειτουργική. Όμως, με μελλοντικές προσθήκες είναι αρκετά πιθανό κάτι να χαλάσει. Ο πιο ολοκληρωμένος τρόπος επίλυσης θα ήταν να επανέλθει το πρώτο κενό feature_row στην αρχή και η κάθε στήλη να βρίσκεται στο ίδιο feature__item με το κουμπί της, όπως ίσχυε πριν το #94. Όμως, η λειτουργικότητα για να γίνει αυτό βρίσκεται στο αρχείο feature_row του theme, το οποίο προέρχεται από το minimal-mistakes, οπότε είναι μάλλον κακή ιδέα να τροποποιηθεί άμεσα το ίδιο. Η μόνη λύση που μπορώ να σκεφτώ θα ήταν να δημιουργηθεί ένα αρχείο που συνδυάζει τη λειτουργικότητα του dynamic.html με αυτή του feature_row, αλλά θα υπήρχε μεγάλη επανάληψη κώδικα με το δεύτερο.

Technical Details

Το πρόβλημα πρέπει να ξεκίνησε από το #94 και μας ξέφυγε στα reviews. Πριν από αυτό το pull request, το περιεχόμενο κάθε στήλης (ανακοινώσεις, εργαστήρια και projects) ήταν κάτω από το ίδιο div class="feature__item" μαζί με το αντίστοιχο κουμπί "Learn More", που είναι λογικό ώστε να ευθυγραμμίζονται. Έτσι, είχαμε δύο div class="feature__wrapper", με το πρώτο (αυτό που αφαιρεί ο @provopoulos, {% include feature_row id="intro" type="center" %}) να έχει απλώς το οπτικό εφέ του να προσθέτει την πρώτη οριζόντια διαχωριστική γραμμή μεταξύ της φωτογραφίας και των στηλών. Το δεύτερο, από την άλλη, περιείχε τρία μόνο feature__items με τις τρεις στήλες και τα κουμπιά τους, καθώς και την τελευταία διαχωριστική γραμμή πριν από το footer. Για το δεύτερο, υπεύθυνη ήταν η κλήση του δεύτερου include feature_row. Screenshot που ίσως βοηθήσει στην απεικόνιση όσων αναφέρω μέχρι στιγμής.

Με την προσθήκη του #94, δλδ όπως είναι το site αυτή τη στιγμή, έχουμε πλέον τρία div class="feature__wrapper": 1) το εισαγωγικό (intro), 2) αυτό που ανοίγει "χειροκίνητα" στο index και 3) αυτό που δημιουργεί, εμφωλευμένα πλέον μέσα στο 2ο, το ίδιο το include feature_row. Τώρα, τα κουμπιά είναι ευθυγραμμισμένα με τις στήλες, αν και αυτό συμβαίνει ουσιαστικά τυχαία. Αυτό που νομίζω συμβαίνει είναι ότι μέσα στο feature__wrapper, σε κάθε feature__item ανατίθεται κι ένας αριθμός child (νομίζω μέσω bootstrap), με το καθένα να καταλαμβάνει 33% του διαθέσιμου χώρου. Επειδή στον κώδικα του #94 πριν από κάθεfeature__itemπροηγείται κι ένα feature__wrapper και ο αριθμός στηλών και κουμπιών είναι ίδιος, η ευθυγράμμιση γίνεται χωρίς πρόβλημα. Όμως, κάθε feature_wrapper αφήνει στο τέλος μια διαχωριστική γραμμή, με αποτέλεσμα στο τέλος της σελίδας να υπάρχουν δύο...

Επιστρέφοντας επιτέλους στο pull request του @provopoulos... Αφαιρεί το 1ο και 2ο feature__wrapper, με αποτέλεσμα να φεύγει η περιττή διαχωριστική γραμμή στο τέλος, αλλά και η αρχική. Αν δε διέγραφε το 1ο αλλά μόνο το 2ο, τότε τα feature__item που αντιστοιχούν σε κάθε στήλη δεν έχουν "πατρικό" feature__wrapper, οπότε η αρρίθμηση φαίνεται να συνεχίζει από το τελευταίο που είχε μείνει. Το 1ο, αν και δεν περιέχει κείμενο, χρησιμοποιεί ένα feature__item, οπότε οι στήλες θα ξεκινήσουν από το 2ο. Τελικά, η 3η στήλη που περιέχει το twitter feed θα έπρεπε να καταλήγει ως 4ο παιδί, για το οποίο δεν υπάρχει κανόνας μάλλον στη css, οπότε στην πραγματικότητα του ανατίθεται και πάλι το 1. Επομένως, το twitter feed ξεκινάει πάλι από την πρώτη στήλη στα αριστερά, το οποίο είναι μάλλον το θέμα που αναφέρει στο σχόλιό του ο @provopoulos.

Τελικά, έτσι είναι το site μετά από το pull request. Λειτουργικό και εμφανισιακά σχεδόν το ίδιο. Το σημαντικότερο είναι πως οι στήλες είναι ξέχωρες από τα κουμπιά μετά το #94. Οπότε είναι πιθανό ο επόμενος που θα θέλει να πειράξει τη διαρρύθμιση στην αρχική σελίδα να χαλάσει κάτι άλλο...

[stale]

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.