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.

Sign up for GitHub

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
Open

1448 kolumny rownej szerokosci #1761

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
36fe25e
Zmieniona szerokosc pierwszej kolumny na najmniejsza
olanicp Nov 5, 2024
123ec64
Dodaj zawijanie tekstu na malych ekranach
olanicp Nov 5, 2024
3b9e980
fix lint issues
olanicp Nov 5, 2024
f5cebe4
zmiana breakpointa na stałą, dodanie stylowania dla odpowiedniej klasy
olanicp Nov 19, 2024
10d66ff
refaktoryzacja
olanicp Dec 3, 2024
a8f5f55
change id to class
olanicp Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions zapisy/apps/common/assets/main/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ div.top .topbar .inline-inputs label {
}

#sidebar {
@media (max-width: 992px) {
@include media-breakpoint-down(lg) {
#sidebar-inner {
/* :after will position itself against nearest positioned parent, so we
* need to ensure that it will be this sidebar */
Expand Down Expand Up @@ -203,7 +203,7 @@ div.top .topbar .inline-inputs label {
text-align: center;
}
}
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
#fold-toggler {
display: none;
}
Expand Down Expand Up @@ -244,10 +244,21 @@ div.loginbox {
}
}

colgroup col.table-info-type {
colgroup col.table-info-offer {
width: 1%;
Copy link
Contributor

Choose a reason for hiding this comment

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

To też powinno być uzależnione od breakpointu, tj. występować wtedy i tylko wtedy, gdy odpowiednie white-space: nowrap;. Obecnie w wąskim oknie tekst w lewych kolumnach nie tylko może, ale wręcz musi się zawijać, a to nie jest ładne.

}

.table-offer th {
Comment on lines +247 to +251
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 •
edited
Loading

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Rozwiązałam ten problem z kolorowaniem i w takim razie według mnie:

  • klasa w col table-info-type nadaje się do wyrzucenia ze wszystkich plików oprócz tych dwóch których tyczy się ten pull request czyli proposal_info.html oraz course_head.html ponieważ w tych dwóch plikach chcemy aby ta pierwsza kolumna się dopasowywała do zawartości i była jednolita na wszystkich stronach
  • identyfikator table-info zostaje chyba ze decydujemy sie na nadpisanie klasy .table z bootstrapa
  • klasa table-offer z tych dwóch plików proposal_info.html course_head.html może zostac zastąpiona przez identyfikator table-info bo wrap w tym przypadku nic nie zmieni bo szerokość kolumn zostaje taka jaka była

white-space: nowrap;
background-color: #f9f9f9;
}

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

@lgpawel lgpawel Dec 4, 2024 •
edited
Loading

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ć.

white-space: normal;
}
}

// Required field marker in forms.
.asteriskField {
padding-left: 0.25em;
Expand All @@ -264,7 +275,7 @@ colgroup col.table-info-type {
color: var(--bs-dark);
font-style: italic;
display: block;
@media (min-width: 992px) {
@include media-breakpoint-up(lg) {
float: right;
}
}
Expand Down
4 changes: 2 additions & 2 deletions zapisy/apps/enrollment/courses/templates/courses/course_parts/course_head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ <h1 class="d-inline-block">
</div>
</div>

<table class="table table-bordered table-md-responsive" id="table-info">
<table class="table table-bordered table-md-responsive table-offer" id="table-info">
<colgroup>
<col class="table-info-type"></col>
<col class="table-info-type table-info-offer"></col>
</colgroup>
<tbody>
<tr>
Expand Down
4 changes: 2 additions & 2 deletions zapisy/apps/offer/proposal/templates/proposal/proposal_info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% load filters %}

<table class="table table-bordered table-md-responsive d-print-none" id="table-info">
<table class="table table-bordered table-md-responsive d-print-none table-offer" id="table-info">
<colgroup>
<col class="table-info-type"></col>
<col class="table-info-type table-info-offer"></col>
</colgroup>
<tbody>
<tr>
Expand Down
Loading