Автодок: таблица, мобильный дизайн

src/Autodoc/AutodocHtml.Mod

@@ -92,17 +92,29 @@ END WriteStyle;
 
 PROCEDURE OpenGroup(title: ARRAY OF CHAR; ordinalConsts: BOOLEAN);
 BEGIN
-  Write('<article class="group');
-  IF ordinalConsts THEN Write(' ordinal') END;
-  WriteLn('">');
+  WriteLn('<article class="group">');
   Write('<h3 class="group-title">');
   IF title # '-' THEN Write(title) END;
   WriteLn('</h3>');
-  WriteLn('<div class="group-content">');
+  IF ordinalConsts THEN
+    WriteLn('<div class="ordinal-consts">');
+    WriteLn('<table>');
+    WriteLn('<thead><tr>');
+    WriteLn('<th class="name">Name</th>');
+    WriteLn('<th class="value">Value</th>');
+    WriteLn('<th class="desc">Description</th>');
+    WriteLn('</tr></thead><tbody>');
+  ELSE
+    WriteLn('<div class="group-content">')
+  END
 END OpenGroup;
 
-PROCEDURE CloseGroup;
-BEGIN WriteLn('</div>'); WriteLn('</article>')
+PROCEDURE CloseGroup(ordinalConsts: BOOLEAN);
+BEGIN
+  IF ordinalConsts THEN WriteLn('</tbody></table></div>')
+  ELSE WriteLn('</div>')
+  END;
+  WriteLn('</article>')
 END CloseGroup;
 
 PROCEDURE PrintIndent(n: INTEGER);
@@ -119,9 +131,9 @@ END PrintComment;
 
 PROCEDURE PrintOrdinalConst(C: P.Const);
 BEGIN
-  WriteLn3('<div class="name">', C.name, '</div>');
-  Write('<div class="value">'); WriteExpr(C.value); WriteLn('</div>');
-  PrintComment(C, FALSE); WriteLn('')
+  WriteLn3('<tr><td class="name">', C.name, '</td><td class="value">');
+  WriteExpr(C.value); WriteLn('</td><td class="desc">');
+  PrintComment(C, FALSE); WriteLn('</td></tr>')
 END PrintOrdinalConst;
 
 PROCEDURE PrintConst(C: P.Const; indent: INTEGER; inlined: BOOLEAN);
@@ -149,7 +161,7 @@ BEGIN
       END;
       o := o.next
     END;
-    IF L.comment[0] # 0X THEN CloseGroup END
+    IF L.comment[0] # 0X THEN CloseGroup(ordinalConsts) END
   END
 END PrintList;
 

src/Autodoc/Test/Apples.Mod

@@ -39,12 +39,26 @@ CONST
   startApples =  0;
 
   maxApples*  =  5; (** Maximum amount of apples*)
-  maxSeeds*   = 10; (** Currently not in use *)
+  maxSeeds*   = 3; (** Currently not in use *)
 
   (** Качество яблока **)
   good*    = 1; (** Сносное качество *)
   unknown* = 0; (** Неизвестное качество *)
   bad*     = 2; (** Отвратное качество *)
+  
+  (** Литерные коды **)
+  (** Компьютер *)
+  computer*  = 'c';
+  (**Человек*)
+  human*     = 'H';
+  (**    Игрок    *)
+  player*    = 'i'; (** во что-то *)
+  rusLetter* = 'а'; (** Буква русская, а, маленькая! *)
+  engLetter* = 'a';
+  (** Игра       просто игра *)
+  game*      = 'I';
+  tableRow1* = '1';
+  tableRow2* = '2';
 
 TYPE
 

src/Autodoc/Test/style.css

@@ -69,35 +69,70 @@ h2, h3, h4, h5, h6 {
   color: #FFF;
   margin: 20px -20px 15px;
   width: max-content;
-  min-width: calc(min(240px, 100%));
+  min-width: calc(min(250px, 100%));
   box-sizing: border-box;
-  padding: 7px 60px 6px 40px;
+  padding: 6px 60px 6px 40px;
   text-transform: uppercase;
   font-size: 16px;
+  box-shadow: 6px 6px 0 rgba(0, 0, 100, 0.2);
 }
 
 .group-title {
   padding: 0 2px;
-  margin: 10px 0;
+  margin: 18px 0 8px;
 }
 
-.group.ordinal .group-content {
-  display: grid;
-  grid-template-columns: auto auto 1fr;
+.ordinal-consts {
+  overflow-x: auto;
+  border: 1px solid #808080;
+  box-shadow: 0 1px 3px rgba(255, 0, 0, 0.1);
+}
+
+.ordinal-consts table {
+  background: #FFF;
+  min-width: 450px;
+  width: 100%;
+}
+
+.ordinal-consts th,
+.ordinal-consts td {
+  background: #FFBF44;
+  border: 1px solid #F8BA42;
+  padding: 2px 5px;
+  vertical-align: top;
+}
+
+.ordinal-consts th {
+  text-align: left;
+  font-weight: normal;
+  background: #B91E0C;
+  border-color: #B91E0C;
+  color: #FFF;
+}
+
+.ordinal-consts .name {
+  width: 140px;
 }
 
-.group.ordinal .name {
-  min-width: 130px;
-  padding: 0 1em 0 0;
+.ordinal-consts td.name {
+  color: #B91E0C;
 }
 
-.group.ordinal .value {
-  min-width: 30px;
-  padding: 0 1em 0 0;
+.ordinal-consts .value {
+  width: 60px;
 }
 
-.group.ordinal .comment {
-  min-width: 30px;
+.ordinal-consts td.desc {
+  background: transparent;
+  border-color: transparent;
+  border-bottom-color: #E0E0E0;
+}
+
+.ordinal-consts tr:last-child td.desc {
+  border-color: transparent;
+}
+
+.ordinal-consts .desc .comment {
   padding: 0;
 }
 
@@ -106,7 +141,7 @@ h2, h3, h4, h5, h6 {
   border: 1px solid #808080;
   padding: 2px;
   margin: 6px 0;
-  box-shadow: 0 1px 3px rgba(1, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(255, 0, 0, 0.1);
 }
 
 .object .def {
@@ -160,3 +195,7 @@ h2, h3, h4, h5, h6 {
 
 .record-field .comment p {
 }
+
+@media screen and (max-width: 500px) {
+
+}