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

12>>>

Kabak
#1 2023-09-28 07:30

Members
Thanked: 48 times

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

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

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

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

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

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

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

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

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

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

Каким образом красиво переносить слова - текст который превышает какие-то размеры по длинне из тега {FORUMS_POSTS_ROW_USERLOCATION} ?
This post was edited by Kabak (2023-09-28 07:40, 1 year ago)
Kort
#2 2023-09-28 08:09

Administrators
Thanked: 219 times

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

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

CSS
1
2
3
4
5
6
.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 flex: 0 0 15rem;
}

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

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

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

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.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 - создание сайтов, разработка плагинов и тем для Котонти
This post was edited by Kort (2023-09-28 08:23, 1 year ago)
Kabak
#3 2023-09-28 08:34

Members
Thanked: 48 times

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

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

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

 
Argont
#4 2023-09-28 08:41

Banned
Thanked: 16 times

#47146 Kabak:

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

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

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

 

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

 

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

Members
Thanked: 48 times

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

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

5 всегда внизу на все 100% пространства под 3-м и 4-м блоками
Argont
#6 2023-09-28 08:45

Banned
Thanked: 16 times

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

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

Administrators
Thanked: 219 times

#47146 Kabak:

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

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

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

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

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

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

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

Members
Thanked: 48 times

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

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

 

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

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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
.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

Banned
Thanked: 16 times

#47148 Kabak:

 

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

Members
Thanked: 48 times

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

5-й тоже делится на подблоки , но с ними всё в порядке
Kort
#11 2023-09-28 08:51

Administrators
Thanked: 219 times

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}

 

CSS
1
2
3
4
5
6
.about {
 background-color: #2E3342;
 color: #D2E0A4ff;
 padding: 1rem;
 width: 20%;
}

 

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

 

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

Banned
Thanked: 16 times

#47151 Kabak:

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

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

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

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

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

#47153 Kabak:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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

Members
Thanked: 48 times

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

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

flex-wrap: wrap  как раз и загибает блок под блок
Argont
#14 2023-09-28 09:04

Banned
Thanked: 16 times

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

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

Members
Thanked: 48 times

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

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

#47157 Argont:

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

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

1-2

3-4

5

 

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

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

вот для .about

CSS
1
2
3
4
5
6
.about
{
...
  min-width: 180px;
  max-width: 180px;
}

работает

12>>>

This topic is locked, new posts are not allowed.