change style for tableactive and tablearchived in manage-users an… #152

AnastassiaVarabei · 2021-07-25T19:20:59Z

…d department-card

tsinevik · 2021-07-26T09:19:00Z

src/app/modules/admin/components/department-card/department-card.component.scss

+	&__active {
+		width: 67px;
+		height: 24px;
+
+		text-align: center;
+
+		background-color: #00e676;
+		border-radius: 10px;
+	}
+
 	&__archived {
-		background-color: #eb5757;
-		border-radius: 5%;
+		width: 67px;
+		height: 24px;
+
+		text-align: center;
+
+		background-color: #f5f5f5;
+		border-radius: 10px;


Здесь дублируются стили, лучше вынеси повторяющиеся и цвет, например, активного статуса в отдельный класс типа __status, а для "в архиве" сделай булевый класс-модификатор по БЭМу типа __status_archived.

Сделала отдельный класс

tsinevik · 2021-07-26T09:19:15Z

src/app/modules/admin/components/manage-users/manage-users.component.scss

+	&__active {
+		width: 67px;
+		height: 24px;
+
+		text-align: center;
+
+		background-color: #00e676;
+		border-radius: 10px;
+	}
+
 	&__archived {
-		background-color: #eb5757;
-		border-radius: 5%;
+		width: 67px;
+		height: 24px;
+
+		text-align: center;
+
+		background-color: #f5f5f5;
+		border-radius: 10px;


и здесь то же самое

Сделала отдельный класс

tsinevik · 2021-07-26T16:24:09Z

src/app/modules/admin/components/department-card/department-card.component.html

+							<p class="table__status table__status__active text_color_white small_text">Активен</p>
 						</ng-container>
 						<ng-template #archived>
-							<p class="table__archived text_color_gray1 small_text">В архиве</p>
+							<p class="table__status table__status__archived text_color_gray1 small_text">В архиве</p>


Смотри, мы называем классы по методологии БЭМ, по этой методологии все компоненты состоят из трёх составляющих: блок, элемент и модификатор. Более подробно про это рекомендую здесь почитать: https://ru.bem.info/methodology/quick-start/. Если коротко, то классы мы пишем в следующем формате:

имя-блока__имя-элемента_имя-модификатора_значение-модификатора

имя-блока__имя-элемента_значение-модификатора

В твоём случае table – это имя блока, status – имя элемента, active и archived – значения модификаторов, то есть они должны писаться через нижнее подчеркивание. Более того, раз у тебя два модификатора отвечают за цвет фона одного и того же элемента, то есть нельзя применить одновременно оба стиля, то в таком варианте нужно ещё перед active и archived прописать какое-то имя модификатора, например, table__status__bg__active или &__bg__archived.
Но мне это нагромождение не очень нравится, поэтому переходим к следующему комментарию.

tsinevik · 2021-07-26T16:27:40Z

src/app/modules/admin/components/department-card/department-card.component.scss

-	&__active {
+	&__status {
 		width: 67px;
 		height: 24px;

 		text-align: center;

-		background-color: #00e676;
 		border-radius: 10px;
-	}
-
-	&__archived {
-		width: 67px;
-		height: 24px;

-		text-align: center;
+		&__active {
+			background-color: #00e676;
+		}

-		background-color: #f5f5f5;
-		border-radius: 10px;
+		&__archived {
+			background-color: #f5f5f5;
+		}


Мне кажется, лучше сделать так: убрать класс __active и перенести его значение в __status, т.е. для значение "активен" мы применяем только класс __status. А __archived оставить и для значения "в архиве" будем применять уже два класса: класс элемента __status и класс с модификатором этого элемента __status_archived – таким образом, код станет чище, я считаю.

исправила

tsinevik · 2021-07-26T16:28:00Z

src/app/modules/admin/components/manage-users/manage-users.component.html

-						<p class="table__active text_color_white small_text">Активен</p>
+						<p class="table__status table__status__active text_color_white small_text">Активен</p>
 					</ng-container>
 					<ng-template #archived>
-						<p class="table__archived text_color_gray1 small_text" >В архиве</p>
+						<p class="table__status table__status__archived text_color_gray1 small_text" >В архиве</p>


И здесь тоже самое сделать

исправила

tsinevik · 2021-07-26T16:28:12Z

src/app/modules/admin/components/manage-users/manage-users.component.scss

-	&__active {
+	&__status {
 		width: 67px;
 		height: 24px;

 		text-align: center;

-		background-color: #00e676;
 		border-radius: 10px;
-	}
-
-	&__archived {
-		width: 67px;
-		height: 24px;

-		text-align: center;
+		&__active {
+			background-color: #00e676;
+		}

-		background-color: #f5f5f5;
-		border-radius: 10px;
+		&__archived {
+			background-color: #f5f5f5;
+		}


исправила

change style for table__active and table__archived in manage-users an…

4019f7a

…d department-card

tsinevik self-requested a review July 25, 2021 19:33

tsinevik suggested changes Jul 26, 2021

View reviewed changes

AnastassiaVarabei added 3 commits July 26, 2021 17:46

Merge branch 'develop' into improvement/style-status-value

30bf1c1

added classes

08ff90f

changed style for wrapper in content-container.components.scss

d6a2464

tsinevik suggested changes Jul 26, 2021

View reviewed changes

changed name classes &__status {

3d75670

tsinevik approved these changes Jul 26, 2021

View reviewed changes

tsinevik merged commit 9b54ddc into develop Jul 26, 2021

tsinevik deleted the improvement/style-status-value branch July 26, 2021 16:53

tsinevik added this to the v0.3.0 milestone Aug 31, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change style for tableactive and tablearchived in manage-users an… #152

change style for tableactive and tablearchived in manage-users an… #152

AnastassiaVarabei commented Jul 25, 2021

tsinevik Jul 26, 2021

AnastassiaVarabei Jul 26, 2021

tsinevik Jul 26, 2021

AnastassiaVarabei Jul 26, 2021

tsinevik Jul 26, 2021

tsinevik Jul 26, 2021

AnastassiaVarabei Jul 26, 2021

tsinevik Jul 26, 2021

AnastassiaVarabei Jul 26, 2021

tsinevik Jul 26, 2021

AnastassiaVarabei Jul 26, 2021

change style for table__active and table__archived in manage-users an… #152

change style for table__active and table__archived in manage-users an… #152

Conversation

AnastassiaVarabei commented Jul 25, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

change style for tableactive and tablearchived in manage-users an… #152

change style for tableactive and tablearchived in manage-users an… #152