Jump to content

Recommended Posts

Доброго времени суток, частично выполнил задание предложенное на форуме.

 

Сам сайт.

 

Исходник тут. Там же чуть больше деталей об этом проекте, не буду повторяться.

 

Сразу отмечу, что не придерживался ТЗ доскональна, так как это учебная верстка, а ТЗ ставило рамки и задачи не подходящие под мои цели. Специально и сразу не соблюдалась поддержка IE8, так как AngularJS давно прекратил его поддержку(все замечательно работает под IE9), так же мне не очень понравилось качество макета, поэтому раз деньги мне все равно не заплатят, я решил не грузится подгонкой пикселей :). Было сделано 3 представления сайта, заместо 4, так как этого вполне достаточно, возможно я и не прав, но спорить было не с кем, а учебного интереса эта работа не представляла.

 

Прошу обратить внимание на AngularJS, если среди вас окажется человек хорошо разбирающийся в вопросе, я буду безмерно рад любому вашего комментарию, пожалуйста, не оставайтесь равнодушным.

 

Спасибо господину klierik за Ваш труд.

Edited by СергейРусков
  • Like 1
Link to comment
Share on other sites

По-моему, сверстано плохо.

Блоки скачут, отступы не продуманны, заголовки расставлены с ошибками, огромный спрайт на несколько картинок, соответствие макету никакое, адаптивность еще допиливать.

Даже кнопка не сверстана что в инфо блоке, справа он слайдера :)

 

Если цель была потренироваться с ангуляром, может она и удалась, про это ничего не скажу. Если же хорошо сверстать макет, то на три с минусом.

Edited by pangurban
Link to comment
Share on other sites

По-моему, сверстано плохо.

Блоки скачут, отступы не продуманны, заголовки расставлены с ошибками, огромный спрайт на несколько картинок, соответствие макету никакое, адаптивность еще допиливать.

Даже кнопка не сверстана что в инфо блоке, справа он слайдера :)

Если цель была потренироваться с ангуляром, может она и удалась, про это ничего не скажу. Если же хорошо сверстать макет то на три с минусом.

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Блоки скачут. Кто куда скачет? У меня все на месте.

Отступы не продуманы. Я продумывал.

Заголовки проставлены с ошибками. Какими? SEO? С этим я могу согласится, а могу поспорить, интересна Ваша аргументация.

Соответствие макету никакое. Вы преувеличиваете, макет узнается с первой секунды. Если вы про накладывание картинки поверх сайта, не знаю зачем Вы потратили свое время, это не соблюдалось осознанно и об этом я написал в первом сообщении.

Адаптивность еще допиливать. Что это значит?

Огромный спрайт на несколько картинок. Это имеет значение? В размере он не вырос, а удобство доставляет.

Даже кнопка не сверстана. У меня есть несколько версий о чем Вы, поспорю с наиболее вероятной. Если Вы о кнопке Browser в картинке баннера, то вот цитата из ТЗ: "Инфо блок содержит баннер - полностью картинка". Более того user experience говорит людям кликать в любое место баннера, так сложилось, к тому же так банально удобнее.

Edited by СергейРусков
  • Like 1
Link to comment
Share on other sites

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Да, пардон, спать хотелось и не стал подробно расписывать.

Ссылка не работает, а  по памяти не буду писать, что б не соврать.

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

Link to comment
Share on other sites

 

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Да, пардон, спать хотелось и не стал подробно расписывать.

Ссылка не работает, а  по памяти не буду писать, что б не соврать.

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

 

Да, что-то с сервером, разбираюсь. Как только заработает - напишу

Edited by СергейРусков
Link to comment
Share on other sites

 

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Да, пардон, спать хотелось и не стал подробно расписывать.

Ссылка не работает, а  по памяти не буду писать, что б не соврать.

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

 

Заработало. Я немного поправил код пока сервер лежал, так что не удивляйтесь, если найдете новые баги/не увидите старых.

Link to comment
Share on other sites

Такой вопрос.

 

Ты используешь gulp-livereload и пишешь такие партянки

gulp.watch(distPath + 'js/plugins/angularjs/database.json').on('change', livereload.changed);gulp.watch(distPath + 'css/fabrique' + wordEnd + '.css').on('change', livereload.changed);gulp.watch(distPath + 'index.html').on('change', livereload.changed);gulp.watch(distPath + 'js/script' + wordEnd + '.js').on('change', livereload.changed);

А не проще ли использовать gulp-connect и в том таске где тебе нужны изменения дописывать:

.pipe(connect.reload());

плюс он и сервер запускает.

Я в этом не сильно разбираюсь, но интерсно почему у тебя так, а не иначе.

Link to comment
Share on other sites

Такой вопрос.

 

Ты используешь gulp-livereload и пишешь такие партянки

gulp.watch(distPath + 'js/plugins/angularjs/database.json').on('change', livereload.changed);gulp.watch(distPath + 'css/fabrique' + wordEnd + '.css').on('change', livereload.changed);gulp.watch(distPath + 'index.html').on('change', livereload.changed);gulp.watch(distPath + 'js/script' + wordEnd + '.js').on('change', livereload.changed);

А не проще ли использовать gulp-connect и в том таске где тебе нужны изменения дописывать:

.pipe(connect.reload());

плюс он и сервер запускает.

Я в этом не сильно разбираюсь, но интерсно почему у тебя так, а не иначе.

Окей, так и сделаю, спасибо за наводку. Никаких особых причин делать именно так не было, просто этот плагин был на слуху. Кстати, написано, что и gulp-connect переписали, теперь его кличут gulp-webserver, как же просто жить когда нет выбора :)

Edited by СергейРусков
Link to comment
Share on other sites

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Ну, поехали.

 

1. Подчеркнутые блоки не на одной линии.

2. Меню и поиск не выровнены, а просто прибиты к верху родителя.

3. Разделители у .private-office__menu должны быть псевдо элементами. Причем скрыть первый разделитель, прописав у родителя hidden, очень сомнительная затея.

4. Зачем у поиска label, если есть атрибут placeholder? ie9?

5. font-weight у шрифта relaway 100-300

6. Ровно 100 important'ов. Ты издеваешься? :)

7. Зачем у кнопки width и почему она блок ума не приложу.

8. Ну что за дела(

9. верхний бордер у .thumbnails-wrapper не такой как на макете.

10. могу ошибаться, но по-моему бордер dotted на андроиде смазывается.

11. Спорная вещь. не сверстано, не сверстано.

12. При уменьшении масштаба в лисе беда

13. При уменьшение в хроме беда

 

Это на первый взгляд.

Если что-то не объективно - пишите.

Edited by pangurban
Link to comment
Share on other sites

По ТЗ надо было переписать стили бутстрапа а не перебить Important, Кстати ничего сложного я минут за 10 разобрался как бутстрап пересобрать.

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

 

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Ну, поехали.

Спасибо, все четко и главное "не на отвали", чтож буду учиться, кое с чем не согласен, но сначала со всем подетальней разберусь - отпишусь.

Немножно оффтопа, я настроил gulp-webserver, так как Вы меня тут разнесли в пух и прах пока не планировал ничего заливать на GitHub, но если Вам интересно, могу залить, просто, с настроенным сервером.

Edited by СергейРусков
Link to comment
Share on other sites

Глянул, variables не переписали просто.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

Link to comment
Share on other sites

 

Глянул, variables не переписали просто.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

 

Еле нашел, так в чем тогда проблема то ? Мне вот интересно.

Link to comment
Share on other sites

 

 

Глянул, variables не переписали просто.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

 

Еле нашел, так в чем тогда проблема то ? Мне вот интересно.

 

Bootstrap заточен под mobile first, я начал наоборот, а это как кота против шерсти гладить.

Link to comment
Share on other sites

Угу уже разобрался, css почему такой большой получился, не удалось никакие отключить модули бутстраповские ?

Они там сжатые фик поймешь чо у вас там прилетело, я честно не совсем разобрался как искать какие модули можно откинуть.

Есть конечно вариант вылавливать через их сборщик но по мне как то муторно.

Короче мне тоже видимо пора сделать, вопрос только где время взять ?

 

Нашел, вопрос снят )

Edited by Sergik+
Link to comment
Share on other sites

Угу уже разобрался, css почему такой большой получился, не удалось никакие отключить модули бутстраповские ?

Они там сжатые фик поймешь чо у вас там прилетело, я честно не совсем разобрался как искать какие модули можно откинуть.

Есть конечно вариант вылавливать через их сборщик но по мне как то муторно.

Короче мне тоже видимо пора сделать, вопрос только где время взять ?

Заходите в папку src/sass/bootstrap там открываете _index.scss, отключаете то, что Вам не надо, и удаляете сами файлы из папки. Я уже не помню точно, но кажется я достаточно много от туда поудалял.

Edited by СергейРусков
Link to comment
Share on other sites

 

Угу уже разобрался, css почему такой большой получился, не удалось никакие отключить модули бутстраповские ?

Они там сжатые фик поймешь чо у вас там прилетело, я честно не совсем разобрался как искать какие модули можно откинуть.

Есть конечно вариант вылавливать через их сборщик но по мне как то муторно.

Короче мне тоже видимо пора сделать, вопрос только где время взять ?

Заходите в папку src/sass/bootstrap там открываете _index.scss, отключаете то, что Вам не надо, и удаляете сами файлы из папки. Я уже не помню точно, но кажется я достаточно много от туда поудалял.

 

Ага нашел уже.

Link to comment
Share on other sites

Не понимаю я этот бутстрап. Вот почему вы им пользуетесь? Быстро? Да. Но это для случая, когда не важно что там и как получится. А для реального проекта? Я вот когда каждую строчку руками написал мне как-то легче. Я знаю как там все устроено, имею свою коллекцию переиспользуемых классов. Зачем мне переписывать бутстраповские классы, если я напишу свои? Зачем мне тащить бутстраповский css который я все равно буду переписывать?

Так в чем соль этого бутстрапа?

Link to comment
Share on other sites

Не понимаю я этот бутстрап. Вот почему вы им пользуетесь? Быстро? Да. Но это для случая, когда не важно что там и как получится. А для реального проекта? Я вот когда каждую строчку руками написал мне как-то легче. Я знаю как там все устроено, имею свою коллекцию переиспользуемых классов. Зачем мне переписывать бутстраповские классы, если я напишу свои? Зачем мне тащить бутстраповский css который я все равно буду переписывать?

Так в чем соль этого бутстрапа?

Именно здесь ТЗ такое, а использовать или нет это конечно кто как хочет. Бутстрап хорош для прототипирования и когда админку надо быстро сбацать, вроде немало людей пользуются и им нравится.

Edited by Sergik+
Link to comment
Share on other sites

Не понимаю я этот бутстрап. Вот почему вы им пользуетесь? Быстро? Да. Но это для случая, когда не важно что там и как получится. А для реального проекта? Я вот когда каждую строчку руками написал мне как-то легче. Я знаю как там все устроено, имею свою коллекцию переиспользуемых классов. Зачем мне переписывать бутстраповские классы, если я напишу свои? Зачем мне тащить бутстраповский css который я все равно буду переписывать?

Так в чем соль этого бутстрапа?

Я думаю по этому вопросу и на этом форуме и вообще есть куча инфы :) Из того, что я прочитал, все делятся на 2 лагеря, первые - поддерживают Вашу позицию, вторые говорят, что им так быстрее, что они привыкли, что отцы уже все продумали, что это унификация и легкость поддержки при передачи проекта в другие руки и тд. Если Вы спрашиваете меня, это строчка в резюме которая must have :)

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By jksnf
      Не работает transition при появлений модального окна:
      <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально.

      Что делать?
    • By Alexand
      Здравствуйте дорогие специалисты програмирования.
      Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят!
      Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту.
      Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application 
      Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit
      С уважением к Вам, за ранее спасибо.
    • By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By K0D0D
      Может кто-то оценить уже готовый сайт? Заранее спасибо.
    • By Алеся
      Подскажите, пожалуйста, что прописать в коде для изменения цвета шрифта меню при наведении на БЛОК (не на ссылку) с черного на белый при hover. На скрине цвет меняется при наведении на ссылку. И как можно меню отодвинуть влево? Заранее спасибо!  
      <div class="three navigation items">       <nav> <ul>   <li> <div class="navigation__item"></div> <a href="#">Hot themes</a>   </li>   <li> <div class="navigation__item"></div> <a href="#">EURO-2016 Playoffs</a>   </li>   <li>     <div class="navigation__item"></div>     <a href="#">El'Classico</a>   </li> </ul>       </nav>     </div>   .navigation {
          background-color: rgba(31, 30, 30, 0.438);
          width: 900px;
          height: 30px;  
      }
      .navigation li {
          display: inline-block;
          padding: 5px 15px;
      &:hover {
          content: "";
          background-color: rgb(36, 36, 36);
          cursor: pointer;
      }
      }
      a {
          color: black;
          text-decoration: none;
          font-family: sans-serif;
      &:hover {
        content: "";
        color: white;
       }
      }

  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • 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