Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1448 kolumny rownej szerokosci #1761

Open
wants to merge 6 commits into
base: master-dev
Choose a base branch
from

Conversation

olanicp
Copy link
Collaborator

@olanicp olanicp commented Nov 5, 2024

Dodałam stylowanie tak aby ta pierwsza kolumna tabelki była jak najmniejsza w zależności od zawartości pól tej kolumny tzn. w tym przypadku gdzie nadłuższy napis to "Grupy efektów kształcenia" wyglądają tak:
Screenshot from 2024-11-05 14-12-55
Screenshot from 2024-11-05 14-14-16
Jednak gdy jakaś tabela nie zawiera tego pola to automatycznie dostosowuje się do innego najdłuższego napisu:
Screenshot from 2024-11-05 14-14-24
Dodałam również @media aby na małych ekranach to załamywanie powróciło.
Jedno co zauważyłam to w stylowaniu colgroup col.table-info-type background-color nie jest właściwie zczytywany (prawdopodobnie przez stylowanie z pliku html). Kolor na stronie jest biały a w wersji produkcyjnej jest szary. Nie wiem czy to było zamierzone działanie, jeżeli nie to mogę wrzucić poprawkę.

@lgpawel lgpawel linked an issue Nov 6, 2024 that may be closed by this pull request
@lgpawel
Copy link
Contributor

lgpawel commented Nov 6, 2024

Jedno co zauważyłam to w stylowaniu colgroup col.table-info-type background-color nie jest właściwie zczytywany (prawdopodobnie przez stylowanie z pliku html).

Faktycznie, coś przegapiliśmy, zapewne w wirze zmian związanych z migracją z Bootstrapa 4 na 5. Powinno być tak, jak "dawniej", czyli na produkcji.

Ponieważ zmiany zostają wprowadzone w "głównym" arkuszu styli witryny, proszę upewnić się, że nie powodują niechcianych efektów na innych podstronach.

white-space: nowrap;
}

@media (max-width: 992px) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

W paru miejscach projektu już odwołujemy się do konkretnych szerokości ekranu (w tym dokładnie do 992px) ale to jednak mało "semantyczne". Skoro to jest standardowy breakpoint Bootstrapa, to może dałoby się do tej wartości odnieść inaczej?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

W nowym commicie dodałam @include media-breakpoint-up(lg) które odpowiada (około) 992px.

@olanicp
Copy link
Collaborator Author

olanicp commented Nov 19, 2024

Jeżeli chodzi o ten kolor kolumny, dodałam go w inne miejsce w stylowaniu i teraz działa poprawnie. Dodałam również nowe klasy które nie są nigdzie indziej używane w kodzie poza plikami html odpowiedzialnymi za zakładkę "Przedmioty" i "Oferta" żeby stylowanie na obu było takie same tzn. żeby pierwsza kolumna miała możliwie jak najmniejszą szerokość. Jeżeli chodziło tylko o jedną z wymienionych zakładek, to nie problem mogę to znowu zmienić.

Comment on lines +251 to +255
colgroup col.table-info-offer {
width: 1%;
}

.table-offer th {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Potrzebujemy dodawać te nowe klasy? Czy nie wystarczą selektory #table-info .table-info-type w pierwszym przypadku i #table-offer th w drugim?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dodałam te klasy bo po sprawdzeniu #table-info i .table-info-type występują też w pliku thesis.html więc wydawało mi się że stylowanie w ten sposób wpłynęłoby na ten widok. Jeszcze raz to zweryfikuje w takim razie

Copy link
Contributor

@lgpawel lgpawel Dec 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, cenna uwaga. Proszę w takim razie przyjrzeć się wszystkim miejscom, gdzie występuje selektor colgroup col.table-info-type i popatrzyć (to są dwie różne rzeczy):

  1. czy są jakieś wizualne różnice między produkcją a master-dev;
  2. czy usunięcie (po moim poprzednim komentarzu) deklaracji nadającej temu selektorowi background-color coś zmienia (tj. między master-dev a tym branczem).

Zgaduję, że w 1. okaże się, że kolorowanie wszędzie znikło, a 2. już nie ma znaczenia (co będzie oznaczać, że usunięcie tej deklaracji było tym bardziej właściwe). Jeśli się to potwierdzi, to proszę założyć nowy issue o przywróceniu kolorowania tła w tych miejscach. Później zdecydujemy też, jak rozwiązać "kolizję selektorów", która pojawiła się tutaj.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Faktycznie, sprawdziłam punkt 1. kolorowanie wszędzie zniknęło (gdy wybierzemy pracownika z listy pracowników, to samo ze studentami, gdy klikniemy w jakąś pracę dyplomową i gdy wejdziemy w Moje konto - czyli we wszystkich plikach które korzystają z table-info-type). Drugiego punktu już nie sprawdzałam.

background-color: #f9f9f9;
}

@include media-breakpoint-down(lg) {
#table-offer th {
Copy link
Contributor

@lgpawel lgpawel Dec 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To chyba nie ma szansy działać, bo (na ten moment) nie mamy nic pasującego do selektora #table-offer (który zresztą sam podałem w jednym z poprzednich komentarzy, nie zauważywszy tej pomyłki) w odróżnieniu od .table-offer. Plus, jeśli w "finalnym" stanie będzie to możliwe, to warto będzie tę definicję przerzucić do bloku razem z innymi dotyczącymi tego samego selektora (tj, tymi, które nie zależą od żadnego breakpointu).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Już jest zmienione, umknęło mi to pewnie przez to że sprawdzałam to do szerokości ok. 400px gdzie ta różnica pomiędzy pierwszą kolumną a drugą w szerokości się jeszcze tak nie rozjeżdza, dopiero na mniejszych to widać.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Kolumny tabelki różnej szerokości szerokości
2 participants