From 7df75e681dbe6d04c40a8bd80dd513a2390b5b14 Mon Sep 17 00:00:00 2001
From: Emil Lundberg <emil@emlun.se>
Date: Wed, 21 Aug 2024 15:02:45 +0200
Subject: [PATCH] gui: Replace global "Panel padding decrease" style with
 targeted class (#9659)

Transplanted from https://github.com/emlun/syncthing/pull/8 (meta-PR
into https://github.com/syncthing/syncthing/pull/9175) by request of
@acolomb (see:
https://github.com/emlun/syncthing/pull/8#discussion_r1724470574).

This padding decrease currently applies to _all_ collapsible panels, but
this padding decrease may not be appropriate for all collapsible panels.
In particular, it will not be appropriate for the collapsible panels
introduced in https://github.com/emlun/syncthing/pull/8.
---
 cmd/ursrv/serve/static/index.html                |  2 +-
 gui/default/assets/css/overrides.css             |  6 +-----
 gui/default/index.html                           |  6 +++---
 .../settings/advancedSettingsModalView.html      | 16 ++++++++--------
 .../transfer/remoteNeededFilesModalView.html     |  2 +-
 5 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/cmd/ursrv/serve/static/index.html b/cmd/ursrv/serve/static/index.html
index 811037140..901989e23 100644
--- a/cmd/ursrv/serve/static/index.html
+++ b/cmd/ursrv/serve/static/index.html
@@ -270,7 +270,7 @@ found in the LICENSE file.
             </h4>
           </div>
           <div id="collapseTwo" class="panel-collapse collapse">
-            <div class="panel-body">
+            <div class="panel-body less-padding">
               <div class="row">
                 <div class="col-md-6">
                   <table class="table table-striped">
diff --git a/gui/default/assets/css/overrides.css b/gui/default/assets/css/overrides.css
index 043e6a924..85f3d2c9d 100644
--- a/gui/default/assets/css/overrides.css
+++ b/gui/default/assets/css/overrides.css
@@ -304,11 +304,7 @@ a.toggler:hover {
     text-decoration: none;
 }
 
-/**
- * Panel padding decrease
- */
-
-.panel-collapse .panel-body {
+.panel-body.less-padding {
     padding: 5px;
 }
 
diff --git a/gui/default/index.html b/gui/default/index.html
index 5765a5f7b..a9a591bb2 100644
--- a/gui/default/index.html
+++ b/gui/default/index.html
@@ -413,7 +413,7 @@
                 </h4>
               </button>
               <div id="folder-{{$index}}" class="panel-collapse collapse">
-                <div class="panel-body">
+                <div class="panel-body less-padding">
                   <table class="table table-condensed table-striped table-auto">
                     <tbody>
                       <tr class="visible-xs">
@@ -681,7 +681,7 @@
               </h4>
             </button>
             <div id="device-this" class="panel-collapse collapse in">
-              <div class="panel-body">
+              <div class="panel-body less-padding">
                 <table class="table table-condensed table-striped table-auto">
                   <tbody>
                     <tr>
@@ -796,7 +796,7 @@
                 </h4>
               </button>
               <div id="device-{{$index}}" class="panel-collapse collapse">
-                <div class="panel-body">
+                <div class="panel-body less-padding">
                   <table class="table table-condensed table-striped table-auto">
                     <tbody>
                       <tr class="visible-xs">
diff --git a/gui/default/syncthing/settings/advancedSettingsModalView.html b/gui/default/syncthing/settings/advancedSettingsModalView.html
index 0f4832f6b..37312e053 100644
--- a/gui/default/syncthing/settings/advancedSettingsModalView.html
+++ b/gui/default/syncthing/settings/advancedSettingsModalView.html
@@ -13,7 +13,7 @@
           <h4 class="panel-title" translate tabindex="0">GUI</h4>
         </div>
         <div id="guiConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="guiHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <form class="form-horizontal" role="form">
               <div ng-repeat="(key, value) in advancedConfig.gui" ng-init="type = inputTypeFor(key, value)" ng-if="type != 'skip'" class="form-group">
                 <label for="guiInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-gui.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
@@ -32,7 +32,7 @@
           <h4 class="panel-title" tabindex="0" translate>Options</h4>
         </div>
         <div id="optionsConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="optionsHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <form class="form-horizontal" role="form">
               <div ng-repeat="(key, value) in advancedConfig.options" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                 <label for="optionsInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-options.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
@@ -51,7 +51,7 @@
           <h4 class="panel-title" tabindex="0" translate>LDAP</h4>
         </div>
         <div id="ldapConfig" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ldapHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <form class="form-horizontal" role="form">
               <div ng-repeat="(key, value) in advancedConfig.ldap" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                 <label for="ldapInput{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-ldap.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
@@ -70,7 +70,7 @@
           <h4 class="panel-title" translate>Folders</h4>
         </div>
         <div id="advancedFolders" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedFoldersHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <div class="panel panel-default" ng-repeat="folder in advancedConfig.folders" ng-init="folderIndex = $index">
               <div class="panel-heading" role="tab" id="folder{{folderIndex}}Heading" data-toggle="collapse" data-parent="#advancedFolders" href="#folder{{folderIndex}}Config" aria-expanded="false" aria-controls="folder{{folderIndex}}Config" style="cursor: pointer;">
                 <h4 ng-if="folder.label.length == 0" class="panel-title" tabindex="0">
@@ -81,7 +81,7 @@
                 </h4>
               </div>
               <div id="folder{{folderIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="folder{{folderIndex}}Heading">
-                <div class="panel-body">
+                <div class="panel-body less-padding">
                   <form class="form-horizontal" role="form">
                     <div ng-repeat="(key, value) in folder" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                       <label for="folder{{folderIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-folder.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
@@ -103,7 +103,7 @@
           <h4 class="panel-title" tabindex="0" translate>Devices</h4>
         </div>
         <div id="advancedDevices" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDevicesHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <div class="panel panel-default" ng-repeat="device in advancedConfig.devices" ng-init="deviceIndex = $index">
               <div class="panel-heading" role="tab" id="device{{deviceIndex}}Heading" data-toggle="collapse" data-parent="#advancedDevices" href="#device{{deviceIndex}}Config" aria-expanded="false" aria-controls="device{{deviceIndex}}Config" style="cursor: pointer;">
                 <h4 class="panel-title" tabindex="0">
@@ -111,7 +111,7 @@
                 </h4>
               </div>
               <div id="device{{deviceIndex}}Config" class="panel-collapse collapse" role="tabpanel" aria-labelledby="device{{deviceIndex}}Heading">
-                <div class="panel-body">
+                <div class="panel-body less-padding">
                   <form class="form-horizontal" role="form">
                     <div ng-repeat="(key, value) in device" ng-if="inputTypeFor(key, value) != 'skip'" class="form-group">
                       <label for="device{{deviceIndex}}Input{{$index}}" class="col-sm-4 control-label">{{key | uncamel}}&nbsp;<a href="{{docsURL('users/config#config-option-device.')}}{{key | lowercase}}" target="_blank"><span class="fas fa-question-circle"></span></a></label>
@@ -133,7 +133,7 @@
           <h4 class="panel-title" tabindex="0" translate>Defaults</h4>
         </div>
         <div id="advancedDefaults" class="panel-collapse collapse" role="tabpanel" aria-labelledby="advancedDefaultsHeading">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
 
             <div class="panel panel-default">
               <div class="panel-heading" role="tab" id="advancedDefaultFolderHeading" data-toggle="collapse" data-parent="#advancedDefaults" href="#advancedDefaultFolder" aria-expanded="false" aria-controls="advancedDefaultFolder" style="cursor: pointer;">
diff --git a/gui/default/syncthing/transfer/remoteNeededFilesModalView.html b/gui/default/syncthing/transfer/remoteNeededFilesModalView.html
index f2dfbd07e..50bbe7a0c 100644
--- a/gui/default/syncthing/transfer/remoteNeededFilesModalView.html
+++ b/gui/default/syncthing/transfer/remoteNeededFilesModalView.html
@@ -11,7 +11,7 @@
           </h4>
         </button>
         <div id="remoteNeed-{{$index}}" class="panel-collapse" ng-class="{collapse: sizeOf(remoteNeedFolders) > 1}">
-          <div class="panel-body">
+          <div class="panel-body less-padding">
             <table class="table table-striped">
               <thead>
                 <tr>