ScadaDoc: update for iOS

2mik · 2mik · commit e8caef6d6f16 · 2017-01-21T10:50:36.000+03:00
diff --git a/ScadaDoc/ScadaDoc/ScadaDoc.csproj b/ScadaDoc/ScadaDoc/ScadaDoc.csproj
@@ -197,11 +197,11 @@
     <Content Include="content\ru\software-overview\applications\webstation-application.html" />
     <Content Include="content\ru\use-cases\modbus-protocol.html" />
     <Content Include="content\ru\version-history\scada-history.html" />
-    <Content Include="css\index.css">
-      <DependentUpon>index.less</DependentUpon>
+    <Content Include="css\cover.css">
+      <DependentUpon>cover.less</DependentUpon>
     </Content>
-    <Content Include="css\index.min.css">
-      <DependentUpon>index.css</DependentUpon>
+    <Content Include="css\cover.min.css">
+      <DependentUpon>cover.css</DependentUpon>
     </Content>
     <Content Include="css\scadadoc.css">
       <DependentUpon>scadadoc.less</DependentUpon>
@@ -231,7 +231,7 @@
     <Content Include="css\common.less" />
     <Content Include="css\contents.less" />
     <Content Include="css\search.less" />
-    <Content Include="css\index.less" />
+    <Content Include="css\cover.less" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>
diff --git a/ScadaDoc/ScadaDoc/compilerconfig.json b/ScadaDoc/ScadaDoc/compilerconfig.json
@@ -4,7 +4,7 @@
     "inputFile": "css/scadadoc.less"
   },
   {
-    "outputFile": "css/index.css",
-    "inputFile": "css/index.less"
+    "outputFile": "css/cover.css",
+    "inputFile": "css/cover.less"
   }
 ]
diff --git a/ScadaDoc/ScadaDoc/content/en/index.html b/ScadaDoc/ScadaDoc/content/en/index.html
@@ -4,7 +4,7 @@
     <title>Rapid SCADA Documentation</title>
 	<meta charset="utf-8" />
     <link href="../../css/scadadoc.min.css" rel="stylesheet" type="text/css" />
-    <link href="../../css/index.min.css" rel="stylesheet" type="text/css" />
+    <link href="../../css/cover.min.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="../../js/jquery.min.js"></script>
     <script type="text/javascript" src="../../js/scadadoc.js"></script>
 </head>
diff --git a/ScadaDoc/ScadaDoc/content/ru/index.html b/ScadaDoc/ScadaDoc/content/ru/index.html
@@ -4,7 +4,7 @@
     <title>Документация Rapid SCADA</title>
 	<meta charset="utf-8" />
     <link href="../../css/scadadoc.min.css" rel="stylesheet" type="text/css" />
-    <link href="../../css/index.min.css" rel="stylesheet" type="text/css" />
+    <link href="../../css/cover.min.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="../../js/jquery.min.js"></script>
     <script type="text/javascript" src="../../js/scadadoc.js"></script>
 </head>
diff --git a/ScadaDoc/ScadaDoc/css/article.less b/ScadaDoc/ScadaDoc/css/article.less
@@ -1,8 +1,13 @@
-﻿.sd-article {
+﻿.sd-article-wrapper {
     display: inline-block;
     margin: 0;
-    padding: 0 20px;
     overflow: auto;
+    padding: 0;
+}
+
+.sd-article {
+    margin: 0;
+    padding: 0 20px;
 }
 
 .sd-article-meta {
diff --git a/ScadaDoc/ScadaDoc/css/contents.less b/ScadaDoc/ScadaDoc/css/contents.less
@@ -1,14 +1,19 @@
-﻿.sd-contents {
+﻿.sd-contents-wrapper {
     border-right: 5px solid #ddd;
     display: inline-block;
-    font-size: 13px;
     margin: 0;
     min-width: 200px;
-    padding: 10px;
     overflow: auto;
+    padding: 0;
     width: 25%;
 }
 
+.sd-contents {
+    font-size: 13px;
+    margin: 0;
+    padding: 10px;
+}
+
 .sd-contents-item {
     margin: 7px 0;
 }
diff --git a/ScadaDoc/ScadaDoc/css/cover.css b/ScadaDoc/ScadaDoc/css/cover.css
@@ -9,4 +9,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
+}
+.sd-article {
+  height: 100%;
 }
diff --git a/ScadaDoc/ScadaDoc/css/cover.less b/ScadaDoc/ScadaDoc/css/cover.less
@@ -10,4 +10,8 @@
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
+}
+
+.sd-article {
+    height: 100%;
 }
diff --git a/ScadaDoc/ScadaDoc/css/cover.min.css b/ScadaDoc/ScadaDoc/css/cover.min.css
diff --git a/ScadaDoc/ScadaDoc/css/scadadoc.css b/ScadaDoc/ScadaDoc/css/scadadoc.css
@@ -44,16 +44,20 @@ a:hover {
   color: #0074a2;
   text-decoration: underline;
 }
-.sd-contents {
+.sd-contents-wrapper {
   border-right: 5px solid #ddd;
   display: inline-block;
-  font-size: 13px;
   margin: 0;
   min-width: 200px;
-  padding: 10px;
   overflow: auto;
+  padding: 0;
   width: 25%;
 }
+.sd-contents {
+  font-size: 13px;
+  margin: 0;
+  padding: 10px;
+}
 .sd-contents-item {
   margin: 7px 0;
 }
@@ -69,11 +73,15 @@ a:hover {
 .sd-contents-item.selected {
   font-weight: bold;
 }
-.sd-article {
+.sd-article-wrapper {
   display: inline-block;
   margin: 0;
-  padding: 0 20px;
   overflow: auto;
+  padding: 0;
+}
+.sd-article {
+  margin: 0;
+  padding: 0 20px;
 }
 .sd-article-meta {
   font-size: 12px;
diff --git a/ScadaDoc/ScadaDoc/css/scadadoc.min.css b/ScadaDoc/ScadaDoc/css/scadadoc.min.css
diff --git a/ScadaDoc/ScadaDoc/index.html b/ScadaDoc/ScadaDoc/index.html
@@ -4,7 +4,7 @@
     <title>Rapid SCADA Documentation</title>
 	<meta charset="utf-8" />
     <link href="css/scadadoc.min.css" rel="stylesheet" type="text/css" />
-    <link href="css/index.min.css" rel="stylesheet" type="text/css" />
+    <link href="css/cover.min.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/scadadoc.js"></script>
 </head>
diff --git a/ScadaDoc/ScadaDoc/js/scadadoc.js b/ScadaDoc/ScadaDoc/js/scadadoc.js
@@ -4,7 +4,8 @@ function createLayout() {
     var articleElems = $("body").children();
     articleElems.detach();
 
-    var layoutElem = $("<div class='sd-contents'></div><div class='sd-article'></div>");
+    var layoutElem = $("<div class='sd-contents-wrapper'><div class='sd-contents'></div></div>" +
+        "<div class='sd-article-wrapper'><div class='sd-article'></div></div>");
     $("body").append(layoutElem);
     $("body").css("overflow", "hidden");
 
@@ -16,17 +17,20 @@ function createLayout() {
     createSearch();
     createContents();
     createCounter();
+
+    styleIOS($("div.sd-contents-wrapper"));
+    styleIOS($("div.sd-article-wrapper"));
 }
 
 function updateLayout() {
-    var divContents = $("div.sd-contents");
-    var divArticle = $("div.sd-article");
+    var divContentsWrapper = $("div.sd-contents-wrapper");
+    var divArticleWrapper = $("div.sd-article-wrapper");
 
     var winH = $(window).height();
-    var contW = divContents[0].getBoundingClientRect().width; // fractional value is required
-    divContents.outerHeight(winH);
-    divArticle.outerHeight(winH);
-    divArticle.outerWidth($(window).width() - contW);
+    var contW = divContentsWrapper[0].getBoundingClientRect().width; // fractional value is required
+    divContentsWrapper.outerHeight(winH);
+    divArticleWrapper.outerHeight(winH);
+    divArticleWrapper.outerWidth($(window).width() - contW);
 }
 
 function createSearch() {
@@ -136,6 +140,19 @@ function copyContentsToArticle() {
     }
 }
 
+function iOS() {
+    return /iPad|iPhone|iPod/.test(navigator.platform);
+}
+
+function styleIOS(jqElem) {
+    if (iOS()) {
+        jqElem.css({
+            "overflow": "scroll",
+            "-webkit-overflow-scrolling": "touch"
+        });
+    }
+}
+
 $(document).ready(function () {
     if ($("body").hasClass("home")) {
         // add counter only to home page

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`"inputFile": "css/scadadoc.less"`
`5`	`5`	`},`
`6`	`6`	`{`
`7`		`- "outputFile": "css/index.css",`
`8`		`- "inputFile": "css/index.less"`
	`7`	`+ "outputFile": "css/cover.css",`
	`8`	`+ "inputFile": "css/cover.less"`
`9`	`9`	`}`
`10`	`10`	`]`
Original file line number	Diff line number	Diff line change
`@@ -9,4 +9,7 @@`
`9`	`9`	`left: 50%;`
`10`	`10`	`transform: translate(-50%, -50%);`
`11`	`11`	`text-align: center;`
	`12`	`+}`
	`13`	`+.sd-article {`
	`14`	`+ height: 100%;`
`12`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,8 @@`
`10`	`10`	`left: 50%;`
`11`	`11`	`transform: translate(-50%, -50%);`
`12`	`12`	`text-align: center;`
	`13`	`+}`
	`14`	`+`
	`15`	`+.sd-article {`
	`16`	`+ height: 100%;`
`13`	`17`	`}`