Jump to content

yaparoff

User
  • Posts

    166
  • Joined

  • Last visited

Everything posted by yaparoff

  1. Есть конструктор шкафа. Как реализовать такой? https://tylko.com/wardrobe/242/?cv=1&board=cat_8__type_all__id_4276 Это какой-то плагин? Или лучше написать на чистом js?
  2. сборка на gulp много js-файлов которые в итоге компилируются в один js файл Но проблема в том, что в этом компилируемом js файле ставиться табуляция вместо пробела. А на всем проекте 4 пробела вместо табов. И когда я отдаю этот файл бэкэнду начинаются проблемы. Можно как то изменить табы на пробелы в компилируемом файле? Можно это сделать как то автоматически (желательно)? Или только в ручную?
  3. Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы 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> } } }
  4. В проекте над которым работаю, изображения загружаются на некий удаленный сервер 248000.selcdn.ru/cdn/2018/bg_promo-banner.jpg cdn-srv01.miretno.ru/udm-sprite4.png Вопрос как их туда загрузить? Ну или можете просто посоветовать какой-нибудь стабильный удаленный сервер
  5. ну я имею ввиду, то что при ширине экрана от 580 пикс и более
  6. тогда на десктопе будет тоже центроваться, на десктопе нужно по левому краю выравнивать
  7. Верстаю адаптивное email-письмо Эти две картинки должны быть по центру на адаптиве. Но у меня не получается их отцентровать прописываю стили инлайново http://skrinshoter.ru/s/190919/C7ZqQEyh?a Подскажите как это сделать https://codepen.io/yaparoff/pen/GRKwgRX?editors=1000
  8. да, конечно https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000 да http://skrinshoter.ru/s/170919/ZzwPd46V?a
  9. все верно.Но почему то первая ячейка всегда больше чем вторая http://skrinshoter.ru/s/170919/6qCN4vrS Пробовал разные вещи - не помогает
  10. Верстаю email-письмо. Использую Foundation. Не получается сверстать таблицей такой блок http://skrinshoter.ru/s/170919/5k7rvQdR Как его сверстать табличной версткой? https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000
  11. Дизайнер нарисовал макет вот с такими интересными линиями, которые идут по всей высоте сайта http://skrinshoter.ru/s/300819/pJvpKBvC А я теперь вот ломаю голову как такое сверстать. С одной стороны это можно сверстать колонками с рамкой, но ведь есть такие блоки, которые выходят за пределы этих колонок Как тогда быть в таком случае? Такие линии реально идут по всей высоте сайта.
  12. Есть яндекс карта, на десктопе она отображается как надо и мы видим нужный нам объект (адрес) http://skrinshoter.ru/s/230819/RfSZ8pOG а вот если ширина экрана будет меньше, то этот объект уже будет не видно http://skrinshoter.ru/s/230819/74r975D5 Как то можно сделать чтобы было видно этот объект и на мобилках? https://codepen.io/yaparoff/pen/WNeRMNW?editors=1010
  13. Сейчас пришлось обернуть svg в label. И снова не все корректно работает: когда наводишь на серые звезды, они не должны подсвечиваться (в режиме readonly) https://codepen.io/anon/pen/PrmgPj
  14. спасибо помогло. Еще такой момент. Этот компонент может быть 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
  15. делаю звездный рейтинг на svg на чистом css проблема в том что checked, svg почему то не закрашивается в нужный цвет Как решить эту проблему? https://codepen.io/anon/pen/zVNVRV?editors=1010
  16. Спасибо помогло. Кароче я разобрался как делать, чтобы при наведении и при добавлении класса svg менял цвет (причем svg из спрайта). Это реально реализовать. Все круто! Вот пример https://codepen.io/anon/pen/MdWLjN?editors=1100
  17. Скажите, как закрасить svg при добавлении класса? По логике должно быть так .like-icon--filled .like-icon__inside { fill: #499DDE; } Но это не работает https://codepen.io/anon/pen/QPoRwg
  18. Библиотека для тултипов Tooltipster. Если делаем триггер 'hover' - то тултип нормально появляется $('.icon').tooltipster({ trigger: 'hover' }); Если делаем кастомный триггер - то это не срабатывает $('.icon2').tooltipster({ theme: 'tooltipster-shadow', trigger: 'custom', triggerOpen: { mouseenter: true, tap: false } }); Почему такое происходит? Прикладываю архив. В песочнице почему то не удалось подключить плагин tooltipster.rar
  19. Спасибо. Помогло. В этом же топике нашел ссылку на пример без закрашивания фона http://jsfiddle.net/L2ya3buj/1/
  20. спасибо, но у вас там текст не скрывает черточки. Вы меня натолкнули на одну идею - подкрасить фон текста, но проблема в том что полупрозрачный фон rgba(11, 100, 168, 0.08) на таком же полупрозрачном фоне будет выделяться Получилось так https://codepen.io/anon/pen/XQXowd не знаю как это назвать ( Так бы давно нагуглил
  21. На дизайне у этих черточек разная длина и зависит от контента. Кто нибудь знает как сделать такое в верстке? https://codepen.io/anon/pen/WWraar
  22. То же самое происходит В html вставляю иконку - эффект с hover работает Из спрайта вызываешь ту же иконку - эффект с hover уже не работает
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy