Forums / Cotonti / Skins / Как красиво поступить с "лишними" буквами и словами ?

12>>>

Kabak
#1 2023-09-28 07:30

Суть проблемы : Пользователь неожиданно ввёл текста больше чем ожидалось. ( и это не его вина )

в отладчике это выглядит так

Весь ответ на форуме =  Flex контейнер.  ( на последнем скрине видны блоки )  Блок с текстом ответа просто соскакивает вниз, потому что блок с инфой о юзере стал больше пожидаемого. 

Варианты решения :  Или длинный текст как-то переносить в блоке пользователя или блок с текстом ответа изменять его ширину, чтобы он не соскакивал вниз.

Я предпочитаю, чтобы блок с информацией о пользователе был фиксированного размера.

Добавлено 8 минут спустя:

Обрезание текста таким методом - не совсем красивое и решение конкретного случая, но не панацея от такой проблемы 

<p>{FORUMS_POSTS_ROW_USERLOCATION_TITLE} : {FORUMS_POSTS_ROW_USERLOCATION|cot_string_truncate($this, '14')}</p>

выглядит так :

Добавлено 2 минуты спустя:

Каким образом красиво переносить слова - текст который превышает какие-то размеры по длинне из тега {FORUMS_POSTS_ROW_USERLOCATION} ?


Dit bericht is bewerkt door Kabak (2023-09-28 07:40, 1 jaar ago)
Kort
#2 2023-09-28 08:09

Для начала закомментируй блоки .forum_date, .admin и div_thanks. Вернешься к ним потом.

Правила для div.about:

.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 flex: 0 0 15rem;
}

Правила для div.message:

.message {
 background-color: #2E3342;
 padding: 1rem;
 flex-grow: 1;
}

Текст в блоке .about теперь будет спокойно переноситься. Почему не переносился раньше -- почитай про flex и посмотри на свои начальные правила.

У родителя достаточно будет:

.forum_post {
	display: flex;
	background-color: #2F3342;
	border-color: #3f4f5f;
	border-radius: 20px 8px 8px 0;
	box-shadow: 5px 3px 15px #00000080;
	opacity: 1.0;
	transition-duration: 0.5s;
	transition-property: box-shadow, opacity;
	transition: 200ms;
	margin: 30px 0;
}

.forum-date и .admin проще перенести в блок .message. .div_thanks -- в .about. Как вариант -- использовать отдельные рядные flex-блоки для [div.forum-date div.admin], [div.about div.message] и [div.thanks]. Но если посидеть-подумать, можно и с текущей разметкой справиться)

P.S. color для .about указан с ошибкой

SED.by - создание сайтов, разработка плагинов и тем для Котонти

Dit bericht is bewerkt door Kort (2023-09-28 08:23, 1 jaar ago)
Kabak
#3 2023-09-28 08:34

блоки из контейнера  Flex    .forum_date  и   .admin

всегда должны быть сверху над всем   они делят простарнствоа 20% и 80%

как это сделать ?

 

Argont
#4 2023-09-28 08:41
#47146 Kabak:

блоки из контейнера  Flex    .forum_date  и   .admin

всегда должны быть сверху над всем   они делят простарнствоа 20% и 80%

как это сделать ?

 

я бы сделал так, давно этим пользуюсь и также давно отказался от бутстрапа

 

иногда поржать над задравшим подбородок разработчиком
Kabak
#5 2023-09-28 08:44

1 + 2  блоки всегда должны быть над 3-м и 4-м блоками

3 + 4 всегда должны быть слева направо и не уходить вниз - 4-й под 3-й   при этом длинный текст в 3-м блоке должен уходить на новую строку

5 всегда внизу на все 100% пространства под 3-м и 4-м блоками

Argont
#6 2023-09-28 08:45

блоку с юзером и его данными отдаем 1-4@m а на текст в в сетке отдаем expand@m

иногда поржать над задравшим подбородок разработчиком
Kort
#7 2023-09-28 08:45
#47146 Kabak:

блоки из контейнера  Flex    .forum_date  и   .admin

всегда должны быть сверху над всем   они делят простарнствоа 20% и 80%

как это сделать ?

Если тебе принципиально 20% и 80% (т.е. все в %), то и .about надо в проценты:

.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 flex: 0 0 20%;
}

Аналогично поступаешь с .forum_date

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Kabak
#8 2023-09-28 08:45

давно отказался от бутстрапа

Я его и не начинал пользовать - он убивает скорость любого сайта.

 

Добавлено 1 минута спустя:

вот полный СSS  ( я понимаю, что там много лишнего.  Я пока его не чистил )

.forum_post
{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  background-color: #2F3342;
  border-color: #3f4f5f;
  border-radius: 20px 8px 8px 0;
  box-shadow: 5px 3px 15px #00000080;
  opacity: 1.0;
  transition-duration: 0.5s;
  transition-property: box-shadow, opacity;
  transition: 200ms;
  height: auto;
  margin: 30px 0;
  padding: 0;
  min-width: 560px;
}

.forum_post:hover 
{
  box-shadow: 4px 2px 14px #0000004d;
  opacity: 1.0;
}

.forum_date
{
  border-radius: 20px 8px 0 0;
  color: #D2E0A4ff;
  text-align: left;
  font-size: 85%;
  margin: 0;
  padding: 5px 10px 5px 15px;
  height: auto;
  width: 20%; 
}

.admin
{
  border-radius: 20px 8px 0 0;
  background-image: linear-gradient(to right, #2F3342 50%, #3A4053 );
  color: #D2E0A4ff;
  text-align: right;
  margin: 0;
  padding: 5px 10px;
  height: auto;
  width: 80%;
}

.about
{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-self: flex-start;
  background-color: #2E3342;
  color: #D2E0A4ff;
  text-align: left;
  margin: 0;
  padding: 10px 0 20px 20px;
  height: auto;
  min-width: 150px;
}

.location_length
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.topic_starter
{
  /*  */
  background: url(../img/author_32.png) no-repeat 50% 50%;
  background-position: 19px;
  width: 52px;
  height: 35px;
  -webkit-filter: drop-shadow(2px 2px 2px #0000007f);
  border-radius: 50%;
  margin-left: 70px;
}


.message
{
  display: flex;
  align-self: flex-start;
  flex-direction: column;
  background-color: #2E3342;
  margin-left: 10px;
  padding: 0;
  height: auto;
  width: 87%;
  justify-content: space-around;
  align-items: flex-start;
  min-width: 420px;
}

.message_body
{
  color:aliceblue;
  align-self: stretch;
/*  min-height: 185px;*/
}

.signature
{
  margin: 5px 5px 10px 5px;
  color: #FFECBE;
  font-size: 85%;
}

.signature_delimiter
{
  /*  border-bottom: 1px solid #a5c29bff;
  border-left: 1px solid #a5c29bff;
  border-right: 1px solid #a5c29bff;
  border-radius: 3px;*/
  background-color: #a5c29bff;
}

.signature_delimiter hr
{
  height: 1px;
  background-color: #404C5Dff;
  border: none;
}

.signature_gold
{
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  margin: 15px 5px 10px 5px;
  color: #FFECBE;
}

.page_description
{
  text-align: center;
  color: #FFECBE;
  margin-bottom: 10px;
}

 

Argont
#9 2023-09-28 08:49
#47148 Kabak:

 

1 + 2  блоки всегда должны быть над 3-м и 4-м блоками

3 + 4 всегда должны быть слева направо и не уходить вниз - 4-й под 3-й   при этом длинный текст в 3-м блоке должен уходить на новую строку

5 всегда внизу на все 100% пространства под 3-м и 4-м блоками

<div class="uk-card uk-card-default uk-card-body">
	<div uk-grid>
		<div class="uk-width-1-4@m">1</div>
		<div class="uk-width-expand@m">2</div>
	</div>
	<div uk-grid>
		<div class="uk-width-1-4@m">3</div>
		<div class="uk-width-expand@m">4</div>
	</div>
	<div class="uk-width-1-1">
		5
	</div>
</div>

 

иногда поржать над задравшим подбородок разработчиком
Kabak
#10 2023-09-28 08:51

4-й блок ещё делится на свои Flex блоки.  они не отображены потому, что пользователь не указал в профиле подпись.

5-й тоже делится на подблоки , но с ними всё в порядке

Kort
#11 2023-09-28 08:51

Мама, роди меня обратно.

Леша, если надо указывать ширины, для родителя добавь flex-wrap: wrap, Затем все flex-свойства у потомков замени на ширины в %.

Примерно так:

.forum_post {
    display: flex;
    flex-wrap: wrap;
    background-color: #2F3342;
    border-color: #3f4f5f;
    border-radius: 20px 8px 8px 0;
    box-shadow: 5px 3px 15px #00000080;
    opacity: 1.0;
    transition-duration: 0.5s;
    transition-property: box-shadow, opacity;
    transition: 200ms;
    margin: 30px 0;
}

 

.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 width: 20%;
}

 

.message {
 background-color: #2E3342;
 padding: 1rem;
 width: 80%;
}

 

SED.by - создание сайтов, разработка плагинов и тем для Котонти
Argont
#12 2023-09-28 08:54
#47151 Kabak:

давно отказался от бутстрапа

Я его и не начинал пользовать - он убивает скорость любого сайта.

кроме вашего личного времени, на поиски решений, уже давно готовых как теорема пифагора - ничего он не убивает, как и любая современная библиотека или фреймворк на JS/CSS

это кейс-тулс (соквояж я инструментами) что бы не изобретать их заново, у любого нормального водителя есть такой чемоданчик

Добавлено 4 минуты спустя:

#47153 Kabak:

4-й блок ещё делится на свои Flex блоки.  они не отображены потому, что пользователь не указал в профиле подпись.

5-й тоже делится на подблоки , но с ними всё в порядке

<div class="uk-card uk-card-default uk-card-body">
	<div uk-grid>
		<div class="uk-width-1-4@m">1</div>
		<div class="uk-width-expand@m">2</div>
	</div>
	<div uk-grid>
		<div class="uk-width-1-4@m">3</div>
		<div class="uk-width-expand@m">
			<div uk-grid>
				<div class="uk-width-1-4@m">4.1</div>
				<div class="uk-width-expand@m">4.2</div>
			</div>
		</div>
	</div>
	<div class="uk-width-1-1">
		5
	</div>
</div>

 

иногда поржать над задравшим подбородок разработчиком
Kabak
#13 2023-09-28 09:01

Да, в интернете полно описаний каких-то  Но у меня не поулчилось добиться того что я описал.  Попробую то что вы написали. Возможно ещё раз попробую...  Как-то давновато я этот каркас для ответа на форуме делал и много что пробовал.  Напишу о результатах здесь.

Добавлено 48 секунд спустя:

flex-wrap: wrap  как раз и загибает блок под блок

Argont
#14 2023-09-28 09:04

вот визуально, о чем писал выше

иногда поржать над задравшим подбородок разработчиком
Kabak
#15 2023-09-28 09:05

Блоки .about и .message - тоже Flex контейнеры для своих  div со своими правилами.

Добавлено 1 минута спустя:

#47157 Argont:

вот визуально, о чем писал выше

ну и при сужении экрана блоки уходят один по одного.  А мне нужно что бы ВСЕГДА !!!  - 

1-2

3-4

5

 

при любом разрешении экрана

Добавлено 4 минуты спустя:

вот для .about

.about
{
...
  min-width: 180px;
  max-width: 180px;
}

работает

12>>>

Dit onderwerp is gesloten, nieuwe berichten zijn niet toegestaan.