yaparoff

Есть конструктор шкафа. Как реализовать такой?
https://tylko.com/wardrobe/242/?cv=1&board=cat_8__type_all__id_4276
Это какой-то плагин? Или лучше написать на чистом js?

сборка на gulp
много js-файлов которые в итоге компилируются в один js файл
Но проблема в том, что в этом компилируемом js  файле ставиться табуляция вместо пробела.
А на всем проекте 4 пробела вместо табов. 
И когда я отдаю этот файл бэкэнду начинаются проблемы.
Можно как то изменить табы на пробелы в компилируемом файле?
Можно это сделать как то автоматически (желательно)? Или только в ручную?

Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы
http://localhost:3004/tablets/tablet_1
Если мы покликаем по табам (у которых тоже реализован роутинг и к урлу добавляется еще значение)
То урл будет менять свое значение например на 
http://localhost:3004/tablets/tablet_1/characteristics
И вот, допустим у нас сейчас этот урл и если страница перезагрзиться, то реакт будет считать что текущий урл уже
http://localhost:3004/tablets/tablet_1/characteristics
а не 
http://localhost:3004/tablets/tablet_1 как предполагается
И из за этого возникают проблемы
Могут быть вот такие страницы 
localhost:3004/tablets/tablet_1/characteristics/characteristics

А так быть не должно. Подскажите как решить такую проблему

Если подробнее:
Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
На данный момент сделал роуты для нескольких страниц 
[JS]
<Route path="/" ... /> // главная страница
<Route path="/tablets"  ... />  // страница категорий
<Route path="/tablets/:id"  ... /> // детальная страница товара
[/JS]
И это все работает хорошо

Проблема с роутингом началась когда я начал делать табы на детальной странице товара. Их я тоже хотел сделать через роутинг.
[JS]
<Route path="/tablets/:id/characteristics"  ... />
<Route path="/tablets/:id/opinion"  ... />
<Route path="/tablets/:id"  ... /> // по дефолту
[/JS]
Пути у табов:
[JS]
to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
to=`${ текущий урл страницы }/opinion` // Таб Отзывы
to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)
[/JS]

http://skrinshoter.ru/s/221019/1f36Q0Gw

И это работает исправно, до тех пор пока страница не перезагрузиться.
Прикол в том, что если мы кликали по табам, урл менялся и допустим стал таким :

http://localhost:3004/tablets/tablet_1/characteristics
И потом вдруг страницу перезагрузили

А при перезагрузке страницы текущий адрес получается уже

http://localhost:3004/tablets/tablet_1/characteristics

    а не

  http://localhost:3004/tablets/tablet_1

    как задумывалось.

    Из-за этого возникают проблемы когда кликаешь по табам:

    адрес получается уже 

    http://localhost:3004/tablets/tablet_1/characteristics/characteristics

    http://skrinshoter.ru/s/221019/eTe8ZW5F

Вот в этом и проблема. Как такое решить?
Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему
[JS]`${ this.props.pathName }/characteristics`[/JS]Вот код, как это выглядит:
 

class App extends Component {
  render() {
    <Switch>

        <Route path="/" exact={true} component={ CategoriesList }/>

      <Route path="/tablets/:id/characteristics"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets/:id/opinion"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets/:id"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets"
        render={({ location }) =>
          <CategoryPage
            goodList={goodsList.tablets}
            title="Tablets"
            location={ location }
            exact={true}
            />}
      />
    </Switch>

  }
}

class DetailPage extends Component {
  state = {
    tabs: {
      opinion: {
        tabId: 'opinionTab',
        tabTitle: 'Отзывы',
        tabPathTo: `${ this.props.pathName }/opinion`,
        tabContent: 'Контент отзывов'
      },
      characteristics: {
        tabId: 'characteristicsTab',
        tabTitle: 'Характеристики',
        tabPathTo: `${ this.props.pathName }/characteristics`,
        tabContent: 'Контент Характеристик'
      },
      description: {
        tabId: 'descriptionTab',
        tabTitle: 'Описание',
        tabPathTo: `${ this.props.pathName }`,
        tabContent: 'Контент описания'
      }
    }
  };

  findCurrentGood(goodsList, itemId) {
    for (let key in goodsList) {
      goodsList[key].forEach(category => {
        if (category.id === itemId) {
          this.currentGood = category
        }
      })
    }
  }

  findCurrentTab() {
    for (let key in this.state.tabs) {
      if (key === this.props.currentTab) {
        this.activeTab = this.state.tabs[key];
      }
    }
  }

  render() {
    const { goodsList, itemId, currentTab, pathName } = this.props;
    const { tabs } = this.state;
    this.findCurrentGood(goodsList, itemId);
    this.findCurrentTab();
    
    
    return() {
      <div className="tabs">
            <div className="tabs__menu">
              {
                Object.keys(tabs).map(tab => {
                  const tabClass = classNames('tabs__link', {
                    'tabs__link--active' : tab === currentTab
                  });

                  return (
                    <Link key={ tabs[tab].tabId }
                          to={  tabs[tab].tabPathTo }
                          className={ tabClass } >
                      { tabs[tab].tabTitle }
                    </Link>
                  )
                })
              }
            </div>
            <div className="tabs__content">

              <h3 className="info__title">{ this.activeTab.tabTitle }</h3>
              <div className="info__text">
                { this.activeTab.tabContent }
              </div>

            </div>
          </div>
    }
  }
}

В проекте над которым работаю, изображения загружаются на некий удаленный сервер
248000.selcdn.ru/cdn/2018/bg_promo-banner.jpg
cdn-srv01.miretno.ru/udm-sprite4.png

Вопрос как их туда загрузить? Ну или можете просто посоветовать какой-нибудь стабильный удаленный сервер

54 минуты назад, rasmus сказал:

а разве не логичнее, когда всё зависит от ширины рабочей области, а не от устройства?

ну я имею ввиду, то что при ширине экрана от 580 пикс и более

2 минуты назад, rasmus сказал:

<td style="padding: 0 0 16px 0; text-align: center;">
                  <img src="https://adminkws.logo.com.tr/content/yeni_LOGO_logosu_1.jpg" width='150' height='45'/>
                </td>

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

Верстаю адаптивное email-письмо
Эти две картинки должны быть по центру на адаптиве. Но у меня не получается их отцентровать прописываю стили инлайново
http://skrinshoter.ru/s/190919/C7ZqQEyh?a
Подскажите как это сделать
https://codepen.io/yaparoff/pen/GRKwgRX?editors=1000

и правда! вот спасибо!

3 минуты назад, AlexZaw сказал:

Покажите код. У вас либо где-то заданы ширины ячеек, либо какая-то из ячеек в другом ряду растягивает остальные.

да, конечно
https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000

4 минуты назад, rasmus сказал:

А пробовал применить к этой ячейке width="сколько_нужно"?

да http://skrinshoter.ru/s/170919/ZzwPd46V?a

3 минуты назад, AlexZaw сказал:

Две ячейки таблицы, с выравниванием по верху, в левой картинка, в правой текст. Или я что то не понимаю?

все верно.Но почему то первая ячейка всегда больше чем вторая http://skrinshoter.ru/s/170919/6qCN4vrS 
Пробовал разные вещи - не помогает

Верстаю email-письмо. Использую Foundation. Не получается сверстать таблицей такой блок http://skrinshoter.ru/s/170919/5k7rvQdR
Как его сверстать табличной версткой?

https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000

 Дизайнер нарисовал макет вот с такими интересными линиями, которые идут по всей высоте сайта http://skrinshoter.ru/s/300819/pJvpKBvC
А я теперь вот ломаю голову как такое сверстать.
С одной стороны это можно сверстать колонками с рамкой, но ведь есть такие блоки, которые выходят за пределы этих колонок
Как тогда быть в таком случае?

Такие линии реально идут по всей высоте сайта. 

Есть яндекс карта, на десктопе она отображается как надо и мы видим нужный нам объект (адрес) http://skrinshoter.ru/s/230819/RfSZ8pOG
а вот если ширина экрана будет меньше, то этот объект уже будет не видно http://skrinshoter.ru/s/230819/74r975D5
Как то можно сделать чтобы было видно этот объект и на мобилках?
https://codepen.io/yaparoff/pen/WNeRMNW?editors=1010

решил вопрос

Сейчас пришлось обернуть svg в label. И снова не все корректно работает: когда наводишь на серые звезды, они не должны подсвечиваться (в режиме readonly)

https://codepen.io/anon/pen/PrmgPj

Точно! Оно! спасибо!

спасибо помогло.
Еще такой момент. Этот компонент может быть readonly
в таком случае радиокнопки становятся disabled. И при наведении на них ховер эффект должен исчезать. 
Мне удалось перебить ховер-эффект на checked кнопку и на не-checked. 
Но есть баг. И он заключается в том что некоторые disabled кнопки подсвечиваются. И подсвечиваются не тем цветом которым надо

Коллеги, подскажите как это исправить?
https://codepen.io/anon/pen/zVNVRV?editors=1100

&__radio
	.....

	&[disabled]
        cursor: default

        &:hover
          & + .testimonials__icon
            color: transparent
            stroke: #BDBDBD

        &:checked
          &:hover
            & ~ .testimonials__icon
              color: $yellow
              stroke: $yellow

делаю звездный рейтинг на svg на чистом css
проблема в том что checked, svg почему то не закрашивается в нужный цвет
Как решить эту проблему? 
https://codepen.io/anon/pen/zVNVRV?editors=1010

29.04.2019 в 17:58, npofopr сказал:

Вот тут вроде описано, как  надо http://prgssr.ru/development/oformlenie-soderzhimogo-use-v-svg-s-pomoshyu-css.html

Спасибо помогло.
Кароче я разобрался как делать, чтобы при наведении и при добавлении класса svg  менял цвет (причем svg из спрайта). Это реально реализовать.
Все круто!
Вот пример
https://codepen.io/anon/pen/MdWLjN?editors=1100

Скажите, как закрасить svg при добавлении класса?
По логике должно быть так 

.like-icon--filled .like-icon__inside {
  fill: #499DDE;
}

Но это не работает
https://codepen.io/anon/pen/QPoRwg

Библиотека для тултипов Tooltipster. 
Если делаем триггер 'hover' - то тултип нормально появляется

$('.icon').tooltipster({
    trigger: 'hover'
  });

Если делаем кастомный триггер - то это не срабатывает
 

$('.icon2').tooltipster({
    theme: 'tooltipster-shadow',
    trigger: 'custom',
    triggerOpen: {
      mouseenter: true,
      tap: false
    }
  });

Почему такое происходит? Прикладываю архив. 
В песочнице почему то не удалось подключить плагин

tooltipster.rar

Спасибо. Помогло. В этом же топике нашел ссылку на пример без закрашивания фона http://jsfiddle.net/L2ya3buj/1/

1 час назад, npofopr сказал:

Я делал так

https://codepen.io/npofopr/pen/ZZEJEB

спасибо, но у вас там текст не скрывает черточки. Вы меня натолкнули на одну идею - подкрасить фон текста, но проблема в том что полупрозрачный фон  rgba(11, 100, 168, 0.08)  на таком же полупрозрачном фоне будет выделяться

Получилось так https://codepen.io/anon/pen/XQXowd

1 час назад, npofopr сказал:

ну и там же можно много вариантов нагуглить)

не знаю как это назвать (
Так бы давно нагуглил

На дизайне у этих черточек разная длина и зависит от контента. Кто нибудь знает как сделать такое в верстке?



https://codepen.io/anon/pen/WWraar

13 часов назад, npofopr сказал:

Плавно color меняешь и всё. Нет?) 

То же самое происходит
В html вставляю иконку -  эффект с hover работает
Из спрайта вызываешь ту же иконку - эффект с hover уже не работает