Дизайн личного кабинета: відмінності між версіями

Поточна версія на 17:35, 25 березня 2023

Личный кабинет

Дизайн, как обычно, формируется двумя составляющими:

стилями (css)
шаблонами страниц

Шаблоны кабинета абонента находятся в папке /usr/local/nodeny/web/tmpl/user/:

base	основной шаблон, в котором задается структура документа, подгружаются css и js-скрипты
box	шаблон для отображения чего-либо обособленным блоком (например, в рамке)
error_box	шаблон для отображения ошибки

Кроме данных файлов, присутствуют шаблоны конкретных страниц кабинета:

main	титульная страница
pays	история платежей
auth_log	лог авторизаций
pay_*	шаблоны страниц оплаты через платежные системы

Менять файлы на диске вам не нужно, поскольку:

при обновлении биллинга, эти файлы могут быть изменены автором
разработан простой механизм их замены прямо в админке.

Шаблоны, которые подлежат замене, необходимо создавать в админке в разделе «Документы». Залогиньтесь под суперадмином и в этом разделе создайте папку с именем, например, «Кабинет клиента». Справа в поле «теги» обязательно введите system

Можно переопределить какой-либо шаблон, либо их все. Давайте попробуем создать совершенно иной дизайн. Сначала переопределим основной шаблон: в папке «Кабинет клиента» создадим документ с именем «Base» и установим ему теги:

system
template=base
role=user

Здесь system указывает на то, что файл системный, без этого тега NoDeny будет игнорировать шаблон чтобы не давать обычным операторам менять дизайн. template=base указывает имя темплейта (смотрим таблицу выше). role=user говорит, что данный шаблон будет использоваться только когда залогинен пользователь, а не админ. Обязательно ставим этот тег, иначе изменим и административный интерфейс.

В поле, где отображается содержимое файла «Base», вставим такой текст:

<!doctype html>
<html>
<head>
<title>{{ cfg::net_title }}</title>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel='stylesheet' href='{{cfg::img_dir}}/user.css' type='text/css'>
{{ template::base.head }}
<script type='text/javascript'>
{{ template::base.document_ready }}{{ document_ready }}
</script>
</head>
<body id='body'>
     <div id='top_lines'>{{ top_lines }}
         {% if made_msg %}<div class='top_msg'>{{ made_msg }}</div>{% endif %}
     </div>
     <div style='float: left; width: 300px; margin-left: 5px'>
         {% include 'menu.html' menu=user_info.plugin_menu user_info=user_info %}       
     </div>
     <div style='margin-left: 310px'>{{ main_block }}</div>
</body>
</html>

Если зайти в личный кабинет под клиентом (не будучи авторизованным администратором), то увидим поломанный дизайн. Все правильно, мы поменяли блоки шаблона, а css остались прежними (файл user.css). Пока разберемся что в шаблоне за что отвечает.

Блоки, которые находятся в body:

main_block: основной блок
top_lines: информация, которую NoDeny рекомендует отобразить в верхней части страницы
made_msg: блок с сообщением о том, что операция выполнена или произошла ошибка
template::base.head: в этот блок конкретный модуль кабинета может записать дополнительную информацию, например, дополнительные css

Давайте загрузим тестовый дизайн, подготовленный автором:

Документ «Base»:

<!doctype html>
<html>
<head>
<title>{{ cfg::net_title }}</title>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<link rel='stylesheet' href='{{cfg::img_dir}}/font-awesome/css/font-awesome.min.css' type='text/css'>
<script type='text/javascript' src='{{cfg::img_dir}}/js/jquery.js'></script>
<script type='text/javascript' src='{{cfg::img_dir}}/js/nody_modal.js' charset='UTF-8'></script>
<script type='text/javascript' src='{{cfg::img_dir}}/js/nody_select.js' charset='UTF-8'></script>
<script type='text/javascript' src='{{cfg::img_dir}}/js/nody.js' charset='UTF-8'></script>
{{ template::base.head }}
<script type='text/javascript'>
var nody;
$(function() {
    if( $('body').height() < $(window).height() ) $('body').height($(window).height());
    nody = {
        msg_after_submit : '{{lang::msg_after_submit}}',
        img_after_submit : '{{cfg::img_dir}}/loading.gif',
        script_url       : '{{ses::script_url}}',
        document_ready   : nody_ready
    };
    nody.document_ready();
    {{ template::base.document_ready }}{{ document_ready }}
});
</script>
<style>
{% include 'css.html' %}
</style>
</head>
<body class='{{body_class}}'>
<div id='modal_window'></div>
<div id='header'>
   <img src='/nodeny_logo.png' style='vertical-align:middle; width:300px; height:80px;'>
   <div>Здравствуйте, {{user_info.fio}}<br>Вы находитесь в личном кабинете сети NoDeny</div>
</div>
<div id='content_title'><div id='content_title_exit'><a href='?a=logout'>{{ lang::btn_logout }}</a></div>{{ content_title }}</div>
<div id='main'>
   <div id='content'>
      <div id='top_lines'>{{ top_lines }}</div>
      <div id='main_block'><div>{{ main_block }}</div></div>
   </div>
   <div id='menu_block'>
      {% include 'menu.html' menu=user_info.plugin_menu user_info=user_info %}
      {% if news %}<div id='news_block'>{{ news.0.news }}</div>{% endif %}
   </div>
</div>
</body>
</html>

Документ «Кабинет css», теги:

system
template=user/css

содержимое возьмите с данной страницы

Дизайн страницы логина

В /usr/local/nodeny/web/tmpl/ хранятся такие шаблоны:

login_base.html	основной шаблон
login.html	ввод логина и пароля
login_select_mod.html	выбор метода авторизации

В NoDeny есть модули для авторизации не только по логину и паролю, а например, через google или telegram. В этом случае сперва выводится список методов авторизации. Вот как происходит отображение в данном случае:

login_select_mod.html → login_base.html → base.html

В случае отображения окна ввода логина и пароля:

login.html → login_base.html → base.html

Как видите, финальная станица собирается из нескольких. Это сделано для того, чтобы общие части были в одном месте и не требовалось их дублировать во всех шаблонах. Если посмотрим на файл login.html, то увидим такую структуру:

{% global_block template::base.head %}
...
{% endblock %}

{% global_block template::login_base.main %}
...
{% endblock %}

{% include 'login_base.html' %}

Здесь include загружает общий шаблон логина login_base.html. global_block указывает поместить данные внутри него в блок, который определен в другом шаблоне и имеет такое же имя. Например, блок base.head определен в base.html:

{{ template::base.head }}

Давайте изменим страницу логина. В документах создайте файл «Логин base» с тегами:

system
template=login_base

Содержимое файла скопируйте из /usr/local/nodeny/web/tmpl/login_base.html и измените, например, бекграунд:

.login_main {
    padding: 40pt 15pt;
    background-color: #ffffff;
    color: #000000;
}

→

.login_main {
    padding: 40pt 15pt;
    background-color: #e0e0e0;
    color: #000000;
}

@@ Рядок 1: / Рядок 1: @@
+==Личный кабинет==
 Дизайн, как обычно, формируется двумя составляющими:
 * стилями (css)
@@ Рядок 11: / Рядок 12: @@
 |-
 |box
-|шаблон для отображения чего-либо в рамке
+|шаблон для отображения чего-либо обособленным блоком (например, в рамке)
 |-
 |error_box
@@ Рядок 33: / Рядок 34: @@
 |шаблоны страниц оплаты через платежные системы
 |}
+<br>
 Менять файлы на диске вам не нужно, поскольку:
@@ Рядок 39: / Рядок 40: @@
 * разработан простой механизм их замены прямо в админке.
-Шаблоны, которые подлежат замене, необходимо создавать в админке в разделе «Документы».  Залогинимся под суперадмином и в этом разделе создадим папку с именем, например, «Кабинет клиента». Справа в поле «теги» обязательно введем system!
+<br>
+Шаблоны, которые подлежат замене, необходимо создавать в админке в разделе «Документы».  Залогиньтесь под суперадмином и в этом разделе создайте папку с именем, например, «Кабинет клиента». Справа в поле «теги» обязательно введите system
@@ Рядок 52: / Рядок 54: @@
 Здесь system указывает на то, что файл системный, без этого тега NoDeny будет игнорировать шаблон чтобы не давать обычным операторам менять дизайн. template=base указывает имя темплейта (смотрим таблицу выше). role=user говорит, что данный шаблон будет использоваться только когда залогинен пользователь, а не админ. Обязательно ставим этот тег, иначе изменим и административный интерфейс.
-В поле, где отображается содержимое файла «Base» вставим такой текст:
+В поле, где отображается содержимое файла «Base», вставим такой текст:
 <pre>
@@ Рядок 69: / Рядок 71: @@
 </head>
 <body id='body'>
-      <div id='top_lines'>{{ top_lines }}</div>
+      <div id='top_lines'>{{ top_lines }}
-      <div style='float: left; width: 300px; margin-left: 5px'>{{ main_menu  }}</div>
+         {% if made_msg %}<div class='top_msg'>{{ made_msg }}</div>{% endif %}
+     </div>
+      <div style='float: left; width: 300px; margin-left: 5px'>
+         {% include 'menu.html' menu=user_info.plugin_menu user_info=user_info %}
+     </div>
       <div style='margin-left: 310px'>{{ main_block }}</div>
 </body>
@@ Рядок 80: / Рядок 86: @@
 Блоки, которые находятся в body:
 <pre>
-main_menu: меню (ссылки: главная/платежи/сообщение/лог трафика и т.д)
 main_block: основной блок
 top_lines: информация, которую NoDeny рекомендует отобразить в верхней части страницы
+made_msg: блок с сообщением о том, что операция выполнена или произошла ошибка
 template::base.head: в этот блок конкретный модуль кабинета может записать дополнительную информацию, например, дополнительные css
 </pre>
@@ Рядок 101: / Рядок 107: @@
 <meta http-equiv='Pragma' content='no-cache'>
 <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
+<link rel='stylesheet' href='{{cfg::img_dir}}/font-awesome/css/font-awesome.min.css' type='text/css'>
+<script type='text/javascript' src='{{cfg::img_dir}}/js/jquery.js'></script>
+<script type='text/javascript' src='{{cfg::img_dir}}/js/nody_modal.js' charset='UTF-8'></script>
+<script type='text/javascript' src='{{cfg::img_dir}}/js/nody_select.js' charset='UTF-8'></script>
+<script type='text/javascript' src='{{cfg::img_dir}}/js/nody.js' charset='UTF-8'></script>
 {{ template::base.head }}
 <script type='text/javascript'>
-{{ template::base.document_ready }}{{ document_ready }}
+var nody;
+$(function() {
+    if( $('body').height() < $(window).height() ) $('body').height($(window).height());
+    nody = {
+        msg_after_submit : '{{lang::msg_after_submit}}',
+        img_after_submit : '{{cfg::img_dir}}/loading.gif',
+        script_url       : '{{ses::script_url}}',
+        document_ready   : nody_ready
+    };
+    nody.document_ready();
+    {{ template::base.document_ready }}{{ document_ready }}
+});
 </script>
 <style>
@@ Рядок 121: / Рядок 143: @@
        <div id='main_block'><div>{{ main_block }}</div></div>
     </div>
-    <div id='menu_block'>{{ main_menu }}
+    <div id='menu_block'>
+      {% include 'menu.html' menu=user_info.plugin_menu user_info=user_info %}
        {% if news %}<div id='news_block'>{{ news.0.news }}</div>{% endif %}
     </div>
@@ Рядок 136: / Рядок 159: @@
 </pre>
-содержимое:
+содержимое возьмите с [[Пример 1 css личного кабинета|данной страницы]]
+==Дизайн страницы логина==
+В /usr/local/nodeny/web/tmpl/ хранятся такие шаблоны:
+{| class="wikitable"
+|-
+|login_base.html
+|основной шаблон
+|-
+|login.html
+|ввод логина и пароля
+|-
+|login_select_mod.html
+|выбор метода авторизации
+|}
+В NoDeny есть модули для авторизации не только по логину и паролю, а например, через google или telegram. В этом случае сперва выводится список методов авторизации. Вот как происходит отображение в данном случае:
+<pre>
+login_select_mod.html → login_base.html → base.html
+</pre>
+В случае отображения окна ввода логина и пароля:
+<pre>
+login.html → login_base.html → base.html
+</pre>
+Как видите, финальная станица собирается из нескольких. Это сделано для того, чтобы общие части были в одном месте и не требовалось их дублировать во всех шаблонах. Если посмотрим на файл login.html, то увидим такую структуру:
+<pre>
+{% global_block template::base.head %}
+...
+{% endblock %}
+{% global_block template::login_base.main %}
+...
+{% endblock %}
+{% include 'login_base.html' %}
+</pre>
+Здесь include загружает общий шаблон логина login_base.html.  global_block указывает поместить данные внутри него в блок, который определен в другом шаблоне и имеет такое же имя. Например, блок base.head определен в base.html:
 <pre>
-.main_bg {
+{{ template::base.head }}
-    background-color: #ffffff;
+</pre>
-}
-html, body {
-    font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
-    background-color: #c0c0c0;
-    font-size: 10pt;
-    border-right: 1px solid #000000;
-}
-body {
-    width: 1100px;
-    margin: 0 auto;
-}
-a {
-   color: #45a6ee;
-   text-decoration: none;
-}
-ul {
-    padding: 10pt 15pt 5pt 15pt;
-}
-li {
-    margin-bottom: 8pt;
-}
-input[type=submit], a.as_button {
-    text-decoration: none;
-    text-shadow: 0 1px 1px #ffffff;
-    color: #62abf0;
-    border: solid 1px #62abf0;
-    border-radius: 4px;
-    margin-right: 1px;
-    padding: 6pt 14pt;
-    font-size: 12pt;
-}
-input[type=text], input[type=password], textarea, select {
-    font-size: 12pt;
-}
-textarea {
-    max-width: 700px;
-}
-hr {
-    background: #f0f0f0;
-    height: 1px;
-    border: none;
-}
-table {
-    border: none;
-    border-collapse: collapse;
-}
-#main {
-    width: 100%;
-    background-color: #ffffff;
-    height: 100%;
-    display: table;
-}
-#menu_block {
-    width: 260px;
-    display: table-cell;
-    vertical-align: top;
-    border-left: solid 1px #d1e3f5;
-    padding: 10px 20px 0 20px;
-    color: #ffffff;
-    font-size: 90%;
-}
-#content {
-    background-color: #eeeeee;
-    min-height: 100%;
-    display: table-cell;
-}
-#header {
-    color: #ffffff;
-    background-color: #081f35; // #62abf0;
-}
-#header div {
-    display: inline-block;
-    margin-left: 40px;
-    vertical-align: -15px;
-    line-height: 150%;
-}
-#content_title {
-    padding: 12px 25px;
-    color: #ffffff;
-    background-color: #62abf0;
-    border-top: solid 1px #7bb8f5;
-    border-bottom: solid 4px #d1e3f5;
-    font-size: 120%;
-}
-#content_title_exit {
-    float: right;
-}
-#content_title_exit a {
-    color: #ffffff;
-}
-.navmenu {
-    margin-bottom: 40px;
-    background-color: #ffffff;
-}
-.navmenu a {
-    white-space: nowrap;
-    color: #45a6ee;
-    font-style: normal;
-    text-align: left;
-    padding: 5px 0px;
-    border: 1px solid transparent;
-    display: block;
-    line-height: 100%;
-    text-decoration: none;
-}
-.navmenu a:hover, .navmenu a.active {
-    color: #ff0000 !important;
-}
-#main_block {
-    padding-top: 10px;
-    padding-left: 50px;
-    padding-right: 50px;
-    background-color: #eeeeee;
-}
-#news_block {
-    color: #000000;
-    border: none;
-}
-.error_box {
-    margin-top: 100px;
-}
-.error, .error a {
-    color: #ff0000;
-}
-#menu_block .box {
-    color: #000000;
-}
-.box {
-    padding: 20px;
-    margin-top: 8px;
-    border: 1px solid #d1e3f5;
-    border-radius: 10px;
-    background-color: #ffffff;
-}
-.box .title {
-    color: #000000;
-    background-color: #d1e3f5;
-    margin: -5px -20px 8px -20px;
-    padding: 5px 0 5px 20px;
-}
-.top_msg {
-    text-align: left;
-    color: #304050;
-    background-color: #e0ffe0;
-    border: none;
-    margin: 10px;
-}
-.info_block {
-    margin-top: 40px;
-}
-.info_block .header {
-    top: -17pt;
-    border: none;
-}
-.info_block .content {
-    margin: 20pt 10pt 10pt 20pt;
-}
-.balance_block {
-    border-radius: 8pt;
-    color: #9e9e9e;
-    text-align: center;
-    font-size: 140%;
-}
-.balance_block span {
-    font-size: 125%;
-    vertical-align: -10%;
-    display: inline-block;
-}
-.balance_ok span {
-    color: #4caf50;
-}
-.balance_no_ok span {
-    color: #ff0000;
-}
+Давайте изменим страницу логина. В документах создайте файл «Логин base» с тегами:
-.head {
+<pre>
-    border-bottom: 2px solid #38a27d;
+system
-    color: #38a27d;
+template=login_base
-}
+</pre>
-.row1, .row2, .rowoff {
-    border-bottom: 1px solid #a2cebe;
-}
-.rowoff {
-    background-color: #ffd7d7;
-}
-.td_tall td {
-    padding-top: 8px;
-    padding-bottom: 8px;
-}
-.td_medium td {
-    padding-top: 3px;
-    padding-bottom: 2px;
-}
-.td_wide td {
-    padding-right: 14px;
-    padding-left: 14px;
-}
-.td_narrow td {
-    padding-right: 4px;
-    padding-left: 4px;
-}
-.td_narrow_important td {
-    padding-right: 4px !important;
-    padding-left: 4px !important;
-}
-.td_ok td {
-    padding: 2px 8px;
-}
-.h_center {
-    text-align: center;
-}
-.h_left {
-    text-align: left;
-}
-.h_right {
-    text-align: right;
-}
-.success {
-    color: #38a27d;
-}
-.width100 {
-    width: 100%;
-}
-.submit_block {
-    margin: 30px auto 15px auto;
-    text-align: center;
-}
-a.page {
-    display: inline-block;
-    padding: 5px 7px;
-    border: solid 1px #b3d7f9;
-    border-radius: 3px;
-    margin: 15px 2px;
-    color: #62abf0;
-}
-a.page:hover {
-    color: #d00000;
-}
-a.page.active {
-    font-weight: normal;
-    color: #022b52;
-}
-/* --- paysystem --- */
+Содержимое файла скопируйте из /usr/local/nodeny/web/tmpl/login_base.html  и измените, например, бекграунд:
-.user__ps__main_block {
+{|
-    border-radius: 7px;
+|-
-    padding: 15px 50px;
+|<pre>
-}
+.login_main {
-.user__ps__main_block .title_block {
+     padding: 40pt 15pt;
-    text-align: center;
-    padding: 30px 0;
-    font-size: 146%;
-    border-bottom: solid 1px #eeeeee;
-}
-.user__ps__main_block .title_block td {
-    padding: 10px;
-}
-.user__ps__main_block .text_input_block {
-    margin-top: 50px;
-    font-size: 146%;
-    text-align: center;
-}
-.user__ps__main_block .amount_input {
-    text-align: right;
-    width: 80pt;
-}
-.user__ps__main_block .submit_block {
-}
-.user__ps__main_block .info_block {
-    text-align: center;
-    font-size: 146%;
-    margin: 50px 0;
-}
-.user__ps__main_block .info_block .amount {
-    font-weight: bold;
-    font-size: 120%;
-    color: #4caf50;
-}
-.user__ps__main_block input[type=submit] {
-    text-decoration: none;
-    text-shadow: 0 1px 1px #ffffff;
-    color: #4381bb;
-    border-top: solid 2px #d0d0d0;
-    border-left: solid 2px #d0d0d0;
-    border-right: solid 2px #909090;
-    border-bottom: solid 2px #909090;
-    border-radius: 8px;
-    margin-right: 1px;
-    padding: 9px 20px;
-    font-size: 20px;
-    background-image: -moz-linear-gradient(bottom, #d0d5e0 0%, #ffffff 100%);
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(208,213,224)), color-stop(1, rgb(255,255,255)));
-}
-.user__ps__main_block .submit_block {
-    margin: 30px auto 15px auto;
-    text-align: center;
-}
-.user__ps__main_block input[type=text] {
-    color: #660000;
-    font-size: 18px;
-     padding: 3px;
-    border: 1px solid #c2d9f1;
      background-color: #ffffff;
+    color: #000000;
 }
-.user__ps__main_block .result_info_block {
+</pre>
-     text-align: left;
+|→
+|<pre>
+.login_main {
+     padding: 40pt 15pt;
+    background-color: #e0e0e0;
+    color: #000000;
 }
 </pre>
+|}
-<h1>Изменение base-шаблона для логина</h1>
-В документах создайте файл «Шаблон для логина» с тегом system  и template=base_login. Содержимое файла скопируйте из /usr/local/nodeny/web/tmpl/base.html  и измените под свои нужды

Дизайн личного кабинета: відмінності між версіями

Поточна версія на 17:35, 25 березня 2023

Личный кабинет

Дизайн страницы логина

Навігаційне меню