[Libreoffice-commits] dev-tools.git: help3/xhpeditor
Olivier Hallot (via logerrit)
logerrit at kemper.freedesktop.org
Wed Jan 22 17:05:14 UTC 2020
help3/xhpeditor/DisplayArea.css | 2
help3/xhpeditor/index.php | 18 ++----
help3/xhpeditor/xhpeditor.css | 104 ++++++++++++++++++++++------------------
3 files changed, 66 insertions(+), 58 deletions(-)
New commits:
commit 5948cfc8876a13354e446cf8589da961fb06282a
Author: Olivier Hallot <olivier.hallot at libreoffice.org>
AuthorDate: Wed Jan 22 14:01:11 2020 -0300
Commit: Olivier Hallot <olivier.hallot at libreoffice.org>
CommitDate: Wed Jan 22 18:04:56 2020 +0100
xhpeditor: rework CSS grid (WIP)
Change-Id: I9656a051b0fbbdcfbdcf70266cce476533da2e94
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/87205
Reviewed-by: Olivier Hallot <olivier.hallot at libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot at libreoffice.org>
diff --git a/help3/xhpeditor/DisplayArea.css b/help3/xhpeditor/DisplayArea.css
index 73dcf06..a763e5f 100644
--- a/help3/xhpeditor/DisplayArea.css
+++ b/help3/xhpeditor/DisplayArea.css
@@ -13,10 +13,8 @@
background-color: white;
overflow: auto;
padding: 10px;
- grid-area: main;
}
-#renderedpage,
#DisplayArea p,
#DisplayArea h1,
#DisplayArea h2,
diff --git a/help3/xhpeditor/index.php b/help3/xhpeditor/index.php
index 8f57ce6..3f9e3aa 100644
--- a/help3/xhpeditor/index.php
+++ b/help3/xhpeditor/index.php
@@ -51,22 +51,19 @@ $xhp = $_POST["xhpdoc"];
</head>
<body style="font-family:sans-serif;">
-<div id="leftside">
- <div id="editorpageheader">
+ <div class="editorpageheader">
<h2>LibreOffice Documentation XHP Editor</h2>
<?php include './menu.php';?>
</div>
- <div id="editortextarea">
+ <div class="editortextarea">
<form id="CMtextarea" method="post" action="index.php">
<textarea id="xhpeditor" name="xhpdoc" form="CMtextarea"><?php echo htmlspecialchars($xhp,ENT_NOQUOTES);?></textarea>
</form>
</div>
-</div>
-<div id="rightside">
<?php
$xhp = $_POST["xhpdoc"];
if (isset($_POST["render_page"])) {
- echo '<div id="renderedpageheader"><h2>Rendered page</h2><div class="buttonrow"><div class="systembuttons"><p>System: ';
+ echo '<div class="renderedpageheader"><h2>Rendered page</h2><div class="buttonrow"><div class="systembuttons"><p>System: ';
$opSys = array("MAC", "WIN", "UNIX");
foreach ($opSys as $value) {
echo '<input type="radio" name="sys" onclick="setSystemSpan(\''.$value.'\')">'.$value.' ';
@@ -76,7 +73,7 @@ $xhp = $_POST["xhpdoc"];
foreach ($appModule as $value){
echo '<input type="radio" name="app" onclick="setApplSpan(\''.$value.'\')">'.$value.' ';
}
- echo '</p></div></div></div><div id="renderedpage">';
+ echo '</p></div></div></div><div class="renderedpage">';
$xml = new DOMDocument();
$xml->loadXML($xhp);
$xsl = new DOMDocument;
@@ -94,8 +91,8 @@ $xhp = $_POST["xhpdoc"];
$root = 'helpdocument';
$old = new DOMDocument;
- echo '<h2>Help File Verification</h2>';
- echo '<h3>Check XML Formation</h3>';
+ echo '<div class="renderedpageheader"><h2>Help File Verification</h2></div>';
+ echo '<div class="renderedpage"><h3>Check XML Formation</h3>';
if ( !$old->loadXML($xhp) ) {
$errors = libxml_get_errors();
echo '<p class="bug">The XML is malformed!</p>';
@@ -142,7 +139,7 @@ $xhp = $_POST["xhpdoc"];
echo "<p>$dup</p>";
}
}else{
- echo "<p>No duplicate id= found.</p>";
+ echo "<p>No duplicate id= found.</p></div>";
}
}
}elseif (isset($_POST["get_patch"])) {
@@ -151,6 +148,5 @@ $xhp = $_POST["xhpdoc"];
echo '<h2>Viewing Area</h2>';
}
?>
-</div>
</body>
</html>
diff --git a/help3/xhpeditor/xhpeditor.css b/help3/xhpeditor/xhpeditor.css
index b5ba09f..c1230e7 100644
--- a/help3/xhpeditor/xhpeditor.css
+++ b/help3/xhpeditor/xhpeditor.css
@@ -9,6 +9,10 @@
/* css for the main editor web page */
+
+
+
+
.form_area{
border:1px solid grey;
height: auto;
@@ -89,40 +93,22 @@
display: block;
}
-#leftside{
- top: 0px;
- bottom:0px;
- left:0px;
- right:50%;
- position: absolute;
- background: Beige;
- border:1px solid grey;
-}
-#editorpageheader{
- top: 0px;
- left: 0px;
- right: 0px;
- position:absolute;
- margin: 0px 5px 5px 5px;
+.editorpageheader{
+ grid-area: editorpageheader;
+ position: sticky;
+ top:0px;
+ padding: 3px;
+ margin: 0px;
z-index:100;
+ background: Beige;
+ border: 1px solid gray;
}
-#editortextarea{
- margin: 5px 5px 5px 5px;
- left:0px;
- right: 0px;
- bottom:0px;
- top:170px;
- position:absolute;
-}
-#rightside{
- top: 0px;
- bottom:0px;
- right:0px;
- left: 50%;
- position:absolute;
- background: AliceBlue;
- border:1px solid grey;
- overflow:hidden;
+.editortextarea{
+ grid-area: editortextarea;
+ padding: 3px;
+ margin: 0px;
+ background: Beige;
+ border: 1px solid gray;
}
.systembuttons{
float:left;
@@ -130,20 +116,48 @@
.applbuttons{
float:right;
}
-#renderedpageheader{
- top: 0px;
- right:0px;
- left: 0px;
- position:absolute;
- margin: 5px 5px 5px 5px;
+.renderedpageheader{
+ grid-area:renderedpageheader;
+ position: sticky;
+ top:0px;
+ padding: 3px;
+ margin: 0px;
background: AliceBlue;
+ border:1px solid grey;
}
-#renderedpage {
- margin: 5px 5px 5px 5px;
- right:0px;
- left: 0px;
- top:120px;
- bottom:0px;
- position:absolute;
+.renderedpage {
+ grid-area:renderedpage;
+ padding: 3px;
+ margin: 0px;
overflow-y:auto;
+ background: AliceBlue;
+ border:1px solid grey;
+}
+
+/* Use @supports to sneak these rules past IE */
+ at supports (grid-area: auto) {
+ @media screen and (min-width: 960px) {
+ body {
+ display: grid;
+ grid-template-columns: 50vw;
+ grid-template-rows: minmax(10vh, auto) 90vh minmax(10vh, auto) 90vh;
+ grid-template-areas: "editorpageheader"
+ "editortextarea"
+ "renderedpageheader"
+ "renderedpage";
+ }
+ }
+ @media screen and (min-width: 1440px) {
+ body {
+ overflow:hidden;
+ display: grid;
+ grid-template-columns: 50vw 50vw;
+ grid-template-rows: minmax(10vh, auto) minmax(auto, 90vh);
+ grid-template-areas: "editorpageheader renderedpageheader"
+ "editortextarea renderedpage"
+ }
+ }
}
+
+
+
More information about the Libreoffice-commits
mailing list