Просмотр поста

venom

19 июн 2014 г., 11:56

Люди берегите воду - пейте пиво...

Возник такой вопрос , по поводу Мобильного Фреймворка , в кротчайшие сроки нужно переверстать Джонни 3, изначально заказчик думал взять Bootstrap, но не тут то было , подвох в том что получиться очень большое количества кода (раз в 5 это точно) к примеру:
(редактирование анкеты пользователя , только Аватар и Фотография)

в чистом Донни (+/-)

echo '</p><p>' . $lng['avatar'] . ':<br />';
$link = '';
if (file_exists(('../files/users/avatar/' . $user['id'] . '.png'))) {
    echo '<img src="../files/users/avatar/' . $user['id'] . '.png" width="32" height="32" alt="' . $user['name'] . '" /><br />';
    $link = ' | <a href="profile.php?act=edit&amp;user=' . $user['id'] . '&amp;delavatar">' . $lng['delete'] . '</a>';
}
echo '<small><a href="profile.php?act=images&amp;mod=avatar&amp;user=' . $user['id'] . '">' . $lng_profile['upload'] . '</a>';
if ($user['id'] == $user_id)
    echo ' | <a href="../pages/faq.php?act=avatars">' . $lng['select'] . '</a>';
echo $link . '</small></p>';
echo '<p>' . $lng_profile['photo'] . ':<br />';
$link = '';
if (file_exists(('../files/users/photo/' . $user['id'] . '_small.jpg'))) {
    echo '<a href="../files/users/photo/' . $user['id'] . '.jpg"><img src="../../files/users/photo/' . $user['id'] . '_small.jpg" alt="' . $user['name'] . '" border="0" /></a><br />';
    $link = ' | <a href="profile.php?act=edit&amp;user=' . $user['id'] . '&amp;delphoto">' . $lng['delete'] . '</a>';
}
echo '<small><a href="profile.php?act=images&amp;mod=up_photo&amp;user=' . $user['id'] . '">' . $lng_profile['upload'] . '</a>' . $link . '</small><br />' .

Это все вместе с php , а вот написанный код на Bootstrap тех же функций но еще
даже без PHP

HTML (+/-)

<div class="panel panel-default">
            <div class="panel-body">
                <div class="col-xs-12 col-md-6">
                    <div class="thumbnail">
                        <img data-src="holder.js/120x120" alt="120x120"
                             src="../images/noavatar.png"
                             style="width: 120px; height: 120px;">

                        <div class="caption">
                            <h4 style="text-align: center;">Аватар</h4>

                            <div class="btn-group btn-group-justified">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-upload visible-xs"></i>
                                        <span class="hidden-xs">Выгрузить</span>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-ok visible-xs"></i>
                                        <span class="hidden-xs">Выбрать</span>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-remove visible-xs"></i>
                                        <span class="hidden-xs">Удалить</span>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-md-6">
                    <div class="thumbnail">
                        <img data-src="holder.js/120x120" alt="120x120"
                             src="../images/nofotos.png"
                             style="width: 120px; height: 120px;">

                        <div class="caption">
                            <h4 style="text-align: center;">Фотография</h4>

                            <div class="btn-group btn-group-justified">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-upload visible-xs"></i>
                                        <span class="hidden-xs">Выгрузить</span>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-ok visible-xs"></i>
                                        <span class="hidden-xs">Выбрать</span>
                                    </button>
                                </div>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default">
                                        <i class="glyphicon glyphicon-remove visible-xs"></i>
                                        <span class="hidden-xs">Удалить</span>
                                    </button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

Скрин с компа
Скрин с мобилы
.............................
Решил взять Gumby (мне он нравиться из-за очень хорошей Grid системы) , опять не тут то было - много явы + с ошибками...,
еще посмотрел в сторону Kube, но под мобилы он ну не как не подходит, хотя и вес маленький...
Foundation - такой же как Bootstrap.
Думаю попробовать сегодня Semantic, вроде такой как Bootstrap , чуть урезан (в плане кода)....
Хотелось бы узнать кто какие знает Mobile CSS Framework - именно мобильные ...
...........................
Жду ваших предложений!!!!

Вернуться в тему
Форум

Популярный VDS-хостинг