[XGrid] ИИ отметка для XenForo Resource Manager

[XGrid]

XGrid добавил(а) новый ресурс:

[XGrid] ИИ отметка для XenForo Resource Manager - Добавляет отметку ИИ контента и значок возле названия ресурса

Посмотреть вложение 163404

Подготовим для начало код:

1. Шаблон EXTRA.less
   

   .xgrid-icon-robot {
       color: #dc3545;
   }
   
   .xgrid-ai-notice {
       display: flex;
       align-items: flex-start;
       gap: 14px;
       padding: 14px 16px;
       margin: 16px 0;
       border: 1px solid rgba(220, 53, 69, .35);
       border-left: 4px solid #dc3545;
       border-radius: 6px;
       background: rgba(220, 53, 69, .08);
       color: #dc3545;
   }...

Узнать больше об этом ресурсе...

 

[Matew]

Зачем для notice тащить свой css код то? Почему нельзя использовать то, что уже есть в движке?

 

[XGrid]

Matew, ну если я правильно понимаю, взяв стандартные классы css notice и html код, мне все равно придется в шаблоне тащить css чтобы кастомизировать его под себя, а если выйдет так что на странице ресурса помимо этого notice, будет еще родной сверху. Тогда мне придется явно указывать чтобы стили применялись через условно .resourceBody .notice, разве нет?

Все, я кажется понял о чем Вы, щас переделаю)

 

[XGrid]

Matew, Нет, то ли я дурак,то ли лыжи не едут)

Мне чтобы использовать родные notices и чтобы применились стили нужно строить от такое древо

<ul data-template-name="public:notice_macros::notice_list" class="notices notices--block js-notices" data-xf-init="notices" data-type="block">
    <li data-template-name="public:notice_macros::notice" class="notice js-notice notice--primary">
        <div class="notice-content xgrid-ai-notice">
            <div class="xgrid-ai-notice__icon">
                <xf:fa icon="{$icon}" />
            </div>
            <div class="xgrid-ai-notice__content">
                <div class="xgrid-ai-notice__title">{$title}</div>
                <div class="xgrid-ai-notice__text">{$description}</div>
            </div>
        </div>
    </li>
</ul>

Сравнивая нижний контент:

<div class="xgrid-ai-notice">
            <div class="xgrid-ai-notice__icon">
                <xf:fa icon="{$icon}" />
            </div>
            <div class="xgrid-ai-notice__content">
                <div class="xgrid-ai-notice__title">{$title}</div>
                <div class="xgrid-ai-notice__text">{$description}</div>
            </div>
</div>

После чего все равно придется "тащить" css в EXTRA.less (чтобы изменить его внешний вид).
Суть то не меняется, все равно надо будет "тащить" код. Тогда в чём мы тут выигрываем, не понимаю. Если мы только наплодили еще кода HTML, а функциональности он не будет нести, если задача в обычном отображение плашки и всё. В том что там родные переменные xenforo указываются для стилей, так а толку от них, если внешний вид нужен свой. А если менять в стилях в редакторе, так я поменяю тогда и вид родных объявлений.

 

[XGrid]

Обновил описание ресурса

1. Теперь большая часть стилей берется с родного класса .blockMessage--error
2. HTML код шаблона xgrid_content_ai_macros обновлен так же
3. Первая модификация изменена, текст description обновлен

Для сравнения:

• Было
  

  .xgrid-icon-robot {  
    color: #dc3545;
  }
  
  .xgrid-ai-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    margin: 16px 0;
    border: 1px solid rgba(220, 53, 69, .35);
    border-left: 4px solid #dc3545;
    border-radius: 6px;
    background: rgba(220, 53, 69, .08);
    color: #dc3545;
  }
  
  .xgrid-ai-notice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(220, 53, 69, .14);
    font-size: 16px;
  }
  
  .xgrid-ai-notice__content {
    min-width: 0;
    padding-top: 1px;
  }
  
  .xgrid-ai-notice__title {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
  }
  
  .xgrid-ai-notice__text {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(220, 53, 69, .82);
  }

  
  
• Стало
  

  .xgrid-icon-robot { color: @xf-errorColor; }
  .xgrid-notice-ai {
      margin-top: 10px;
      .blockMessage--error {
          display: flex;
          align-items: center;
          gap: 14px;
          padding: 14px 0px;
          border: 1px solid rgba(220, 53, 69, .35);
          border-left: 4px solid #dc3545;
          border-radius: 6px;
          &__icon { border-radius: 6px; background: rgba(220, 53, 69, .14); }
          &__title { font-weight: bold; }
      } 
  }