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 <[email protected]> AuthorDate: Wed Jan 22 14:01:11 2020 -0300 Commit: Olivier Hallot <[email protected]> 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 <[email protected]> Tested-by: Olivier Hallot <[email protected]> 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 */ +@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" + } + } } + + + _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
