Merge pull request #2916 from McGiverGim/osd_preview_resizable

Make OSD screen bigger if possible

Author: haslinghuis

src/css/tabs/osd.css

@@ -253,6 +253,8 @@
 
 .tab-osd .preview .gui_box_titlebar {
   position: relative;
+  margin-bottom: 0px;
+  float: none;
 }
 
 .tab-osd .preview .gui_box_titlebar label {
@@ -276,10 +278,20 @@
   text-align: center;
 }
 
+.tab-osd .preview .row {
+  display: flex;
+}
+
 .tab-osd .preview .char {
-  display: inline-block;
+  display: flex;
   padding: 0;
   margin: 0;
+  flex: 1 1 auto;
+  flex-wrap: nowrap;
+}
+
+.tab-osd .preview .char img {
+  flex: 1 1 auto;
 }
 
 .tab-osd .char.mouseover {
@@ -302,10 +314,6 @@
   cursor: move;
 }
 
-.tab-osd .preview .row {
-  height: 18px;
-}
-
 #font-logo-preview-container {
   background:rgba(0, 255, 0, 0.4);
   margin-bottom: 10px;
@@ -476,25 +484,27 @@ button {
 }
 
 .tab-osd .preview {
-  width: 360px;
-  float: left;
   position: sticky;
   top: 0;
-  margin-left: calc((100% - 360px) / 3);
-
 
 /* please don't copy the generic background image from another project
  * and replace the one that @nathantsoi took :)
  */
   background: url(../../images/osd-bg-1.jpg);
   background-size: cover;
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
+  background-repeat: no-repeat;
 }
 
-.tab-osd .preview:active {
-  background: url(../../images/osd-bg-1-grid.png), url(../../images/osd-bg-1.jpg);
-  background-size: cover;
+.tab-osd .video-pal .preview:active {
+  background: url(../../images/osd-bg-1-grid-pal.png), url(../../images/osd-bg-1.jpg);
+  background-size: 100% 100%, cover;
+  background-repeat: no-repeat;
+}
+
+.tab-osd .video-ntsc .preview:active {
+  background: url(../../images/osd-bg-1-grid-ntsc.png), url(../../images/osd-bg-1.jpg);
+  background-size: 100% 100%, cover;
+  background-repeat: no-repeat;
 }
 
 .tab-osd .alarms label {
@@ -550,16 +560,31 @@ button {
   }
 }
 
-.tab-osd .grid-col.col4:first-child, .tab-osd  .grid-col.col4:last-child {
-    width: calc((100% - 390px) / 2);
+.tab-osd .grid-row {
+    justify-content: center;
+    gap: 7px;
 }
 
-.tab-osd .grid-row {
-    margin-bottom: 40px;
+.tab-osd .grid-row .elements {
+  flex: 1 1 auto;
+  width: 210px;
+  max-width: 700px;
+}
+
+.tab-osd .grid-row .osd-preview {
+  flex: 2 0 auto;
+  width: 350px;
+  max-width: max(min(950px,calc((100vh - 470px) * 1.25)), 350px);
+}
+
+.tab-osd .grid-row .osd-profile {
+  flex: 1 1 auto;
+  width: 210px;
+  max-width: 700px ;
 }
 
-.tab-osd .grid-col.col4 {
-    width: auto;
+.tab-osd .grid-col {
+  margin: 0px;
 }
 
 @media all and (max-width: 575px) {

src/images/osd-bg-1-grid-ntsc.png

@@ -1872,6 +1872,9 @@ OSD.updateDisplaySize = function() {
         y: OSD.constants.VIDEO_LINES[videoType],
         total: null,
     };
+    // Adjust css background grid
+    const previewLayoutElement = $(".tab-osd .display-layout");
+    videoType === 'PAL' ? previewLayoutElement.addClass('video-pal').removeClass('video-ntsc') : previewLayoutElement.addClass('video-ntsc').removeClass('video-pal');
 };
 
 OSD.drawByOrder = function(selectedPosition, field, charCode, x, y) {

src/images/osd-bg-1-grid.png src/images/osd-bg-1-grid-pal.pngsrc/images/osd-bg-1-grid.png renamed to src/images/osd-bg-1-grid-pal.png

@@ -18,7 +18,7 @@ <h1 class="tab_title">
                     <p class="note" i18n="osdSetupPreviewHelp"></p>
                 </div>
                 <div class="grid-row">
-                    <div class="grid-col col4 elements requires-osd-feature osd-feature">
+                    <div class="grid-col elements requires-osd-feature osd-feature">
                         <div class="gui_box grey">
                             <div class="gui_box_titlebar" style="margin-bottom: 0px;">
                                 <div class="spacer_box_title">
@@ -33,7 +33,7 @@ <h1 class="tab_title">
                             </div>
                         </div>
                     </div>
-                    <div class="grid-col col4 osd-preview">
+                    <div class="grid-col osd-preview">
                         <div class="gui_box grey preview requires-osd-feature">
 
                             <div class="gui_box_titlebar image">
@@ -51,9 +51,7 @@ <h1 class="tab_title">
                             </div>
 
                             <div class="display-layout">
-                                <div class="col right">
-                                    <div class="preview">
-                                    </div>
+                                <div class="preview">
                                 </div>
                             </div>
 
@@ -65,7 +63,7 @@ <h1 class="tab_title">
 
                         </div>
                     </div>
-                    <div class="grid-col col4 osd-profile">
+                    <div class="grid-col osd-profile">
                         <div class="gui_box osdprofile-selected-container grey">
                             <div class="gui_box_titlebar cf_tip">
                                 <div class="spacer_box_title" i18n="osdSetupSelectedProfileTitle"></div>