Новые темы для ABillS (Визуализация)

Ответить
~AsmodeuS~
Site Admin
Сообщения: 5746
Зарегистрирован: Пт янв 28, 2005 3:11 pm
Контактная информация:

Новые темы для ABillS (Визуализация)

Сообщение ~AsmodeuS~ »

Здесь можно выкладывать новые темы на ABillS, а также заказывать темы под корпоративный стиль Вашей компании

kaktatak
Сообщения: 42
Зарегистрирован: Пн фев 15, 2010 3:04 pm

Re: Новые темы для ABillS (Визуализация)

Сообщение kaktatak »

Как я наводил красоту в Личном кабинете Abills.

С недавнего времени в csv и демке появилось нечто новое во внешнем виде, а именно поддержка новое оформление с использованием файла стилей .css. Мне стало это интересно и я решил разобраться как это включить и мало того подогнать стиль под основной сайт. Сильно заморачиваться я не стал, а просто сменил пару цветов, немного поменял структуру некоторых мест.... Вообщем увидите сами.
Поехали.
Первым делом разберемся со стилями.
В папке cgi-bin можно отыскать папку styles,а в ней уже папочку со стилем по-умолчанию с гордым названием default, для того, чтобы в ходе обновлений наш собственный стиль не "сломался" создаем папку с другим названием(у меня это fly). копируем файл стиля(default/client.css) по-умолчанию к себе в папку.
Пример моего client.css
Добавляем в config.pl переменную $conf{HTML5}=1;(пока я написал просто 1, в дальнейшем тут нужно будет указывать название папки с личным стилем) После добавления этой переменной включается другая разметка страниц Личного кабинета пользователя.
Далее...
Чтобы стиль применился нужно создать новый шаблон _metatags_client.tpl
У меня получился вот такой

Код: Выделить всё

<!DOCTYPE HTML>
<html>
<head>
<title>%title%</title>
%REFRESH%
<meta HTTP-EQUIV='Cache-Control' content='no-cache,no-cache,no-store,must-revalidate' />
<meta HTTP-EQUIV='Expires' CONTENT='-1'/>
<meta HTTP-EQUIV='Pragma' CONTENT='no-cache' />
<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=%CHARSET%' />
<meta HTTP-EQUIV='content-language' content='%CONTENT_LANGUAGE%' />
<meta name='Author' content='~AsmodeuS~' />

<link rel='stylesheet' type='text/css' href='styles/default/styleLib.css' />
<link rel='stylesheet' type='text/css' href='styles/fly/client.css' />
<link rel='stylesheet' media='print' type='text/css' href='%PRINTCSS%' />

<!--[if lt IE 9]>
<link rel='stylesheet' type='text/css' href='styles/fly/styleIE.css' />
<![endif]-->

<script type='text/javascript' src='styles/default/js/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='styles/default/js/main_kabinet.js'></script>
<script type='text/javascript' src='styles/default/js/checkform.js'></script>
<script type='text/javascript' src='styles/default/js/functions.js'></script>
<script type='text/javascript' src='styles/default/js/calendar.js' ></script>
<script type='text/javascript' src='%JAVASCRIPT%' ></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='styles/default/js/html5.js'></script>
<![endif]-->	
</head>
<body>
<div id='page_wrap'>
<div id='inner_wrap'>
еще нам понадобится _form_client_start.tpl

Код: Выделить всё

<div id='header_wrap'>
<header>
<a href='/'><img src='styles/fly/logo.gif'/></a>
</header>
</div><!--header_wrap-->
%BODY%
</div><!--inner_wrap-->
</div><!--page_wrap-->
</body>
</html>
и _form_client_main.tpl

Код: Выделить всё

<div class='index content'>
<div class='overflow kabinet-inner'>
<ul class='top_status border_rad'>
<li class='top_status-item flRight'><strong>$_TIME:</strong> %TIME%</li>
<li class='top_status-item flRight'><strong>$_DATE:</strong> %DATE%</li>
<li class='top_status-item flLeft'><strong>$_USER:</strong> %LOGIN%</li>
<li class='top_status-item flLeft'><strong>IP:</strong> %IP%</li>
<li class='top_status-item tCenter'></li>
</ul>
%MENU%
<div class='kabinet-center_col'>				
%BODY%
</div><!--kabinet-center_col-->
</div><!--overflow kabinet-inner-->
</div><!--index content-->
еще я поменял форму для ввода логина пароля(в стиле дописал правила для новой формы)
_form_client_login.tpl

Код: Выделить всё

<script type='text/javascript'>
function selectLanguage() {
  sLanguage	= '';
  try {
    frm = document.forms[0];
    if(frm.language)
    sLanguage = frm.language.options[frm.language.selectedIndex].value;
    sLocation = '$SELF_URL?DOMAIN_ID=$FORM{DOMAIN_ID}&language='+sLanguage;
    location.replace(sLocation);
  } catch(err)  {
    alert('Your brownser do not support JS');
  }
}
function set_referrer () {
  document.getElementById('REFERRER').value=location.href;
}
</script>
<div id='login_form'>
<form action='$SELF_URL' METHOD='post' name=form_login>
<fieldset>
<legend>%TITLE%</legend>
<input type=hidden name=DOMAIN_ID value='$FORM{DOMAIN_ID}'>
<input type=hidden ID=REFERRER name=REFERRER value='$FORM{REFERRER}'>
<table>
<TR><TD colspan=2> </TD></TR>
<TR><TD align=right width=50%> $_LANGUAGE:  </TD><TD  width=50% align=left>%SEL_LANGUAGE%</TD></TR>
<TR><TD align=right> $_USER:  </TD><TD align=left><input type='text' name='user'></TD></TR>
<TR><TD align=right> $_PASSWD:  </TD><TD align=left><input type='password' name='passwd'></TD></TR>
<tr><th colspan='2' class=even><input type='submit' name='logined' value=' $_ENTER ' onclick='set_referrer()'></th></TR>
</table>
</fieldset>
</form>
<div class='clear'></div>
</div>
Вроде как все... ну и на последок пара картинок, что поучилось в итоге:
login_form
Главная страница
Список снятий денег
Открытая тема в Тех поддержке
Спасибо за внимание :D

kaktatak
Сообщения: 42
Зарегистрирован: Пн фев 15, 2010 3:04 pm

Re: Новые темы для ABillS (Визуализация)

Сообщение kaktatak »

последнее время обратил внимание, что не все гладко во внешнем виде биллинга. Решил немного по-эксперементировать и подружить абиллс с бутстрапом.
пока вот небольшой набросок списка клиентов
https://dl.dropboxusercontent.com/u/518 ... enShot.png
если будет интересно не только мне, можно продолжить в этом направлении. Если внедрять это все в разработку, то нужно содействие авторов(нужно править в коде генерирование элементов, типа меню и тп)

~AsmodeuS~
Site Admin
Сообщения: 5746
Зарегистрирован: Пт янв 28, 2005 3:11 pm
Контактная информация:

Re: Новые темы для ABillS (Визуализация)

Сообщение ~AsmodeuS~ »

круто

если есть желание можем вместе внести новые стили, напишите мне в аську

kaktatak
Сообщения: 42
Зарегистрирован: Пн фев 15, 2010 3:04 pm

Re: Новые темы для ABillS (Визуализация)

Сообщение kaktatak »

Небольшое наблюдение:
Пока большая часть интерфейса это таблицы, я считаю, что нужно убрать из кода
<meta name='viewport' content='width=device-width, initial-scale=1'>
т.к. на небольшом экране(смартфон) все смотрится более чем ужасно.
QIP Shot - Screen 004.png
QIP Shot - Screen 004.png (33.78 КБ) 15575 просмотров
либо нужно работать над адаптивностью таблиц.

antoman
Сообщения: 39
Зарегистрирован: Пт май 22, 2015 6:49 am

Re: Новые темы для ABillS (Визуализация)

Сообщение antoman »

Можете предложить вариант, который поддерживает responsive?

Update:
Responsive tables
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Добавим в следующем апдейте

Ответить