Незначительные доработки стилей

diff --git a/data/web/script.js b/data/web/script.js
index d88192661ed47f008ba972311b68bd59a3d2b9db..c40f7e1d010716da669c095e26581754d15f68ac 100644 (file)
--- a/data/web/script.js
+++ b/data/web/script.js
@@ -236,7 +236,7 @@ function ElementHTML(element) {
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="password" type="password" id="_ui_element_' + element.id + '" value="' + encode(value) 
         + '" class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />'
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="password" type="password" id="_ui_element_' + element.id + '" value="' + encode(value) 
         + '" class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />'

-        + '<div class="hint" onclick="ShowPwd(\'' + element.id + '\')">&#x1F441;</div></div>'
+        + '<div class="hint" onclick="ShowPwd(\'' + element.id + '\')">&#61550;</div></div>'

     case 'input':
       var pattern = ""
       if (element.pattern) {
     case 'input':
       var pattern = ""
       if (element.pattern) {


@@ -253,7 +253,7 @@ function ElementHTML(element) {
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="input" type="text" id="_ui_element_' + element.id + '" value="' + encode(value) +'"'+ pattern
         + ' class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />' 
       return '<div class="pure-u-1 pure-u-md-1-3"><label for="_ui_element_' + element.id + '">' + encode(element.label) + '</label>'
         + '<input data-ui_class="input" type="text" id="_ui_element_' + element.id + '" value="' + encode(value) +'"'+ pattern
         + ' class="pure-u-1" style="display:inline-block" maxlength="99" oninput="sendUpdate(\'' + element.id + '\')" />' 

-        + '<div class="hint" onclick="OpenSelect(\'' + element.id+ '\'); getWiFi(\'' + element.id + '\')">&#128246;</div>'
+        + '<div class="hint" onclick="OpenSelect(\'' + element.id+ '\'); getWiFi(\'' + element.id + '\')">&#61931;</div>'

         + '<div class="modal" id="_ui_elemmodal_' + element.id + '" hidden>' 
         + '<div class="modal-content">'
         + '<div id="_ui_elemselect_' + element.id + '"></div>'
         + '<div class="modal" id="_ui_elemmodal_' + element.id + '" hidden>' 
         + '<div class="modal-content">'
         + '<div id="_ui_elemselect_' + element.id + '"></div>'


@@ -336,6 +336,7 @@ function DrawNavigator(project, pages) {
   for (const page of pages) {
     list = list + '<li id="_ui_pglink_' + page.id 
       + '" class="pure-menu-item"><a class="pure-menu-link" onclick="DrawPage(\''+ page.id +'\')" href="#' + page.id + '">'
   for (const page of pages) {
     list = list + '<li id="_ui_pglink_' + page.id 
       + '" class="pure-menu-item"><a class="pure-menu-link" onclick="DrawPage(\''+ page.id +'\')" href="#' + page.id + '">'

+      + (page.icon?'<span class="icon">'+page.icon+'</span>':'')

       + page.title+'</a></li>'
   }
   menu.innerHTML = list
       + page.title+'</a></li>'
   }
   menu.innerHTML = list


@@ -344,20 +345,23 @@ function DrawNavigator(project, pages) {
 function DrawContacts(contacts) {
   if (!contacts) return;
   var contact_list = '<hr><h4 class="pure-u1">Контакты</h4>'
 function DrawContacts(contacts) {
   if (!contacts) return;
   var contact_list = '<hr><h4 class="pure-u1">Контакты</h4>'

-  for (const contact of contacts) {
+  for (contact of contacts) {

     const url = new URL(contact)
     var ref
     const url = new URL(contact)
     var ref

-    console.log(url)

     switch (url.protocol) {
       case 'http':
       case 'https:':
     switch (url.protocol) {
       case 'http':
       case 'https:':

-        ref = '&#8962; '+url.hostname
+        ref = '<span class="icon">&#61461;</span>'+url.hostname

         break
       case 'mailto:':
         break
       case 'mailto:':

-        ref = '&#9993; '+url.pathname
+        ref = '<span class="icon">&#61664;</span>'+url.pathname
+        break
+      case 'tg:':
+        ref = '<span class="icon">&#62150;</span>'+url.pathname
+        contact = 'tg://resolve?domain='+url.pathname

         break
       default:
         break
       default:

-        ref = '&#128389; '+url.pathname
+        ref = '<span class="icon">&#62074;</span>'+url.pathname

     }
     contact_list += '<a href="'+contact+'">'+ref+'</a>'
   }
     }
     contact_list += '<a href="'+contact+'">'+ref+'</a>'
   }

diff --git a/data/web/style.css b/data/web/style.css
index 1f818dbe2006b6312c1e163b3eb012e5c908655a..3bb931cf2389e77fc642c4cd3d7e370bfb9f66d1 100644 (file)
--- a/data/web/style.css
+++ b/data/web/style.css
@@ -1,3 +1,5 @@
+/* pure-min  */
+

 .pure-button:focus,
 a:active,
 a:hover {
 .pure-button:focus,
 a:active,
 a:hover {


@@ -460,7 +462,7 @@ legend {
 .pure-button-selected,
 a.pure-button-primary,
 a.pure-button-selected {
 .pure-button-selected,
 a.pure-button-primary,
 a.pure-button-selected {

- background-color:#0078e7;
+ background-color :#0078e7;

  color:#fff
 }
 .pure-button-group .pure-button {
  color:#fff
 }
 .pure-button-group .pure-button {


@@ -974,14 +976,19 @@ a.pure-button-selected {
 :root {
  --slide:250px
 }
 :root {
  --slide:250px
 }

+
+/* custom styles */
+

 body {
  color:#aaa;
 body {
  color:#aaa;

- background:#292929
+ background:#242424;

 }
 }

+

 .pure-img-responsive {
  max-width:100%;
  height:auto
 }
 .pure-img-responsive {
  max-width:100%;
  height:auto
 }

+

 #layout,
 #menu,
 .menu-link {
 #layout,
 #menu,
 .menu-link {


@@ -1016,11 +1023,11 @@ body {
  text-align:center
 }
 .header h1 {
  text-align:center
 }
 .header h1 {

- color:#2497e3;
+ color:dodgerblue;

  margin:.4em 0;
  margin:.4em 0;

- font-size:2em;
- font-weight:300;
- font-family:fantasy
+ font-size:2.4em;
+ font-weight: bold;
+ font-variant-caps: small-caps

 }
 .header h2 {
  font-weight:300;
 }
 .header h2 {
  font-weight:300;


@@ -1041,7 +1048,7 @@ body {
  left:0;
  bottom:0;
  z-index:1000;
  left:0;
  bottom:0;
  z-index:1000;

- background:#191818;
+ background:#181818;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }


@@ -1066,7 +1073,7 @@ body {
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {

- background:#1f8dd6
+ background:dodgerblue

 }
 #menu .pure-menu-selected a {
  color:#fff
 }
 #menu .pure-menu-selected a {
  color:#fff


@@ -1103,7 +1110,7 @@ body {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {

- background-color:#2497e3;
+ background-color:dodgerblue;

  width:100%;
  height:.2em
 }
  width:100%;
  height:.2em
 }


@@ -1159,7 +1166,7 @@ input[type=range]::-webkit-slider-runnable-track {
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;

- background:#2497E3;
+ background:dodgerblue;

  border-radius:3px;
  border:0 solid #000000
 }
  border-radius:3px;
  border:0 solid #000000
 }


@@ -1175,7 +1182,7 @@ input[type=range]::-webkit-slider-thumb {
  margin-top:-8.5px
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
  margin-top:-8.5px
 }
 input[type=range]:focus::-webkit-slider-runnable-track {

- background:#2497E3
+ background:dodgerblue

 }
 input[type=range]::-moz-range-track {
  width:100%;
 }
 input[type=range]::-moz-range-track {
  width:100%;


@@ -1183,17 +1190,17 @@ input[type=range]::-moz-range-track {
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;
  cursor:pointer;
  animate:0.2s;
  box-shadow:0 0 0px #000000;

- background:#2497E3;
+ background:dodgerblue;

  border-radius:3px;
  border:0 solid #000000
 }
 input[type=range]::-moz-range-thumb {
  box-shadow:0 0 0px #000000;
  border-radius:3px;
  border:0 solid #000000
 }
 input[type=range]::-moz-range-thumb {
  box-shadow:0 0 0px #000000;

- border:1px solid #2497E3;
+ border:1px solid dodgerblue;

  height:20px;
  width:20px;
  border-radius:30px;
  height:20px;
  width:20px;
  border-radius:30px;

- background:#A1D0FF;
+ background:lightskyblue;

  cursor:pointer
 }
 input[type=range]::-ms-track {
  cursor:pointer
 }
 input[type=range]::-ms-track {


@@ -1206,13 +1213,13 @@ input[type=range]::-ms-track {
  color:transparent
 }
 input[type=range]::-ms-fill-lower {
  color:transparent
 }
 input[type=range]::-ms-fill-lower {

- background:#2497E3;
+ background:dodgerblue;

  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000
 }
 input[type=range]::-ms-fill-upper {
  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000
 }
 input[type=range]::-ms-fill-upper {

- background:#2497E3;
+ background:dodgerblue;

  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000
  border:0 solid #000000;
  border-radius:6px;
  box-shadow:0 0 0px #000000


@@ -1220,22 +1227,25 @@ input[type=range]::-ms-fill-upper {
 input[type=range]::-ms-thumb {
  margin-top:1px;
  box-shadow:0 0 0px #000000;
 input[type=range]::-ms-thumb {
  margin-top:1px;
  box-shadow:0 0 0px #000000;

- border:1px solid #2497E3;
+ border:1px solid dodgerblue;

  height:20px;
  width:20px;
  border-radius:40px;
  height:20px;
  width:20px;
  border-radius:40px;

- background:#A1D0FF;
+ background:lightskyblue;

  cursor:pointer
 }
 input[type=range]:focus::-ms-fill-lower {
  cursor:pointer
 }
 input[type=range]:focus::-ms-fill-lower {

- background:#2497E3
+ background:dodgerblue

 }
 input[type=range]:focus::-ms-fill-upper {
 }
 input[type=range]:focus::-ms-fill-upper {

- background:#2497E3
+ background:dodgerblue

 }
 .hide {
  display:none
 }
 }
 .hide {
  display:none
 }

+
+/* footer */
+

 footer {
  text-align:center;
  position: absolute;
 footer {
  text-align:center;
  position: absolute;


@@ -1246,9 +1256,15 @@ footer a {
  display: inline-block;
  text-decoration: none
 }
  display: inline-block;
  text-decoration: none
 }

+
+/* notification button/message */
+

 .notification {
   float: right;
  }
 .notification {
   float: right;
  }

+
+/* modal dialog */ 
+ 

 .modal {
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */
 .modal {
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */


@@ -1266,9 +1282,9 @@ footer a {
   text-transform:uppercase;
   color:#aaa;
   font-size:90%;
   text-transform:uppercase;
   color:#aaa;
   font-size:90%;

-  border:2px solid #2497e3;
+  border:2px solid dodgerblue;

   border-radius:6px;
   border-radius:6px;

-  box-shadow:inset 0 1px 11px 0 #1f8dd6
+  box-shadow:inset 0 1px 11px 0 steelblue

   padding: 1rem;
   width: max-content;
   min-width: 30%;
   padding: 1rem;
   width: max-content;
   min-width: 30%;


@@ -1282,6 +1298,9 @@ footer a {
   text-align: center;
   border-bottom: lightgray solid 1px;
 }
   text-align: center;
   border-bottom: lightgray solid 1px;
 }

+
+/* overlapping hint button */
+

 .hint {
   cursor: pointer;
   width: 1rem;
 .hint {
   cursor: pointer;
   width: 1rem;


@@ -1291,10 +1310,13 @@ footer a {
   border: none;
   box-shadow: none;
   display: inline-block;
   border: none;
   box-shadow: none;
   display: inline-block;

-  vertical-align: super;
+  vertical-align: text-bottom;

   margin-left: -2rem;
   z-index:1;
 }
   margin-left: -2rem;
   z-index:1;
 }

+
+/* checkbox as a switch */
+

 input[type=checkbox].switch {
     display: none;
 }
 input[type=checkbox].switch {
     display: none;
 }


@@ -1314,14 +1336,14 @@ label.switch.socket span.switch.slider:before {
     border-radius: 5em;
     position: absolute;
     left: 0;
     border-radius: 5em;
     position: absolute;
     left: 0;

-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6
+    border:2px solid dodgerblue;
+    box-shadow:inset 0 1px 11px 0 steelblue

 }
 label.switch span.switch.slider:after {
     content: "";
     width: 1.5rem;
     height: 1.5rem;
 }
 label.switch span.switch.slider:after {
     content: "";
     width: 1.5rem;
     height: 1.5rem;

-    background: #2497e3;
+    background: dodgerblue;

     border-radius: 5.5ex;
     position: absolute;
     left: 0.4rem;
     border-radius: 5.5ex;
     position: absolute;
     left: 0.4rem;


@@ -1330,7 +1352,7 @@ label.switch span.switch.slider:after {
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {
     color: White;
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {
     color: White;

-    background: #0a3660;
+    background: darkslategray;

     content: "";
     background: D;
 }
     content: "";
     background: D;
 }


@@ -1338,23 +1360,48 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
     background: white;
     left: 2.4em;
 }
     background: white;
     left: 2.4em;
 }

+
+/* weekdays */
+

 .week {
     width: 100%;
 }
 .weekday, .weekday-selected {
 .week {
     width: 100%;
 }
 .weekday, .weekday-selected {

-    font-size: min(4vw, 1.5rem);
+    font-size: min(4vw, 100%rem);

     text-align: center;
     margin: 0.5vw;
     padding: 0.4em;
     border-radius: 5em;
     text-align: center;
     margin: 0.5vw;
     padding: 0.4em;
     border-radius: 5em;

-    border:2px solid #2497e3;
-    box-shadow:inset 0 1px 11px 0 #1f8dd6;
+    border:2px solid dodgerblue;
+    box-shadow:inset 0 1px 11px 0 steelblue;

     color: gray
 }
 .weekday-selected {
     color: gray
 }
 .weekday-selected {

-    background: #0a3660;
+    background: darkslategray;

     color: white
 }
     color: white
 }

+
+input[type=number] {
+  appearance: textfield;
+}
+
+/* fill all screen */
+

 #layout { 
   min-height: 100vh; 
 }
 #layout { 
   min-height: 100vh; 
 }

+
+/* fonts */
+
+@font-face {
+  font-family: "icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/icons.woff2") format("woff2");
+}
+.hint, .icon {
+  font-family: icons;
+}
+.icon {
+  margin-right: 0.5em;
+}

diff --git a/ui.yml b/ui.yml
index a07d6fc621d4c36c68896edfc1d50154024ba131..fecd2bcb8c33235ba13922f6cbad5a310615fa9f 100644 (file)
--- a/ui.yml
+++ b/ui.yml
@@ -8,7 +8,8 @@ project:
     - xmpp:rvb@rvb.name
 pages:
   - id: main
     - xmpp:rvb@rvb.name
 pages:
   - id: main

-    title: Главная
+    title: "Главная"
+    icon: ""

     elements:
       - type: table
         label: Имя устройства
     elements:
       - type: table
         label: Имя устройства


@@ -45,6 +46,7 @@ pages:
         label: Свободная память
   - id: clock
     title: Часы
         label: Свободная память
   - id: clock
     title: Часы

+    icon: ""

     elements:
       - type: text
         value: Внешний вид
     elements:
       - type: text
         value: Внешний вид


@@ -108,6 +110,7 @@ pages:
         step: 1
   - id: alarm
     title: Будильник
         step: 1
   - id: alarm
     title: Будильник

+    icon: ""

     elements:
       - type: text
         value: Будильник
     elements:
       - type: text
         value: Будильник


@@ -182,6 +185,7 @@ pages:
         max: 2000
   - id: hw
     title: Оборудование
         max: 2000
   - id: hw
     title: Оборудование

+    icon: ""

     elements:
       - type: text
         value: Часы реального времени
     elements:
       - type: text
         value: Часы реального времени


@@ -406,6 +410,7 @@ pages:
         max: 8
   - id: weather
     title: Погода
         max: 8
   - id: weather
     title: Погода

+    icon: ""

     elements:
       - id: weather_url
         label: URL погодного сервиса
     elements:
       - id: weather_url
         label: URL погодного сервиса


@@ -419,6 +424,7 @@ pages:
         min: 5
   - id: wifi
     title: WiFi
         min: 5
   - id: wifi
     title: WiFi

+    icon: ""

     elements:
       - type: text
         value: Клиент сети
     elements:
       - type: text
         value: Клиент сети


@@ -447,6 +453,7 @@ pages:
         label: Применить настройки WiFi
   - id: system
     title: Система
         label: Применить настройки WiFi
   - id: system
     title: Система

+    icon: ""

     elements:
       - type: text
         value: Авторизация
     elements:
       - type: text
         value: Авторизация