-
Posts
166 -
Joined
-
Last visited
yaparoff's Achievements
-
Есть конструктор шкафа. Как реализовать такой? 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> } } }
-
- css
- html
-
(and 94 more)
Tagged with:
- css
- html
- сайт
- верстка
- html
- css
- javascript jquery
- button
- html
- удаленный сервер
- удаленный доступ
- облачные сервисы
- хостинг
- бэкап
- гостевой книги задать во
- блоки
- маска
- фильтры
- инверсия
- анимация
- front-end верстка
- form
- a href
- button
- wicart
- a href
- flex
- php
- symfony
- sonata
- html
- css
- верстка сайтов
- сайт по psd шаблону
- html
- css
- многостраничный
- адаптивна верстка
- недорого
- одностраничный
- dedicated
- vps
- vds
- хостинг
- разработка сайта
- javascript
- css
- html
- popup
- modal
- всплывающие окно
- модальное окно
- flex
- flexbox
- mosaic
- css
- верстка
- google search console
- яндекс вебмастер
- код верификации
- htmlbook.ru
- javascript
- html
- less
- vscode
- настройка
- плагин
- wordpress
- joomla
- css
- вопрос
- помощь
- оформление текста
- блок
- html
- css
- блочные
- блочные элементы
- изображение
- img
- images
- текст
- php
- фрейворк
- vue
- директива
- программирование
- код
- html
- css
- учитель
- ментор
- курсы
- поиск роботы
- вакансии
- карта
-
В проекте над которым работаю, изображения загружаются на некий удаленный сервер 248000.selcdn.ru/cdn/2018/bg_promo-banner.jpg cdn-srv01.miretno.ru/udm-sprite4.png Вопрос как их туда загрузить? Ну или можете просто посоветовать какой-нибудь стабильный удаленный сервер
-
Адаптивная верстка email-письма. Не получается отцентровать блоки на адаптиве
yaparoff replied to yaparoff's question in JavaScript
ну я имею ввиду, то что при ширине экрана от 580 пикс и более -
Адаптивная верстка email-письма. Не получается отцентровать блоки на адаптиве
yaparoff replied to yaparoff's question in JavaScript
тогда на десктопе будет тоже центроваться, на десктопе нужно по левому краю выравнивать -
и правда! вот спасибо!
-
да, конечно https://codepen.io/yaparoff/pen/vYBzdPm?editors=1000 да http://skrinshoter.ru/s/170919/ZzwPd46V?a
-
все верно.Но почему то первая ячейка всегда больше чем вторая 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