Hide export buttons in fullscreen mode

magicsunday · Oct 24, 2024 · f2cb74d · f2cb74d
1 parent 000867a
commit f2cb74d
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 28 deletions.
diff --git a/resources/css/pedigree-chart.css b/resources/css/pedigree-chart.css
@@ -16,7 +16,7 @@
     padding: 0;
 }
 
-.webtrees-pedigree-fullscreen-container .chart-button {
+.webtrees-pedigree-fullscreen-container .btn-chart {
     color: var(--bs-btn-bg);
     background: rgb(245, 245, 245);
     border: 1px solid rgb(210, 210, 210);
@@ -36,34 +36,42 @@
     background: rgb(245, 245, 245);
 }
 
-.webtrees-pedigree-fullscreen-container .chart-button:hover {
+.webtrees-pedigree-fullscreen-container .btn-chart:hover {
     color: var(--link-color-hover);
 }
 
-.webtrees-pedigree-fullscreen-container .chart-button .icon {
+.webtrees-pedigree-fullscreen-container .btn-chart .icon {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
-.webtrees-pedigree-fullscreen-container .chart-button .icon .svg-inline--fa {
+.webtrees-pedigree-fullscreen-container .btn-chart .icon .svg-inline--fa {
     height: 1.5em;
     vertical-align: -0.375em;
 }
 
-.webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(2) {
+.webtrees-pedigree-fullscreen-container .btn-fullscreen span:nth-child(2) {
     display: none;
 }
 
-[fullscreen] .webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(1) {
+[fullscreen] .webtrees-pedigree-fullscreen-container .btn-fullscreen span:nth-child(1) {
     display: none;
 }
 
-[fullscreen] .webtrees-pedigree-fullscreen-container .fullscreen-button span:nth-child(2) {
+[fullscreen] .webtrees-pedigree-fullscreen-container .btn-fullscreen span:nth-child(2) {
     display: inline-block;
 }
 
+[fullscreen] .webtrees-pedigree-fullscreen-container #exportPNG {
+    display: none;
+}
+
+[fullscreen] .webtrees-pedigree-fullscreen-container #exportSVG {
+    display: none;
+}
+
 /* Form */
 .form-element-description {
     -webkit-box-decoration-break: clone;

diff --git a/resources/views/modules/components/buttonbar.phtml b/resources/views/modules/components/buttonbar.phtml
@@ -16,22 +16,12 @@ declare(strict_types=1);
 
 <div class="btn-toolbar justify-content-end">
     <div class="btn-group">
-        <div class="me-2">
-            <?= view($moduleName . '::modules/components/buttonbar/fullscreen-button') ?>
-        </div>
-        <div class="me-3">
-            <?= view($moduleName . '::modules/components/buttonbar/center-button') ?>
-        </div>
-        <div class="me-2">
-            <?= view($moduleName . '::modules/components/buttonbar/png-export-button') ?>
-        </div>
-        <div>
-            <?= view($moduleName . '::modules/components/buttonbar/svg-export-button') ?>
-        </div>
+        <?= view($moduleName . '::modules/components/buttonbar/fullscreen-button') ?>
+        <?= view($moduleName . '::modules/components/buttonbar/center-button') ?>
+        <?= view($moduleName . '::modules/components/buttonbar/png-export-button') ?>
+        <?= view($moduleName . '::modules/components/buttonbar/svg-export-button') ?>
 <?php /*
-        <div>
-            <?= view($moduleName . '::modules/components/buttonbar/help-button') ?>
-        </div>
+        <?= view($moduleName . '::modules/components/buttonbar/help-button') ?>
  */ ?>
     </div>
 </div>
@@ -41,7 +31,7 @@ declare(strict_types=1);
 // Hide fullscreen button if fullscreen mode is not available (e.g., iPhone)
 if (!document.fullscreenEnabled) {
     document
-        .querySelector(".webtrees-pedigree-fullscreen-container .fullscreen-button")
+        .querySelector(".webtrees-pedigree-fullscreen-container .btn-fullscreen")
         .style
         .display = 'none';
 }

diff --git a/resources/views/modules/components/buttonbar/center-button.phtml b/resources/views/modules/components/buttonbar/center-button.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 ?>
 
-<button class="btn-primary chart-button"
+<button class="btn-primary btn-chart"
         id="centerButton"
         title="<?= I18N::translate('Re center') ?>"
 >

diff --git a/resources/views/modules/components/buttonbar/fullscreen-button.phtml b/resources/views/modules/components/buttonbar/fullscreen-button.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 ?>
 
-<button class="btn-primary chart-button fullscreen-button"
+<button class="btn-primary btn-chart btn-fullscreen me-2"
         data-wt-fullscreen=".webtrees-pedigree-fullscreen-container"
         title="<?= I18N::translate('Switch between full screen mode and normal view') ?>"
 >

diff --git a/resources/views/modules/components/buttonbar/help-button.phtml b/resources/views/modules/components/buttonbar/help-button.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 ?>
 
-<button class="btn-primary chart-button"
+<button class="btn-primary btn-chart"
         title="<?= I18N::translate('Show help') ?>"
 >
         <span class="icon">

diff --git a/resources/views/modules/components/buttonbar/png-export-button.phtml b/resources/views/modules/components/buttonbar/png-export-button.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 ?>
 
-<button class="btn-primary chart-button"
+<button class="btn-primary btn-chart ms-3 me-2"
         id="exportPNG"
         title="<?= I18N::translate('Export as PNG') ?>"
 >

diff --git a/resources/views/modules/components/buttonbar/svg-export-button.phtml b/resources/views/modules/components/buttonbar/svg-export-button.phtml
@@ -13,7 +13,7 @@ use Fisharebest\Webtrees\I18N;
 
 ?>
 
-<button class="btn-primary chart-button"
+<button class="btn-primary btn-chart"
         id="exportSVG"
         title="<?= I18N::translate('Export as SVG') ?>"
 >