[Xenbros] Attachment Pro 1.0.0

[DEVIL]

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

[Xenbros] Attachment Pro - Новый UI для вложений и не только!

Посмотреть вложение 116895
Attachment Pro придаёт новый вид отображения вложений и не только!

Посмотреть вложение 116892
Требование лайка и ответа чтобы просмотреть вложение
Посмотреть вложение 116893
Настройки
Посмотреть вложение 116894​

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

 

[MrOne]

Подскажите пожалуйста, как сделать, если за длинное название {$attachment.filename}, то название файла отображалось бы на 2 строки?
Вообще для названия оставить 2 строки, как сделать?

P.S. После нашел, что "Thumbnail replacement image url" в админке можно прописать :)

Так же смотрел в этом плагине templates.xml и не понял зачем вообще -

.filecontent>div.ext {
    height: 80px;
    width: 50px;
    margin-right: 15px;
    float: left;
    background: url(//www.joomunited.com/wordpress-demo/wp-content/plugins/wp-file-download/app/site/themes/wpfd-default/css/../../../assets/images/theme/neutral.png) center center transparent no-repeat;
    color: #fff;
    position: relative;
}

Не програмист, но думаю, что, лучше или Data URI или локально изображения все держать... чем где-то.
Например так -

.filecontent>div.ext {
    height: 80px;
    width: 50px;
    margin-right: 15px;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABGBAMAAAB8otpVAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAkUExURQAAAE+56E+56E+y3mnN827Q9k+56G7Q9k+p0k6451y430+149YG/DEAAAAGdFJOUwDC8dpD6UE1OxQAAACwSURBVDjL7dKtEcJAFMTxtIChAIYG6CCkhnTAzJmnGQqIoQI8FotJedz3Xd7btais/c3f7XC9HLqNQ9vR9ZuZvO4jk8dMpYuUdJGWFmlpkZEaGamRlRJZKRGQHAHJEZIUIUkRlBhBiRGWEGEJEREfEfHR9iGfureS9Vm2KBEqLTIiVGpkRaiUCIhQyRESoZIiKEIlRliESoiICBUfMREqbqUiVNyXym2XXf4q0wnv/AMD9oqMXr1YwwAAAABJRU5ErkJggg==) center center transparent no-repeat;
    color: #fff;
    position: relative;
}

 

[Skaiman]

Подскажите пожалуйста, как сделать, если за длинное название {$attachment.filename}, то название файла отображалось бы на 2 строки?

.file h3 {
    white-space: normal;
}

 

[Skaiman]

P.S. После нашел, что "Thumbnail replacement image url" в админке можно прописать :)

Я так понял, что разраб настройку то сделал, но забыл указать в коде. Советую сделать модификацию шаблона xb_ap_template.less:
Найти:

//www.joomunited.com/wordpress-demo/wp-content/plugins/wp-file-download/app/site/themes/wpfd-default/css/../../../assets/images/theme/neutral.png

Заменить:

'{{ $xf.options.xb_ap_attachment_icon }}'

тогда можно сохранить картинку у себя и указать свой путь до нее
Для плагина [MMO] Export/Import TMS смотрим во вложении

 

[Nexrom]

Друзья! Подскажите как устранить данную проблему, в мобильной версии блок вложения выезжает за границы шаблона

 

[Skaiman]

.file {
    min-width: 280px;
}

 

[MrOne]

Как поправить чтобы в версии 2.2 работал плагин?

 

[CatBlack]

Как поправить чтобы в версии 2.2 работал плагин?

Ждать от разработчика, нигде не написано что совместимо с 2.2

 

[MrOne]

Очень понравился мне этот плагин. Поковырялся и для 2.2 сделал.
Для себя делал. Изменил вывод на 2 строки, размер текста и отступ названия от инфы.

 

[MrOne]

Поправил для 2.2.3

 

[PirogovN]

Поправил для 2.2.3

Уважаемы, вы не могли бы сделать и на версию 2.2.4
Уду Вам признателен)

 

[CatBlack]

Уважаемы, вы не могли бы сделать и на версию 2.2.4
Уду Вам признателен)

все работает и на 2.2.4

 

[Narberal Gamma]

Конфликты не наблюдается? Стоит Hide плагин, желаю поставить данный плагин.

 

[MrOne]

Поправил для всех версий XF 2.x.
Чтобы обновится версию поправил на 1.0.1

 

[It Works]

Друзья! Подскажите как устранить данную проблему, в мобильной версии блок вложения выезжает за границы шаблона

Сделал адаптивный дизайн под мобильные устройства

.file {
    height: 120px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 0 1 0;
    -ms-flex: 0 1 0;
    flex: 0 1 0;
    background:@xf-pageBg;
    padding: 10px;
    margin: 10px;
    min-width: 350px;
    position: relative;
}
.file-dated {
    width: 170px;
}
.filecontent {
      min-width: 100% !important;
}
.attachemnt_icon_xb{
 border-radius: 3px;
    height: 80px;
    width: 70px;
    float: left;
    margin-right: 10px;
    position: relative;
    object-fit: cover;
}

.filecontent>div.ext {
    height: 80px;
    width: 50px;
    margin-right: 15px;
    float: left;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAABGBAMAAAB8otpVAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAkUExURQAAAE+56E+56E+y3mnN827Q9k+56G7Q9k+p0k6451y430+149YG/DEAAAAGdFJOUwDC8dpD6UE1OxQAAACwSURBVDjL7dKtEcJAFMTxtIChAIYG6CCkhnTAzJmnGQqIoQI8FotJedz3Xd7btais/c3f7XC9HLqNQ9vR9ZuZvO4jk8dMpYuUdJGWFmlpkZEaGamRlRJZKRGQHAHJEZIUIUkRlBhBiRGWEGEJEREfEfHR9iGfureS9Vm2KBEqLTIiVGpkRaiUCIhQyRESoZIiKEIlRliESoiICBUfMREqbqUiVNyXym2XXf4q0wnv/AMD9oqMXr1YwwAAAABJRU5ErkJggg==) center center transparent no-repeat;
    color: #fff;
    position: relative;
}

.file h3 {
    white-space: normal;
    padding-bottom: 7px;
    font-size: 14px;
    padding-top: 0;
    margin: 0px 0 !important;
    clear: none;
    text-overflow: ellipsis;
    margin-top: 6px;
    overflow: hidden;
    word-wrap: normal;
 
    line-height: 1em;
    text-transform: none;

}
.filecontent>div.ext span {
   position: absolute;
    top: 48px;
    display: block;
    width: 50px;
    line-height: 16px;
    text-align: center;
    text-transform: uppercase;
  font-weight:bold;
}

 .file .file-xinfo {
    margin-left: 65px;
    font-size: 13px;
    text-transform: none;

}
 .file .file-right {
      margin: 20px 10px 0px 20px;
    text-align: center;
    position: absolute;
    right: 0px;
    min-width: fit-content;
}
.downloadlink {
    background-color: #76bc58;
    border-color: #76bc58;
    border-radius: 15px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    padding: 5px 15px;
    display: block;
    width: 100%;
    height: 32px;
    margin-bottom: 5px;
  margin-top: 5px;
    line-height: 22px;
}

.wpfd-download {
    font-size: 16px;
    vertical-align: middle;
    text-align: right;
    margin-left: 10px;
    margin-bottom: 3px;
}

.openlink {
    background-color: @xf-contentBg ;
    border-color: #dadada;
    border-radius: 15px;
    color: #8f8f8f;
    font-size: 13px;
    padding: 5px 15px;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 32px;
    line-height: 22px;
    margin: 0 auto;
    margin-top: 5px;
}

 .wpfd-preview {
    font-size: 16px;
    vertical-align: middle;
    text-align: right;
    margin-left: 10px;
    margin-bottom: 3px;
}
@media(max-width: 425px){
.file {
    height: 150px;
    min-width: 280px;
}
.downloadlink {
    margin-top: 55px;
}   
}